Bubble Sort Animation

1. Unzip bubble-sort-animation-vanilla.zip. Copy bubble-sort-animation.css and bubble-sort-animation.js next to your page (or into your site's assets folder).

2. In your page's <head>, link the stylesheet and the script once:

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

3. Wherever you want an animation, add an empty element with data-bubble-sort-animation:

   <!-- the video's input: 5 2 8 1 7 3 6 4 -->
   <div class="bubble-sort-animation" data-bubble-sort-animation></div>
   
   <!-- your own numbers, no input row and no code: small enough for a slide -->
   <div
     class="bubble-sort-animation"
     data-bubble-sort-animation
     data-bubble-sort-animation-values="9 4 7 1 8"
     data-bubble-sort-animation-inputs="false"
     data-bubble-sort-animation-code="false"
   ></div>
   

4. Open the page. It plays on its own; click it once to give it the keyboard, then Space plays or pauses, ← / → step, Home starts again.

Options are data attributes, all starting with data-bubble-sort-animation-:

Attribute	Default	What it does
-values	the preset's	Your own numbers, separated by spaces or commas: whole numbers from -999 to 999, up to 24
-preset	video	video (5 2 8 1 7 3 6 4), random, nearly-sorted or reversed; ignored when -values is given
-size	8	How many bars random, nearly-sorted and reversed have (2–24)
-seed	7	Which seeded 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 presets and the box for your own numbers

For a pass that stops early, try data-bubble-sort-animation-preset="nearly-sorted": one pass puts the pairs right and the next pass swaps nothing.

Elements added after the page loads (a tab, a modal, a client-side route): BubbleSortAnimation.init(container); it returns a function that undoes it. For full control, BubbleSortAnimation.createBubbleSortAnimation(element, options) returns a handle with setValues, setPreset, shuffle, player (play, pause, stepForward, stepBack, seek, reset, setSpeed, setLoop) and destroy.

• Slides built from HTML (reveal.js, Slidev, Marp's HTML export): put the <link> and <script> in the deck's head and the <div> on the slide. Use -inputs="false", -code="false" and -autoplay="false" for a clean slide, then press Space when you reach it.
• A blog or a static site (Hugo, Jekyll, Astro, Eleventy, WordPress's Custom HTML block): upload the two files, add the <link> and <script> to the page template (or once per post) and paste the <div> into the post. Several animations on one page are fine.
• An LMS or any page that lets you add HTML (Moodle, Canvas, a Notion-style embed that accepts an iframe): host the two files plus a small page that contains the <div>, and embed that page with an <iframe>.
• PowerPoint or Keynote: open the page, pick a speed and record your screen, or take a screenshot of the frame you want; use -autoplay="false" and step with →.

It sorts the same input as the video, so you can play the video first and then let your students step through it. The code panel is the JavaScript listing on the algorithm page, so the two always agree.

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

import { BubbleSortAnimation } from "./BubbleSortAnimation";

<BubbleSortAnimation />
<BubbleSortAnimation values={[9, 4, 7, 1, 8]} inputs={false} code={false} autoplay={false} />
<BubbleSortAnimation preset="nearly-sorted" size={10} seed={3} loop onFrame={(frame) => console.log(frame.caption)} />

The props are the options above, camel-cased (values, preset, size, seed, speed, autoplay, loop, code, inputs), plus onFrame(frame, index), called with every frame drawn. Changing a prop starts the sort 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 .bubble-sort-animation (or a class of your own):

Property	What it changes
--bubble-bar, --bubble-compare, --bubble-swap, --bubble-sorted	The bars still to sort (violet), the pair being compared (cyan), the swap (pink) and the sorted tail (green)
--bubble-flag	The swapped switch when it is on, and the number colour in the code
--bubble-bg, --bubble-surface, --bubble-surface-strong, --bubble-blur	The background and the frosted glass
--bubble-edge, --bubble-shadow, --bubble-code-bg	Borders, shadows, the code panel
--bubble-text, --bubble-muted, --bubble-on-accent, --bubble-ring	Text, secondary text, text on the coloured tags and buttons, focus ring
--bubble-font, --bubble-mono	The fonts for words and for code and numbers
--bubble-radius, --bubble-bar-radius	Corners of the player and of the bars
--bubble-duration, --bubble-ease	How fast and how softly bars cross and slide

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.

• Nothing appears: the element needs data-bubble-sort-animation, and both the CSS and the script must load (check the paths in your browser's network tab).
• Space or the arrows do nothing: click the animation once first; the shortcuts work while it has focus, and never while you type in the numbers box.
• My numbers changed: values are rounded to whole numbers, kept between -999 and 999, and cut at 24. The box shows what was sorted.