What problem does it solve? Web interfaces often ship with either no motion or excessive, janky animation that hurts usability and performance. This Skill provides a structured motion design system—in the style of Stripe, Linear, Apple, and Vercel—so you can plan and implement tasteful, purposeful animation with consistent durations, easing curves, and choreography patterns. ## Core Features & Use Cases - Motion Tokens & Defaults: Provides concrete duration ranges (120ms micro-interactions to 1600ms hero sequences), easing recommendations, and stagger intervals (40–90ms) to build a reusable motion token set. - Choreography Patterns: Covers reusable patterns like fade-and-rise entrances, hero-to-supporting-element sequencing, scroll-triggered section reveals, and hover lift-and-glow effects. - Performance & Accessibility Guardrails: Enforces transform/opacity-only animation, GPU-conscious rendering, and full prefers-reduced-motion support. - Use Case: When building a marketing landing page, ask for a Stripe-style hero animation and receive a complete plan: motion goals, tokens, a timeline with labeled beats, performance notes, and a GSAP or Framer Motion code recipe. ## Quick Start Ask the AI to design a Stripe-style hero animation with scroll reveals and reduced-motion support for your landing page.
