@cueplusplus/ui 0.18.2 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @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
+
+- 8cf9ebb: Five page blocks join `chrome` — `Hero`, `StatBand`, `LogoStrip`, `AnnouncementBar` and `Keyword` — and four motifs join `brand` behind one `Motif`: `Ribbon`, `Halftone`, `GlossObject` and `ParticleMark`. A style set chooses a hero's arrangement, a stat band's rule and numeral ink, a keyword's fill and which motif shows, through new optional tokens that fall back to today's rendering while unset; `AppBar.Nav`, `Sidebar` and `Stat` read the same set for their alignment, numbered rail and numeral ink. `StillProvider` and `useStill` hold a subtree's animation still, and `ParticleMark` draws nothing while hidden, off screen, in a background tab, held still or under reduced motion. `Hero surface="inverse"` draws a dark card on any page, and `axes.css` restates each set's and pack's inks on `[data-cue-rescope]` so the card is right before it hydrates. `Hero` takes a `level` (1 by default) for a hero that opens a section or sits in a preview under a page's own heading, `AnnouncementBar`'s link is the exported `AnnouncementBarAction` type, and `StillProvider`'s `children` are optional, as `ThemeProvider`'s are. The package manifest now lists a numeric union's members in ascending order — `Grid`'s `cols` reads 1 to 6 — rather than in the order the type checker happened to create them.
+- 1f539dc: The five measured style sets — `graphite`, `tender`, `zine`, `kiln` and `porcelain` — now carry their sources' page structure, not only their voices, re-measured on 2026-10-03:
+
+  - **`graphite`:** column rules at the content's edges, and a one-column hero centred over a soft info-ink glow, with its title at its own 56px size. The nav's links sit beside the brand.
+  - **`tender`:** column rules, and an editorial hero: the words left, the ribbon right, and a muted second title line. The links sit beside the brand.
+  - **`zine`:** filled calls to action cut with a chevron, dashed frame lines round the content over a 24px dotted ground, and a two-column hero with the halftone right. The nav is centred, and a focused field's ring sits 1px outside its edge, as its buttons' already does.
+  - **`kiln`:** a centred one-column hero with its media below. The links sit beside the brand.
+  - **`porcelain`:** column rules, and a one-column hero aligned to the start.
+
+  A set that does not declare these names draws as before. None of the five sets authors a corner, because each source's measured corners are already its theme's density ladder, which keeps scaling them.
+
+  **`Hero`'s title now speaks in the display voice.** It reads the set's display rung (face, size, weight, tracking and leading), falling back name by name to the page title's voice, so a set with no display rung draws the hero it drew before. One new optional name, `style-hero-title-size`, sits in front of the size, for a source whose hero is larger than its section headings.
+
+  **Two shipped sets change on purpose.** `editorial` and `marketing` declare a display size and no page-title size, so their heroes now grow to their display rung:
+
+  | set         | at scale 1 | at a 1.15 scale |
+  | ----------- | ---------- | --------------- |
+  | `editorial` | 22 → 52px  | 25.3 → 59.8px   |
+  | `marketing` | 22 → 64px  | 25.3 → 73.6px   |
+
+- 27887a6: Style sets may now shape controls and surfaces, cut filled buttons into chevrons, and draw page and band grounds and frame or grid lines, each falling back to today's rendering while unset. Glows and the shadows some packs draw in the foreground ink now scale by a per-palette glow gain — 1 in light, 0.35 in dark — so packs no longer glow in dark mode; every theme regenerates with the gain. The chevron cut is two stylesheet classes, `cue-cut` and `cue-cut-secondary`, shipped in `styles.css`.
+- aa3056c: `FontScope` sets a subtree in another type pairing and carries it to every dialog and menu opened inside it, without moving the root's pairing: a `ThemeProvider`'s `font` stays root-level. A portal opened under a scope that names a pairing, `FontScope` or a `Preview` stage, now asks for the family again, so its unclassed text follows the pairing rather than the family `<body>` computed. Every component that schedules its own frames, `ChannelMatrix`, `DmxStrip`, `AnimatedNumber`, `Replay`, `TerminalFrame` and `ScrollAnchor`, now takes its static path under `StillProvider still` as it does under reduced motion.
+- b09a663: Four style sets — `ledger`, `command`, `monolith` and `prism` — and a thirteenth font pairing, `fraunces-mono`. Each set carries a whole page structure, not only a voice: its controls' and cards' shape (pills, 8px, squares, 24px glass), a page or band ground drawn from the theme's own inks, the hero's columns, alignment and art, the stat band's rule and numerals, the navigation's alignment, and which motif shows. `fraunces-mono` sets everything in JetBrains Mono and routes a set's display rung to Fraunces, a variable serif.
+
+  Three style names are new, each optional and falling back to what an unset page renders: `style-display-case` uppercases a page title or a hero's title; `style-primary-fill` paints a primary button's resting fill with a gradient of the theme's own inks, which gives way to the solid hover fill under the pointer and to the disabled fill when disabled; and a set whose `style-hero-title-ink-2` names the keyword fill now has `Hero`'s second title line painted with that gradient through `background-clip: text`, with the accent as the colour a browser that cannot clip — or forced colours — keeps. Before this, the keyword fill there was an invalid colour and the line fell back to the inherited ink.
+
+  `<Motif>` takes no room under a set that shows no motif: the build derives `style-motif-shown` from the four motif names, and the container's own display reads it. A stage that turns a motif on with an inline variable sets `--cue-style-motif-shown: block` beside it. `ParticleMark` fits its word to the canvas's width as well as its height, so a long word or a wide monospace face is no longer cut at the edges.
+
+  The four new sets rule their links in `currentColor`, as every measured set does, so an in-copy link keeps a visible underline in its own ink. `@cueplusplus/theme-base`'s manifest schema knows `fraunces-mono` as a base pairing: a theme may retune it under `fontPairings.overrides`, and may not add a pairing of that name.
+
+- 439a832: Phase 5 measured the structural Looks on twelve new reference pages, on rendered pixels. Every fix below was made where the problem came from, not on a page.
+
+  **Status chips clear 4.5:1 in every theme.** A toned chip used to set its status ink as small text on its own 10% tint, which measured 4.2–4.4:1 in light under most themes and 3.6:1 under Kiln. The ink is now the tone mixed 30% toward `fg`. That raises it in both modes and keeps the hue the tone is read by.
+
+  **Labels fall back to `fg-muted`, not `fg-subtle`.** A label names what sits beside it, so it is held to 4.5:1 like body text. Ten readers used to fall back to `fg-subtle` when no style set gave a label ink: `Stat`'s label, a table head and group row, a `Sidebar` section label, a menu or command palette group label, the labels of `CodeBlock`, `TerminalFrame` and `Frames`, and `Footer`'s meta row. Under the default theme that ink is 2.4:1 in dark and 3.1:1 in light. They now read `fg-muted`, so they are brighter wherever no set declares `--cue-style-label-ink`. A set that declares it is unchanged, and `console` still renders exactly what no set renders.
+
+  **`LogoStrip` follows the set's label ink.** Its caption used to hard-code `fg-subtle`, and its names `fg-muted`.
+
+  **`Grid` with `minItemWidth` no longer overflows a narrower column.** The track's minimum is capped at the grid's own width, so a 22rem minimum on a 390px phone draws one full-width column. It used to draw one that ran 2px past its container. Wide layouts are unchanged.
+
+  **The structural sets declare inks their fallbacks failed with:**
+  - `zine`, `ledger`, `command` and `monolith` take `fg-muted` for labels, and `prism` takes `fg`.
+  - `prism`, `command` and `tender` mix the accent 40% toward `fg` for a selected row, a pressed segment and (prism, command) an eyebrow.
+  - `prism`'s icy band tints a quarter of its busy ink at its foot, where it used to tint half.
+
+  **`command`'s rhythm is measured.** Its source stacks its panels 10–13px apart, so its `band-y` is a fifth of `space-7`. The unmeasured clamp it replaces drew bands 64px apart.
+
+### Patch Changes
+
+- Updated dependencies [8cf9ebb]
+- Updated dependencies [1f539dc]
+- Updated dependencies [27887a6]
+- Updated dependencies [b09a663]
+- Updated dependencies [439a832]
+  - @cueplusplus/tokens@0.19.0
+  - @cueplusplus/theme-base@1.2.0
+
 ## 0.18.2
 
 ### Patch Changes

