A motion system designer
Not more knobs —
structure, and an opinion.
Tune duration & easing scales, compose semantic intents, and get a system that critiques itself — exported as CSS, Tailwind, Style Dictionary, plus scroll-driven & view-transition recipes.
exit (150ms) is quicker than enter (200ms) — leaving feels decisive.
enter · stagger — a list cascades in
emphasized · spring — one lively overshoot
easing — the curve behind the motion
How it works — scroll to assemble the system
-
1
Primitives — the vocabulary
A duration ladder and an easing set. General and component-agnostic; everything else references these.
-
2
Intents — meaning, composed
Semantic tokens (enter, exit, move…) built by reference from the scales. This is your motion API.
enter · base + emphasizedexit · fast + acceleratemove · slow + standard -
3
The opinion layer — it critiques itself
Cadence reads the system back to you: asymmetry, budgets, redundancy, velocity.
“exit” (150ms) is quicker than “enter” (200ms) — leaving feels decisive.
-
4
Export — copy-paste-ready
Out comes CSS, Tailwind, Style Dictionary, TS — plus scroll-driven & view-transition recipes.
--motion-enter: all var(--motion-enter-duration) var(--motion-enter-ease) 70ms;
Motion design tokens, with a system behind them
Cadence is a motion system designer — a browser tool for building the duration and easing tokens that time an interface's animation, then exporting them as design tokens your codebase can use. Instead of scattering one-off transition: 0.3s ease values across a project, you define a small, deliberate motion scale once and reference it everywhere.
How it works
Two layers. Primitives — a duration ladder and an easing set — are the raw vocabulary. Intents like enter, exit and move are composed from them by reference, so they stay in proportion. A built-in critique flags asymmetry, redundancy and budget problems as you go. Read the full guide →
What it exports
Copy-paste-ready CSS custom properties, a Tailwind theme extension, Style Dictionary tokens, TypeScript and plain JSON — plus recipes for scroll-driven animations (animation-timeline) and the View Transitions API, with honest fallbacks.
Who it's for
Product designers and front-end engineers building the motion layer of a design system — anyone who wants animation timing to feel considered and consistent rather than guessed per component.
FAQ
- What are motion design tokens?
- Named, reusable values for animation — durations, easing curves, stagger and distance — stored as tokens (CSS variables, JSON, Style Dictionary) so an interface's motion stays consistent and is editable in one place instead of hard-coded per component.
- Does Cadence review or critique my motion system?
- Yes — beyond editing, Cadence has an opinion. Its system read scores the system 0–100 with a letter grade and a per-dimension scorecard, ranks findings worst-first each with a one-line fix (many one-click to apply), benchmarks it against shipped design systems, and exports the whole critique as a shareable Rationale in Markdown — all in your browser.
- How do I export easing and duration to CSS, Tailwind or Style Dictionary?
- Tune the scales and intents in Cadence and open the export panel. It emits ready-to-paste CSS custom properties, a Tailwind theme extension, Style Dictionary tokens, TypeScript and JSON — the code updates live as you edit the system.
- Does it support scroll-driven animations and view transitions?
- Yes. Alongside the token exports, Cadence emits recipes for CSS scroll-driven animations (
animation-timeline: scroll()andview()) and the View Transitions API, each with a graceful fallback where the feature isn't supported. - Can I save or import my own motion systems?
- Yes. Save and name systems in your browser with no account, export or import a portable
.cadence.jsonfile, and share any system by URL — durable and portable while the page stays a single static file. - Is Cadence free, and does it need an account?
- Yes and no — it's free and needs no account or sign-up, and it runs entirely in your browser as a single static page. Nothing you build is uploaded.