Vanilla JS · Glassmorphism · 2025
Binary Search Visualizer
The smallest thing I could build that makes O(log n) obvious in one look.
0
dependencies / frameworks
log₂n
steps shown live
<50KB
shipped to the browser
The problem
Binary search is the first algorithm where beginners memorise the code without believing the halving. The gap is that nobody ever sees the search window shrink.
Constraints
- No build step, no framework — it had to be one HTML file a classmate could open offline.
- Every step must be legible: which index is low, which is mid, which is high.
What I built
- Real-time low / mid / high markers that slide as the window collapses, with discarded halves visibly dimming.
- A step counter next to the theoretical log₂n bound, so the two numbers meet.
- Per-step audio feedback so the halving is audible as well as visible.
- A glass UI built with plain CSS — backdrop filters, no component library.
Trade-offs
Vanilla JS instead of React
The whole app is one list and three markers. A framework would have been more code than the algorithm.
CSS transitions instead of an animation library
Keeps the payload tiny and the file self-contained.
Outcome
- Loads instantly, works offline, under 50KB total.
- Used it to explain binary search to juniors — the halving lands in about ten seconds.
Stack
JavaScript (ES modules)CSSNetlify
Want the long version?
Happy to walk through the decisions live.