@cueplusplus/ui 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @cueplusplus/ui
 
+## 0.20.0
+
+### Minor Changes
+
+- 487642c: Three motion pieces and a pairing, taken from cueplusplus.com.
+
+  - **`TextScramble`** cycles phrases and scrambles each one in. It has `matrix` and `flap` effects, and runs to the site's timings. It pauses off screen and in a hidden tab, on a whole phrase.
+  - **`Reveal`** fades its `children` up once, the first time they scroll into view. It can stagger the items you mark with `data-reveal-item`. Anything wholly on screen is revealed even if it never crosses the entry line, and content stays revealed when a prop changes.
+  - **`useFrameClock`** is a frame counter for loop illustrations, the equivalent of Remotion's `useCurrentFrame`. Time spent in a hidden tab is not counted.
+  - **The `jetbrains-mono` pairing** sets everything in JetBrains Mono: sans, display and mono.
+
+  All three components hold still in a thumbnail. Under reduced motion, `TextScramble` shows each phrase whole, `Reveal` shows its content in place, and `useFrameClock` stays on a fixed frame.
+
+  A theme's manifest reserves the new `jetbrains-mono` pairing's name, and may override its stacks like any base pairing's.
+
+- 487642c: `ParticleLogo` draws a mark as a field of particles. The particles wiggle, take on colour in waves that sweep across the mark, and scatter away from the pointer. It is cueplusplus.com's hero logo, ported to plain WebGL2 with the site's shaders unchanged.
+
+  It adds no dependency: there is no three.js.
+
+  It shows the source image, standing still, in four cases:
+  - in a thumbnail;
+  - for a reader who prefers reduced motion;
+  - where WebGL2 is not available;
+  - while its WebGL context is lost, until the browser restores it.
+
+  The server and the first client render agree, whatever the reader's GPU, and an unmounted logo releases its context at once rather than waiting for collection.
+
+- 33c4fa8: A style set can give text-entry fields their own corner. The new `style-field-radius` name falls back to the control radius, so a set that doesn't name it draws exactly what it drew before. Prism names it `12px` and Ledger `8px`. Both keep their pill buttons and chips, but their inputs, selects, steppers, textareas, drop zones, colour areas, delegation cards, data panes and message-bubble tails are no longer pills. Prism's surfaces go from `24px` to `16px`. `DataTable`'s toolbar, pager and caption are now inset to match the table's cells, so a filter field never sits in a rounded panel's corner, in any Look.
+
+  The studio's generated tables carry the new catalogue identity, so a scene validates against the vocabulary that now includes the field's corner.
+
+### Patch Changes
+
+- 487642c: A caller's `className` now overrides a component's control height. `cn` knew the bridge's radius rungs but not its spacing names, so `h-control-md`, `size-icon-sm`, `min-h-control-lg`, `h-chip` and their kin stayed beside a caller's `h-auto` or `size-8`, and the bridge utility won by stylesheet order: `<Button className="h-auto py-4">` drew at the control height. They are now members of `tailwind-merge`'s spacing scale, so the last class passed wins, as it does everywhere else.
+- Updated dependencies [487642c]
+- Updated dependencies [33c4fa8]
+  - @cueplusplus/tokens@0.20.0
+  - @cueplusplus/theme-base@1.3.0
+
 ## 0.19.0
 
 ### Minor Changes

package/dist/brand/index.d.ts

@@ -5,6 +5,8 @@ import { Plussie, PlussieExpression, PlussieProps } from "./plussie.js";
 import { GlossObject, GlossObjectProps } from "./gloss-object.js";
 import { Halftone, HalftoneProps } from "./halftone.js";
 import { Motif, MotifProps, MotifVariant } from "./motif.js";
+import { ParticleLogo, ParticleLogoProps } from "./particle-logo.js";
 import { ParticleMark, ParticleMarkProps } from "./particle-mark.js";
 import { Ribbon, RibbonProps } from "./ribbon.js";
