Sorting Visualiser
Watch bubble sort crawl while quicksort finishes, side by side.
IntermediateWeb appEducation10–20hAI-buildable 4/5no setup
Animate several sorting algorithms over the same array, highlighting comparisons and swaps as they happen, with speed control and a step-through mode. Racing two algorithms side by side on identical data makes complexity intuitive in a way a table of Big-O never does.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Bars represent array values and animate as the sort proceeds
- At least four algorithms are implemented
- Comparisons and swaps highlight distinctly
- Speed is adjustable live, including while running
- Step forward and back through the algorithm manually
- Two algorithms can race side by side on identical data
- Comparison and swap counts are displayed
The interesting part
- Turning recursive algorithms into steppable state machines
- Stepping backwards, which means recording history rather than just running
- Keeping animation smooth at high speed without dropping steps
Once it works
- Add an audio tone mapped to value
- Add adversarial input presets like nearly-sorted and reversed
- Show the call stack for the recursive algorithms
Suggested stack
reacttypescripttailwindframer-motion