Tarjetas Morphing con Framer Motion: Prompt y Código React

Este prompt está diseñado para generar un componente de tarjetas interactivas con Framer Motion, la popular librería de animaciones para React. La instrucción solicita transiciones suaves entre diferentes estados visuales al hacer hover y clic, aprovechando tres técnicas avanzadas: animaciones con física de resorte (spring), animaciones de layout que reaccionan a cambios en el DOM, y transiciones de elementos compartidos que crean continuidad visual entre vistas. Es ideal para desarrolladores frontend que buscan inspiración o código base para galerías de productos, portfolios o paneles de contenido donde la experiencia de usuario debe sentirse fluida y moderna.

Para mejores resultados, conviene usar este prompt con modelos como GPT-4, Claude 3.5 Sonnet o Gemini Advanced, combinados con un entorno que soporte React y Framer Motion v10 o superior. Se puede variar el prompt especificando el número de tarjetas, los datos que muestran (imágenes, texto, estadísticas), o el tipo de morphing deseado, como expansión a pantalla completa o cambio de forma geométrica. También funciona bien dentro de plataformas como v0.dev o Bolt para obtener código listo para producción.