-export { type BrandAssetProps, type BrandSize, type BrandTone, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, GlossObject, type GlossObjectProps, Halftone, type HalftoneProps, Motif, type MotifProps, type MotifVariant, ParticleMark, type ParticleMarkProps, Plussie, type PlussieExpression, type PlussieProps, Ribbon, type RibbonProps };
+import { TextScramble, TextScrambleProps } from "./text-scramble.js";
+export { type BrandAssetProps, type BrandSize, type BrandTone, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, GlossObject, type GlossObjectProps, Halftone, type HalftoneProps, Motif, type MotifProps, type MotifVariant, ParticleLogo, type ParticleLogoProps, ParticleMark, type ParticleMarkProps, Plussie, type PlussieExpression, type PlussieProps, Ribbon, type RibbonProps, TextScramble, type TextScrambleProps };

package/dist/brand/particle-logo.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+//#region src/brand/particle-logo.d.ts
+interface ParticleLogoProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The mark to draw in particles: an image URL, PNG or SVG, light on transparent or on black. */
+  src: string;
+  /**
+   * `logo` (the default): the mark is 26% of the canvas's height, as cueplusplus.com's hero
+   * draws it. `contain`: the mark fits inside the canvas, scaled by `containFill`.
+   */
+  fit?: "logo" | "contain";
+  /** How much of the canvas a `contain` mark fills. Defaults to `0.85`. */
+  containFill?: number;
+  /** Each particle's size. Defaults to `0.5`. */
+  particleSize?: number;
+  /** How far particles scatter from their pixel. Defaults to `2`. */
+  randomSpread?: number;
+  /** One particle every this many pixels of the 600px-wide raster. Defaults to `36`. */
+  skipRatio?: number;
+  /**
+   * The colours a wave sweeps the mark into, as hex. Defaults to the Look's own accent and
+   * signal colours, read off the element; cueplusplus.com passes its eight. A palette with
+   * nothing different to offer falls back to the default.
+   */
+  waveColors?: readonly string[];
+}
+/**
+ * A mark drawn as a field of particles that wiggle, flip colour in sweeping waves and scatter
+ * from the pointer — cueplusplus.com's hero logo, ported from three.js to raw WebGL2 with its
+ * shaders unchanged (spec 2026-10-04-cue-site-verbatim §4.1).
+ *
+ * The camera, the mesh scale, the textures, the blending and the wave and touch timings are the
+ * source's, copied: a 50° camera at z = 300, the mark 26% of the canvas's height, a wave every
+ * 4–8s that sweeps in 2s and fades to white over 3s, a pointer trail that ages over 80 rendered
+ * updates. It renders at about 30fps and costs nothing off screen or in a hidden tab.
+ *
+ * **Without WebGL2, or held still** (a thumbnail, or a reader who prefers reduced motion), it
+ * draws the source image itself, still, at the same fit — a picture of the mark rather than of
+ * the particles, which the docs say. A lost context draws the still until it is restored.
+ *
+ * Decorative: the canvas is hidden from assistive technology; name the mark on the element
+ * around it.
+ *
+ * @example
+ * <div role="img" aria-label="CUE++" className="h-[460px]">
+ *   <ParticleLogo src="/logo.png" />
+ * </div>
+ */
+declare const ParticleLogo: React.ForwardRefExoticComponent<ParticleLogoProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ParticleLogo, ParticleLogoProps };

package/dist/brand/particle-logo.js

