Motion recipes
Intent-based, CSS-first recipes with reduced-motion alternatives.
| Intent | Purpose | Reduced motion | Rules |
|---|---|---|---|
| enter | Introduce new content without layout thrash | Instant opacity change only | rule.motion.purpose-first |
| exit | Signal removal of content | Immediate unmount | rule.motion.purpose-first |
| reveal | Progressively reveal content as users scroll | Static full opacity | rule.motion.purpose-first |
| expand | Communicate expand/collapse hierarchy | Height jumps instantly | rule.motion.purpose-first |
| feedback | Acknowledge user input | Color/border change only | rule.motion.purpose-first |
| page-transition | Preserve spatial continuity across routes | Hard cut between pages | rule.motion.purpose-first |
| list-change | Show list insert/remove/reorder | Instant reflow | rule.motion.purpose-first |
| drag | Show grabbed object and drop target | Static lift styling without spring | rule.motion.purpose-first |
| scroll | Map scroll position to subtle progress cues | Static indicators | rule.motion.purpose-first |
| shared-layout | Morph shared elements across states | Cross-fade only | rule.motion.purpose-first |
Live enter recipe