package/dist/brand/_motif-seed.js

@@ -0,0 +1,20 @@
+//#region src/brand/_motif-seed.ts
+/**
+* A seeded random stream (mulberry32): the same seed draws the same picture on the
+* server and in the browser, which is what keeps a motif's markup identical across
+* hydration (spec 2026-10-02 §3.4).
+*/
+function seeded(seed) {
+	let a = seed >>> 0;
+	return () => {
+		a = a + 1831565813 >>> 0;
+		let t = a;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+/** A number rounded to two decimals, so path data stays short and stable. */
+const r2 = (n) => Math.round(n * 100) / 100;
+//#endregion
+export { r2, seeded };

package/dist/brand/gloss-object.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/brand/gloss-object.d.ts
+interface GlossObjectProps extends React.SVGProps<SVGSVGElement> {
+  /** The object: a ring, a knot of two rings, or a rounded mark. Defaults to `"torus"`. */
+  shape?: "torus" | "knot" | "mark";
+  /** Tilts the highlight. Defaults to `1`. */
+  seed?: number;
+}
+/**
+ * A glossy, iridescent object for a marketing hero — the chrome-ring and gloss
+ * lettermark look (spec 2026-10-02 §3.4). Drawn with layered radial and linear
+ * gradients of the theme's accent against the foreground's mix, plus a specular
+ * highlight in the accent's own ink (`--cue-accent-fg`), so it is the Look's own colour and never a copied render.
+ * Decorative: hidden from assistive technology.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <GlossObject shape="knot" className="h-48 w-48" />
+ */
+declare function GlossObject({ shape, seed, ...svgProps }: GlossObjectProps): React.JSX.Element;
+//#endregion
+export { GlossObject, GlossObjectProps };

package/dist/brand/gloss-object.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/gloss-object.tsx
+/**
+* A glossy, iridescent object for a marketing hero — the chrome-ring and gloss
+* lettermark look (spec 2026-10-02 §3.4). Drawn with layered radial and linear
+* gradients of the theme's accent against the foreground's mix, plus a specular
+* highlight in the accent's own ink (`--cue-accent-fg`), so it is the Look's own colour and never a copied render.
+* Decorative: hidden from assistive technology.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <GlossObject shape="knot" className="h-48 w-48" />
+*/
+function GlossObject({ shape = "torus", seed = 1, ...svgProps }) {
+	const id = React.useId().replace(/:/gu, "");
+	const tilt = seed * 37 % 90 - 45;
+	const ring = (cx, cy, key) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: "28",
+		fill: "none",
+		stroke: `url(#${id}-body)`,
+		strokeWidth: "16"
+	}), /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: "28",
+		fill: "none",
+		stroke: `url(#${id}-sheen)`,
+		strokeWidth: "6",
+		strokeDasharray: "40 136",
+		transform: `rotate(${tilt} ${cx} ${cy})`
+	})] }, key);
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 100 100",
+		"aria-hidden": "true",
+		focusable: "false",
+		...svgProps,
+		children: [
+			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+				id: `${id}-body`,
+				x1: "0",
+				y1: "0",
+				x2: "1",
+				y2: "1",
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "color-mix(in oklch, var(--cue-accent) 70%, var(--cue-accent-fg))"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "50%",
+						stopColor: "var(--cue-accent)"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "color-mix(in oklch, var(--cue-accent) 55%, var(--cue-fg))"
+					})
+				]
+			}), /* @__PURE__ */ jsxs("linearGradient", {
+				id: `${id}-sheen`,
+				x1: "0",
+				y1: "0",
+				x2: "1",
+				y2: "0",
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "var(--cue-accent-fg)",
+						stopOpacity: "0"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "50%",
+						stopColor: "var(--cue-accent-fg)",
+						stopOpacity: "0.85"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "var(--cue-accent-fg)",
+						stopOpacity: "0"
+					})
+				]
+			})] }),
+			shape === "knot" ? [ring(40, 50, "a"), ring(60, 50, "b")] : null,
+			shape === "torus" ? ring(50, 50, "a") : null,
+			shape === "mark" ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				x: "18",
+				y: "18",
+				width: "64",
+				height: "64",
+				rx: "18",
+				fill: `url(#${id}-body)`
+			}), /* @__PURE__ */ jsx("rect", {
+				x: "24",
+				y: "22",
+				width: "40",
+				height: "10",
+				rx: "5",
+				fill: `url(#${id}-sheen)`,
+				transform: `rotate(${tilt / 4} 44 27)`
+			})] }) : null
+		]
+	});
+}
+//#endregion
+export { GlossObject };

