@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/backgrounds/effects/wave/mountains.d.ts

@@ -0,0 +1,21 @@
+import type { EffectMeta, LayerOptions, ScrollRange, SvgEffect } from "../../types.js";
+export declare const MOUNTAINS_META: EffectMeta;
+export interface MountainsOptions extends LayerOptions {
+    /** Number of ridges, far to near (2–6). */
+    readonly layers?: number;
+    /** How rugged the ridges are, 0–1. */
+    readonly roughness?: number;
+    /** Parallax strength; 0 keeps the ridges still. */
+    readonly parallax?: number;
+    /** `exit` (default) for a hero at the top of the page, `cover` for a section further down. */
+    readonly range?: ScrollRange;
+    /** Colour of the farthest ridge (hazy). */
+    readonly far?: string;
+    /** Colour of the nearest ridge. */
+    readonly near?: string;
+    /** Draw the sun / moon disc. Default true. */
+    readonly sun?: boolean;
+    readonly seed?: number;
+}
+/** Mountain ridges in layers, parting slowly as the page scrolls. */
+export declare function mountains(options?: MountainsOptions): SvgEffect;

package/dist/backgrounds/effects/wave/mountains.js

@@ -0,0 +1,87 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { scrollVars } from "../../runtime/scroll.js";
+import { defineSvgEffect } from "../define.js";
+import { num } from "../svgKit.js";
+export const MOUNTAINS_META = {
+    id: "mountains",
+    label: "Cool Mountain Background",
+    category: "wave",
+    family: "svg",
+    cost: { kb: "2–4 KB (generated, no download)", cpu: 1, gpu: 1 },
+    tier: "all",
+    needs: { scroll: true },
+    note: "Ridges generated from a seed; the layers part on scroll (parallax).",
+};
+const W = 1000;
+const H = 400;
+/** Ridges reach this far below the drawing, so moving them never bares the bottom edge. */
+const BELOW = H + 260;
+// Ridges come from midpoint displacement: split a line in two, nudge the
+// middle up or down by a random amount, repeat with half the nudge. Far
+// ridges are taller, paler and move most on scroll (they lag behind the
+// page, which reads as distance). Scroll moves them with transform only.
+const CSS = `@layer components {
+  :where([data-sx-bg="mountains"] [data-sx-bg-part="ridge"]),
+  :where([data-sx-bg="mountains"] [data-sx-bg-part="sun"]) {
+    fill: var(--c);
+    transform: translate3d(0, calc((var(--sx-bg-p) - var(--sx-bg-p0)) * var(--depth) * var(--sx-bg-parallax) * 1px), 0);
+  }
+  :where([data-sx-bg="mountains"] [data-sx-bg-part="sun"]) {
+    opacity: 0.85;
+  }
+}`;
+/** Heights at 2^n + 1 evenly spaced points from midpoint displacement, in [-1, 1]-ish. */
+function ridge(r, levels, roughness) {
+    const n = 2 ** levels;
+    const h = new Array(n + 1).fill(0);
+    h[0] = between(r, -0.5, 0.5);
+    h[n] = between(r, -0.5, 0.5);
+    let spread = 1;
+    for (let step = n; step > 1; step /= 2) {
+        for (let i = step / 2; i < n; i += step) {
+            h[i] = ((h[i - step / 2] ?? 0) + (h[i + step / 2] ?? 0)) / 2 + between(r, -spread, spread);
+        }
+        spread *= roughness;
+    }
+    return h;
+}
+/** Mountain ridges in layers, parting slowly as the page scrolls. */
+export function mountains(options = {}) {
+    const r = rng(options.seed ?? 5);
+    const layers = Math.min(6, Math.max(2, Math.round(options.layers ?? 4)));
+    const roughness = Math.min(0.75, Math.max(0.3, 0.42 + (options.roughness ?? 0.5) * 0.25));
+    // aerial perspective in either theme: far ridges fade toward the page surface
+    const far = options.far ?? "color-mix(in oklab, var(--color-sx-accent) 16%, var(--color-sx-secondary))";
+    const near = options.near ?? "color-mix(in oklab, var(--color-sx-accent) 62%, var(--color-sx-secondary))";
+    const children = [];
+    if (options.sun !== false) {
+        children.push({
+            tag: "circle",
+            part: "sun",
+            attrs: { cx: round(between(r, 560, 820), 0), cy: round(between(r, 90, 150), 0), r: 54 },
+            vars: { "--c": "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))", "--depth": 150 },
+        });
+    }
+    for (let i = 0; i < layers; i++) {
+        const t = i / (layers - 1); // 0 = far, 1 = near
+        const h = ridge(r, 6, roughness);
+        const base = H * (0.42 + t * 0.36);
+        const height = H * (0.2 - t * 0.09);
+        const step = W / (h.length - 1);
+        let d = `M0 ${BELOW}`;
+        h.forEach((v, k) => {
+            d += ` L${num(k * step)} ${num(base - Math.min(1.6, Math.max(-0.6, v)) * height)}`;
+        });
+        d += ` L${W} ${BELOW} Z`;
+        children.push({
+            tag: "path",
+            part: "ridge",
+            attrs: { d },
+            vars: {
+                "--c": `color-mix(in oklab, ${near} ${round(t * 100, 0)}%, ${far})`,
+                "--depth": round(110 * (1 - t) + 8, 0),
+            },
+        });
+    }
+    return defineSvgEffect(MOUNTAINS_META, CSS, { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "xMidYMax slice", children }, options, { vars: { ...scrollVars(options.range ?? "exit"), "--sx-bg-parallax": options.parallax ?? 1 } });
+}

