Explore
Motion library
Motion explains change or it is cut. Every pattern declares its purpose, duration, easing, dependencies, licence and — required, never optional — its reduced-motion behaviour.
House rules
- · Animate transform and opacity only — never layout properties.
- · Three named easings only: cubic-bezier(0.22, 1, 0.36, 1) (out), in, in-out. Never the browser default.
- · Focus rings appear instantly. Animating a focus ring is a defect.
- · At most three motion primitives per page. Cut before adding.
- · Every effect collapses under prefers-reduced-motion: reduce.
microinteraction
3| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| Press Settle | Physical acknowledgment on button press | 120ms down / 180ms up | ease-out | none (CSS) | no transform; background shift only | MIT-derived rule |
| Instant Focus Ring | Keyboard orientation — ring must never fade in | 0ms | none | none | identical (already instant) | MIT-derived rule |
| Row Action Reveal | Keep dense lists quiet; expose actions on intent | 140ms | ease-out | none | identical (opacity ≤150ms allowed) | concept study |
loader
2| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| Skeleton Shimmer | Content-shaped loading that never shifts layout | 1.4s loop | linear | none | static muted block, no shimmer | MIT |
| Determinate Progress | Real progress over spinners whenever a total is known | follows work | linear | none | identical + percentage text | MIT |
status
3| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| Status Pulse | Live/recording/listening indicator that encodes real state | 2s loop | ease-in-out | none | static dot + text label | concept study |
| Stat Count-Up | Draw the eye to a real metric once on entry | 600ms once | ease-out | small JS | render final value immediately | MIT |
| Toast Entrance | Failure/invisible-effect notices (silent success is the default) | 180ms in / 140ms out | ease-out | none | opacity only | first-party |
transition
2| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| Panel Slide-In | Drawer/inspector entrance that preserves spatial model | 200ms | ease-out | none | opacity crossfade ≤150ms | first-party |
| View Crossfade | Route change continuity without spatial claims | 150ms | ease-in-out | View Transitions API (progressive) | instant swap | first-party |
text
2| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| Typewriter Line | Terminal/AI-output voice for one hero line | ~40ms/char, once | steps() | none | full text immediately | MIT |
| Split-Flap Departure | Editorial/travel status boards; strong personality, use once | 500ms per change | steps(4) | none | instant swap | MIT |
reveal
2| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| List Stagger | Orient the eye down a fresh list — once, subtle | 240ms, 30ms stagger, cap 8 items | ease-out | none (CSS delays) | no stagger; single fade | first-party code; Kinetics studied for parameters only (it ships no LICENSE) |
| Section Fade-Up | Landing-page section entrance | 300ms, threshold 0.2, once | ease-out | IntersectionObserver | visible immediately | first-party |
background
2| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| Ambient Gradient Drift | ATMOSPHERIC only: slow radial bloom behind hero | 20s loop | linear | none | static gradient | concept study |
| Cursor Spotlight | Hero depth cue on pointer devices (HP3) | continuous, damped | spring(0.15 damp) | small JS | disabled entirely | MIT-derived |
decorative
2| Pattern | Purpose | Duration | Easing | Deps | Reduced motion | License |
|---|---|---|---|---|---|---|
| Single-Burst Confetti | PLAYFUL/GAMING milestone (game win) — never for routine saves | 800ms once | ease-out gravity | canvas-confetti (MIT) or first-party | static ✓ banner | concept study |
| State-Reactive Sprite | Ambient companion whose animation speed encodes real system state | gait loop keyed to load | steps() sprite | sprite sheet | static sprite + numeric readout | Apache-2.0 concept |