package/dist/brand/halftone.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/brand/halftone.d.ts
+interface HalftoneProps extends React.SVGProps<SVGSVGElement> {
+  /** The generated form the dots describe. Defaults to `"ridge"`. */
+  shape?: "wave" | "orb" | "ridge";
+  /** Which variant of the form. Defaults to `1`. */
+  seed?: number;
+}
+/**
+ * A halftone dot screen over a generated form — the engraved, printed look of a
+ * developer-tool landing page (spec 2026-10-02 §3.4). Every dot's size is the
+ * form's density at that cell, so the picture is drawn by the screen itself
+ * rather than filtered from an image, and nothing is fetched. Dots are the
+ * foreground ink. Decorative: hidden from assistive technology.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Halftone shape="orb" className="h-72 w-72" />
+ */
+declare function Halftone({ shape, seed, ...svgProps }: HalftoneProps): React.JSX.Element;
+//#endregion
+export { Halftone, HalftoneProps };

package/dist/brand/halftone.js

@@ -0,0 +1,54 @@
+import { seeded } from "./_motif-seed.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/brand/halftone.tsx
+/**
+* A halftone dot screen over a generated form — the engraved, printed look of a
+* developer-tool landing page (spec 2026-10-02 §3.4). Every dot's size is the
+* form's density at that cell, so the picture is drawn by the screen itself
+* rather than filtered from an image, and nothing is fetched. Dots are the
+* foreground ink. Decorative: hidden from assistive technology.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Halftone shape="orb" className="h-72 w-72" />
+*/
+function Halftone({ shape = "ridge", seed = 1, ...svgProps }) {
+	const phase = seeded(seed)() * Math.PI * 2;
+	const density = (x, y) => {
+		if (shape === "orb") {
+			const d = Math.hypot(x - .5, y - .5) / .5;
+			return Math.max(0, 1 - d) * (.6 + .4 * (1 - y));
+		}
+		if (shape === "wave") return Math.max(0, Math.min(1, .5 + .45 * Math.sin(x * 9 + phase) * (1 - y) + (y - .5) * .6));
+		const ridge = .55 + .25 * Math.sin(x * 5 + phase) + .1 * Math.sin(x * 13 + phase * 2);
+		return y > ridge ? Math.min(1, (y - ridge) * 2.4) : 0;
+	};
+	const step = 4;
+	const sizes = [
+		[],
+		[],
+		[],
+		[]
+	];
+	for (let y = step / 2; y < 100; y += step) for (let x = step / 2; x < 100; x += step) {
+		const size = Math.ceil(density(x / 100, y / 100) * 4);
+		if (size >= 1) sizes[size - 1].push(`M${x} ${y}h0`);
+	}
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 100 100",
+		"aria-hidden": "true",
+		focusable: "false",
+		...svgProps,
+		children: sizes.map((dots, index) => dots.length === 0 ? null : /* @__PURE__ */ jsx("path", {
+			d: dots.join(""),
+			fill: "none",
+			stroke: "var(--cue-fg)",
+			strokeLinecap: "round",
+			strokeWidth: (index + 1) * step / 4
+		}, index))
+	});
+}
+//#endregion
+export { Halftone };

