Union-Find Animation

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

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

<div class="union-find-animation" data-union-find-animation></div>

<div
  class="union-find-animation"
  data-union-find-animation
  data-union-find-animation-scenario="worst-case"
  data-union-find-animation-compression="false"
></div>

<div
  class="union-find-animation"
  data-union-find-animation
  data-union-find-animation-operations="union 0 1; union 2 3; union 1 3; find 3"
  data-union-find-animation-elements="6"
></div>

Options as data attributes, all starting with data-union-find-animation-:

Attribute	Default	What it does
-scenario	friend-circles	friend-circles, network-links or worst-case: the list of operations to run
-operations	the scenario's	Your own list: union a b, find a and connected a b, separated by ;, , or new lines (up to 24)
-elements	the scenario's	How many elements the forest starts with (2–16); made bigger when your list names more
-seed	7	Which list the scenario builds: the same seed always gives the same one
-compression	true	false runs find without the second pass of path compression
-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 summary
-code	true	false hides the code panel
-inputs	true	false hides the rows of inputs (scenario, operations, elements, compression)

Elements added after the page loads: UnionFindAnimation.init(container); it returns a function that undoes it. For full control, UnionFindAnimation.createUnionFindAnimation(element, options) returns a handle with setScenario, setOperations(text) (it returns false and says why on the page when the list cannot be read), setElements, setCompression, shuffle, player (play, pause, seek…), trace() and destroy.

Copy UnionFindAnimation.tsx, union-find-animation.css and the core folder into your project:

import { UnionFindAnimation } from "./UnionFindAnimation";

<UnionFindAnimation />
<UnionFindAnimation scenario="worst-case" compression={false} autoplay={false} />
<UnionFindAnimation operations="union 0 1; union 2 3; find 3" elements={6} loop inputs={false} onFrame={(frame) => console.log(frame.caption)} />

The props are the options above (scenario, operations, elements, seed, compression, speed, autoplay, loop, code, inputs), plus onFrame(frame, index), called with every frame drawn. Changing a prop starts the list 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 .union-find-animation (or a class of your own):

Property	What it changes
--ufind-tone-0 … --ufind-tone-7	The eight group colours (cyan, violet, pink, amber, mint, sky, orange, lime); a group takes the colour of its root's number, so the colour stays with the root as the group grows
--ufind-lit, --ufind-hop	The path a find walks, and a node that was just re-pointed
--ufind-orb	The ink every orb is mixed with
--ufind-bg, --ufind-surface, --ufind-surface-strong, --ufind-blur	The background and the frosted glass
--ufind-edge, --ufind-shadow, --ufind-code-bg	Borders, shadows, the code panel
--ufind-text, --ufind-muted, --ufind-on-accent, --ufind-error, --ufind-ring	Text, secondary text, text on the coloured chips and buttons, the error message, focus ring
--ufind-font, --ufind-mono	The fonts for words and for code and numbers
--ufind-radius	Corners of the player
--ufind-duration, --ufind-ease	How fast and how softly orbs glide and fly

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.