@@ -0,0 +1,437 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
+import { FAR, NEAR, TouchTrail, logoScale, modelView, normaliseColour, perspective, pickWaveColor, rasterise, sampleParticles, srgbToLinear, viewportAt } from "../lib/particle-field.js";
+import { FRAGMENT_SHADER, VERTEX_SHADER } from "../lib/particle-field-shaders.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/particle-logo.tsx
+/**
+* The roles a wave sweeps through when no `waveColors` are given: the Look's own accent and
+* signal colours, read off the element at run time, so the waves are the theme's.
+*/
+const ROLE_COLOURS = [
+	"--cue-accent",
+	"--cue-info",
+	"--cue-busy",
+	"--cue-ok",
+	"--cue-warn",
+	"--cue-danger",
+	"--cue-stream",
+	"--cue-fg"
+];
+/** The Look's role colours as linear-light triples, read through the element's own cascade. */
+function rolePalette(element) {
+	const style = getComputedStyle(element);
+	return ROLE_COLOURS.map((name) => normaliseColour(style.getPropertyValue(name).trim())).filter((hex) => hex !== null).map(srgbToLinear);
+}
+function compile(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (shader === null) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		gl.deleteShader(shader);
+		return null;
+	}
+	return shader;
+}
+function build(gl, raster, sampled) {
+	const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+	const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+	if (vertex === null || fragment === null) return null;
+	const program = gl.createProgram();
+	gl.attachShader(program, vertex);
+	gl.attachShader(program, fragment);
+	gl.linkProgram(program);
+	gl.deleteShader(vertex);
+	gl.deleteShader(fragment);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		gl.deleteProgram(program);
+		return null;
+	}
+	const vao = gl.createVertexArray();
+	gl.bindVertexArray(vao);
+	const buffers = [];
+	const attribute = (name, data, size, type, divisor) => {
+		const location = gl.getAttribLocation(program, name);
+		const buffer = gl.createBuffer();
+		buffers.push(buffer);
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+		if (location < 0) return;
+		gl.enableVertexAttribArray(location);
+		gl.vertexAttribPointer(location, size, type, false, 0, 0);
+		gl.vertexAttribDivisor(location, divisor);
+	};
+	attribute("position", new Float32Array([
+		-.5,
+		.5,
+		0,
+		.5,
+		.5,
+		0,
+		-.5,
+		-.5,
+		0,
+		.5,
+		-.5,
+		0
+	]), 3, gl.FLOAT, 0);
+	attribute("uv", new Float32Array([
+		0,
+		0,
+		1,
+		0,
+		0,
+		1,
+		1,
+		1
+	]), 2, gl.FLOAT, 0);
+	attribute("pindex", sampled.indices, 1, gl.UNSIGNED_SHORT, 1);
+	attribute("offset", sampled.offsets, 3, gl.FLOAT, 1);
+	attribute("angle", sampled.angles, 1, gl.FLOAT, 1);
+	const elements = gl.createBuffer();
+	buffers.push(elements);
+	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elements);
+	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([
+		0,
+		2,
+		1,
+		2,
+		3,
+		1
+	]), gl.STATIC_DRAW);
+	gl.bindVertexArray(null);
+	const image = gl.createTexture();
+	gl.bindTexture(gl.TEXTURE_2D, image);
+	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, raster.width, raster.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(raster.data.buffer));
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	const touch = gl.createTexture();
+	gl.bindTexture(gl.TEXTURE_2D, touch);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, TouchTrail.SIZE, TouchTrail.SIZE, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	const locations = /* @__PURE__ */ new Map();
+	const uniform = (name) => {
+		if (!locations.has(name)) locations.set(name, gl.getUniformLocation(program, name));
+		return locations.get(name);
+	};
+	return {
+		program,
+		vao,
+		buffers,
+		image,
+		touch,
+		count: sampled.count,
+		uniform
+	};
+}
+function release(gl, scene) {
+	for (const buffer of scene.buffers) gl.deleteBuffer(buffer);
+	gl.deleteVertexArray(scene.vao);
+	gl.deleteTexture(scene.image);
+	gl.deleteTexture(scene.touch);
+	gl.deleteProgram(scene.program);
+}
+/**
+* A mark drawn as a field of particles that wiggle, flip colour in sweeping waves and scatter
+* from the pointer — cueplusplus.com's hero logo, ported from three.js to raw WebGL2 with its
+* shaders unchanged (spec 2026-10-04-cue-site-verbatim §4.1).
+*
+* The camera, the mesh scale, the textures, the blending and the wave and touch timings are the
+* source's, copied: a 50° camera at z = 300, the mark 26% of the canvas's height, a wave every
+* 4–8s that sweeps in 2s and fades to white over 3s, a pointer trail that ages over 80 rendered
+* updates. It renders at about 30fps and costs nothing off screen or in a hidden tab.
+*
+* **Without WebGL2, or held still** (a thumbnail, or a reader who prefers reduced motion), it
+* draws the source image itself, still, at the same fit — a picture of the mark rather than of
+* the particles, which the docs say. A lost context draws the still until it is restored.
+*
+* Decorative: the canvas is hidden from assistive technology; name the mark on the element
+* around it.
+*
+* @example
+* <div role="img" aria-label="CUE++" className="h-[460px]">
+*   <ParticleLogo src="/logo.png" />
+* </div>
+*/
+const ParticleLogo = React.forwardRef(function ParticleLogo({ src, fit = "logo", containFill = .85, particleSize = .5, randomSpread = 2, skipRatio = 36, waveColors, className, style, ...props }, ref) {
+	const held = useStill();
+	const reduced = usePrefersReducedMotion();
+	const still = held || reduced;
+	const canvas = React.useRef(null);
+	const [failed, setFailed] = React.useState(false);
+	const [lost, setLost] = React.useState(false);
+	const paletteKey = (waveColors ?? []).join(",");
+	const drawStill = still || failed;
+	React.useEffect(() => {
+		if (drawStill) return;
+		const element = canvas.current;
+		if (element === null) return;
+		const gl = typeof WebGL2RenderingContext === "undefined" ? null : element.getContext("webgl2", {
+			antialias: true,
+			alpha: true,
+			premultipliedAlpha: true
+		});
+		if (gl === null) {
+			setFailed(true);
+			return;
+		}
+		const given = paletteKey === "" ? [] : paletteKey.split(",").map(srgbToLinear);
+		const varied = (colours) => colours.some((colour) => colour.join() !== colours[0].join());
+		let palette = varied(given) ? given : rolePalette(element);
+		if (palette.length === 0) palette = [[
+			1,
+			1,
+			1
+		]];
+		let disposed = false;
+		let contextLost = gl.isContextLost();
+		setLost(contextLost);
+		let scene = null;
+		let raster = null;
+		let raf = 0;
+		let visible = true;
+		const trail = new TouchTrail();
+		const touchCanvas = document.createElement("canvas");
+		touchCanvas.width = TouchTrail.SIZE;
+		touchCanvas.height = TouchTrail.SIZE;
+		const touchContext = touchCanvas.getContext("2d");
+		const pointer = {
+			x: 0,
+			y: 0
+		};
+		const onPointer = (event) => {
+			const box = element.getBoundingClientRect();
+			pointer.x = (event.clientX - box.left) / box.width * 2 - 1;
+			pointer.y = -((event.clientY - box.top) / box.height) * 2 + 1;
+		};
+		element.addEventListener("pointermove", onPointer);
+		const state = {
+			time: 0,
+			uTime: 0,
+			waving: false,
+			waveStart: 0,
+			waveDuration: 2,
+			nextWaveDelay: 5,
+			lastWaveEnd: -3,
+			direction: [1, 0],
+			position: 0,
+			waveTime: 0,
+			colour: palette[Math.floor(Math.random() * palette.length)],
+			previous: [
+				1,
+				1,
+				1
+			],
+			fade: 1
+		};
+		const resize = () => {
+			const dpr = Math.min(Math.max(window.devicePixelRatio || 1, 1), 2);
+			const width = Math.max(1, Math.round(element.clientWidth * dpr));
+			const height = Math.max(1, Math.round(element.clientHeight * dpr));
+			if (element.width !== width || element.height !== height) {
+				element.width = width;
+				element.height = height;
+			}
+			gl.viewport(0, 0, width, height);
+			return element.clientWidth / Math.max(1, element.clientHeight);
+		};
+		const frame = (delta) => {
+			if (scene === null || raster === null) return;
+			const s = state;
+			s.uTime += delta;
+			if (!s.waving) {
+				if (s.time - s.lastWaveEnd > s.nextWaveDelay) {
+					s.waving = true;
+					s.waveStart = s.time;
+					const angle = Math.random() * Math.PI * 2;
+					s.direction = [Math.cos(angle), Math.sin(angle)];
+					s.position = 0;
+					s.previous = [
+						s.colour[0] + (1 - s.colour[0]) * s.fade,
+						s.colour[1] + (1 - s.colour[1]) * s.fade,
+						s.colour[2] + (1 - s.colour[2]) * s.fade
+					];
+					s.colour = pickWaveColor(palette, s.colour);
+					s.nextWaveDelay = 4 + Math.random() * 4;
+				}
+			} else {
+				const progress = (s.time - s.waveStart) / s.waveDuration;
+				s.position = Math.min(progress * 1.3, 1.3);
+				s.waveTime = Math.min(progress, 1);
+				s.fade = 0;
+				if (progress >= 1) {
+					s.waving = false;
+					s.lastWaveEnd = s.time;
+					s.waveTime = 1;
+					s.position = 1.3;
+				}
+			}
+			if (!s.waving) s.fade = Math.min((s.time - s.lastWaveEnd) / 3, 1);
+			trail.age();
+			trail.draw(touchContext);
+			const aspect = resize();
+			const scale = logoScale(fit, aspect, raster.width, raster.height, containFill);
+			const viewport = viewportAt(aspect);
+			const x = pointer.x * viewport.width * .5 / (raster.width * scale) + .5;
+			const y = pointer.y * viewport.height * .5 / (raster.height * scale) + .5;
+			if (x >= -.2 && x <= 1.2 && y >= -.2 && y <= 1.2) trail.add(Math.max(0, Math.min(1, x)), Math.max(0, Math.min(1, y)));
+			gl.clearColor(0, 0, 0, 0);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+			gl.disable(gl.DEPTH_TEST);
+			gl.enable(gl.BLEND);
+			gl.blendEquation(gl.FUNC_ADD);
+			gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+			gl.useProgram(scene.program);
+			gl.bindVertexArray(scene.vao);
+			gl.uniformMatrix4fv(scene.uniform("projectionMatrix"), false, perspective(50, aspect, NEAR, FAR));
+			gl.uniformMatrix4fv(scene.uniform("modelViewMatrix"), false, modelView(scale));
+			gl.uniform1f(scene.uniform("uTime"), s.uTime);
+			gl.uniform1f(scene.uniform("uRandom"), randomSpread);
+			gl.uniform1f(scene.uniform("uDepth"), .8);
+			gl.uniform1f(scene.uniform("uSize"), particleSize);
+			gl.uniform2f(scene.uniform("uTextureSize"), raster.width, raster.height);
+			gl.uniform2f(scene.uniform("uWaveDirection"), s.direction[0], s.direction[1]);
+			gl.uniform1f(scene.uniform("uWavePosition"), s.position);
+			gl.uniform1f(scene.uniform("uWaveTime"), s.waveTime);
+			gl.uniform3f(scene.uniform("uWaveColor"), ...s.colour);
+			gl.uniform3f(scene.uniform("uPrevColor"), ...s.previous);
+			gl.uniform1f(scene.uniform("uColorFade"), s.fade);
+			gl.activeTexture(gl.TEXTURE0);
+			gl.bindTexture(gl.TEXTURE_2D, scene.image);
+			gl.uniform1i(scene.uniform("uTexture"), 0);
+			gl.activeTexture(gl.TEXTURE1);
+			gl.bindTexture(gl.TEXTURE_2D, scene.touch);
+			gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, touchCanvas);
+			gl.generateMipmap(gl.TEXTURE_2D);
+			gl.uniform1i(scene.uniform("uTouch"), 1);
+			gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, scene.count);
+			gl.bindVertexArray(null);
+		};
+		let last = performance.now();
+		let accumulated = 0;
+		const tick = () => {
+			const now = performance.now();
+			const delta = (now - last) / 1e3;
+			last = now;
+			if (!visible || document.hidden) {
+				raf = 0;
+				return;
+			}
+			raf = requestAnimationFrame(tick);
+			accumulated += delta;
+			state.time += delta;
+			if (accumulated < 1 / 30) return;
+			frame(accumulated);
+			accumulated = 0;
+		};
+		const start = () => {
+			if (raf !== 0 || disposed || contextLost || scene === null || !visible || document.hidden) return;
+			last = performance.now();
+			raf = requestAnimationFrame(tick);
+		};
+		const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(([entry]) => {
+			visible = entry?.isIntersecting ?? true;
+			start();
+		});
+		observer?.observe(element);
+		const onVisibility = () => start();
+		document.addEventListener("visibilitychange", onVisibility);
+		const buildScene = () => {
+			if (disposed || contextLost || raster === null) return;
+			scene = build(gl, raster, sampleParticles(raster, skipRatio));
+			if (scene === null) {
+				setFailed(true);
+				return;
+			}
+			start();
+		};
+		const onLost = (event) => {
+			event.preventDefault();
+			contextLost = true;
+			if (raf !== 0) cancelAnimationFrame(raf);
+			raf = 0;
+			scene = null;
+			setLost(true);
+		};
+		const onRestored = () => {
+			contextLost = false;
+			setLost(false);
+			buildScene();
+		};
+		element.addEventListener("webglcontextlost", onLost);
+		element.addEventListener("webglcontextrestored", onRestored);
+		const image = new Image();
+		image.crossOrigin = "anonymous";
+		image.onload = () => {
+			(image.decode?.() ?? Promise.resolve()).catch(() => {}).then(() => {
+				if (disposed) return;
+				raster = rasterise(image);
+				buildScene();
+			});
+		};
+		image.onerror = () => {
+			if (!disposed) setFailed(true);
+		};
+		image.src = src;
+		return () => {
+			disposed = true;
+			if (raf !== 0) cancelAnimationFrame(raf);
+			observer?.disconnect();
+			document.removeEventListener("visibilitychange", onVisibility);
+			element.removeEventListener("pointermove", onPointer);
+			element.removeEventListener("webglcontextlost", onLost);
+			element.removeEventListener("webglcontextrestored", onRestored);
+			if (scene !== null && !contextLost) release(gl, scene);
+			if (!element.isConnected) gl.getExtension("WEBGL_lose_context")?.loseContext();
+		};
+	}, [
+		drawStill,
+		src,
+		fit,
+		containFill,
+		particleSize,
+		randomSpread,
+		skipRatio,
+		paletteKey
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "particle-logo",
+		className: cn("relative h-full w-full", className),
+		style,
+		...props,
+		children: [drawStill ? null : /* @__PURE__ */ jsx("canvas", {
+			ref: canvas,
+			"aria-hidden": "true",
+			"data-slot": "particle-logo-canvas",
+			className: "block h-full w-full",
+			style: {
+				background: "transparent",
+				touchAction: "none"
+			}
+		}), drawStill || lost ? /* @__PURE__ */ jsx("img", {
+			"data-slot": "particle-logo-still",
+			src,
+			alt: "",
+			"aria-hidden": "true",
+			className: "absolute inset-0 m-auto object-contain",
+			style: {
+				height: fit === "logo" ? "26%" : `${containFill * 100}%`,
+				width: "auto"
+			}
+		}) : null]
+	});
+});
+//#endregion
+export { ParticleLogo };