package/dist/brand/index.d.ts

@@ -2,4 +2,11 @@ import { BrandAssetProps, BrandSize, BrandTone } from "./_chassis.js";
 import { CueLogotype, CueLogotypeProps } from "./cue-logotype.js";
 import { CueMark, CueMarkProps } from "./cue-mark.js";
 import { Plussie, PlussieExpression, PlussieProps } from "./plussie.js";
-export { type BrandAssetProps, type BrandSize, type BrandTone, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, Plussie, type PlussieExpression, type PlussieProps };
+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";
+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/motif.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/brand/motif.d.ts
+type MotifVariant = "ribbon" | "halftone" | "gloss" | "particles";
+interface MotifProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The variants this page offers. The Look shows at most one of them. Defaults to all four. */
+  variants?: readonly MotifVariant[];
+  /** The same seed draws the same picture, on the server and in the browser. Defaults to `1`. */
+  seed?: number;
+  /** The word the particle variant draws. Defaults to `"CUE"`. */
+  word?: string;
+}
+/**
+ * The art a Look draws in a hero: a ribbon, a halftone, a gloss object or a
+ * particle word, whichever the style set chooses (spec 2026-10-02 §3.4).
+ *
+ * **The Look chooses, at the CSS layer.** Every offered variant is rendered, each
+ * in a wrapper whose `display` is the set's `style-motif-*` token, `none` unless
+ * the set turns it on. So switching the Look switches the art with no re-render,
+ * the server and the browser draw the same markup, and the paint pack `none` stays
+ * empty. A Look that turns none on draws nothing here and takes no room: the
+ * container's own `display` is `style-motif-shown`, which the build derives as
+ * `block` for a set that shows a motif and which is `none` everywhere else. The
+ * particle variant animates only while it is the one displayed.
+ *
+ * Static markup — no `"use client"`; the particle variant is its own client island.
+ *
+ * @example
+ * <Hero title="Payments infrastructure" media={<Motif seed={2} />} />
+ */
+declare const Motif: React.ForwardRefExoticComponent<MotifProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Motif, MotifProps, MotifVariant };

