Guide

How to build a motion system: duration, easing & design tokens

A motion system is the small set of timing decisions behind everything that moves in an interface — how long things take, how they accelerate, how a list staggers. This guide walks through building one as reusable design tokens, so animation stays consistent instead of being guessed per component. You can build every step of it in Cadence.

1. Start with primitives: a duration ladder and an easing set

Primitives are the raw vocabulary — general and component-agnostic. Define a short duration ladder (a handful of steps, not a dozen) and a small easing set. Everything else references these, so the whole system moves in proportion.

/* duration ladder — a lean, legible scale */
--dur-1: 100ms;  --dur-2: 150ms;  --dur-3: 200ms;
--dur-4: 300ms;  --dur-5: 500ms;

/* easing set — one per job, no more */
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-accelerate: cubic-bezier(.4, 0, 1, 1);
--ease-decelerate: cubic-bezier(0, 0, .2, 1);

Keep both scales small. Four or five durations and three or four easings is usually enough; more than that and nobody can tell them apart, which defeats the point of a system.

2. Compose semantic intents: enter, exit, move

Primitives say how much; intents say what for. An intent like enter, exit or move is composed from the primitives by reference — so when you adjust a primitive, every intent that uses it stays in proportion. This is your motion API: components reference intents, never raw numbers.

--motion-enter:  var(--dur-3) var(--ease-decelerate);  /* things arriving */
--motion-exit:   var(--dur-2) var(--ease-accelerate);  /* things leaving */
--motion-move:   var(--dur-4) var(--ease-standard);    /* things repositioning */

Notice the asymmetry: exit is quicker than enter. Leaving should feel decisive; arriving can afford to be gentle. Small, deliberate choices like this are what make motion read as designed rather than default.

3. Add stagger and distance

Two more primitives cover most list and transform work. Stagger is the delay between items in a sequence — a five-item list at a 70 ms stagger cascades over ~280 ms, brisk enough to read as one gesture. Distance is how far an element travels on enter; keep it a token too, so movement scales with the rest of the system.

4. Export as design tokens (CSS, Tailwind, Style Dictionary, JSON)

The point of tokens is that they live in code. The same system exports to whatever your stack reads:

CSS custom properties — drop-in --motion-* variables.
Tailwind — a theme.extend block for transitionDuration and transitionTimingFunction.
Style Dictionary — platform-agnostic token JSON for multi-platform design systems.
JSON / TypeScript — for anything that consumes tokens programmatically.
Rationale — the opinion layer as a shareable Markdown report: a composite verdict (a 0–100 score plus letter grade), a per-dimension scorecard, every finding with its fix, and where the system sits against the field. The code formats carry the tokens; this one carries why — so you can defend the choices to a team without being in the editor.

In Cadence the export panel emits all of these and updates live as you edit the scales, so the code always matches the system you are looking at. Each format copies or downloads as a file under its conventional name (tokens.css, motion.ts, tailwind.config.js…), so the tokens drop into a repo without a copy-paste. The same verdict grade leads the System read panel header, so you always see the one-line answer to “is this good?” while you work.

Read someone else's system. The critique isn't only for the system you're editing. Expand Read another system's palette under the System read panel and paste a framework's motion tokens — CSS custom properties, a tokens.json, or a Tailwind theme fragment — and Cadence runs the same read and verdict over them. It's a quick way to reverse-engineer the art direction of a system you admire (or inherit), entirely in the browser.

Keep and reuse a system. Beyond the token exports, Cadence can save a system to your browser — name it, keep several under My systems, update / rename / delete, or reload one to undo your edits — and import / export it as a .cadence.json file. That file (name plus full state) is the durable, portable "save": commit it to a repo or share it, with the codebase as the source of truth. Import validates the file is a Cadence system and rejects anything else with a clear message.

5. Go further: scroll-driven animations and view transitions

A motion system isn't only transitions. The same duration and easing tokens drive newer CSS too:

Scroll-driven animations — animation-timeline: scroll() and view() tie an animation's progress to scroll position or an element entering the viewport, no JavaScript required.
View Transitions — the View Transitions API animates between two states (or pages) using your move timing.

Both should ship with an honest fallback for browsers that don't support them yet — Cadence emits the recipe and the fallback together.

The opinion: a system should critique itself

Structure is half the job; the other half is judgement. This is Cadence's differentiator: a built-in system read that critiques your system as you build it, so you end up with a point of view, not a pile of tokens.

Ranked findings, worst-first — it flags an exit slower than its enter, a redundant easing, an uneven duration ladder, over-budget durations or staggers, an idle spatial/effects split, and distances that jump too fast to read. Each finding carries a one-line fix, and the deterministic ones offer a one-click Apply that changes the model for you.
A verdict, not just a list — a composite grade (A–E) and 0–100 score with a per-dimension scorecard (ladder, easing set, enter/exit, budgets, vs the field), so the read opens with an answer instead of a scroll.
Benchmarked against the field — your ladder growth and overall tempo are measured against shipped systems (Material 3, Carbon, Fluent…), so the numbers get a reference frame.
A Rationale export — the whole critique (verdict, scorecard, every finding and its fix) as shareable Markdown, so you can defend the system to a team without opening the editor.
Read someone else's system — paste a third-party token set (CSS custom properties, a tokens.json, or a Tailwind fragment) and the same critique runs over it.

That built-in critique is the difference between a pile of tokens and a system with a point of view.

Build your motion system → What is Cadence?