Motion
default curve · --ease-causal
Product state changes
Press and connection motion follow the supplied source. Reduced motion keeps the control state clear.
Connection state
Key press
Motion should read as confident restraint. Fast, quiet, purposeful. Nothing bounces. Nothing overshoots.
Directional number · value owns direction
Text scramble · noise resolves once
Text morph · one claim becomes another
Navigation highlight · state continuity
Duration scale
TokenWhere it lives
:root · [data-scale="product"]Relative speed · shared 3s cycle
--dur-fastFeedback · hover, focus ring, press200 · 150ms
--dur-medState changes · button sweep, link resolve, card settle380 · 220ms
--dur-slowEntrances · draw-in, strike, number settle1100 · 400ms
Easing curves
--ease-causal0.7, 0, 0.25, 1
default
default
--ease-out-quart0.25, 1, 0.5, 1
draw-ins
draw-ins
--ease-out0.25, 0.8, 0.25, 1
UI settles
UI settles
--ease-in-out0.4, 0, 0.2, 1
crossfades
crossfades
--ease-causal0.23, 1, 0.32, 1
override in
override in
[data-scale="product"]Signature · recessive-at-rest link
At rest · 1px dotted border at 35% currentColor · 0.78 opacity · no glyph filter
Build with conviction
hover to see the resolve
Transition · --dur-med · --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-med) var(--ease-causal),
border-bottom-color var(--dur-med) var(--ease-causal);
}
.link:hover,
.link:focus-visible {
opacity: 1;
border-bottom-style: solid;
border-bottom-color: currentColor;
}
Primitives
Button sweep · --dur-med · --ease-causal · arrow + slab
Page crossfade · --dur-med · --ease-in-out · opacity only
Before
After
Adopted motion · Motion Primitives
Hand-drawn motions carry the argument. Everything else is adopted from Motion Primitives and KokonutUI. Drag the red line: it is the gap.
FIG · ILLUSTRATIVE · drag the red line
The curated ledger
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