@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/backgrounds/effects/svgKit.js

@@ -0,0 +1,50 @@
+// ---------------------------------------------------------------------------
+// Small helpers the SVG effects share. Pure.
+// ---------------------------------------------------------------------------
+/** A coordinate as a short string: one decimal, no trailing ".0". */
+export function num(n) {
+    return String(Math.round(n * 10) / 10);
+}
+/**
+ * A smooth curve through `points`: each point becomes the control of a
+ * quadratic segment ending halfway to the next one, so the line bends
+ * gently with no corners. Starts and ends exactly on the first and last point.
+ */
+export function smoothPath(points) {
+    const first = points[0];
+    if (!first)
+        return "";
+    let d = `M${num(first[0])} ${num(first[1])}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const [x, y] = points[i] ?? first;
+        const [nx, ny] = points[i + 1] ?? first;
+        d += ` Q${num(x)} ${num(y)} ${num((x + nx) / 2)} ${num((y + ny) / 2)}`;
+    }
+    const last = points[points.length - 1] ?? first;
+    if (points.length > 1)
+        d += ` L${num(last[0])} ${num(last[1])}`;
+    return d;
+}
+/**
+ * A periodic wave covering x = 0 to `periods * period`, sampled 16 times per
+ * period: the y at `x` equals the y at `x + period`, so sliding it sideways
+ * by exactly one period loops without a seam. `closeTo` closes the shape
+ * down (or up) to that y, for a filled wave.
+ */
+export function wavePath(opts) {
+    const { period, periods, base, amplitude, phase = 0, harmonic = 0 } = opts;
+    const steps = 16 * periods;
+    const pts = [];
+    // one extra sample past each end, so every curve segment inside [0, length]
+    // is an interior one (identical period to period: no seam where the loop restarts)
+    for (let i = -1; i <= steps + 1; i++) {
+        const x = (i / 16) * period;
+        const a = (x / period + phase) * Math.PI * 2;
+        pts.push([x, base + amplitude * (Math.sin(a) + harmonic * Math.sin(2 * a + 1.3))]);
+    }
+    const d = smoothPath(pts);
+    if (opts.closeTo === undefined)
+        return d;
+    const end = ((steps + 1) / 16) * period;
+    return `${d} L${num(end)} ${num(opts.closeTo)} L${num(-period / 16)} ${num(opts.closeTo)} Z`;
+}

package/dist/backgrounds/effects/texture/filmGrain.d.ts

@@ -0,0 +1,18 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const FILM_GRAIN_META: EffectMeta;
+export interface FilmGrainOptions extends LayerOptions {
+    /** Tile size in px; bigger = coarser grain. */
+    readonly tile?: number;
+    /** How often the grain jumps, per second. 0 = still. */
+    readonly fps?: number;
+    /** feTurbulence base frequency (0.5 soft … 1.2 fine). */
+    readonly frequency?: number;
+}
+/**
+ * The noise tile. The browser renders the SVG filter ONCE into an image; the
+ * animation only jumps that image around with `transform`.
+ */
+export declare function noiseTile(frequency: number): string;
+export declare const GRAIN_MAX_STEP = 18;
+/** Fine moving noise. Usually stacked on top of another layer, at low opacity. */
+export declare function filmGrain(options?: FilmGrainOptions): CssEffect;

package/dist/backgrounds/effects/texture/filmGrain.js

@@ -0,0 +1,63 @@
+import { defineCssEffect, duration } from "../define.js";
+export const FILM_GRAIN_META = {
+    id: "film-grain",
+    label: "Animated film grain",
+    category: "texture",
+    family: "css",
+    cost: { kb: "1–20 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Move a small tile. Never re-run feTurbulence every frame.",
+};
+/**
+ * The noise tile. The browser renders the SVG filter ONCE into an image; the
+ * animation only jumps that image around with `transform`.
+ */
+export function noiseTile(frequency) {
+    const svg = "<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'>" +
+        `<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='${frequency}' numOctaves='3' stitchTiles='stitch'/>` +
+        "<feColorMatrix type='saturate' values='0'/></filter>" +
+        "<rect width='100%' height='100%' filter='url(#n)'/></svg>";
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+/** Keyframes in one cycle; the cycle length sets the jump rate. */
+const STEPS = 10;
+// The tile is 200% of the layer (inset -50%), so it overhangs each edge by
+// half the layer. A translate % is relative to the TILE, so a step of t%
+// moves it 2t% of the layer: every step must stay within ±25% or an edge of
+// the layer goes bare for that frame (a 35% step once flashed the top fifth).
+// ±18% keeps a margin so rounding never opens a seam. Tested.
+export const GRAIN_MAX_STEP = 18;
+const CSS = `@layer components {
+  :where([data-sx-bg="film-grain"])::before {
+    content: "";
+    position: absolute;
+    inset: -50%;
+    background-image: var(--sx-bg-grain);
+    background-size: var(--sx-bg-tile) var(--sx-bg-tile);
+    animation: sx-bg-grain ${duration("var(--sx-bg-cycle)")} steps(1) infinite;
+  }
+  @keyframes sx-bg-grain {
+    0% { transform: translate3d(0, 0, 0); }
+    10% { transform: translate3d(-5%, -10%, 0); }
+    20% { transform: translate3d(-15%, 5%, 0); }
+    30% { transform: translate3d(7%, -18%, 0); }
+    40% { transform: translate3d(-5%, 18%, 0); }
+    50% { transform: translate3d(-15%, 10%, 0); }
+    60% { transform: translate3d(15%, 0, 0); }
+    70% { transform: translate3d(0, 15%, 0); }
+    80% { transform: translate3d(3%, -14%, 0); }
+    90% { transform: translate3d(-10%, 10%, 0); }
+  }
+}`;
+/** Fine moving noise. Usually stacked on top of another layer, at low opacity. */
+export function filmGrain(options = {}) {
+    const fps = options.fps ?? 10;
+    return defineCssEffect(FILM_GRAIN_META, CSS, { opacity: 0.12, ...options }, {
+        vars: {
+            "--sx-bg-grain": noiseTile(options.frequency ?? 0.85),
+            "--sx-bg-tile": `${options.tile ?? 180}px`,
+            // fps 0: a cycle so long the grain never visibly moves
+            "--sx-bg-cycle": fps > 0 ? `${STEPS / fps}s` : "100000s",
+        },
+    });
+}

package/dist/backgrounds/effects/texture/filmGrain.schema.d.ts

@@ -0,0 +1 @@
+export declare const FILM_GRAIN_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/texture/filmGrain.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const FILM_GRAIN_SCHEMA = defineSchema()({
+    id: "film-grain",
+    family: "background",
+    factory: "filmGrain",
+    fields: {
+        ...layerFields({ opacity: 0.12 }),
+        tile: { kind: "number", label: "Grain tile", min: 40, max: 600, step: 10, unit: "px", default: 180, help: "Bigger = coarser grain." },
+        fps: { kind: "integer", label: "Jumps per second", min: 0, max: 30, default: 10, help: "0 keeps the grain still." },
+        frequency: { kind: "number", label: "Fineness", min: 0.3, max: 1.5, step: 0.05, default: 0.85, help: "0.5 soft … 1.2 fine." },
+    },
+});

package/dist/backgrounds/effects/texture/foggyGlass.schema.d.ts

@@ -0,0 +1 @@
+export declare const FOGGY_GLASS_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/texture/foggyGlass.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const FOGGY_GLASS_SCHEMA = defineSchema()({
+    id: "foggy-glass",
+    family: "background",
+    factory: "foggyGlass",
+    fields: {
+        ...layerFields(),
+        blur: { kind: "number", label: "Blur", min: 0, max: 40, step: 1, unit: "px", default: 14 },
+        tint: { kind: "color", label: "Frost tint", default: "var(--color-sx-secondary)" },
+        strength: { kind: "number", label: "Milkiness", min: 0, max: 1, step: 0.01, default: 0.3 },
+        streaks: { kind: "boolean", label: "Light streaks", default: true },
+    },
+});

package/dist/backgrounds/effects/texture/frozenGlass.schema.d.ts

@@ -0,0 +1 @@
+export declare const FROZEN_GLASS_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/texture/frozenGlass.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const FROZEN_GLASS_SCHEMA = defineSchema()({
+    id: "frozen-glass",
+    family: "background",
+    factory: "frozenGlass",
+    fields: {
+        ...layerFields(),
+        blur: { kind: "number", label: "Blur", min: 0, max: 40, step: 1, unit: "px", default: 10 },
+        stripe: { kind: "number", label: "Reed width", min: 6, max: 80, step: 1, unit: "px", default: 26 },
+        angle: { kind: "number", label: "Reed direction", min: 0, max: 180, step: 1, unit: "°", default: 90, help: "90 = vertical reeds." },
+        strength: { kind: "number", label: "Light and shade", min: 0, max: 1, step: 0.01, default: 0.35 },
+    },
+});

package/dist/backgrounds/effects/texture/glass.d.ts

@@ -0,0 +1,26 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const FOGGY_GLASS_META: EffectMeta;
+export declare const FROZEN_GLASS_META: EffectMeta;
+export interface FoggyGlassOptions extends LayerOptions {
+    /** Blur radius in px. */
+    readonly blur?: number;
+    /** The frost colour; defaults to the theme surface. */
+    readonly tint?: string;
+    /** 0–1, how milky the glass is. */
+    readonly strength?: number;
+    /** Soft diagonal light streaks. */
+    readonly streaks?: boolean;
+}
+/** Frosted glass over the layers below it. */
+export declare function foggyGlass(options?: FoggyGlassOptions): CssEffect;
+export interface FrozenGlassOptions extends LayerOptions {
+    readonly blur?: number;
+    /** Width of one reed in px. */
+    readonly stripe?: number;
+    /** Stripe direction in degrees (90 = vertical reeds). */
+    readonly angle?: number;
+    /** 0–1, how strongly each reed is lit and shaded. */
+    readonly strength?: number;
+}
+/** Reeded (striped) frosted glass over the layers below it. */
+export declare function frozenGlass(options?: FrozenGlassOptions): CssEffect;

package/dist/backgrounds/effects/texture/glass.js

@@ -0,0 +1,82 @@
+import { defineCssEffect, liteMeta } from "../define.js";
+// Two glass overlays. Both blur whatever layers sit BELOW them in the same
+// Background.Root (stack them over aurora, bokeh, an image …). Live blur is
+// the costly part, so each has a light version that keeps the tint and the
+// light but drops `backdrop-filter`.
+export const FOGGY_GLASS_META = {
+    id: "foggy-glass",
+    label: "Foggy Glass Overlays",
+    category: "texture",
+    family: "css",
+    cost: { kb: "~1 KB CSS / 100–500 KB image", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Live blur re-blurs everything behind it when anything moves.",
+};
+export const FROZEN_GLASS_META = {
+    id: "frozen-glass",
+    label: "Stripped Frozen Glass Backgrounds",
+    category: "texture",
+    family: "css",
+    cost: { kb: "~1 KB CSS / 100–600 KB image", cpu: 1, gpu: 2 },
+    tier: "mid",
+    note: "Same blur cost as above if done live.",
+};
+const FOGGY_LITE_META = liteMeta(FOGGY_GLASS_META, "No live blur: a frosted tint and soft light streaks.");
+const FROZEN_LITE_META = liteMeta(FROZEN_GLASS_META, "No live blur: the reeded stripes over a frosted tint.");
+const blur = (live) => live
+    ? `-webkit-backdrop-filter: blur(var(--sx-bg-blur)) saturate(1.15);
+    backdrop-filter: blur(var(--sx-bg-blur)) saturate(1.15);`
+    : "";
+const foggyCss = (id, live) => `@layer components {
+  :where([data-sx-bg="${id}"]) {
+    ${blur(live)}
+    background: color-mix(in oklab, var(--sx-bg-tint) calc(var(--sx-bg-strength) * ${live ? 100 : 160}%), transparent);
+  }
+  :where([data-sx-bg="${id}"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: var(--sx-bg-streaks);
+    background:
+      linear-gradient(115deg, transparent 18%, color-mix(in oklab, white 16%, transparent) 30%, transparent 42%),
+      linear-gradient(115deg, transparent 54%, color-mix(in oklab, white 9%, transparent) 61%, transparent 68%);
+  }
+}`;
+const frozenCss = (id, live) => `@layer components {
+  :where([data-sx-bg="${id}"]) {
+    ${blur(live)}
+    background-color: color-mix(in oklab, var(--color-sx-secondary) ${live ? 10 : 35}%, transparent);
+    background-image: repeating-linear-gradient(
+      var(--sx-bg-angle),
+      color-mix(in oklab, white calc(var(--sx-bg-strength) * 60%), transparent) 0,
+      transparent calc(var(--sx-bg-stripe) * 0.45),
+      color-mix(in oklab, black calc(var(--sx-bg-strength) * 45%), transparent) var(--sx-bg-stripe)
+    );
+  }
+}`;
+/** Frosted glass over the layers below it. */
+export function foggyGlass(options = {}) {
+    const vars = {
+        "--sx-bg-blur": `${options.blur ?? 14}px`,
+        "--sx-bg-tint": options.tint ?? "var(--color-sx-secondary)",
+        "--sx-bg-strength": options.strength ?? 0.3,
+        "--sx-bg-streaks": options.streaks === false ? 0 : 1,
+    };
+    return defineCssEffect(FOGGY_GLASS_META, foggyCss(FOGGY_GLASS_META.id, true), options, {
+        vars,
+        fallback: defineCssEffect(FOGGY_LITE_META, foggyCss(FOGGY_LITE_META.id, false), options, { vars }),
+    });
+}
+/** Reeded (striped) frosted glass over the layers below it. */
+export function frozenGlass(options = {}) {
+    const vars = {
+        "--sx-bg-blur": `${options.blur ?? 10}px`,
+        "--sx-bg-stripe": `${options.stripe ?? 26}px`,
+        "--sx-bg-angle": `${options.angle ?? 90}deg`,
+        "--sx-bg-strength": options.strength ?? 0.35,
+    };
+    return defineCssEffect(FROZEN_GLASS_META, frozenCss(FROZEN_GLASS_META.id, true), options, {
+        vars,
+        fallback: defineCssEffect(FROZEN_LITE_META, frozenCss(FROZEN_LITE_META.id, false), options, { vars }),
+    });
+}

package/dist/backgrounds/effects/texture/halftone.d.ts

@@ -0,0 +1,13 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const HALFTONE_META: EffectMeta;
+export interface HalftoneOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Dot spacing in px. */
+    readonly cell?: number;
+    /** Screen angle in degrees (print uses 15, 45, 75). */
+    readonly angle?: number;
+    readonly color?: string;
+    readonly seed?: number;
+}
+/** A print-style dot screen over a slowly drifting tone. */
+export declare function halftone(options?: HalftoneOptions): WebglEffect;

package/dist/backgrounds/effects/texture/halftone.js

@@ -0,0 +1,49 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, slots, stillFallback } from "../shaderKit.js";
+export const HALFTONE_META = {
+    id: "halftone",
+    label: "Halftone / dot-screen texture",
+    category: "texture",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner, no library)", cpu: 1, gpu: 2 },
+    tier: "mid",
+    note: "Static CSS version runs everywhere.",
+};
+// A rotated grid of dots whose radius follows a slowly drifting tone (noise
+// sampled at each dot's centre), so a soft image seems to move under a print
+// screen. Edges are anti-aliased over one pixel. Transparent between dots.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform float u_speed;
+uniform float u_cell;
+uniform float u_angle;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_OUT}
+void main() {
+  float size = max(3.0, u_cell * u_dpr);
+  float cs = cos(u_angle);
+  float sn = sin(u_angle);
+  vec2 rp = vec2(cs * gl_FragCoord.x - sn * gl_FragCoord.y, sn * gl_FragCoord.x + cs * gl_FragCoord.y) / size;
+  vec2 id = floor(rp);
+  vec2 f = fract(rp) - 0.5;
+  vec2 c = (id + 0.5) * size;
+  vec2 centre = vec2(cs * c.x + sn * c.y, -sn * c.x + cs * c.y);
+  vec2 p = (centre / u_resolution - 0.5) * vec2(u_resolution.x / u_resolution.y, 1.0);
+  float t = u_time * u_speed * 0.1 + u_seed * 3.0;
+  float tone = smoothstep(0.25, 0.85, sx_fbm(p * 2.0 + vec2(t, -t * 0.6)));
+  float radius = sqrt(tone) * 0.62;
+  float aa = 1.0 / size;
+  float ink = 1.0 - smoothstep(radius - aa, radius + aa, length(f));
+  gl_FragColor = sx_out(u_c0.rgb, ink * u_c0.a);
+}
+`;
+/** A print-style dot screen over a slowly drifting tone. */
+export function halftone(options = {}) {
+    const colors = slots(options.color ? [options.color] : undefined, ["color-mix(in oklab, var(--color-sx-accent) 70%, transparent)"]);
+    const cell = Math.max(3, options.cell ?? 10);
+    return defineWebglEffect(HALFTONE_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_cell: cell, u_angle: ((options.angle ?? 45) * Math.PI) / 180, u_seed: options.seed ?? 0 },
+        fallback: stillFallback(HALFTONE_META, "The static CSS dot screen (the atlas's everywhere version).", `radial-gradient(circle, var(--sx-bg-c1) 28%, transparent 31%) 0 0 / ${cell}px ${cell}px`, options, colors),
+    });
+}

