@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/grid/contourLines.js

@@ -0,0 +1,157 @@
+import { fbm, noise3 } from "../../runtime/noise.js";
+import { defineSvgEffect } from "../define.js";
+import { smoothPath } from "../svgKit.js";
+import { contourLinesWebgl } from "./contourLinesGl.js";
+export const CONTOUR_LINES_META = {
+    id: "contour-lines",
+    label: "Contour Mapping (topographic lines)",
+    category: "grid",
+    family: "svg",
+    cost: { kb: "5–50 KB SVG (generated, no download)", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "Static SVG is the cheap choice for most sites.",
+};
+/** The terrain is sampled on a COLS × ROWS grid over a 160 × 90 drawing. */
+const COLS = 64;
+const ROWS = 36;
+const W = 160;
+const H = 90;
+const CSS = `@layer components {
+  :where([data-sx-bg="contour-lines"] [data-sx-bg-part="contour"]),
+  :where([data-sx-bg="contour-lines"] [data-sx-bg-part="index"]) {
+    fill: none;
+    stroke: var(--sx-bg-line);
+    stroke-width: var(--sx-bg-width);
+    stroke-linejoin: round;
+  }
+  :where([data-sx-bg="contour-lines"] [data-sx-bg-part="index"]) {
+    stroke-width: calc(var(--sx-bg-width) * 2.2);
+  }
+}`;
+/** Where a level crosses between two samples, as a fraction of the way from a to b. */
+const cross = (a, b, level) => (level - a) / (b - a);
+/**
+ * Marching squares: every grid cell whose corners straddle `level` gets one
+ * segment (two in a saddle). Points are keyed by the grid edge they sit on,
+ * so neighbouring cells share them and the segments chain into lines.
+ */
+function traceLevel(field, level) {
+    const at = (i, j) => field[j * (COLS + 1) + i] ?? 0;
+    const points = new Map();
+    const links = new Map();
+    const sx = W / COLS;
+    const sy = H / ROWS;
+    const point = (key, x, y) => {
+        if (!points.has(key))
+            points.set(key, [x * sx, y * sy]);
+        return key;
+    };
+    const link = (a, b) => {
+        links.set(a, [...(links.get(a) ?? []), b]);
+        links.set(b, [...(links.get(b) ?? []), a]);
+    };
+    for (let j = 0; j < ROWS; j++) {
+        for (let i = 0; i < COLS; i++) {
+            const tl = at(i, j);
+            const tr = at(i + 1, j);
+            const br = at(i + 1, j + 1);
+            const bl = at(i, j + 1);
+            const up = [tl > level, tr > level, br > level, bl > level];
+            // crossing points on the four edges: top, right, bottom, left
+            const top = up[0] !== up[1] ? point(`h${i},${j}`, i + cross(tl, tr, level), j) : null;
+            const right = up[1] !== up[2] ? point(`v${i + 1},${j}`, i + 1, j + cross(tr, br, level)) : null;
+            const bottom = up[3] !== up[2] ? point(`h${i},${j + 1}`, i + cross(bl, br, level), j + 1) : null;
+            const left = up[0] !== up[3] ? point(`v${i},${j}`, i, j + cross(tl, bl, level)) : null;
+            const found = [top, right, bottom, left].filter((k) => k !== null);
+            if (found.length === 2)
+                link(found[0] ?? "", found[1] ?? "");
+            else if (found.length === 4 && top && right && bottom && left) {
+                // saddle: cut off the two corners that disagree with the cell centre
+                const centre = (tl + tr + br + bl) / 4 > level;
+                if (up[0] !== centre)
+                    link(top, left);
+                if (up[1] !== centre)
+                    link(top, right);
+                if (up[2] !== centre)
+                    link(right, bottom);
+                if (up[3] !== centre)
+                    link(bottom, left);
+            }
+        }
+    }
+    // walk the links into polylines: open lines from their loose ends first, then closed loops
+    const used = new Set();
+    const edge = (a, b) => (a < b ? `${a}|${b}` : `${b}|${a}`);
+    const lines = [];
+    const walk = (start) => {
+        const line = [];
+        let prev = "";
+        let cur = start;
+        while (cur !== undefined) {
+            const p = points.get(cur);
+            if (p)
+                line.push(p);
+            const here = cur;
+            const next = (links.get(here) ?? []).find((n) => n !== prev && !used.has(edge(here, n)));
+            if (next === undefined)
+                break;
+            used.add(edge(here, next));
+            prev = here;
+            cur = next;
+        }
+        if (line.length > 2)
+            lines.push(line);
+    };
+    for (const [key, ends] of links)
+        if (ends.length === 1)
+            walk(key);
+    for (const key of links.keys())
+        walk(key);
+    return lines;
+}
+/** The generated drawing, cached: factories may run on every render, the terrain only changes with its options. */
+const cache = new Map();
+function terrain(levels, index, scale, seed) {
+    const key = `${levels}|${index}|${scale}|${seed}`;
+    const hit = cache.get(key);
+    if (hit)
+        return hit;
+    const noise = noise3(seed);
+    const field = new Float32Array((COLS + 1) * (ROWS + 1));
+    let min = Infinity;
+    let max = -Infinity;
+    for (let j = 0; j <= ROWS; j++) {
+        for (let i = 0; i <= COLS; i++) {
+            const v = fbm(noise, i * 0.07 * scale, j * 0.07 * scale, 0.5);
+            field[j * (COLS + 1) + i] = v;
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+    }
+    const paths = [];
+    for (let k = 1; k <= levels; k++) {
+        const level = min + ((max - min) * k) / (levels + 1);
+        const d = traceLevel(field, level).map(smoothPath).join(" ");
+        if (d)
+            paths.push({ tag: "path", part: index > 0 && k % index === 0 ? "index" : "contour", attrs: { d, "vector-effect": "non-scaling-stroke" } });
+    }
+    if (cache.size >= 16)
+        cache.delete(cache.keys().next().value ?? "");
+    cache.set(key, paths);
+    return paths;
+}
+export function contourLines(options = {}) {
+    const levels = Math.min(30, Math.max(4, Math.round(options.levels ?? 14)));
+    const index = Math.max(0, Math.round(options.index ?? 5));
+    const scale = Math.min(4, Math.max(0.25, options.scale ?? 1));
+    const color = options.color ?? "color-mix(in oklab, var(--color-sx-muted) 45%, transparent)";
+    const svg = defineSvgEffect(CONTOUR_LINES_META, CSS, { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "xMidYMid slice", children: terrain(levels, index, scale, options.seed ?? 21) }, options, {
+        vars: {
+            "--sx-bg-line": color,
+            "--sx-bg-width": `${options.line ?? 1}px`,
+        },
+    });
+    return options.renderer === "webgl" ? contourLinesWebgl(CONTOUR_LINES_META, options, { levels, index, scale }, color, svg) : svg;
+}

package/dist/backgrounds/effects/grid/contourLines.schema.d.ts

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

package/dist/backgrounds/effects/grid/contourLines.schema.js

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField } from "../../../schema/common.js";
+export const CONTOUR_LINES_SCHEMA = defineSchema()({
+    id: "contour-lines",
+    family: "background",
+    factory: "contourLines",
+    fields: {
+        ...layerFields(),
+        levels: { kind: "integer", label: "Height levels", min: 4, max: 30, default: 14 },
+        index: { kind: "integer", label: "Heavy line every", min: 0, max: 10, default: 5, help: "0 = none." },
+        scale: { kind: "number", label: "Hill size", min: 0.25, max: 4, step: 0.05, default: 1, help: "Smaller = broader terrain." },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-muted) 45%, transparent)" },
+        line: { kind: "number", label: "Line width", min: 0.5, max: 6, step: 0.25, unit: "px", default: 1 },
+        seed: seedField(21),
+        renderer: { kind: "choice", label: "Renderer", values: ["svg", "webgl"], labels: { "svg": "SVG, still (every device)", "webgl": "WebGL, flowing (mid+)" }, default: "svg" },
+        speed: { ...speedField(), autoNote: "1 (WebGL only)" },
+    },
+});

