Projects · Tools · Motion design
Cavalry panels.
A set of script panels for Cavalry, the procedural motion app I animate in. Each one closes a gap I kept hitting in real work. I designed them, wrote the standards they follow, and directed an AI coding agent to build and test them.
Role
Creative director, designer, product owner
Timeline
June–September 2026
Built with
Claude Code and Cavalry’s JavaScript API
Panels
Eight, across layout, timing, data, text and presets
Tests
155 automated tests on Align-Distribute and Marker Notes
Status
Working in Cavalry 2.7; three packaged for release
Why it started
Cavalry is brilliant at systems. The small conveniences were missing.
Cavalry builds motion procedurally, and it’s the fastest way I know to make work that scales. But the everyday tools an animator reaches for a hundred times a session had gaps, and every gap cost a little time on every job.
Time markers existed only as ticks on the ruler, with nowhere to read the notes on them. Aligning to the composition hid behind an Option-click, and there was no way to set an exact gap. Every chart meant building a rig by hand, and the text animations and components I reuse had no library to live in.
Each panel started as one of those moments: a gap met in production rather than an item on a feature list.
The panels
Eight tools that feel like they shipped with the app.
Libraries for what I reuse
TAP saves text animations as presets, with their keyframes, stagger and easing, and a preview rendered by Cavalry itself. CVC Library does the same for any selection, saving it as a self-contained component with its assets and a thumbnail, ready to import into any comp.
Cavalry’s script API can’t read easing directly, so TAP maps it through a calibration table built from Cavalry’s own exports. Both are packaged with licences for release.
From storyboard to a built comp
Storyboard frames and shot notes are drawn in Figma. An agent extracts them and writes a motion plan that holds every creative default, and the Storyboard Builder panel executes it: one group per scene, a camera inside each, and each layer animated.
The builder only does what the plan says. When a font from the storyboard isn’t installed, it substitutes one and lists a warning, so nothing changes quietly.
A list for time markers
Cavalry’s time markers exist only as ticks on the ruler. Marker Notes gives the open composition a live, sorted list: click a row and the playhead jumps there, double-click to write a note, or add a marker where the playhead sits.
Notes are the markers’ own labels, so they save inside the scene with no sidecar file. Getting there took three discarded approaches, and the simplest one was the one that stayed reliable.
Charts that stay linked to the data
One tabbed panel builds bar, radial, pie, line and scatter charts as live rigs from a CSV or a Google Sheet. Edit the data, reload the asset in Cavalry, and the chart updates.
Design and animation settings sit next to the data: direction, grid, values, rounded caps, donut or pie, and how the build animates in. A separate Bar Chart Builder clones a designed template and rewires it to a sheet.
Keyframing by doing
Record brings Apple Motion’s record button to Cavalry. Arm it, park the playhead and edit the selected layers, and every changed attribute becomes a keyframe. A first edit also keys the old value, so it reads as a complete move.
Cavalry has no callback for a changed attribute, so Record polls only while armed and never during playback. Timed Group sits beside it: a group with a set duration that fits the layers inside it to its in and out frames.
Alignment with exact gaps
The idea in one picture
A storyboard becomes an animation.
The newest panel closes the loop between how I plan motion and how I build it. Storyboards stay in Figma, and a motion plan sits between them and Cavalry, so every creative decision is written down before anything is keyframed.
1 · Figma
Storyboard
One frame per shot, with a notes card for timing, transition and camera.
2 · Extract
Raw data
The agent reads the file through Figma’s MCP and writes it out as JSON.
3 · Plan
Motion plan
Every creative default lives here: timing, easing, entrances and exits.
4 · Build
Cavalry comp
The panel executes the plan, scene by scene, and reports what it changed.
Frames from the Orbit launch teaser, built by the pipeline.
Production panels
9
Across layout, timing, data, text and presets, each closing a gap in real work.
Automated tests
155
On Align-Distribute and Marker Notes.
Packaged for release
3
Working in Cavalry 2.7.
How I worked
Match Cavalry. Do not invent.
After the first panels, I wrote down the rules they share: an unofficial set of Human Interface Guidelines for Cavalry scripts, with a redline spec. The best script UI is one nobody notices.
Prime directive
Copy the native panels
Spacing, control heights, icon sizes and labels come from Cavalry’s own windows, so a panel looks like it shipped with the app.
Tokens
A named scale, not magic numbers
Spacing of 2, 3, 4 and 10px, 26px controls, 22px icon buttons, a 4px radius and a 1px hairline. Two densities, never mixed in one row.
Resilience
Degrade, don’t crash
Check the API a panel needs at start-up, and let optional features fall back: icons become text buttons, a toolbar becomes a normal window.
Honesty
Never silent
Report every result, grey out controls that can’t act, and make destructive actions ask twice.
And I ran the build like a creative team.
Test the logic outside the app
The geometry and formatting live in a pure core, tested under Node and inlined into a single-file panel at build time. A mock of Cavalry reproduces its awkward behaviour, so the tests fail where the app would.
Probe before you trust
The API facts behind the storyboard builder are written down with their source and a confidence tag, from the app’s own schema to things still unverified.
Review the output, not the claim
“It looks right” was never done. Changes were checked in the real app, and what the tests can’t prove is listed next to them.
Kill the clever version
Marker Notes went through custom attributes, a hidden text layer and a sidecar file before landing on the markers’ own labels. Removing the machinery removed the bugs it was chasing.
Why it matters for what’s next
What this taught me, and what I’d bring to your team.
Tools are design work
A panel is an interface like any other. The highest compliment for a script UI is that it feels like part of the app, and that takes the same discipline as a brand system.
Honesty is a feature
The panels report what they skipped, name what they substituted and refuse rather than half work. People rely on a tool that admits its limits.
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.
Fix friction where the work happens
Each panel came from a moment in real production. Small tools, aimed at the right gap, change how fast an idea becomes a finished piece.
I speak engineering
I can talk APIs, test suites and failure modes with a development team, and translate them into what they mean for the work and the timeline.