Motion is restrained. Ambient stays on mesh.
Five named durations and three named easings. State motion on the operator surface stays under 240ms. Ambient motion lives only on mesh. Reduced motion freezes everything.
Five named durations, one role each.
Tap a card to play. Each tile uses its own duration.
Taps, immediate feedback (button press, checkbox flip).
Hovers, simple state shifts (tile hover-tint, focus ring).
Panel toggles, sub-panel slides, popover open.
Enter animations (fade-up on first paint), modal open.
Orb drift, mesh drift. Mesh surfaces only.
Three named curves.
Quart for default state shifts. Expo for entries. Mesh for ambient only. There is no fourth.
Default for state shifts.
cubic-bezier(0.25, 1, 0.5, 1)Enter animations, drawer slides.
cubic-bezier(0.16, 1, 0.3, 1)Ambient orb / mesh drift only.
cubic-bezier(0.4, 0, 0.6, 1)The orb drift, on mesh, respecting reduced motion.
The only ambient motion in the system. Frozen if the user has set Reduce motion in their OS.
Five rules that decide whether to animate, and how.
Ease-out only.
Exponential curves out (quart, expo). No bounce, no elastic, no cubic ease-in-out on UI. Motion lands and stops; it never overshoots.
Never animate layout.
Transform and opacity only. No animating width, height, top, or left. The browser is slow at layout; the operator's CPU is busy elsewhere.
Reduced motion freezes orbs.
MotionConfig respects the user preference at the root. Orbs freeze; durations collapse to 0; state transitions remain crisp but instant.
Ambient vs. state.
Ambient motion (orbs, mesh, live-pulse) only on mesh surfaces. State motion (≤ quick) on the operator surface. Crossing the lanes is the AI-glow failure.
One thing at a time.
Hover changes the tint OR the position by 1–2px. Never both, never with a growing shadow. The 2-Step Hover Rule from DESIGN.md is the basis.