Animation

Motion (formerly Framer Motion) powers all animations, integrated with both Tailwind CSS and shadcn/ui.

Animations

• Scroll-triggered entrance -- sections fade and slide in with spring physics on viewport entry via AnimateIn component
• Demo preview -- color swatches spring-scale with stagger, background morphs between light/dark, all colors animate between palettes
• Card hover -- spring lift (y: -4) on feature and step cards
• Swatch interaction -- spring scale on hover/tap
• Tab transitions -- AnimatePresence with spring slide between light/dark theme panels
• Step numbers -- scale + rotate on hover

Tailwind Spring Easings

Available as CSS utility classes via @theme in index.css:

ease-spring-snappy   /* Quick, minimal overshoot */
ease-spring          /* Balanced spring */
ease-spring-soft     /* Slow, bouncy spring */

Usage: className="transition-transform duration-700 ease-spring-soft"

Respecting User Preferences

All animations are disabled when:

• A11y mode is active
• Low Carbon mode is active
• prefers-reduced-motion: reduce is set at the OS level

Disabled via two mechanisms:

1. MotionConfig reducedMotion="always" in App.tsx -- kills all Motion JS animations
2. CSS in index.css -- kills all native transitions and animations

Key Files

• apps/web/src/components/common/AnimateIn.tsx -- reusable scroll-triggered entrance
• apps/web/src/components/landing/DemoPreview.tsx -- animated hero demo
• apps/web/src/components/theme-display/Swatch.tsx -- motion.button with spring hover/tap
• apps/web/src/App.tsx -- MotionConfig wrapper