package/dist/brand/text-scramble.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+//#region src/brand/text-scramble.d.ts
+interface TextScrambleProps extends Omit<React.ComponentPropsWithoutRef<"p">, "children"> {
+  /** The phrases to cycle through, in order, looping. The first is what renders before any script runs. */
+  phrases: readonly string[];
+  /**
+   * What assistive technology reads instead of the animation: one sentence that
+   * names the whole cycle. The animated text is hidden from it, because a
+   * scramble read aloud is noise.
+   */
+  label: string;
+  /**
+   * `matrix` (the default): letters, digits and symbols at 28ms a frame, one
+   * character locking per frame. `flap`: upper-cased, a departure board's
+   * letters at 55ms a frame, one character locking every two frames.
+   */
+  effect?: "matrix" | "flap";
+}
+/**
+ * A line that cycles through phrases, scrambling each one in — cueplusplus.com's
+ * "what we do" cycler, ported verbatim (`what-we-do.tsx`; spec
+ * 2026-10-04-cue-site-verbatim §4.2).
+ *
+ * Each frame, every character not yet locked shows a random glyph from the
+ * effect's set; spaces are never scrambled; characters lock left to right. A
+ * phrase holds for 1.8s once it has revealed, so a long phrase and a slow effect
+ * still finish before the next begins: the next starts after
+ * `length × revealEvery × speed + 1800ms`.
+ *
+ * **Reduced motion** shows each phrase whole, one every 2.6s, as the site does.
+ * **Held still** (a gallery thumbnail, under a still `StillProvider`) shows the
+ * first phrase and schedules nothing, which is this library's departure from the
+ * source: a thumbnail costs nothing at rest. The text is written straight into
+ * the DOM node, as the source does, so thirty-five frames a second never
+ * re-render React.
+ *
+ * @example
+ * <TextScramble phrases={["we build software", "we design stages"]} label="We build software and design stages." />
+ */
+declare const TextScramble: React.ForwardRefExoticComponent<TextScrambleProps & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { TextScramble, TextScrambleProps };