foundations
Motion
Motion communicates state change, relationship or emphasis. Fast by default. Always reducible.
Read the full specReduced-motion override
This toggle simulates the prefers-reduced-motion media query locally so you can see every demo in both states.
Duration scale
Click replay to re-run all five durations side by side. Under reduced motion every row clamps to near-zero.
- fast· 120msHover, toggle, checkbox
- base· 200msButton, input focus, default
- moderate· 300msDialog, dropdown, tab switch
- slow· 500msRoute transition, panel shift
- slower· 800msHero reveal, celebratory moment
<motion.div
animate={{ x: played ? 200 : 0 }}
transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
/>Easing curves
Five curves. standard is the default. Linear is reserved for shimmer and indeterminate progress — never transforms.
- standardDefault — most transforms and colours
- decelerateElement entering — starts fast, slows
- accelerateElement leaving — starts slow, speeds up
- emphasisedSlight overshoot for key interactions
- linearIndeterminate progress, shimmer
Spring configs
For physics-feel motion — dialogs opening, card drag snaps. The same four configs drive Framer Motion in-app and Remotion in video.
- smoothRevealdamping: 200Slow, soft — good for hero reveals
- snappyUidamping: 20 · stiffness: 200Default UI spring
- bouncydamping: 8Playful — use sparingly
- heavydamping: 15 · stiffness: 80 · mass: 2Deliberate, weighty
Stagger
Default list stagger is 60ms between children. Under reduced motion the stagger collapses — items appear together.
- Report submitted
- Responder notified
- Area marked
- Civilians updated
- Case logged
Button feedback
Hover scales 1.02. Active press scales 0.98. MotionConfig collapses both under reduced motion.