package/dist/backgrounds/effects/grid/contourLinesGl.d.ts

@@ -0,0 +1,11 @@
+import type { EffectMeta, LayerOptions, SvgEffect, WebglEffect } from "../../types.js";
+export declare const CONTOUR_LINES_GL_META: (meta: EffectMeta) => EffectMeta;
+export declare function contourLinesWebgl(meta: EffectMeta, options: LayerOptions & {
+    readonly speed?: number;
+    readonly line?: number;
+    readonly seed?: number;
+}, terrain: {
+    readonly levels: number;
+    readonly index: number;
+    readonly scale: number;
+}, color: string, fallback: SvgEffect): WebglEffect;

package/dist/backgrounds/effects/grid/contourLinesGl.js

@@ -0,0 +1,57 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, GLSL_SPACE } from "../shaderKit.js";
+export const CONTOUR_LINES_GL_META = (meta) => ({
+    ...meta,
+    family: "webgl",
+    tier: "mid",
+    cost: { kb: "~2 KB (own runner)", cpu: 1, gpu: 2 },
+    note: "Animated version (Mid+): the terrain flows; the static SVG is its fallback.",
+});
+// Contours without tracing anything: every pixel asks how far its height is
+// from the nearest level (in level units), and divides by how steep the
+// terrain is there (two extra samples one pixel away), which turns that into
+// a distance in pixels. So lines keep one width on steep and gentle slopes.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform float u_levels;
+uniform float u_index;
+uniform float u_scale;
+uniform float u_line;
+uniform float u_speed;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_SPACE}${GLSL_OUT}
+// three octaves, not fbm's five: contour lines trace every wiggle, so the
+// terrain must stay smooth or the lines turn jagged
+float height(vec2 p, float t) {
+  vec2 q = p * u_scale + vec2(t * 0.15, -t * 0.1) + u_seed * 3.0;
+  return sx_noise(q) * 0.6 + sx_noise(q * 2.03 + 1.7) * 0.28 + sx_noise(q * 4.01 + 9.2) * 0.12;
+}
+void main() {
+  vec2 p = sx_centered() * 2.2;
+  float t = u_time * u_speed * 0.3;
+  float e = 2.2 / u_resolution.y; // one drawing-buffer pixel, in p units
+  float h = height(p, t);
+  float slope = length(vec2(height(p + vec2(e, 0.0), t) - h, height(p + vec2(0.0, e), t) - h)) / e;
+  float v = h * u_levels * 1.25;
+  float d = abs(fract(v - 0.5) - 0.5);
+  float px = d / max(slope * u_levels * 1.25 * e, 1e-4);
+  float index = u_index > 0.5 ? step(mod(floor(v + 0.5), u_index), 0.5) : 0.0;
+  float w = u_line * u_dpr * (1.0 + index * 1.2) * 0.5;
+  float a = 1.0 - smoothstep(w - 0.5, w + 0.5, px);
+  gl_FragColor = sx_out(u_c0.rgb, a * u_c0.a);
+}
+`;
+export function contourLinesWebgl(meta, options, terrain, color, fallback) {
+    return defineWebglEffect(CONTOUR_LINES_GL_META(meta), FRAGMENT, options, {
+        colors: [color],
+        uniforms: {
+            u_levels: terrain.levels,
+            u_index: terrain.index,
+            u_scale: terrain.scale,
+            u_line: options.line ?? 1,
+            u_speed: options.speed ?? 1,
+            u_seed: options.seed ?? 21,
+        },
+        fallback,
+    });
+}

package/dist/backgrounds/effects/grid/dataGrid.d.ts

@@ -0,0 +1,15 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const DATA_GRID_META: EffectMeta;
+export interface DataGridOptions extends LayerOptions {
+    readonly speed?: number;
+    readonly cols?: number;
+    readonly rows?: number;
+    readonly colors?: readonly string[];
+    /** 0–1, resting brightness of a cell. */
+    readonly base?: number;
+    /** The glow that follows the pointer. `false` turns it off. */
+    readonly glow?: string | false;
+    readonly seed?: number;
+}
+/** A dense grid of cells blinking like live data, with a glow under the cursor. */
+export declare function dataGrid(options?: DataGridOptions): CssEffect;

package/dist/backgrounds/effects/grid/dataGrid.js

@@ -0,0 +1,73 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+import { CELL_GRID, cells } from "./lines.js";
+export const DATA_GRID_META = {
+    id: "data-grid",
+    label: "DataGridHero",
+    category: "grid",
+    family: "css",
+    cost: { kb: "3–6 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "Default 12×20 = 240 animated cells plus a mouse glow.",
+};
+// Cells that blink on at seeded moments like live data (opacity only), plus a
+// pointer glow drawn once on the layer's ::after.
+const CSS = `@layer components {
+  :where([data-sx-bg="data-grid"]) {
+    ${CELL_GRID}
+    gap: 3px;
+  }
+  :where([data-sx-bg="data-grid"] [data-sx-bg-part="cell"]) {
+    border-radius: 2px;
+    background: var(--c);
+    opacity: var(--sx-bg-base);
+    animation: sx-bg-data ${duration("var(--d)")} ease-in-out var(--delay) infinite;
+  }
+  :where([data-sx-bg="data-grid"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle 220px at var(--sx-pointer-x, 50%) var(--sx-pointer-y, 40%), color-mix(in oklab, var(--sx-bg-glow) 35%, transparent), transparent 70%);
+    opacity: 0.5;
+    transition: opacity 400ms ease;
+  }
+  :where([data-sx-pointer="in"] [data-sx-bg="data-grid"])::after {
+    opacity: 1;
+  }
+  @keyframes sx-bg-data {
+    0%, 70%, 100% { opacity: var(--sx-bg-base); }
+    78% { opacity: var(--o); }
+  }
+}`;
+/** A dense grid of cells blinking like live data, with a glow under the cursor. */
+export function dataGrid(options = {}) {
+    const palette = paletteVars(options.colors ?? ["var(--color-sx-accent)", "var(--color-sx-accent)", "var(--color-sx-primary)"]);
+    const r = rng(options.seed ?? 29);
+    const cols = cells(options.cols, 20, 40);
+    const rows = cells(options.rows, 12, 30);
+    const nodes = [];
+    for (let i = 0; i < cols * rows; i++) {
+        const d = round(between(r, 3, 9), 1);
+        nodes.push({
+            part: "cell",
+            vars: {
+                "--c": paletteRef(Math.floor(r() * palette.count), palette.count),
+                "--o": round(between(r, 0.45, 0.95)),
+                "--d": `${d}s`,
+                "--delay": `${-round(between(r, 0, d), 1)}s`,
+            },
+        });
+    }
+    return defineCssEffect(DATA_GRID_META, CSS, options, {
+        vars: {
+            ...palette.vars,
+            "--sx-bg-cols": cols,
+            "--sx-bg-rows": rows,
+            "--sx-bg-base": options.base ?? 0.08,
+            "--sx-bg-glow": options.glow === false ? "transparent" : (options.glow ?? "var(--color-sx-accent)"),
+        },
+        nodes,
+    });
+}

package/dist/backgrounds/effects/grid/dataGrid.schema.d.ts

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

package/dist/backgrounds/effects/grid/dataGrid.schema.js

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const DATA_GRID_SCHEMA = defineSchema()({
+    id: "data-grid",
+    family: "background",
+    factory: "dataGrid",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cols: { kind: "integer", label: "Columns", min: 1, max: 40, default: 20 },
+        rows: { kind: "integer", label: "Rows", min: 1, max: 30, default: 12 },
+        colors: { ...colorsField(["var(--color-sx-accent)", "var(--color-sx-accent)", "var(--color-sx-primary)"], 1, 6) },
+        base: { kind: "number", label: "Resting brightness", min: 0, max: 1, step: 0.01, default: 0.08 },
+        glow: { kind: "color", label: "Pointer glow", default: "var(--color-sx-accent)", help: "transparent turns it off." },
+        seed: seedField(29),
+    },
+});

package/dist/backgrounds/effects/grid/dotPattern.d.ts

@@ -0,0 +1,11 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const DOT_PATTERN_META: EffectMeta;
+export interface DotPatternOptions extends LayerOptions {
+    /** Dot radius in px. */
+    readonly size?: number;
+    /** Distance between dots in px. */
+    readonly gap?: number;
+    readonly color?: string;
+}
+/** A static grid of dots. Paints once; costs nothing after that. */
+export declare function dotPattern(options?: DotPatternOptions): CssEffect;

package/dist/backgrounds/effects/grid/dotPattern.js

@@ -0,0 +1,27 @@
+import { defineCssEffect } from "../define.js";
+export const DOT_PATTERN_META = {
+    id: "dot-pattern",
+    label: "Dot pattern / graph paper",
+    category: "grid",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "One of the most used background patterns right now.",
+};
+const CSS = `@layer components {
+  :where([data-sx-bg="dot-pattern"]) {
+    background-image: radial-gradient(circle at center, var(--sx-bg-color) var(--sx-bg-dot), transparent calc(var(--sx-bg-dot) + 0.6px));
+    background-size: var(--sx-bg-gap) var(--sx-bg-gap);
+    background-position: center;
+  }
+}`;
+/** A static grid of dots. Paints once; costs nothing after that. */
+export function dotPattern(options = {}) {
+    return defineCssEffect(DOT_PATTERN_META, CSS, options, {
+        vars: {
+            "--sx-bg-dot": `${options.size ?? 1.2}px`,
+            "--sx-bg-gap": `${options.gap ?? 22}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-muted) 45%, transparent)",
+        },
+    });
+}

