Motion

signature · blur-at-rest
default curve · ease-out-cubic
Motion should read as confident restraint. Fast, quiet, purposeful. Nothing bounces. Nothing overshoots. The one exception is the signature link hover, a blur-to-focus that reads as clarity arriving.
Directional number · value owns direction
Text scramble · noise resolves once
Text morph · one claim becomes another
Navigation highlight · state continuity

Duration scale

6 tokens · use by role
TokenWhere it livesDurationRelative speed · shared 3s cycle --dur-xsMicrofeedback · button press, tap state, focus ring120ms
--dur-smHover states · tooltip, link underline, small transforms200ms
--dur-mdUI transitions · panel open, tab switch, accordion300ms
--dur-lgPage-level · crossfade, modal, route transition600ms
--dur-xlNarrative · section reveal, stat count-up, hero entrance900ms

Easing curves

3 total · never spring, never bounce
--ease-outcubic-bezier(0.25, 0.8, 0.25, 1)
default · UI arrives, then settles
--ease-in-outcubic-bezier(0.4, 0, 0.2, 1)
crossfades · A-to-B, no focal point
--ease-readcubic-bezier(0.2, 0.8, 0.2, 1)
text reveals · settles quickly, reads calm

Signature · recessive-at-rest link

site-wide identity · do not rename
At rest · 1px dotted border at 35% currentColor · 0.78 opacity · no glyph filter
Build with conviction
hover to see the resolve
Transition · --dur-base · --ease-causal · opacity + border-color (glyphs untouched)
.link { border-bottom: 1px dotted color-mix(in srgb, currentColor 35%, transparent); opacity: 0.78; transition: opacity var(--dur-base) var(--ease-causal), border-bottom-color var(--dur-base) var(--ease-causal); } .link:hover, .link:focus-visible { opacity: 1; border-bottom-style: solid; border-bottom-color: currentColor; }

Primitives

hover any to trigger
Button sweep · 380ms · ease-causal · arrow + slab
Stat count-up · 900ms · ease-out · tabular
0%
Text reveal · 500ms · ease-read · 60ms stagger
Predict the choice, not the word.
Page crossfade · 400ms · ease-in-out · opacity only
Before
After

Rules

enforced
01Never spring. Never bounce. Never overshoot.
02Default curve is ease-out. Only deviate with reason.
03If you can't justify motion > 600ms, cut it.
04Scroll-triggered reveals fire once. No replay on scroll-back.
05Respect prefers-reduced-motion; drop all non-essential motion.
06Color never animates alone. Pair with transform or opacity.
07Loading is not motion. Use a static mono "…" or a 1px progress rule.
08Stagger in groups of ≤6, ≤60ms apart. Beyond that, use a single reveal.

Rule 07 · Simulation running

1px rule · cursor blink · no spinner
SIMULATION · RUNNING▋
Stated · intent
"73% would buy"
→
Revealed · pending
——
Loading is not motion. One 1px ink rule fills left-to-right over 8s. Cursor blinks at 1s step-start. The revealed column resolves when the simulation completes — not before.

Adopted motion · Motion Primitives

their engineering · our meaning · 9 of 33 earn a place
The motions above are drawn by hand because they carry the brand's argument. Everything else is adopted, not invented — from Motion Primitives (MIT) and KokonutUI, one component at a time, under the adoption contract in DECISIONS.md. Below: the first adoption, live. A before/after slider is Stated-vs-Revealed as a gesture — and the draggable red line is the gap. Spring pinned to bounce: 0 — Rule 01 holds.
FIG · ILLUSTRATIVE · drag the red line

The curated ledger

every verdict recorded · DECISIONS.md §curated map
image-comparisonstated vs revealed in one drag · adopted, above
text-scramblenoise resolving into signal · once per surface
text-morphone claim morphing into another
sliding-numbermechanical place-value wheels · ones, tens, hundreds · up for increase · down for decrease · live product UI
animated-number-textcompact whole-token tween by default · use wheel mode only for sparse hero metrics · one accessible sentence
scroll-progressreading state on long-form · never red
transition-panelstate continuity in product UI
animated-backgroundthe hover highlight that shows where you are
carouselwhen a rail genuinely must scroll
infinite-sliderlogo rail only · anywhere else it's decoration
glow-effectbanned paint · DOCTRINE §3
spotlightbanned paint
progressive-blurbanned paint
tiltthe generic AI-site move
docksomeone else's brand
cursorgimmick
text-shimmerduplicate of adopted shimmer-text
accordion · dialog · popoverbehavior belongs to Radix
spinning-textdecorative loop