Why Add Animations to v0 Components?
v0 generates static components. Adding motion makes them feel premium and increases engagement.
Framer Motion Basics
v0 supports Framer Motion. Prompt:
"Add Framer Motion animations to this component. Fade in on mount with a slight Y translation. Stagger children with 0.1s delay. Add hover scale animation to buttons."
Key Animation Patterns
Page Transitions
"Add page transition animations: the page content fades in and slides up 20px on mount. Use AnimatePresence for exit animations."
Scroll Animations
"Add scroll-triggered animations: elements fade in as they enter the viewport using whileInView. Each element triggers at 20% visibility."
Hover Effects
"Add hover effects: cards scale to 1.02 with a subtle shadow increase. Buttons have a press-down animation. Links show an underline animation."
Loading States
"Add skeleton loading animations with pulse effect. Cards show placeholder shimmer while data loads."
