David Preli
Working with interactive animation in the universe.
Ready for work
David is ready for their next project!
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 (http://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 (https://cadence.davidpreli.com/l/contra)
Case study: cadence.davidpreli.com/cs (https://cadcadence.davidpreli.com/l/contra-cs)
Open for work
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.
3
2
61
the Dream Team
Two public domain sculptures, rigged and animated in Blender to salsa, rhumba, and twist, wrapped in pixel art driven by Nathalie Du Pasquier's Manifesto series, and synced to a ninety-second jazz-pop track using a browser-based audio analysis tool built for the project. Never speaking, two unfinished figures find one another. Case study (https://studiodavidpreli.github.io/theDreamTeam/dream-team-case-study.html) — Cue Mapper (https://studiodavidpreli.github.io/cue-mapper) — Viemo (https://vimeo.com/1178612951?share=copy&fl=sv&fe=ci)
1
48
Mantis Banner
Using a cutsom svg-to-json python script, hand drawn animations can be converted to vectors and compiled for RIVE and WEB implementation.
0
71
POPP'EM — A RIVE Game
An evil AI has seized control of humanity. One agent stands between total subjugation and freedom.
The game is driven by RIVE's Data Binding, which handles the game clock, tracks the score in real time, calculates win and fail conditions at the end of the run, and triggers special sound effects at key score milestones. Tension before the game begins is handled by a fake loading screen, designed to let the opening exposition breathe and make players feel the weight of the mission before they're thrown into it.
All music was composed in Apple Logic Pro. A special shout out to Joey from School of Motion for contributing the crucial, deeply necessary "pop" sound effect.
POPP'EM (https://davidpreli.com/popp'em)is earnest about exactly one thing: saving the world. Everything else is negotiable.
1
8
912