Cadence: What This Demonstrates

Cadence: Case Study · Companion

The hiring-manager cut of the Cadence case study. For the full build record, start there.

For the hiring manager reading this directly:

• React fluency: The two-channel Context architecture with a reducer behind it. Controlled and uncontrolled variants across Toggle, Card, and Stepper. ResizeObserver for column-count awareness. AnimatePresence orchestration with its documented sharp edges avoided for stated reasons. A class-component ErrorBoundary where the API demands one. requestAnimationFrame drivers feeding live tokens into Rive view models and a WebGL shader. All of it built, none of it from a library.
• Design systems thinking: A token architecture that matches Material and Primer patterns, split into editable tokens and fixed references with a test enforcing the partition. Four export formats off one normalized object, including a spring family the DTCG draft has no type for, serialized as plain number leaves rather than an invented one, and a Framer Motion module that hands an engineer the motion-side artifact directly. The chrome/demonstration boundary, extended to typography: the toolbar's text runs on named type-* roles in a shared layer, because the tool that argues values must be named should not leave its own chrome as the counterexample. Naming as a design act: the bezier that claimed to be a spring was renamed, then a real spring was built; the scale family was renamed so no key implies a neutral it does not have. Shared Vocabulary is a principle in the tool because it was a lesson in the build.
• Motion expertise applied to product context: Eighteen principles, each argued through a component a product actually ships. The layoutId and Carousel diagnoses show motion knowledge operating at the implementation layer, where it either works in the projection tree or it does not. The eye that tuned these curves now ships the system, not the spec.
• The Rive/React boundary: Rive holds poses; React holds time. The plant demonstration's .riv carries no duration and no easing, every animation a linear timeline scrubbed from 0 to 1, while a requestAnimationFrame driver integrates live tokens into eased progress each frame, so a slider dragged mid-animation bends the motion on the next frame. Both sides were built against a contract document committed first, naming every property, its type, and which side writes it, because neither tool can see across the boundary and a disagreement about what a number means otherwise becomes a debugger session. The theme layer earned its own rule from a bug where switching themes watered the plant: baked-instance rebinding is for art that only watches, and a state machine that listens gets its colors written instead.
• AI fluency: Two Claude surfaces with different senses: the browser for planning and prose, Claude Code in the terminal for the files, and a CLAUDE.md every session reads before starting, which is how a collaborator with no memory of yesterday inherits yesterday's decisions. The governing constraint is mine, do not write code I will not understand, so a feature is not done when it works; it is done when I can defend it. The workload I did not expect to hand over was authoring: the Motion Tiles bindings were built by Claude Code driving the Rive editor over MCP, provisioning view models across dozens of tile files. When the instructions file outgrew what one file should hold, the specialist parts moved into skills.
• Documentation discipline: Twenty-plus decision records, each with alternatives and reasoning. A per-principle doc for all eighteen. An honest chronology of the worst debugging stretch, kept because the mistakes instruct. The project's own instructions file enforces the writing voice, the architecture rules, and the verification standard that caught the production crash.

• Live tool: cadence.davidpreli.com
• Full case study: Cadence: Case Study
• Portfolio: davidpreli.com