The problem
Algorithm visualizers are good at showing motion but often make the algorithm, playback timing, and drawing code one inseparable system. That makes controls such as step-back and scrubbing awkward, and it makes a second output, like a rendered lesson video, expensive to add later.
Algorithms don’t animate
The visualizer is organized around one rule: algorithms return Step[]. The core is pure TypeScript with no React dependency; each operation produces a deterministic sequence of states and narration. Renderers turn a state into SVG without owning time, while the player decides when and how to move through the sequence.
That seam makes pause, single-step, rewind, and timeline scrubbing consequences of the data model instead of special animation features. Stable element identities let values visibly move between positions rather than disappear and cross-fade, preserving the learner’s mental map.
One engine, more than one consumer
The live player combines playback controls with narration, synchronized source code, and variable tracking. Because timing is outside the algorithm, the same steps can later feed a video-export pipeline without rewriting the teaching logic.
Current status
The project is intentionally trading breadth for craft. Its walking skeleton follows one array structure end to end while the architecture is proven; that core is deployed now, and the array visualizer running in the window beside this page is the project's own code, not a retelling of it. More structures remain in progress. The case study is therefore about the contract and the learning behind it, not a claim that the full catalog is finished.