package/dist/brand/motif.js

@@ -0,0 +1,71 @@
+import { cn } from "../lib/cn.js";
+import { GlossObject } from "./gloss-object.js";
+import { Halftone } from "./halftone.js";
+import { ParticleMark } from "./particle-mark.js";
+import { Ribbon } from "./ribbon.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/motif.tsx
+const DISPLAY = {
+	ribbon: "[display:var(--cue-style-motif-ribbon,none)]",
+	halftone: "[display:var(--cue-style-motif-halftone,none)]",
+	gloss: "[display:var(--cue-style-motif-gloss,none)]",
+	particles: "[display:var(--cue-style-motif-particles,none)]"
+};
+/**
+* The art a Look draws in a hero: a ribbon, a halftone, a gloss object or a
+* particle word, whichever the style set chooses (spec 2026-10-02 §3.4).
+*
+* **The Look chooses, at the CSS layer.** Every offered variant is rendered, each
+* in a wrapper whose `display` is the set's `style-motif-*` token, `none` unless
+* the set turns it on. So switching the Look switches the art with no re-render,
+* the server and the browser draw the same markup, and the paint pack `none` stays
+* empty. A Look that turns none on draws nothing here and takes no room: the
+* container's own `display` is `style-motif-shown`, which the build derives as
+* `block` for a set that shows a motif and which is `none` everywhere else. The
+* particle variant animates only while it is the one displayed.
+*
+* Static markup — no `"use client"`; the particle variant is its own client island.
+*
+* @example
+* <Hero title="Payments infrastructure" media={<Motif seed={2} />} />
+*/
+const Motif = React.forwardRef(function Motif({ className, variants = [
+	"ribbon",
+	"halftone",
+	"gloss",
+	"particles"
+], seed = 1, word = "CUE", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "motif",
+		"aria-hidden": "true",
+		className: cn("relative aspect-[4/3] w-full [display:var(--cue-style-motif-shown,none)]", className),
+		...elementProps,
+		children: variants.map((variant) => /* @__PURE__ */ jsxs("div", {
+			"data-motif": variant,
+			className: cn("absolute inset-0", DISPLAY[variant]),
+			children: [
+				variant === "ribbon" ? /* @__PURE__ */ jsx(Ribbon, {
+					seed,
+					className: "size-full"
+				}) : null,
+				variant === "halftone" ? /* @__PURE__ */ jsx(Halftone, {
+					seed,
+					className: "size-full"
+				}) : null,
+				variant === "gloss" ? /* @__PURE__ */ jsx(GlossObject, {
+					seed,
+					className: "size-full"
+				}) : null,
+				variant === "particles" ? /* @__PURE__ */ jsx(ParticleMark, {
+					word,
+					seed,
+					className: "size-full"
+				}) : null
+			]
+		}, variant))
+	});
+});
+//#endregion
+export { Motif };

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 };