Framer Motion Morphing Cards: AI Prompt & Code Example

This prompt targets front-end developers and UI designers who want to build visually engaging card components using Framer Motion, the popular React animation library. By requesting spring animations, layout animations, and shared element transitions all in one go, it produces a polished, production-ready interaction pattern where cards smoothly morph between their default, hovered, and expanded states. This kind of component is ideal for portfolio sites, product showcases, dashboards, or any interface where surfacing more detail on demand improves the user experience.

To get the best results, run this prompt in a code-generation model such as GPT-4o or Claude 3.5 Sonnet, and paste the output directly into a Next.js or Vite React project with Framer Motion already installed. From there, you can experiment with variations — try swapping spring stiffness and damping values to feel snappier or more fluid, replace placeholder card content with real data, or extend the shared element transition to animate between a card grid and a full-screen detail view.