Motion system

Change it, at three levels

Every component has a sensible default. You decide where motion goes and which one, without forking anything.

1. The whole app: ThemeProvider motion sets the mode (expressive, productive, reduced or off), follows or overrides the OS reduced motion setting, scales speed and intensity, and changes the default per component type.
2. One component type, in CSS: .alea-popover { --alea-enter: alea-m-fade-in; --alea-exit: alea-m-fade-out; }. These variables don't inherit, so a dialog never leaks its motion into the select inside it.
3. One instance: every overlay takes a motion prop: a preset, false, or { enter, exit, duration, easing, delay }. See it live.

<ThemeProvider motion={{
  mode: 'productive',        // expressive (default) | productive | reduced | off
  reduced: 'system',         // follow the OS (default) | 'always' | 'never'
  speed: 0.9,                // multiplies every duration
  intensity: 1.2,            // multiplies distances, scales and blur
  components: { dialog: 'scale', tooltip: 'fade', toast: { enter: 'slide-left', duration: 300 } },
}}>

<Select motion="blur" />
<DialogModal motion={{ enter: 'zoom', duration: 320, easing: 'spring' }} />
<Popover motion={false} />

Presets: fade, scale, pop, rise, drop, slide-up, slide-down, slide-left, slide-right, blur, zoom, flip, morph, none. Each is a pair of keyframes, alea-m-<preset>-in and -out, that you can also use in your own CSS.

Modes

Try the same controls in each mode. Productive is shorter and quieter, for dense apps; reduced keeps fades and drops travel; off removes every animation.

Patterns

The button at the bottom of the screen plays the automatic demos again; the rest you can try by hand.

Easings

Durations, distances and scales

Reduced motion

• Distances, scales, the lift and the stagger go to zero: overlays and items fade in place, nothing travels across the screen.
• Slow durations shorten to base; the emphasized curve stops overshooting.
• Decorative loops stop (pulse, orbs, the indicator ping); the skeleton shimmer slows to 3 s. Spinners keep turning because they tell you something is happening.
• Nothing important waits for an animation: exits finish under 200 ms, and focus moves at once.

Rules for new components

• Use a pattern; if none fits, add one here first. Never a one-off keyframe.
• Enter with ease-out, exit with ease-in and faster than the entrance.
• Fade from 0.01, not 0, so the first paint counts.
• Only animate transform and opacity (and height for expand): no layout jank.
• In Figma, the same patterns are interactive components with Smart Animate on the ease-out curve.