package/dist/backgrounds/effects/wave/mountains.schema.d.ts

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

package/dist/backgrounds/effects/wave/mountains.schema.js

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField } from "../../../schema/common.js";
+export const MOUNTAINS_SCHEMA = defineSchema()({
+    id: "mountains",
+    family: "background",
+    factory: "mountains",
+    fields: {
+        ...layerFields(),
+        layers: { kind: "integer", label: "Ridges", min: 2, max: 6, default: 4 },
+        roughness: { kind: "number", label: "Ruggedness", min: 0, max: 1, step: 0.05, default: 0.5 },
+        parallax: { kind: "number", label: "Parallax", min: 0, max: 3, step: 0.05, default: 1, help: "0 keeps the ridges still." },
+        range: { kind: "choice", label: "Scroll range", values: ["exit", "cover"], labels: { "exit": "From the top of the page (a hero)", "cover": "While the section crosses the screen" }, default: "exit" },
+        far: { kind: "color", label: "Farthest ridge", default: "color-mix(in oklab, var(--color-sx-accent) 16%, var(--color-sx-secondary))" },
+        near: { kind: "color", label: "Nearest ridge", default: "color-mix(in oklab, var(--color-sx-accent) 62%, var(--color-sx-secondary))" },
+        sun: { kind: "boolean", label: "Sun / moon", default: true },
+        seed: seedField(5),
+    },
+});

package/dist/backgrounds/effects/wave/ripples.d.ts

@@ -0,0 +1,16 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const RIPPLES_META: EffectMeta;
+export interface RipplesOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Rings visible at once (1–12). */
+    readonly rings?: number;
+    /** Where the rings start. */
+    readonly origin?: "center" | "top" | "bottom";
+    readonly color?: string;
+    /** Ring line width in px. */
+    readonly line?: number;
+    /** Seconds for one ring to grow and fade. */
+    readonly duration?: number;
+}
+/** Concentric rings spreading out and fading, like a drop in still water. */
+export declare function ripples(options?: RipplesOptions): CssEffect;

package/dist/backgrounds/effects/wave/ripples.js

