Animation (CSS and Framer Motion)
Visual transitions and motion effects that make your UI feel responsive, polished, and alive.
Animations guide the user's attention, provide feedback on interactions, and make transitions between states feel smooth. A button that subtly scales on hover feels clickable. A modal that fades in feels intentional. A loading spinner communicates that something is happening.
CSS handles simple animations: transitions (property changes over time), keyframes (multi-step sequences), and transforms (scale, rotate, translate). For complex animations, libraries like Framer Motion (React) provide declarative APIs for enter/exit animations, layout transitions, and gesture-driven motion.
For vibe coders, AI is excellent at generating animation code. Describe what you want ("fade in the modal, slide the sidebar from the right") and AI produces the CSS or Framer Motion config. The creative judgment is knowing when animation helps vs. when it distracts. Subtle, fast animations (150-300ms) feel professional. Slow, dramatic animations feel sluggish.