Algorithms · React · TypeScript · 2025
O(patience)
A sorting visualiser built for people who already know the pseudocode and still can't feel why quicksort degrades.
5
algorithms, step-for-step
~60fps
on 200-element arrays
1
embeddable /embed widget
The problem
Every sorting visualiser online animates bars and stops there. You watch it, you nod, you learn nothing about comparison counts, pointer movement or why one algorithm collapses on nearly-sorted input.
Constraints
- Animation must stay smooth while the array grows — no dropped frames at 200 elements.
- The visualisation has to be inspectable: pause, step, and read the exact state.
- It should be usable inside someone else's lecture slide or blog.
What I built
- A generator-based engine: each algorithm yields discrete steps, so playback, stepping and export all read from one source of truth.
- Pointer flags (i, j, pivot, low/high) rendered on the bars, plus live comparison and swap counters.
- Sound mode mapping array values to pitch — you hear a nearly-sorted array as a rising scale.
- Race Mode running algorithms side by side with a live leaderboard, and Quiz Mode that pauses and asks what happens next.
- An /embed route that renders just the canvas for iframing.
Trade-offs
Generators over recursive animation callbacks
Decouples the algorithm from the renderer. Speed control, stepping backwards and exporting steps became free instead of three separate implementations.
Transform-only animation
Layout-affecting properties tanked the frame rate past ~80 bars; transforms stay on the compositor.
No virtualization
Capping the array size kept the code readable. Beyond a few hundred bars the visual stops teaching anything anyway.
Outcome
- Five algorithms, all steppable and comparable in the same run.
- Holds ~60fps at 200 elements on a mid-range laptop.
- Made complexity intuitive for me in a way the textbook chapter never did.
Stack
ReactTypeScriptWeb Audio APIFramer Motion
Want the long version?
Happy to walk through the decisions live.