@@ -0,0 +1,52 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+export const RIPPLES_META = {
+    id: "ripples",
+    label: "Animated Ripples Background",
+    category: "wave",
+    family: "css",
+    cost: { kb: "<2 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "scale + opacity are GPU-friendly.",
+};
+const ORIGIN = { center: "50%", top: "0%", bottom: "100%" };
+// Centred with logical negative margins (half the ring), so RTL mirrors
+// correctly. A ring grows from 5% to 300% of its size: its line is thinnest
+// right after it appears and thickens a little as it spreads and fades.
+const CSS = `@layer components {
+  :where([data-sx-bg="ripples"] [data-sx-bg-part="ring"]) {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: var(--sx-bg-origin);
+    inline-size: 50cqmax;
+    aspect-ratio: 1;
+    margin-inline-start: -25cqmax;
+    margin-block-start: -25cqmax;
+    border-radius: 50%;
+    border: var(--sx-bg-line) solid var(--sx-bg-color);
+    opacity: 0;
+    animation: sx-bg-ripple ${duration("var(--sx-bg-d)")} cubic-bezier(0.2, 0.6, 0.35, 1) var(--delay) infinite;
+  }
+  @keyframes sx-bg-ripple {
+    0% { transform: scale(0.05); opacity: 0.9; }
+    100% { transform: scale(3); opacity: 0; }
+  }
+}`;
+/** Concentric rings spreading out and fading, like a drop in still water. */
+export function ripples(options = {}) {
+    const rings = Math.min(12, Math.max(1, Math.round(options.rings ?? 5)));
+    const d = options.duration ?? 8;
+    const nodes = Array.from({ length: rings }, (_, i) => ({
+        part: "ring",
+        vars: { "--delay": `${-round((i * d) / rings, 2)}s` },
+    }));
+    return defineCssEffect(RIPPLES_META, CSS, options, {
+        vars: {
+            "--sx-bg-d": `${d}s`,
+            "--sx-bg-origin": ORIGIN[options.origin ?? "center"],
+            "--sx-bg-line": `${options.line ?? 1}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-accent) 70%, transparent)",
+        },
+        nodes,
+    });
+}

package/dist/backgrounds/effects/wave/ripples.schema.d.ts

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

package/dist/backgrounds/effects/wave/ripples.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField } from "../../../schema/common.js";
+export const RIPPLES_SCHEMA = defineSchema()({
+    id: "ripples",
+    family: "background",
+    factory: "ripples",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        rings: { kind: "integer", label: "Rings", min: 1, max: 12, default: 5 },
+        origin: { kind: "choice", label: "Start at", values: ["center", "top", "bottom"], default: "center" },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 70%, transparent)" },
+        line: { kind: "number", label: "Line width", min: 0.5, max: 6, step: 0.5, unit: "px", default: 1 },
+        duration: { kind: "number", label: "Ring life", min: 1, max: 30, step: 0.5, unit: "s", default: 8 },
+    },
+});

package/dist/backgrounds/effects/wave/svgColorWave.d.ts

@@ -0,0 +1,14 @@
+import type { EffectMeta, LayerOptions, SvgEffect } from "../../types.js";
+export declare const SVG_COLOR_WAVE_META: EffectMeta;
+export interface SvgColorWaveOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of ribbons (1–6). */
+    readonly ribbons?: number;
+    /** Ribbon thickness as a fraction of the layer height. */
+    readonly thickness?: number;
+    /** Colours the ribbons cycle through (up to 6). */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Thick wavy ribbons with colour streaming along them. */
+export declare function svgColorWave(options?: SvgColorWaveOptions): SvgEffect;

package/dist/backgrounds/effects/wave/svgColorWave.js

@@ -0,0 +1,97 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineSvgEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+import { wavePath } from "../svgKit.js";
+export const SVG_COLOR_WAVE_META = {
+    id: "svg-color-wave",
+    label: "Animated SVG Color Wave Effect",
+    category: "wave",
+    family: "svg",
+    cost: { kb: "1–4 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    note: "Colour flows along the ribbons by moving them, not by morphing paths in JS.",
+};
+const W = 1200;
+const H = 400;
+// Each ribbon is a thick stroked wave painted with a gradient that repeats
+// every wave period. The ribbon slides sideways by exactly one period, so the
+// colours stream along it and the loop has no seam; an outer group bobs it up
+// and down on a different clock. Transform-only animation; the only per-frame
+// cost is repainting the strokes.
+const CSS = `@layer components {
+  :where([data-sx-bg="svg-color-wave"] [data-sx-bg-part="stop"]) {
+    stop-color: var(--c);
+  }
+  :where([data-sx-bg="svg-color-wave"] [data-sx-bg-part="ribbon"]) {
+    fill: none;
+    stroke-linecap: round;
+    opacity: var(--o);
+    animation: sx-bg-color-wave-slide ${duration("var(--d)")} linear var(--delay) infinite;
+  }
+  :where([data-sx-bg="svg-color-wave"] [data-sx-bg-part="bob"]) {
+    animation: sx-bg-color-wave-bob ${duration("var(--bd)")} ease-in-out var(--delay) infinite alternate;
+  }
+  :where([dir="rtl"] [data-sx-bg="svg-color-wave"] [data-sx-bg-part="svg"]) {
+    scale: -1 1;
+  }
+  @keyframes sx-bg-color-wave-slide {
+    to { transform: translate3d(calc(-1 * var(--p)), 0, 0); }
+  }
+  @keyframes sx-bg-color-wave-bob {
+    from { transform: translate3d(0, calc(-1 * var(--b)), 0); }
+    to { transform: translate3d(0, var(--b), 0); }
+  }
+}`;
+/** Thick wavy ribbons with colour streaming along them. */
+export function svgColorWave(options = {}) {
+    const r = rng(options.seed ?? 6);
+    const ribbons = Math.min(6, Math.max(1, Math.round(options.ribbons ?? 4)));
+    const thickness = (options.thickness ?? 0.12) * H;
+    const palette = paletteVars(options.colors);
+    const defs = [];
+    const groups = [];
+    for (let i = 0; i < ribbons; i++) {
+        const period = W / ([1, 1.5, 0.75][i % 3] ?? 1);
+        // one colour cycle per period, so sliding one period lands on the same colours
+        const stops = [];
+        for (let k = 0; k <= palette.count; k++) {
+            stops.push({ tag: "stop", part: "stop", attrs: { offset: round(k / palette.count, 4) }, vars: { "--c": paletteRef(k + i, palette.count) } });
+        }
+        defs.push({
+            tag: "linearGradient",
+            attrs: { id: `{uid}-g${i}`, gradientUnits: "userSpaceOnUse", x1: 0, y1: 0, x2: round(period, 1), y2: 0, spreadMethod: "repeat" },
+            children: stops,
+        });
+        const d = round(between(r, 16, 30), 1);
+        groups.push({
+            tag: "g",
+            part: "bob",
+            vars: { "--bd": `${round(between(r, 6, 11), 1)}s`, "--b": `${round(between(r, 10, 28), 0)}px`, "--delay": `${-round(between(r, 0, 10), 1)}s` },
+            children: [
+                {
+                    tag: "path",
+                    part: "ribbon",
+                    attrs: {
+                        d: wavePath({
+                            period,
+                            periods: Math.ceil(W / period) + 1,
+                            base: H * (0.3 + (0.45 * (i + 0.5)) / ribbons),
+                            amplitude: between(r, 0.08, 0.16) * H,
+                            phase: r(),
+                            harmonic: round(between(r, 0.1, 0.4)),
+                        }),
+                        stroke: `url(#{uid}-g${i})`,
+                        "stroke-width": round(thickness * between(r, 0.6, 1.3), 1),
+                    },
+                    vars: {
+                        "--o": round(between(r, 0.55, 0.9)),
+                        "--p": `${round(period, 1)}px`,
+                        "--d": `${d}s`,
+                        "--delay": `${-round(between(r, 0, d), 1)}s`,
+                    },
+                },
+            ],
+        });
+    }
+    return defineSvgEffect(SVG_COLOR_WAVE_META, CSS, { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", children: [{ tag: "defs", children: defs }, ...groups] }, options, { vars: palette.vars });
+}

package/dist/backgrounds/effects/wave/svgColorWave.schema.d.ts

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

package/dist/backgrounds/effects/wave/svgColorWave.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const SVG_COLOR_WAVE_SCHEMA = defineSchema()({
+    id: "svg-color-wave",
+    family: "background",
+    factory: "svgColorWave",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        ribbons: { kind: "integer", label: "Ribbons", min: 1, max: 6, default: 4 },
+        thickness: { kind: "number", label: "Thickness", min: 0.02, max: 0.4, step: 0.01, default: 0.12, help: "A fraction of the layer height." },
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 55%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 60%, var(--color-sx-secondary))"], 1, 6) },
+        seed: seedField(6),
+    },
+});

