motion-patterns

Topics in the source

• Motion Patterns
• When to Activate
• Outputs
• Principles
• Rules
• Decision Guidance
• Choosing the right pattern
• When to use mode="wait" vs mode="sync"

Copy-paste patterns for the most common UI animation needs. Every pattern here is built on motion-foundations tokens and springs. Do not define new duration or easing values here — import them. Animating a button, card, modal, or toast notification Building list entrances with stagger Setting up page transitions in Next.js App Router Adding entrance or exit animations to conditional content Implementing scroll-reveal, scroll-linked progress, or sticky story sections Building expanding cards, accordions, or shared-element transitions This skill produces: Accessible, SSR-safe animation for all standard UI components AnimatePresence-wrapped conditional renders with correct exit behavior Page transition wrapper component for Next.js App Router Scroll-reveal and scroll-linked patterns using useScroll + useTransform Layout animation patterns (layout, layoutId) for expanding and crossfading elements Every pattern imports from motion-foundations. No raw numbers. Every conditional render is wrapped in AnimatePresence with a key. Exit animations are always defined alongside enter animations — never as an afterthought. layout is used only for small, isolated shifts. Large subtrees get explici

This is an excerpt. Refer to the complete source and its current requirements.