package/dist/backgrounds/effects/grid/dotPattern.schema.d.ts

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

package/dist/backgrounds/effects/grid/dotPattern.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const DOT_PATTERN_SCHEMA = defineSchema()({
+    id: "dot-pattern",
+    family: "background",
+    factory: "dotPattern",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Dot radius", min: 0.5, max: 6, step: 0.1, unit: "px", default: 1.2 },
+        gap: { kind: "number", label: "Spacing", min: 6, max: 80, step: 1, unit: "px", default: 22 },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-muted) 45%, transparent)" },
+    },
+});

package/dist/backgrounds/effects/grid/fadingGrid.d.ts

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const FADING_GRID_META: EffectMeta;
+export interface FadingGridOptions extends LayerOptions {
+    readonly cell?: number;
+    readonly line?: number;
+    readonly color?: string;
+    /** Where the grid is strongest before it fades out. */
+    readonly from?: "top" | "center" | "bottom";
+    /** The soft glow behind the strongest part. `false` turns it off. */
+    readonly glow?: string | false;
+}
+/** Grid lines that fade out from one edge or the centre, with a soft glow. */
+export declare function fadingGrid(options?: FadingGridOptions): CssEffect;

package/dist/backgrounds/effects/grid/fadingGrid.js

@@ -0,0 +1,41 @@
+import { defineCssEffect } from "../define.js";
+export const FADING_GRID_META = {
+    id: "fading-grid",
+    label: "Fading Grid Gradient Background",
+    category: "grid",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Classic dev-tool landing page look.",
+};
+const ORIGIN = { top: "0%", center: "50%", bottom: "100%" };
+const CSS = `@layer components {
+  :where([data-sx-bg="fading-grid"]) {
+    background-image:
+      linear-gradient(to right, var(--sx-bg-color) var(--sx-bg-line), transparent var(--sx-bg-line)),
+      linear-gradient(to bottom, var(--sx-bg-color) var(--sx-bg-line), transparent var(--sx-bg-line));
+    background-size: var(--sx-bg-cell) var(--sx-bg-cell);
+    background-position: center var(--sx-bg-origin);
+  }
+  :where([data-sx-bg="fading-grid"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse 55% 45% at 50% var(--sx-bg-origin), color-mix(in oklab, var(--sx-bg-glow) 40%, transparent), transparent);
+  }
+}`;
+/** Grid lines that fade out from one edge or the centre, with a soft glow. */
+export function fadingGrid(options = {}) {
+    const origin = ORIGIN[options.from ?? "top"];
+    return defineCssEffect(FADING_GRID_META, CSS, options, {
+        vars: {
+            "--sx-bg-cell": `${options.cell ?? 48}px`,
+            "--sx-bg-line": `${options.line ?? 1}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-muted) 30%, transparent)",
+            "--sx-bg-origin": origin,
+            "--sx-bg-glow": options.glow === false ? "transparent" : (options.glow ?? "var(--color-sx-accent)"),
+            // The fade. An explicit `mask` option overrides it (layer vars are applied last).
+            "--sx-bg-mask": `radial-gradient(ellipse 80% 70% at 50% ${origin}, black 35%, transparent 100%)`,
+        },
+    });
+}

package/dist/backgrounds/effects/grid/fadingGrid.schema.d.ts

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

package/dist/backgrounds/effects/grid/fadingGrid.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const FADING_GRID_SCHEMA = defineSchema()({
+    id: "fading-grid",
+    family: "background",
+    factory: "fadingGrid",
+    fields: {
+        ...layerFields(),
+        cell: { kind: "number", label: "Cell size", min: 12, max: 160, step: 1, unit: "px", default: 48 },
+        line: { kind: "number", label: "Line width", min: 0.5, max: 6, step: 0.5, unit: "px", default: 1 },
+        color: { kind: "color", label: "Lines", default: "color-mix(in oklab, var(--color-sx-muted) 30%, transparent)" },
+        from: { kind: "choice", label: "Strongest at", values: ["top", "center", "bottom"], default: "top" },
+        glow: { kind: "color", label: "Glow", default: "var(--color-sx-accent)", help: "transparent turns it off." },
+    },
+});

package/dist/backgrounds/effects/grid/geometricVectors.d.ts

@@ -0,0 +1,15 @@
+import type { EffectMeta, LayerOptions, SvgEffect } from "../../types.js";
+export declare const GEOMETRIC_VECTORS_META: EffectMeta;
+export interface GeometricVectorsOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of shapes (4–40). */
+    readonly count?: number;
+    /** Let the shapes drift and turn slowly. Default true. */
+    readonly animate?: boolean;
+    readonly colors?: readonly string[];
+    /** Stroke width in px. */
+    readonly line?: number;
+    readonly seed?: number;
+}
+/** Outline shapes scattered across the layer, slowly drifting. */
+export declare function geometricVectors(options?: GeometricVectorsOptions): SvgEffect;

package/dist/backgrounds/effects/grid/geometricVectors.js

@@ -0,0 +1,136 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineSvgEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+import { num } from "../svgKit.js";
+export const GEOMETRIC_VECTORS_META = {
+    id: "geometric-vectors",
+    label: "Abstract Background Geometric Vectors",
+    category: "grid",
+    family: "svg",
+    cost: { kb: "2–4 KB (generated, no download)", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Generated from a seed, so there is no SVG file to optimise or download.",
+};
+const W = 160;
+const H = 90;
+// A seeded scatter of outline shapes (rings, triangles, squares, crosses,
+// dot patches, line bundles). Each shape group drifts and turns a little
+// around its own centre (transform-box: fill-box), on its own slow clock.
+const CSS = `@layer components {
+  :where([data-sx-bg="geometric-vectors"] [data-sx-bg-part="shape"]) {
+    fill: none;
+    stroke: var(--c);
+    stroke-width: var(--sx-bg-width);
+    opacity: var(--o);
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  :where([data-sx-bg="geometric-vectors"] [data-sx-bg-part="shape"][data-filled]) {
+    fill: color-mix(in oklab, var(--c) 18%, transparent);
+  }
+  :where([data-sx-bg="geometric-vectors"] [data-sx-bg-part="dots"]) {
+    fill: var(--c);
+    stroke: none;
+    opacity: var(--o);
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  :where([data-sx-bg="geometric-vectors"] [data-sx-bg-part="shape"]),
+  :where([data-sx-bg="geometric-vectors"] [data-sx-bg-part="dots"]) {
+    animation: sx-bg-geo-drift ${duration("var(--d)")} ease-in-out var(--delay) infinite alternate;
+    animation-play-state: var(--sx-bg-play);
+  }
+  @keyframes sx-bg-geo-drift {
+    from { transform: translate3d(0, 0, 0) rotate(0deg); }
+    to { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r)); }
+  }
+}`;
+const SHAPES = [
+    (_r, x, y, s) => ({ el: { tag: "circle", attrs: { cx: num(x), cy: num(y), r: num(s) } } }),
+    (r, x, y, s) => ({
+        el: { tag: "circle", attrs: { cx: num(x), cy: num(y), r: num(s * 1.3), "stroke-dasharray": `${num(s * 0.3)} ${num(s * 0.25)}` } },
+        filled: r() < 0.3,
+    }),
+    (r, x, y, s) => {
+        const a = r() * Math.PI * 2;
+        const pts = [0, 1, 2].map((k) => `${num(x + s * Math.cos(a + (k * Math.PI * 2) / 3))},${num(y + s * Math.sin(a + (k * Math.PI * 2) / 3))}`);
+        return { el: { tag: "polygon", attrs: { points: pts.join(" ") } }, filled: r() < 0.4 };
+    },
+    (r, x, y, s) => ({
+        el: { tag: "rect", attrs: { x: num(x - s * 0.7), y: num(y - s * 0.7), width: num(s * 1.4), height: num(s * 1.4), transform: `rotate(${round(between(r, 0, 90), 0)} ${num(x)} ${num(y)})` } },
+        filled: r() < 0.3,
+    }),
+    (_r, x, y, s) => ({ el: { tag: "path", attrs: { d: `M${num(x - s * 0.5)} ${num(y)}H${num(x + s * 0.5)}M${num(x)} ${num(y - s * 0.5)}V${num(y + s * 0.5)}` } } }),
+    (r, x, y, s) => {
+        const a = between(r, 20, 70) * (Math.PI / 180);
+        const dx = Math.cos(a) * s * 1.6;
+        const dy = Math.sin(a) * s * 1.6;
+        let d = "";
+        for (let k = -2; k <= 2; k++) {
+            const ox = -Math.sin(a) * k * s * 0.3;
+            const oy = Math.cos(a) * k * s * 0.3;
+            d += `M${num(x - dx + ox)} ${num(y - dy + oy)}L${num(x + dx + ox)} ${num(y + dy + oy)}`;
+        }
+        return { el: { tag: "path", attrs: { d } } };
+    },
+];
+/** A loose patch of dots, drawn as one path of tiny circles (one element, not dozens). */
+function dotPatch(r, x, y, s) {
+    const cols = 4 + Math.floor(r() * 3);
+    const rows = 3 + Math.floor(r() * 2);
+    const gap = s * 0.45;
+    const dot = 0.45;
+    let d = "";
+    for (let j = 0; j < rows; j++) {
+        for (let i = 0; i < cols; i++) {
+            const cx = x + (i - (cols - 1) / 2) * gap;
+            const cy = y + (j - (rows - 1) / 2) * gap;
+            d += `M${num(cx - dot)} ${num(cy)}a${dot} ${dot} 0 1 0 ${dot * 2} 0a${dot} ${dot} 0 1 0 ${-dot * 2} 0`;
+        }
+    }
+    return d;
+}
+/** Outline shapes scattered across the layer, slowly drifting. */
+export function geometricVectors(options = {}) {
+    const r = rng(options.seed ?? 17);
+    const count = Math.min(40, Math.max(4, Math.round(options.count ?? 16)));
+    const palette = paletteVars(options.colors);
+    const children = [];
+    for (let i = 0; i < count; i++) {
+        const x = between(r, 4, W - 4);
+        const y = between(r, 4, H - 4);
+        const s = between(r, 3, 9);
+        const d = round(between(r, 14, 30), 1);
+        const motion = {
+            "--c": paletteRef(i, palette.count),
+            "--o": round(between(r, 0.35, 0.8)),
+            "--dx": `${round(between(r, -4, 4), 1)}px`,
+            "--dy": `${round(between(r, -3, 3), 1)}px`,
+            "--r": `${round(between(r, -40, 40), 0)}deg`,
+            "--d": `${d}s`,
+            "--delay": `${-round(between(r, 0, d), 1)}s`,
+        };
+        if (i % 7 === 6) {
+            children.push({ tag: "path", part: "dots", attrs: { d: dotPatch(r, x, y, s) }, vars: motion });
+            continue;
+        }
+        const shape = SHAPES[Math.floor(r() * SHAPES.length)] ?? SHAPES[0];
+        if (!shape)
+            continue;
+        const { el, filled } = shape(r, x, y, s);
+        children.push({
+            ...el,
+            attrs: { ...el.attrs, "vector-effect": "non-scaling-stroke", ...(filled ? { "data-filled": "" } : {}) },
+            part: "shape",
+            vars: motion,
+        });
+    }
+    return defineSvgEffect(GEOMETRIC_VECTORS_META, CSS, { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "xMidYMid slice", children }, options, {
+        vars: {
+            ...palette.vars,
+            "--sx-bg-width": `${options.line ?? 1.25}px`,
+            // a paused animation costs nothing per frame and keeps each shape's seeded pose
+            "--sx-bg-play": options.animate === false ? "paused" : "running",
+        },
+    });
+}

package/dist/backgrounds/effects/grid/geometricVectors.schema.d.ts

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