Living Styleguide — Motion & Timing

01

The four speeds

Every animation snaps to one of four durations. Not a spectrum — four buckets. This is what keeps motion feeling like one system instead of many one-off timings. Hit rerun to feel the difference in length.

instant

.14s

quick

.3s

signature

2.2s

ambient

5s

Duration scale

Four buckets

Snap every animation to one of four. The number in the token, never a magic value in the rule.

instant .14s — hover, press, tab

quick .3s — reveal, toggle, shift

signature 2.2s — the draws-itself moments

ambient 5s — slow decorative loops

--dur-instant:.14s;
--dur-quick:.3s;
--dur-signature:2.2s;
--dur-ambient:5s;

02

Two easings

Two curves carry almost everything. Snap for interface motion, draw for the hand-drawn reveals. Watch the two balls: snap is decisive at both ends, draw eases the landing so a drawn line settles.

snap · UI

draw · reveals

Easing curves

Snap & draw

Two named curves. Snap for interface, draw for the signature reveals.

snap — decisive both ends, most UI

draw — eases the finish so a line lands

Linear only for ambient loops and true progress. Never browser-default ease.

--ease-snap:
  cubic-bezier(.7,0,.3,1);
--ease-draw:
  cubic-bezier(.6,0,.35,1);

03

Instant — micro-feedback

The .14s layer: the interface answering the instant you touch it. Hover and press the button, open the reveal. Fast enough to feel like cause-and-effect, not animation.

A quick reveal +

The marker rotates over .3s (quick), the press was .14s (instant). Different jobs, different buckets.

Instant · .14s

Cause and effect

Confirms the interaction as it happens. Hover lift, active press, tab underline.

Only transform & opacity at this speed — they're GPU-cheap. Never animate layout here.

transition:transform
  var(--dur-instant)
  var(--ease-snap);

04

Signature — the draws-itself moment

The 2.2s layer is the brand's soul: the pencil draws, the cursive writes, the underline reveals under a moving tip. This is motion as character. One per view — more than one and none of them is special.

Signature · 2.2s

Motion as character

The hand-drawn reveals. Pencil, cursive, underline. Draw easing, always.

One per view. Three things drawing themselves = noise, not signature.

Reduced-motion → completed state shown instantly, sprite hidden.

stroke-dashoffset →0
var(--dur-signature)
var(--ease-draw)

05

Ambient — the slow loop

The 4–6s layer: gentle idle life. A card floats, chips bob, figures sway. Subtle enough to feel alive without being noticed. The moment you consciously see it, it's too much.

float

Ambient · 4–6s

Idle life

Decorative loops that make a page feel alive, not static.

Amplitude 8–14px, ease-in-out, infinite. Never competes with content.

First to be cut under reduced-motion. Meaning never depends on it.

animation:floaty
  var(--dur-ambient)
  ease-in-out infinite;

06

Reduced-motion — the meaning survives frozen

Every animation has a still answer. The rule: if you freeze it, no information is lost. Motion may add delight, but it can never be the only carrier of meaning. This is a hard accessibility line, not a nice-to-have.

Motion	Frozen state (reduced-motion)
Pencil draws line	Line shown complete, pencil hidden
Cursive writes itself	Word shown complete
Stickman walks trail	Figure stands at current stop
Number counts up	Final number shown
Card floats / chips bob	Still, at rest position
Stickmen tug-of-war	Static mid-pose (tension still reads)

Reduced-motion

The hard line

One media query kills all animation. Every motion must have a still answer that loses nothing.

If freezing loses information, the design is wrong — put the info in the static state.

@media(prefers-reduced-motion:
  reduce){
  *{animation:none!important;
    transition:none!important}
}

The Living Styleguide