Animate — CSS-First On-Page Animation Skill

Generate production-quality on-page animations for React + Next.js + Tailwind sites. The core principle is CSS-first, Motion-surgical — use pure CSS and IntersectionObserver for 80-90% of animations, reach for Motion (Framer Motion) only when CSS genuinely cannot solve the problem.

Why CSS-first:

• Zero bundle cost (CSS is free, Motion adds JS to the client bundle)
• No "use client" boundary required (preserves React Server Components)
• Compositor-thread animation (transform/opacity) — better performance than main-thread JS
• 4/10 best-in-class SaaS sites (Linear, Stripe, Resend, Liveblocks) use zero JS animation libraries
• The practitioner consensus: Emil Kowalski, Stripe engineering, WordPress Gutenberg all advocate CSS as default

Motion is irreplaceable for exactly 6 patterns:

1. Exit animations on React unmount (AnimatePresence)
2. Shared element transitions (layoutId)
3. Gesture-driven animations (drag, swipe, pinch)
4. Automatic layout animations (FLIP for size/position changes)
5. Complex variant orchestration (parent→child cascading timing)
6. Animating to height: auto (accordion expand/collapse) — CSS cannot interpolate to height: auto. The emerging interpolate-size: allow-keywords (Chrome 129+) will solve this but is not yet Baseline.