package/dist/backgrounds/effects/texture/halftone.schema.d.ts

@@ -0,0 +1 @@
+export declare const HALFTONE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/texture/halftone.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField } from "../../../schema/common.js";
+export const HALFTONE_SCHEMA = defineSchema()({
+    id: "halftone",
+    family: "background",
+    factory: "halftone",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cell: { kind: "number", label: "Dot spacing", min: 3, max: 40, step: 1, unit: "px", default: 10 },
+        angle: { kind: "number", label: "Screen angle", min: 0, max: 90, step: 1, unit: "°", default: 45, help: "Print uses 15, 45, 75." },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 70%, transparent)" },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/three/chrome.d.ts

@@ -0,0 +1,14 @@
+import type { LayerOptions, WebglEffect } from "../../types.js";
+export interface ChromeOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Surface roughness, 0 (mirror) to 1 (brushed). */
+    readonly roughness?: number;
+    /** Two colours: the metal's tint and an accent piece. Default: near-white chrome and the accent. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/**
+ * Mirror-metal shapes drifting on a transparent layer. The reflections come
+ * from Three.js's procedural room, so there is no HDR environment to download.
+ */
+export declare function chrome(options?: ChromeOptions): WebglEffect;

package/dist/backgrounds/effects/three/chrome.js

@@ -0,0 +1,50 @@
+import { defineGpuEffect } from "../define.js";
+import { slots, stillFallback } from "../shaderKit.js";
+import { CHROME_META } from "./metas.js";
+import { THREE, colour, threeProgram } from "./kit.js";
+import { stage } from "./stage.js";
+/**
+ * Mirror-metal shapes drifting on a transparent layer. The reflections come
+ * from Three.js's procedural room, so there is no HDR environment to download.
+ */
+export function chrome(options = {}) {
+    const colors = slots(options.colors, [
+        "color-mix(in oklab, var(--color-sx-ink) 8%, white)",
+        "var(--color-sx-accent)",
+    ]);
+    const speed = options.speed ?? 1;
+    const roughness = Math.min(1, Math.max(0, options.roughness ?? 0.12));
+    return defineGpuEffect(CHROME_META, threeProgram((ctx) => {
+        const set = stage(ctx, { backdrop: false, lean: 0.7 });
+        const metal = new THREE.MeshStandardMaterial({ metalness: 1, roughness });
+        const accent = new THREE.MeshStandardMaterial({ metalness: 1, roughness: roughness + 0.08 });
+        const parts = [];
+        const add = (geometry, material, orbit, radius, height) => {
+            const mesh = new THREE.Mesh(geometry, material);
+            set.group.add(mesh);
+            parts.push({ mesh, orbit, radius, height, phase: ctx.random() * Math.PI * 2 });
+        };
+        add(new THREE.TorusGeometry(0.85, 0.3, 48, 128), metal, 0.12, 0.2, 0);
+        add(new THREE.SphereGeometry(0.42, 64, 32), metal, 0.35, 1.8, 0.6);
+        add(new THREE.CapsuleGeometry(0.22, 0.9, 16, 32), accent, 0.28, 2.1, -0.5);
+        add(new THREE.TorusKnotGeometry(0.32, 0.1, 160, 20), metal, 0.22, 1.6, -0.9);
+        return {
+            resize: set.resize,
+            render(f) {
+                const t = f.time * speed;
+                for (const p of parts) {
+                    const a = t * p.orbit + p.phase;
+                    p.mesh.position.set(Math.cos(a) * p.radius, p.height + Math.sin(t * 0.7 + p.phase) * 0.15, Math.sin(a) * p.radius * 0.5);
+                    p.mesh.rotation.set(t * 0.3 + p.phase, t * 0.4, 0);
+                }
+                colour(f.colors[0], metal.color);
+                colour(f.colors[1], accent.color);
+                set.update(f);
+                ctx.renderer.render(ctx.scene, set.camera);
+            },
+        };
+    }), options, {
+        colors,
+        fallback: stillFallback(CHROME_META, "A still metallic sheen. Drop in a pre-rendered image with image() for real chrome on every device.", "radial-gradient(circle at 50% 50%, transparent 18%, color-mix(in oklab, var(--sx-bg-c1) 60%, transparent) 19%, color-mix(in oklab, var(--sx-bg-c1) 15%, transparent) 26%, transparent 27%)", options, colors),
+    });
+}

package/dist/backgrounds/effects/three/chrome.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHROME_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/three/chrome.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const CHROME_SCHEMA = defineSchema()({
+    id: "chrome",
+    family: "background",
+    factory: "chrome",
+    entry: "@sharedex/ui/three",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        roughness: { kind: "number", label: "Roughness", min: 0, max: 1, step: 0.01, default: 0.12, help: "0 mirror, 1 brushed." },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-ink) 8%, white)", "var(--color-sx-accent)"], 1, 2), help: "The metal's tint, then an accent piece." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/three/glassShapes.d.ts

@@ -0,0 +1,9 @@
+import type { LayerOptions, WebglEffect } from "../../types.js";
+export interface GlassShapesOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Four colours: the backdrop base and three colour pools the glass bends. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A few glass solids (knot, rounded cube, gem, ring) floating over a colour backdrop. */
+export declare function glassShapes(options?: GlassShapesOptions): WebglEffect;

package/dist/backgrounds/effects/three/glassShapes.js

@@ -0,0 +1,47 @@
+import { RoundedBoxGeometry } from "three/addons/geometries/RoundedBoxGeometry.js";
+import { defineGpuEffect } from "../define.js";
+import { SX_FIELD, slots, stillFallback } from "../shaderKit.js";
+import { GLASS_SHAPES_META } from "./metas.js";
+import { THREE, colour, threeProgram } from "./kit.js";
+import { stage } from "./stage.js";
+/** A few glass solids (knot, rounded cube, gem, ring) floating over a colour backdrop. */
+export function glassShapes(options = {}) {
+    const colors = slots(options.colors, SX_FIELD);
+    const speed = options.speed ?? 1;
+    return defineGpuEffect(GLASS_SHAPES_META, threeProgram((ctx) => {
+        const set = stage(ctx, { backdrop: true, lean: 0.5 });
+        const glass = new THREE.MeshPhysicalMaterial({ transmission: 1, thickness: 0.9, roughness: 0.08, ior: 1.5, clearcoat: 1 });
+        const tinted = new THREE.MeshPhysicalMaterial({ transmission: 0.92, thickness: 1.2, roughness: 0.15, ior: 1.4 });
+        const shapes = [];
+        const add = (geometry, material, x, y, z) => {
+            const mesh = new THREE.Mesh(geometry, material);
+            set.group.add(mesh);
+            shapes.push({
+                mesh,
+                home: new THREE.Vector3(x, y, z),
+                spin: new THREE.Vector3(ctx.random() - 0.5, ctx.random() - 0.5, ctx.random() - 0.5).multiplyScalar(0.8),
+                phase: ctx.random() * 6,
+            });
+        };
+        add(new THREE.TorusKnotGeometry(0.55, 0.2, 160, 24), glass, -1.25, 0.25, 0);
+        add(new RoundedBoxGeometry(0.95, 0.95, 0.95, 4, 0.18), tinted, 1.2, 0.45, -0.3);
+        add(new THREE.IcosahedronGeometry(0.6, 0), glass, 0.35, -0.75, 0.5);
+        add(new THREE.TorusGeometry(0.42, 0.14, 24, 64), tinted, 2.1, -0.7, -0.6);
+        return {
+            resize: set.resize,
+            render(f) {
+                const t = f.time * speed;
+                for (const s of shapes) {
+                    s.mesh.position.set(s.home.x, s.home.y + Math.sin(t * 0.8 + s.phase) * 0.15, s.home.z);
+                    s.mesh.rotation.set(t * s.spin.x, t * s.spin.y + s.phase, t * s.spin.z);
+                }
+                colour(f.colors[1], tinted.attenuationColor);
+                set.update(f);
+                ctx.renderer.render(ctx.scene, set.camera);
+            },
+        };
+    }), options, {
+        colors,
+        fallback: stillFallback(GLASS_SHAPES_META, "The colour backdrop, still. Drop in a pre-rendered image with image() for the shapes.", "radial-gradient(circle at 25% 35%, var(--sx-bg-c2), transparent 55%), radial-gradient(circle at 75% 30%, var(--sx-bg-c3), transparent 50%), radial-gradient(circle at 60% 80%, var(--sx-bg-c4), transparent 55%), var(--sx-bg-c1)", options, colors),
+    });
+}

package/dist/backgrounds/effects/three/glassShapes.schema.d.ts

@@ -0,0 +1 @@
+export declare const GLASS_SHAPES_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/three/glassShapes.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const GLASS_SHAPES_SCHEMA = defineSchema()({
+    id: "glass-shapes",
+    family: "background",
+    factory: "glassShapes",
+    entry: "@sharedex/ui/three",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        colors: { ...colorsField(["var(--color-sx-secondary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))"], 1, 4), help: "The backdrop, then three colour pools the glass bends." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/three/kit.d.ts

@@ -0,0 +1,50 @@
+import * as THREE from "three";
+import type { GpuFrame, GpuProgram, Rgba01 } from "../../types.js";
+/** What a Three.js effect builds once and then updates every frame. */
+export interface ThreeScene {
+    /** Draw one frame. Use `renderer.render(scene, camera)` or a composer. */
+    render(frame: GpuFrame): void;
+    /** Called after the canvas size changes (buffer px). */
+    resize?(width: number, height: number): void;
+    /** Extra things to free (composers, render targets); geometry and materials in `scene` are freed for you. */
+    dispose?(): void;
+}
+export interface ThreeContext {
+    readonly renderer: THREE.WebGLRenderer;
+    readonly scene: THREE.Scene;
+    readonly frame: GpuFrame;
+    readonly random: () => number;
+}
+interface State {
+    readonly renderer: THREE.WebGLRenderer;
+    readonly scene: THREE.Scene;
+    readonly built: ThreeScene;
+    width: number;
+    height: number;
+}
+/**
+ * A GpuProgram that runs a Three.js scene. Three.js r163+ needs WebGL2, so
+ * the program asks for it; the host's context attributes (premultiplied
+ * alpha, no antialias, low power) are kept.
+ */
+export declare function threeProgram(build: (ctx: ThreeContext) => ThreeScene, warmup?: number): GpuProgram<State>;
+/** Free every geometry, material and texture under `root`. */
+export declare function disposeTree(root: THREE.Object3D): void;
+/** A resolved runtime colour as a Three.js colour (the runtime gives sRGB 0–1). */
+export declare function colour(c: Rgba01 | undefined, target?: THREE.Color): THREE.Color;
+/**
+ * Reflections without a download: Three.js's procedural studio room,
+ * prefiltered on the GPU into an environment map.
+ */
+export declare function roomEnvironment(renderer: THREE.WebGLRenderer): THREE.Texture;
+/**
+ * Soft colour blobs painted on a 2D canvas: the thing glass refracts. Redrawn
+ * when the colours change (a theme switch). `colors[0]` is the base.
+ */
+export declare function backdropTexture(): {
+    texture: THREE.CanvasTexture;
+    paint(colors: readonly Rgba01[]): void;
+};
+/** The pointer, or a slow wandering point while there is none: 0–1, y up. */
+export declare function aimPoint(f: GpuFrame): readonly [number, number];
+export { THREE };