This was one of my earlier projects — I was learning sorting algorithms and wanted a way to actually see what each one does differently. Reading pseudocode for Quick Sort vs Heap Sort is one thing, but watching them run side by side on the same array makes the differences obvious in a way that code alone doesn't.
How it works
Five algorithms — Bubble Sort, Selection Sort, Insertion Sort, Quick Sort, and Heap Sort — each implemented as an async function that pauses between steps so the animation can keep up. Each array element is a vertical bar where height equals value. Swaps use CSS transforms for smooth 250ms transitions, with a temp DOM node and replaceWith to exchange elements while the transforms handle the visual movement.
Colors indicate what's happening at each step: purple for unsorted, dark purple for the elements currently being compared, green for elements that have reached their final position. Each algorithm also has its own accent colors for special elements like the pivot in Quick Sort or the current minimum in Selection Sort.
The interface
Everything is keyboard-driven — press B for Bubble Sort, Q for Quick Sort, N for a new random array. A slide-out drawer shows syntax-highlighted source code for the selected algorithm alongside a color legend and shortcut reference. The shortcuts work even when the drawer is open, so you can swap between algorithms while reading through the code.
Limitations
The array size is fixed at 20 elements and animation speed is hardcoded — both could be configurable but weren't priorities at the time. It also needs a minimum viewport of 876x624px (shows a warning on smaller screens). Only one sort runs at a time — you have to stop the current one before starting another.