/08Motion
A complete, implementation-ready motion foundation. Every animation resolves to one duration token × one easing token — nothing else. Compose these two tokens for every transition in the product so movement stays consistent and predictable, and no one hand-picks a magic number.
Core principle
Motion = duration × easing. Compose these two tokens for every transition and animation.
Hard rules
- Animate
transformandopacityonly — neverwidth/height/top/left/margin(layout thrash → dropped frames). For accordions animategrid-template-rows: 0fr → 1fr. - Exits run at ~75% of their entrance duration.
- Never use the default
ease. Pick a curve for the direction (out = entering, in = leaving, in-out = toggles). - No bounce, no elastic. Real objects decelerate smoothly; they don't spring back.
- Always respect
prefers-reduced-motion. - Motion must point at meaning: what changed, what's next. If it doesn't clarify, cut it.
1 · Duration tokens
Six steps, coarse on purpose. Rule of thumb: the more screen area moves, the longer the duration. Press Play to feel each token — every bead travels the same distance.
| Token | Value | Use for |
|---|---|---|
| --motion-instant | 100ms | Button press, toggle, color change |
| --motion-fast | 160ms | Hover, small state change |
| --motion-moderate | 240ms | Menu open, tooltip, tab switch |
| --motion-slow | 360ms | Accordion, drawer, list item |
| --motion-deliberate | 560ms | Modal, dialog, panel |
| --motion-entrance | 720ms | Page load, hero reveal, count-up |
Duration ladder — live
instant
100ms
fast
160ms
moderate
240ms
slow
360ms
deliberate
560ms
entrance
720ms
2 · Easing tokens
The curve carries the direction. Entrances decelerate (out), exits accelerate (in), toggles ease both ways (in-out). Press Play to run a bead along each curve.
| Token | Bezier | Use for |
|---|---|---|
| --ease-out-quart | cubic-bezier(0.25, 1, 0.5, 1) | Standard entrance, hover-in |
| --ease-out-quint | cubic-bezier(0.22, 1, 0.36, 1) | Sharper entrance: metrics, hero, emphasis |
| --ease-out-expo | cubic-bezier(0.16, 1, 0.3, 1) | Most decisive: modals, drawers |
| --ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | State toggles that move both ways |
| --ease-in | cubic-bezier(0.7, 0, 0.84, 0) | Elements leaving the screen entirely |
Easing curves — live
out-quart
0.25,1,0.5,1
standard entrance
out-quint
0.22,1,0.36,1
emphasis
out-expo
0.16,1,0.3,1
modals, drawers
in-out
0.65,0,0.35,1
toggles
in
0.7,0,0.84,0
leaving screen
3 · CSS token block
Drop straight into :root. These exact tokens are live on this page.
:root {
/* durations */
--motion-instant: 100ms;
--motion-fast: 160ms;
--motion-moderate: 240ms;
--motion-slow: 360ms;
--motion-deliberate: 560ms;
--motion-entrance: 720ms;
/* easings */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}
/* Accessibility: always include this */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
4 · Pattern library
Each pattern is pinned to tokens. The demos below are live and implement the spec exactly.
4.1 Count-up metrics · entrance (720ms) · out-quint
0
Uptime
0
Deploys
0
Regions
0
Retention
4.2 Word rotator · enter slow/out-expo · exit moderate/in · hold 1800ms
Ship faster
4.3 Logo / tech-stack marquee · 18s · linear · pause on hover
4.4 Live ticker · flash instant (100ms) in · fade slow (360ms) out
Active routes1,240
Requests / s8,600
p95 latency42ms
CPU load63%
4.5 Staggered reveal · slow (360ms) · out-expo · 60ms stagger
af-cpt · Active · 99.999% uptime
af-nbo · Degraded · 99.20% uptime
eu-lon · Active · 99.99% uptime
us-east · Active · 100.00% uptime
4.6 Scroll reveal · entrance (720ms) · out-expo · IntersectionObserver
Talent
Delivery
Intelligence
Operations
4.7 Signal bus · 22s · linear · pause on hover — the hero's telemetry ticker, previously undocumented
signal bus
11:23:36 AGENT-0300 nyc→lon deploy ✓ · 20ms
11:23:34 AGENT-0313 sfo→nbo sync ok · 37ms
11:23:32 AGENT-0326 lon→sao PR merged · 54ms
11:23:30 AGENT-0339 ber→nyc build passed · 71ms
11:23:36 AGENT-0300 nyc→lon deploy ✓ · 20ms
11:23:34 AGENT-0313 sfo→nbo sync ok · 37ms
11:23:32 AGENT-0326 lon→sao PR merged · 54ms
11:23:30 AGENT-0339 ber→nyc build passed · 71ms
Reference — count-up (§4.1)
function easeOutQuint(t){ return 1 - Math.pow(1 - t, 5); }
function countUp(el, to, { duration = 720,
format = v => Math.round(v).toLocaleString('en-US'), suffix = '' } = {}) {
const start = performance.now();
function frame(now) {
const t = Math.min((now - start) / duration, 1);
el.textContent = format(to * easeOutQuint(t)) + (t === 1 ? suffix : '');
if (t < 1) requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}
5 · Custom — animation gallery
A grid of self-contained custom animations, one per cell. The homepage hero leads; below are four cursor-reactive canvas backgrounds — Sphere Lines, Particle Sphere, Grid Lines, Wave Lines — ported to vanilla canvas and tokenised to the system (they follow the light/dark toggle). Hover any tile to interact. Config constants sit at the top of each so they can be tuned per brand.
01 · Homepage hero — live composition
+ SCRUMS.COM // SEOP
+ V4 · GA
Events orchestrated0
Agents active6 / 14
Last routelon → cpt · PR merged
Deploy freq14× /day
deploy · api-gateway · +0 incidents
review latency ▾ 41%
02 · Sphere Lines2d canvas
03 · Particle Sphereprojected 3d
04 · Grid Lines2d canvas
05 · Wave Lines2d canvas
How it maps to the foundation
- Globe spin & radar sweep → linear, infinite (constant speed reads mechanical — the same call as the §4.3 marquee).
- Node pulse & card float → ease-in-out, each card a slightly different period so they drift out of sync.
- Cards enter staggered → --motion-deliberate × --ease-out-expo, 90ms apart (the §4.5 pattern).
- Events counter → --motion-entrance × out-quint count-up, then ticks up live (the §4.1 + §4.4 patterns combined).
- Only
transformandopacityanimate; the whole stage honoursprefers-reduced-motion.
6 · Do / Don't
- Animate
transformandopacityonly (GPU-composited, skips layout) - Animate
width/height/top/left - Always reach for a token, never a raw number
- Default to
ease - Make exits faster than entrances (~75%)
- Use bounce or elastic curves
- Respect
prefers-reduced-motion - Run everything at once — stagger or sequence by importance
- Let motion point at meaning: what changed, what's next
- Animate for its own sake