package/dist/backgrounds/effects/wave/svgWave.d.ts

@@ -0,0 +1,15 @@
+import type { EffectMeta, LayerOptions, SvgEffect } from "../../types.js";
+export declare const SVG_WAVE_META: EffectMeta;
+export interface SvgWaveOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of waves, back to front (1–5). */
+    readonly layers?: number;
+    /** 0–1: where the crests sit, from the top. */
+    readonly level?: number;
+    /** Crest height as a fraction of the layer height. */
+    readonly amplitude?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Layered waves sliding sideways at the bottom of the layer. */
+export declare function svgWave(options?: SvgWaveOptions): SvgEffect;

package/dist/backgrounds/effects/wave/svgWave.js

@@ -0,0 +1,72 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineSvgEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+import { wavePath } from "../svgKit.js";
+export const SVG_WAVE_META = {
+    id: "svg-wave",
+    label: "Animated SVG Wave Background",
+    category: "wave",
+    family: "svg",
+    cost: { kb: "1–3 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Move the wave sideways instead of morphing the path.",
+};
+/** The drawing is 1200 × 400 user units, stretched to the layer. */
+const W = 1200;
+const H = 400;
+// Each wave is a filled sine shape longer than the layer by one period. It
+// slides sideways by exactly that period and loops, so the path itself never
+// changes (no per-frame path work). Back waves are paler and slower. In RTL
+// the drawing mirrors, so the waves travel toward the reading direction.
+const CSS = `@layer components {
+  :where([data-sx-bg="svg-wave"] [data-sx-bg-part="wave"]) {
+    fill: var(--c);
+    opacity: var(--o);
+    animation: sx-bg-svg-wave ${duration("var(--d)")} linear var(--delay) infinite;
+  }
+  :where([dir="rtl"] [data-sx-bg="svg-wave"] [data-sx-bg-part="svg"]) {
+    scale: -1 1;
+  }
+  @keyframes sx-bg-svg-wave {
+    to { transform: translate3d(calc(-1 * var(--p)), 0, 0); }
+  }
+}`;
+/** Layered waves sliding sideways at the bottom of the layer. */
+export function svgWave(options = {}) {
+    const r = rng(options.seed ?? 4);
+    const layers = Math.min(5, Math.max(1, Math.round(options.layers ?? 3)));
+    const level = Math.min(0.95, Math.max(0.05, options.level ?? 0.62));
+    const amplitude = (options.amplitude ?? 0.07) * H;
+    const palette = paletteVars(options.colors);
+    const waves = [];
+    for (let i = 0; i < layers; i++) {
+        const depth = layers === 1 ? 1 : i / (layers - 1); // 0 = back, 1 = front
+        const period = W / ([1, 1.5, 2][i % 3] ?? 1);
+        const d = round(between(r, 14, 22) * (1.6 - depth * 0.7), 1);
+        waves.push({
+            tag: "path",
+            part: "wave",
+            attrs: {
+                d: wavePath({
+                    period,
+                    periods: Math.ceil(W / period) + 1,
+                    base: H * level + depth * H * 0.12,
+                    amplitude: amplitude * (1 - depth * 0.35),
+                    phase: r(),
+                    harmonic: round(between(r, 0, 0.35)),
+                    closeTo: H + 2,
+                }),
+            },
+            vars: {
+                "--c": paletteRef(i, palette.count),
+                "--o": round(0.35 + depth * 0.5),
+                "--p": `${round(period, 1)}px`,
+                "--d": `${d}s`,
+                "--delay": `${-round(between(r, 0, d), 1)}s`,
+            },
+        });
+    }
+    return defineSvgEffect(SVG_WAVE_META, CSS, { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", children: waves }, options, {
+        vars: palette.vars,
+    });
+}

package/dist/backgrounds/effects/wave/svgWave.schema.d.ts

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

package/dist/backgrounds/effects/wave/svgWave.schema.js

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../../schema/define.js";
+import { colorsField, layerFields, seedField, speedField } from "../../../schema/common.js";
+import { SX_PALETTE } from "../palette.js";
+export const SVG_WAVE_SCHEMA = defineSchema()({
+    id: "svg-wave",
+    family: "background",
+    factory: "svgWave",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        layers: { kind: "integer", label: "Waves", min: 1, max: 5, default: 3, help: "Back to front." },
+        level: { kind: "number", label: "Level", min: 0.05, max: 0.95, step: 0.01, default: 0.62, help: "Where the crests sit, from the top." },
+        amplitude: { kind: "number", label: "Crest height", min: 0, max: 0.3, step: 0.005, default: 0.07, help: "A fraction of the layer height." },
+        colors: colorsField(SX_PALETTE),
+        seed: seedField(4),
+    },
+});

