Quick Sort Animation

Link the stylesheet and the script once, then mark an empty element with data-quick-sort-animation. It builds the whole player inside it:

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

<div data-quick-sort-animation data-quick-sort-size="16" data-quick-sort-loop></div>

<!-- your own values, without the extra panels: good for a slide -->
<div
  data-quick-sort-animation
  data-quick-sort-values="7, 2, 9, 4, 3, 8, 1"
  data-quick-sort-inputs="false"
  data-quick-sort-panels="false"
></div>

Options as data attributes (a boolean is on when present, off when it says "false"):

Attribute	Default	What it does
data-quick-sort-values	—	Your numbers, separated by commas or spaces (48 at most); replaces the generated array
data-quick-sort-size	16	Bars in a generated array, 2 to 48
data-quick-sort-scenario	random	random, sorted, reversed or duplicates
data-quick-sort-seed	7	Which generated array: the same seed always draws the same one
data-quick-sort-speed	1	0.25 to 4
data-quick-sort-autoplay	on	Starts playing on load (never with prefers-reduced-motion)
data-quick-sort-loop	off	Starts over after the last step
data-quick-sort-inputs	on	The size and input pickers and the "New input" button
data-quick-sort-panels	on	The code and call-stack panels

Players added after the page loads: QuickSortAnimation.init(container) — it returns a function that undoes it. To drive one from your own code (a slide clicker, say), build it yourself:

const player = QuickSortAnimation.create(element, { values: [5, 1, 4, 2, 3], autoplay: false });
player.stepForward();
player.seek(20);
player.setValues([9, 8, 7]);
player.destroy(); // the element is given back as it was

The handle also has play, pause, stepBack, reset and frameCount.

With focus anywhere in the player, Space plays or pauses, ← / → step and Home goes back to the start.

Copy QuickSortAnimation.tsx, quick-sort-animation.css and the core folder into your project:

import { QuickSortAnimation } from "./QuickSortAnimation";

<QuickSortAnimation size={24} scenario="reversed" loop />
<QuickSortAnimation values={[7, 2, 9, 4, 3, 8, 1]} inputs={false} panels={false} />

The props are the options above: values, size, scenario, seed, speed, autoplay, loop, inputs, panels, plus any <div> prop (className, id, aria-label…). A new array with the same numbers does not restart the player. React 18 or 19.

The component 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 .quick-sort-animation (or a class of your own):

Property	What it changes
--quicksort-surface, --quicksort-panel, --quicksort-stage, --quicksort-border	The glass, the panels, the stage and their edges
--quicksort-aurora-1, --quicksort-aurora-2, --quicksort-aurora-3	The coloured glows behind it
--quicksort-text, --quicksort-muted	Text and secondary text
--quicksort-bar, --quicksort-bar-2	A bar's gradient, top to bottom
--quicksort-pivot, --quicksort-i, --quicksort-j, --quicksort-swap	The pivot (and median-of-three), the two pointers, a swap
--quicksort-settled, --quicksort-settled-2	Bars in their final place
--quicksort-range, --quicksort-on-mark	The range bracket, and text on coloured tags
--quicksort-accent, --quicksort-accent-2, --quicksort-ring	Play button, scrubber, active code line, focus ring
--quicksort-radius, --quicksort-bar-radius	Corners
--quicksort-font, --quicksort-mono	Text and code fonts
--quicksort-stage-height	How tall the bars may grow
--quicksort-duration, --quicksort-ease	How long a bar takes to slide at 1× (it scales with the speed)

Colours use light-dark(): they follow color-scheme on your page.