Duration is the first decision in any animation, and guessing it is why motion feels off. WCN fixes a small scale of durations mapped to the size of the change, so timing is chosen, not invented.

TAP120 ms QUICK200 ms STANDARD320 ms AMBIENT640 ms+

B01.1 · THE SCALE

Four named steps.

Tap (120 ms) for instant feedback, quick (200) for small UI, standard (320) for most transitions, ambient (640+) for large or background motion. Pick the step, never a raw number.

B01.2 · SIZE MAPS TIME

Bigger, slower.

Duration scales with how far and how large the moving element is. A small toggle is near-instant; a full-screen sheet takes the long step. The mapping keeps the whole UI coherent.

B01.3 · PERCEPTION

Under 100, over 500.

Below ~100 ms feels instant; above ~500 ms starts to feel slow. The scale lives in the responsive middle — fast enough to feel snappy, slow enough to be followed.

B01.4 · TOKENS

Named in code.

Durations ship as tokens — duration-tap, duration-standard — shared by design and engineering. Retiming the system is a one-line change, not a hunt through stylesheets.

Easing is the curve that describes how speed changes over a motion — and it matters more than duration to how something feels. WCN standardises on a small set of curves with clear jobs.

STANDARDcubic-bezier(.2,.7,.2,1) ENTERDecelerate EXITAccelerate DEFAULTNever ease-in-out

B02.1 · THE STANDARD CURVE

One curve, most motion.

The house curve — cubic-bezier(.2,.7,.2,1) — starts briskly and settles softly. It suits the large majority of transitions, so most motion uses it and feels instantly familiar.

B02.2 · ENTER

Ease in.

Elements entering the screen decelerate — fast at first, gently arriving. The eye catches them early and follows them to rest, so arrivals feel welcomed rather than abrupt.

B02.3 · EXIT

Ease out.

Elements leaving accelerate away — slow to commit, then quickly gone. The user's attention is released cleanly instead of being held by a lingering exit.

B02.4 · NO SYMMETRIC EASE

Avoid the default.

The browser default ease-in-out is symmetric and lifeless — slow, fast, slow. WCN avoids it; asymmetric curves that start or end with energy feel far more alive.

Entrances and exits are not mirror images. WCN exits move faster than entrances, because getting out of the way quickly respects the user — while arrivals can take a beat to be noticed.

ENTERFull duration EXIT~70% of it RATIOTokened WHYRespect the user

B03.1 · THE PRINCIPLE

Exits are quicker.

An entrance can afford to be noticed; an exit should clear fast so the user gets to what's next. Exits run at roughly 70% of the matching entrance duration.

B03.2 · OUT OF THE WAY

Don’t make them wait.

When a user dismisses something, they've already moved on mentally. A slow exit makes them wait for a decision they've made. Fast exits keep the interface feeling responsive.

B03.3 · THE RATIO

A single ratio.

The in/out ratio is one token applied system-wide, so the asymmetry is consistent. Change it once and every entrance/exit pair updates in proportion.

B03.4 · EXCEPTIONS

When in equals out.

Reversible gestures — a drawer the user drags open and closed — keep symmetric timing so the motion tracks the finger. Asymmetry is for system-driven enter/exit, not direct manipulation.

When a group of elements animates, the order and spacing of their entrances is choreography. WCN staggers reveals on a fixed interval so a list feels led in, not dumped on screen.

STAGGER60 ms interval DIRECTIONReading order CAPMax count THENAnimate as group

B04.1 · STAGGER

A beat between.

Items in a group enter one after another with about 60 ms between them. The small offset turns a wall of elements into a sequence the eye can follow from first to last.

B04.2 · DIRECTION

Follow the reading.

Stagger flows in reading order — top to bottom, leading edge first — so the choreography reinforces how the content is meant to be read rather than fighting it.

B04.3 · THE CAP

Stop staggering.

Beyond a handful of items the cumulative delay gets tedious, so stagger caps — the first several lead in, the rest arrive together. Nobody waits for the fortieth row to animate.

B04.4 · GROUPING

Sections, not items.

On a complex page, whole sections are choreographed rather than every element — section one settles, then section two. Choreography works at the scale the user actually perceives.

Springs trade fixed durations for physics — stiffness and damping that produce a natural settle. Used on the right gestures they feel alive; used everywhere they feel chaotic. WCN draws the line.

USEGestures · drag NOTRoutine UI TOKENSStiffness · damping OVERSHOOTCapped

B05.1 · SPRING VS CURVE

When to spring.

Springs suit motion that responds to velocity — a flung card, a dragged sheet — where a fixed curve would feel disconnected from the gesture. For everything else, the bezier curves win.

B05.2 · STIFFNESS & DAMPING

Two dials.

A WCN spring is described by stiffness (how hard it pulls) and damping (how fast it settles), captured as named presets. Designers pick a preset, not raw physics constants.

B05.3 · OVERSHOOT

A small bounce.

Springs can overshoot and bounce back; WCN keeps that overshoot tight. A hint of bounce feels responsive — a visible wobble feels like a toy, and erodes the brand's composure.

B05.4 · PERFORMANCE

Settle, don’t churn.

A spring must come to rest and stop computing — a never-settling spring burns frames forever. Presets are tuned to settle quickly and animate only transform and opacity.

A janky animation is worse than none — it makes the whole product feel cheap. WCN holds a 60fps floor and animates only the properties the browser can move cheaply.

FLOOR60 fps ANIMATETransform · opacity AVOIDLayout · paint BUDGETPer frame

B06.1 · THE 60FPS FLOOR

Sixty frames.

Motion targets a steady 60fps — about 16 ms per frame. A transition that drops frames stutters, and a stutter reads as broken. If it can't hit the floor, it gets simplified or removed.

B06.2 · CHEAP PROPERTIES

Transform & opacity.

Only transform and opacity animate smoothly, because the browser can move them on the GPU without recalculating layout. These two carry the vast majority of WCN motion.

B06.3 · EXPENSIVE PROPERTIES

Not width, not top.

Animating width, height, top or left forces the browser to re-layout every frame — the classic cause of jank. WCN moves with transforms instead; the visual result is identical, the cost is not.

B06.4 · RESPECT THE DEVICE

Lighter on weaker hardware.

On low-power devices, or when reduced-motion is set, heavy motion scales back. The product stays smooth on a budget phone, not just a flagship — performance is part of inclusion.