Binary Search Animation

Link the stylesheet and the script once, then add an empty element with data-binary-search-animation wherever you want a player:

<link rel="stylesheet" href="binary-search-animation.css" />
<script src="binary-search-animation.js" defer></script>

<div class="binary-search-animation" data-binary-search-animation></div>

<div
  class="binary-search-animation"
  data-binary-search-animation
  data-binary-search-animation-mode="lower-bound"
  data-binary-search-animation-values="2 2 2 3 3 5 5"
  data-binary-search-animation-target="3"
></div>

Options as data attributes, all starting with data-binary-search-animation-:

Attribute	Default	What it does
-mode	binary-search	binary-search or lower-bound
-values	random	Your own numbers, separated by spaces or commas (sorted for you)
-target	picked from the array	The value to search for
-size	15	How many values a random array has (1–40)
-seed	7	Which random array: the same seed always gives the same one
-speed	1	0.25 to 4
-autoplay	true	Plays on its own once loaded (never with reduced motion)
-loop	false	Starts again after a pause on the result
-code	true	false hides the code panel
-inputs	true	false hides the row of inputs (function, target, size, new array)

Elements added after the page loads: BinarySearchAnimation.init(container); it returns a function that undoes it. For full control, BinarySearchAnimation.createBinarySearchAnimation(element, options) returns a handle with setTarget, setMode, setValues, shuffle, player (play, pause, seek…) and destroy.

Copy BinarySearchAnimation.tsx, binary-search-animation.css and the core folder into your project:

import { BinarySearchAnimation } from "./BinarySearchAnimation";

<BinarySearchAnimation />
<BinarySearchAnimation mode="lower-bound" values={[2, 2, 2, 3, 3, 5, 5]} target={3} autoplay={false} />
<BinarySearchAnimation seed={42} size={31} loop inputs={false} onFrame={(frame) => console.log(frame.caption)} />

The props are the options above, camel-cased (mode, values, target, size, seed, speed, autoplay, loop, code, inputs), plus onFrame(frame, index), called with every frame drawn. Changing a prop starts the search again. Every other prop goes to the root <div> (className, id, aria-*…). React 18 or 19.

The file starts with "use client", so use it from any page or server component. With the App Router nothing else is needed. With the Pages Router, move the CSS import into pages/_app.

Set these on .binary-search-animation (or a class of your own):

Property	What it changes
--bsearch-lo, --bsearch-mid, --bsearch-hi	The three pointers (cyan, violet, pink), and the search-space bar between them
--bsearch-found, --bsearch-insert	The match's glow, and the seam where a missing value would go
--bsearch-bg, --bsearch-surface, --bsearch-surface-strong, --bsearch-blur	The background and the frosted glass
--bsearch-edge, --bsearch-shadow, --bsearch-code-bg	Borders, shadows, the code panel
--bsearch-text, --bsearch-muted, --bsearch-on-accent, --bsearch-ring	Text, secondary text, text on the coloured pointers and buttons, focus ring
--bsearch-font, --bsearch-mono	The fonts for words and for code and numbers
--bsearch-radius, --bsearch-box-radius	Corners of the player and of the boxes
--bsearch-duration, --bsearch-ease	How fast and how softly pointers glide and halves dim

Colours use light-dark(): they follow color-scheme on your page. With prefers-reduced-motion, nothing plays on its own and frames change instantly; every control still works.