Cadence - A Motion Design System Explorer

The goal

Motion design dies in translation. A curve shaped in After Effects leaves the building as a reference video and a duration guess, and the feel is gone by the time it ships. Cadence closes that gap: a motion design system explorer where design tokens drive real UI components in real time, and a tuned motion system exports as the artifact an engineering pipeline consumes.

My role

Sole designer and developer: product design, motion design, token architecture, the React build, Rive animation, deployment. I planned the system in Claude and built it in Claude Code, and every architectural decision in the codebase is documented in a dated record. The rigor is part of the deliverable; a motion system an engineer can trust is one whose reasoning is written down.

Deliverables

The live tool at cadence.davidpreli.com: Token Lab, a live token editor; a Principles Library running 18 animation principles on real components; Motion Tiles, a Rive field where three named motion personalities retime the whole grid at once

The token architecture: CSS custom properties read at runtime by Framer Motion, with export to DTCG, CSS, JSON, and Framer Motion formats, and import with a validation report

Twenty custom token-driven components, four themes with WCAG AA contrast throughout, reduced motion as a first-class state

Production deployment on a Cloudflare Worker, verified by an end-to-end suite that runs against built output

A written case study and the full decision record

Links

Tool: cadence.davidpreli.com

Case study: cadence.davidpreli.com/cs

I'm open to design systems, motion systems, and creative technology engagements: defining a motion language, building the tools that make it usable, and documenting it so the decisions hold up after I leave.