package/dist/backgrounds/effects/wave/wavyPattern.d.ts

@@ -0,0 +1,16 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const WAVY_PATTERN_META: EffectMeta;
+export interface WavyPatternOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Length of one wave in px. */
+    readonly wavelength?: number;
+    /** Height of the wave crest in px. */
+    readonly amplitude?: number;
+    /** Distance between wavy lines in px. */
+    readonly spacing?: number;
+    /** Line width in px. */
+    readonly line?: number;
+    readonly color?: string;
+}
+/** Rows of wavy lines drifting sideways. */
+export declare function wavyPattern(options?: WavyPatternOptions): CssEffect;

package/dist/backgrounds/effects/wave/wavyPattern.js

@@ -0,0 +1,50 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect, duration, svgUrl } from "../define.js";
+export const WAVY_PATTERN_META = {
+    id: "wavy-pattern",
+    label: "Animated Wavy Pattern",
+    category: "wave",
+    family: "css",
+    cost: { kb: "1–2 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+};
+/** One wave as a mask tile (w × h): a smooth S-curve across the tile's middle. */
+function waveTile(w, h, a, line) {
+    const y = h / 2;
+    return svgUrl(`<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${h}' viewBox='0 0 ${w} ${h}'>` +
+        `<path d='M0 ${y} Q${w / 4} ${round(y - a)} ${w / 2} ${y} T${w} ${y}' stroke='black' stroke-width='${line}' fill='none'/>` +
+        "</svg>");
+}
+// The colour is a plain fill cut by the wave mask, so the theme token drives
+// it. The pseudo-element overhangs one wavelength on each side and slides by
+// exactly one wavelength: a seamless loop that only changes transform.
+const CSS = `@layer components {
+  :where([data-sx-bg="wavy-pattern"])::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(-1 * var(--sx-bg-w));
+    background: var(--sx-bg-color);
+    mask-image: var(--sx-bg-tile);
+    mask-size: var(--sx-bg-w) var(--sx-bg-h);
+    animation: sx-bg-wavy ${duration("var(--sx-bg-d)")} linear infinite;
+  }
+  @keyframes sx-bg-wavy {
+    to { transform: translate3d(var(--sx-bg-w), 0, 0); }
+  }
+}`;
+/** Rows of wavy lines drifting sideways. */
+export function wavyPattern(options = {}) {
+    const w = options.wavelength ?? 80;
+    const h = options.spacing ?? 22;
+    const a = Math.min(options.amplitude ?? 6, h / 2 - 1);
+    return defineCssEffect(WAVY_PATTERN_META, CSS, options, {
+        vars: {
+            "--sx-bg-tile": waveTile(w, h, a * 2, options.line ?? 1.5),
+            "--sx-bg-w": `${w}px`,
+            "--sx-bg-h": `${h}px`,
+            "--sx-bg-d": "4s",
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-accent) 45%, transparent)",
+        },
+    });
+}

