The first principle is the hardest: every animation must earn its place by answering a question the user is already asking. Motion with no purpose is noise, and noise gets cut.

ASKSWhat changed? ASKSWhere am I? ASKSWhat’s next? TESTRemove & re-test

A01.1 · WHAT CHANGED

Answer the last action.

When something happens, motion shows the result so it never goes unnoticed — a saved row settles, a deleted item collapses. The animation closes the loop the user opened.

A01.2 · ORIENTATION

Keep the user located.

Motion carries the geography of the interface — a panel slides from the edge it lives on, a back gesture reverses the forward one. Movement tells you where you are in the space.

A01.3 · ANTICIPATION

Point to what follows.

Motion can direct attention before the user has to look for it — a pulse on the next step, a nudge toward the primary action. It guides the eye one beat ahead.

A01.4 · THE REMOVE TEST

Cut it and check.

The discipline is simple: remove the motion and see if anything is lost. If the interface works exactly as well without it, the motion was decoration — and it stays cut.

WCN motion obeys a believable physics — things ease, carry momentum, and follow natural arcs. Objects that move like they have weight feel real; objects that teleport feel broken.

EASINGAlways LINEARNever ARCSNatural paths MOMENTUMMass implied

A02.1 · EASING

Nothing moves linearly.

Real things accelerate and settle; nothing in the physical world moves at constant speed. Every WCN transition eases, so motion reads as physical rather than mechanical.

A02.2 · WEIGHT

Big things move slower.

A full-screen sheet takes longer to move than a small toast — mass maps to duration. Consistent weight makes the interface feel like a coherent physical space.

A02.3 · ARCS

Curved paths.

Objects that change both position and direction travel on a gentle arc, not a straight diagonal. Arc motion is how nature moves and how the eye expects to be led.

A02.4 · FOLLOW-THROUGH

A little overshoot.

A small overshoot and settle gives motion life — but it is a budget, not a free-for-all. Used on the focal action only; everywhere else, motion comes cleanly to rest.

When everything animates at once, the eye has nowhere to land. WCN motion has a hierarchy — one focal movement leads, everything else stays quiet or still.

FOCALOne at a time AMBIENTRecedes BUDGETPer screen COMPETENever

A03.1 · ONE FOCAL

A single lead.

Each interaction has one motion the user should follow — the row that saved, the panel that opened. That motion leads; competing animation is silenced so the lead reads clearly.

A03.2 · PRIMARY VS AMBIENT

Lead and background.

Primary motion responds to the user; ambient motion (a subtle loading shimmer) sits behind. Ambient never competes with primary — it lowers its volume when something leads.

A03.3 · MOTION BUDGET

A ceiling per screen.

Each screen has a motion budget — a cap on how much moves at once. When a new animation is added, an old one usually has to give way. Restraint is enforced, not hoped for.

A03.4 · NO COMPETITION

Never two at once.

Two equally-weighted motions playing together cancel each other out — the eye flicks between them and reads neither. If two things must move, one leads and the other defers.

The interface is a place, and motion is what makes that place feel coherent. Elements come from where they live, layers keep their depth, and nothing pops into existence from nowhere.

ORIGINMotion from source DEPTHZ-layers hold MORPHShared element POPNever

A04.1 · ORIGIN-AWARE

Come from somewhere.

A menu opens from the button that triggered it; a detail expands from the card it belongs to. Motion that starts at its origin keeps the user's mental map of the space intact.

A04.2 · Z-DEPTH

Layers stay layered.

Overlays sit above, content below; shadows and scale signal which is which. Motion respects this stack so the interface reads as layered space, not flat shuffling rectangles.

A04.3 · SHARED ELEMENT

The same thing, moved.

When an item appears in two places — a thumbnail then a full view — it morphs between them rather than cross-fading. The user sees one object move, not two objects swap.

A04.4 · NO POP

Nothing blinks in.

Elements never appear or vanish instantly — they enter and leave through motion, however brief. A pop breaks continuity and makes the interface feel glitchy rather than physical.

The most sophisticated motion system knows when not to move. WCN treats animation as seasoning — present where it helps, absent everywhere else, and never autoplaying over someone trying to read.

DEFAULTCalm MOTIONWhere it helps AUTOPLAYNot while reading RULESubtract

A05.1 · CALM DEFAULT

Still, until needed.

A screen at rest is genuinely at rest — no drifting gradients, no breathing buttons. Motion appears in response to the user and then returns the interface to calm.

A05.2 · SEASONING

A little, goes far.

Motion is salt, not the dish. A single well-timed transition does more than a screen full of movement. The instinct is always to use less than feels exciting.

A05.3 · NO AUTOPLAY

Don’t move over reading.

Nothing loops or autoplays beside text someone is reading — it pulls the eye and fights comprehension. Motion waits for attention rather than stealing it.

A05.4 · SUBTRACT

Until it breaks.

The design method is subtraction: remove motion until the interface stops working, then add back the one piece you missed. What remains is the motion that truly earns its keep.

Animation can exclude — it can nauseate, distract or seize. WCN motion honours reduced-motion preferences, avoids dangerous patterns, and never makes movement the only way to understand something.

REDUCEDHonoured FLASHNever VESTIBULARSafe SIGNALNever motion-only

A06.1 · REDUCED MOTION

Honour the setting.

When a user asks their system for reduced motion, WCN listens — transitions become instant or cross-fade, parallax stops. The interface still works fully; it just stops moving.

A06.2 · SEIZURE-SAFE

Never flash.

Nothing flashes more than three times a second — the threshold for photosensitive seizures. Strobing, rapid flicker and high-contrast pulsing are simply not in the vocabulary.

A06.3 · VESTIBULAR-SAFE

No motion sickness.

Large parallax, spinning and zooming whole screens can trigger vertigo and nausea. WCN keeps big movements gentle and gives reduced-motion users a still alternative.

A06.4 · REDUNDANT SIGNALS

Motion plus something.

Motion never carries meaning alone — a state change also shows in colour, text or icon. If the animation is missed or disabled, the information is still fully there.