algo.
Animated algorithm walkthroughs — a 2021 sieve demo grown into a small collection.
- Vite 7
- TypeScript
- PrismJS
- Vitest
- Vercel
Overview
An animated-algorithms site at algo.mtnsounds.com. Each algorithm gets its own visualization, a plain-language narration line, and the real code highlighted line by line as it runs — the Sieve of Eratosthenes first, binary search second, with more to come.
It began as a 2021 sieve demo. The 2026 rebuild replaced the original's fragile timers with pure step generators behind a cancellable player, and gave the site two full themes with their own motion personalities: Signal, a dark lab of LED tiles and glow, and Notebook, warm graph paper marked up in ink and red pencil.
Highlights
Runs that can't go stale
Algorithms are pure functions that emit a list of steps; an epoch-guarded player applies them to the page. Pause, reset, and re-run just swap the list — a late timer from an old run can never touch the DOM, which was the failure mode of the 2021 version.
Two themes, drawn differently
Every color, texture, and motion value is a token, so Signal and Notebook share one structure with different personalities. Notebook draws real SVG strike lines and pencil circles with several hand-drawn path variants; Signal speaks in glow and pulse. Switching mid-run is safe, and the choice persists without a flash on reload.
Each algorithm owns its visual
A registry carries an algorithm's step type, narration, pacing, code listing, controls, and view together. The sieve strikes numbers in a grid; binary search collapses a strip of bars under a target line, discarding half the window with every probe. Each gets its own accent color, so the collection reads as a set.
A closer look