package/dist/backgrounds/effects/wave/wavyPattern.schema.d.ts

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

package/dist/backgrounds/effects/wave/wavyPattern.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField } from "../../../schema/common.js";
+export const WAVY_PATTERN_SCHEMA = defineSchema()({
+    id: "wavy-pattern",
+    family: "background",
+    factory: "wavyPattern",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        wavelength: { kind: "number", label: "Wavelength", min: 20, max: 300, step: 1, unit: "px", default: 80 },
+        amplitude: { kind: "number", label: "Crest height", min: 0, max: 40, step: 0.5, unit: "px", default: 6 },
+        spacing: { kind: "number", label: "Line spacing", min: 6, max: 80, step: 1, unit: "px", default: 22 },
+        line: { kind: "number", label: "Line width", min: 0.5, max: 6, step: 0.5, unit: "px", default: 1.5 },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 45%, transparent)" },
+    },
+});

package/dist/backgrounds/effects/wave/wireframeOcean.d.ts

@@ -0,0 +1,32 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const WIREFRAME_OCEAN_META: EffectMeta;
+export interface WireframeOceanOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Grid lines across (2–100). */
+    readonly cols?: number;
+    /** Grid lines into the distance (2–100). */
+    readonly rows?: number;
+    /** Wave height, 0–2. */
+    readonly height?: number;
+    /** Where the horizon sits, 0 (bottom) to 1 (top). */
+    readonly horizon?: number;
+    /** Two colours: troughs and crests. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+export declare const OCEAN_MAX = 100;
+/**
+ * The grid as line segments: `grid` holds (x, depth) per vertex, x in
+ * [-1, 1], depth in [0, 1] (near to far); `indices` pairs vertices into
+ * segments along each row and each column. Pure.
+ */
+export declare function oceanMesh(cols: number, rows: number): {
+    grid: Float32Array;
+    indices: Uint16Array;
+};
+export declare const WIREFRAME_OCEAN_SHADERS: {
+    readonly vertex: "attribute vec2 a_grid;\nuniform float u_time;\nuniform float u_aspect;\nuniform float u_height;\nuniform float u_horizon;\nuniform float u_rtl;\nvarying float v_far;\nvarying float v_crest;\nfloat waves(vec2 p, float t) {\n  float s = u_rtl > 0.5 ? -1.0 : 1.0;\n  float h = 0.30 * sin(dot(p, vec2(0.9 * s, 0.45)) * 1.3 + t * 1.1);\n  h += 0.18 * sin(dot(p, vec2(-0.6 * s, 0.8)) * 2.1 + t * 1.6);\n  h += 0.10 * sin(dot(p, vec2(0.2 * s, 1.0)) * 3.7 + t * 2.3);\n  h += 0.05 * sin(dot(p, vec2(1.0 * s, -0.3)) * 6.1 + t * 3.1);\n  return h;\n}\nvoid main() {\n  float z = mix(1.2, 14.0, a_grid.y * a_grid.y);\n  float x = a_grid.x * z * u_aspect * 0.9;\n  float y = waves(vec2(x, z), u_time) * u_height;\n  gl_Position = vec4(x / (z * 0.75 * u_aspect), (y - 1.6) / (z * 0.75) + u_horizon * 2.0 - 1.0, 0.0, 1.0);\n  v_far = a_grid.y;\n  v_crest = y / max(u_height, 0.001);\n}";
+    readonly fragment: "precision mediump float;\nuniform vec4 u_c0;\nuniform vec4 u_c1;\nvarying float v_far;\nvarying float v_crest;\nvoid main() {\n  float fade = 1.0 - smoothstep(0.45, 1.0, v_far);\n  vec3 c = mix(u_c0.rgb, u_c1.rgb, clamp(v_crest * 1.6 + 0.5, 0.0, 1.0));\n  float a = fade * mix(u_c0.a, u_c1.a, 0.5);\n  gl_FragColor = vec4(c * a, a);\n}";
+};
+/** A wireframe sea rolling toward a horizon. */
+export declare function wireframeOcean(options?: WireframeOceanOptions): WebglEffect;