Projects · Product · Motion design · Tools
Cadence.
A motion design tool where the storyboard is the file. I designed it, directed it, and shipped a working application in five weeks, with an AI coding agent writing the code to my direction.
Role
Creative director, product owner, designer
Timeline
August–September 2026
Built with
Claude Code, TypeScript, React, Canvas2D and WebGL
Status
Working desktop and browser app
Scale
229 commits and 1,555 automated tests
Proof
My 30-second launch film, rebuilt inside it
Why it started
Every motion piece I’ve directed began as boards, and the tools threw them away.
At an agency, motion starts in a deck. Frames, a beat for each, a note on what moves. The client signs off on the boards. Then the work moves into After Effects, and the structure is gone. The file holds keyframes at absolute times, and “shot two holds a beat, then we cut to the product” only lives in the animator’s head.
So every structural note becomes rework. Swap two shots, stretch a beat, change the brand blue across thirty seconds: each one is a hunt through keyframes. Keynote’s Magic Move goes the other way and animates between slides for you, but it guesses which object is which by name, gives one easing to a whole transition, and fails without telling you.
The question I started with was simple. What if the boards were the document, and the motion was worked out from what changes between them?
How it started
A design argument first,
code second.
I didn’t open with an app. I opened with a long conversation about what the file should be, because that decision is the product. Everything else is interface.
Before any code
Three document models, argued out
A timeline with board markers, where boards are decoration. Boards as the document, where each board stores only what it changes. A branching board graph. I chose the second: it fixes the structural edit problem, and the linear case is most of the real work. The graph was deferred, not dropped.
Prototype
One HTML file that proved it
A 2,360-line single-file prototype, “beatsheet”, showed the model working end to end. It also showed what not to carry forward: an injection bug that really executed and errors swallowed in the render path.
Aug 2026
Rebuilt properly
A clean engine with no knowledge of the screen, a renderer behind a seam, an immutable store with undo, and a regression suite where every test is a bug that actually shipped. I wrote the working agreement the agent follows: verify by behaviour, never by how a frame looks.
Aug 2026
Named Cadence
The prototype’s editor was ported and extended: board strip, presence, text choreography, clips, charts, effects, camera, export.
Sep 2026
The proof
I rebuilt my own thirty-second portfolio launch film inside the tool, frame for frame, and added whatever features the film needed to get there.
The idea in one picture
A board stores only what it changes.
Leaving a board untouched is the hold. Change something on the first board and every board after it inherits the change. Nothing is guessed: every layer has one identity for the whole piece, and the motion between boards is derived from the difference.
Board 1
Base scene
Headline, photo off, blue ground. Every board after this one inherits it.
Board 2
headline.y → up
The only change stored. Cadence derives the move from board 1.
Board 3
photo.on → on
One property flips. The fade in is derived, not keyframed.
Board 4
ground → white
Plus headline.fill → blue. The colour change is derived from the difference.
Key features
A storyboard that plays.
The board strip is the timeline
Every board is a live thumbnail sitting on its own stretch of time, so the strip reads as a storyboard and plays as an animatic.
Drag the space between two boards to retime a beat. Everything inside it scales along, because timing is stored as fractions of a transition, never as absolute keyframes. Under the strip, each layer shows where it moves, holds, arrives and leaves.
One thing at a time, as 30 boards. Each board shows one feature and names it on the stage.
Story level. Each board carries its script and action notes, the way a storyboard frame does.
One file, three levels of detail
Story cuts between frames, an animatic for pitching and sign-off. Animate turns on the tweens between them. Advanced opens per-layer timing, paths, data, camera and effects.
Switching levels never changes the work. The same document serves the person pitching and the person finishing.
Type that performs
Split a line by letter, word or line, then pick how each piece arrives: mask up, rise, slide, pop or blur. The stagger fits the beat, so a longer headline never overruns its moment.
An exit can differ from the entrance, the way editorial type rises in and keeps going out the top. Counters, highlight chips, variable-font weight morphs and type on a path all come from the same system.
Word-by-word reveal
One layer, nine copies. Each takes its colour from an array; on this board the layout itself changes, grid to ring.
Systems, not one-offs
Build a card once as a clip, feed it arrays of colours, words and pictures, and a duplicator deals out as many as you need.
Charts, bento grids and counters are ordinary layers, so two boards disagreeing about a number is the animation. Live data can drive it from a spreadsheet.
Finish and hand off
Effects and colour grades are animatable properties, running on the GPU. The camera is just another layer, so it holds, moves and eases like everything else.
When the piece is done, export a movie, a GIF, PNG frames, or the storyboard as a PDF for the client deck.
A shader pass over a gradient block, at a strength each board can set.
The proof
I built my own launch film inside it.
A tool is only real when it makes real work. So created my thirty second portfolio launch film and set the brief: create it one to one in Cadence, and add whatever the film needs that the tool can’t yet do. It needed a new text entrance, separate exits, masked reveals that stay solid, and a way to state every move at the second it happens and have it laid onto boards automatically.
0:03 · Intro
0:11 · How I work
0:14 · Work samples
0:28 · End card
Film rebuilt
30s
My own thirty-second launch film, rebuilt inside the tool frame for frame.
Automated tests
1,555
A regression suite where every test is a bug that actually shipped.
Keyframes authored
0
Each board stores only what changed. The animation is derived from the difference.
How I worked
I ran it like a creative team.
An AI agent wrote the code. People call this vibe coding, and the label undersells the work: what made Cadence good was direction. The same things I do with designers, animators and developers.
Brief before build
The model was argued out before a line was written, and the reasoning was written down: a spec, a design history of what was rejected and why, and a working agreement the agent reads first.
Review the output, not the claim
“It looks right” was never accepted as done. Work was checked by counting distinct frames, sampling values across transitions and measuring pixels, the way I’d check a render against a board.
Taste at the detail
Corner radii set to one value across the app. Instructional prose stripped out of the interface. A time zoom that scales only time. Small calls, made hundreds of times.
Kill work when the numbers say so
A separate GPU-first rewrite was built and then archived, because measurement showed the real cost was somewhere a new renderer couldn’t reach. Being right about the plan mattered less than being right about the product.
Why it matters for what’s next
What this taught me, and what I’d bring to your team.
Design the system, not the screen
The most important decision in Cadence was what a board is. Every feature after it was easier or harder because of that one call. It’s the same instinct that builds a brand system that scales instead of a set of pretty comps.
Directing AI is directing people
Clear briefs, specific feedback, standards written down so they outlast the conversation. The skill that made the agent productive is the skill that makes a studio productive. I can lead teams where AI is part of the workflow, and set the guardrails for it.
Prototype to product in weeks
An idea I’d carried for years went from argument to a working tool in five weeks. For a brand or a product team, that means testing a concept in the real medium before the budget is committed.
Measure, then decide
Two confident predictions about performance were wrong when measured. I now ask for the number before the opinion, whether it’s frame time, conversion or reach.
I speak engineering
I can talk renderers, data models, test suites and trade-offs with a development team, and translate them into what they mean for the work and the timeline. Fewer surprises between the pitch and the build.