@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/backgrounds/effects/glitch/ditherWave.d.ts

@@ -0,0 +1,12 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const DITHER_WAVE_META: EffectMeta;
+export interface DitherWaveOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Size of one dither pixel in px. */
+    readonly pixel?: number;
+    /** The ink colour (the rest stays transparent). */
+    readonly color?: string;
+    readonly seed?: number;
+}
+/** A wave rendered as ordered 1-bit dither, like an old screen. */
+export declare function ditherWave(options?: DitherWaveOptions): WebglEffect;

package/dist/backgrounds/effects/glitch/ditherWave.js

@@ -0,0 +1,52 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, slots, stillFallback } from "../shaderKit.js";
+export const DITHER_WAVE_META = {
+    id: "dither-wave",
+    label: "Wave (dithering shader)",
+    category: "glitch",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner, no library)", cpu: 1, gpu: 2 },
+    tier: "mid",
+    note: "8×8 Bayer dithering with pixel size control. Bigger pixels = cheaper.",
+};
+// A smooth wave field (crossing sines plus noise) is reduced to on / off with
+// an 8×8 Bayer matrix: each pixel of an 8×8 tile has its own threshold, so
+// mid tones become regular dot patterns, like a 1-bit screen. The matrix is
+// computed, not stored: each level is the 2×2 pattern applied recursively.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform float u_speed;
+uniform float u_pixel;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_OUT}
+float bayer2(vec2 a) {
+  a = floor(a);
+  return fract(a.x / 2.0 + a.y * a.y * 0.75);
+}
+float bayer4(vec2 a) {
+  return bayer2(0.5 * a) * 0.25 + bayer2(a);
+}
+float bayer8(vec2 a) {
+  return bayer4(0.5 * a) * 0.25 + bayer2(a);
+}
+void main() {
+  float size = max(1.0, floor(u_pixel * u_dpr + 0.5));
+  vec2 cell = floor(gl_FragCoord.xy / size);
+  vec2 p = ((cell + 0.5) * size / u_resolution - 0.5) * vec2(u_resolution.x / u_resolution.y, 1.0);
+  float t = u_time * u_speed * 0.5 + u_seed * 3.0;
+  float wave = 0.5 + 0.3 * sin(p.x * 4.0 + t + 2.0 * sin(p.y * 3.0 - t * 0.7));
+  wave += 0.35 * (sx_fbm(p * 2.2 + vec2(t * 0.2, 0.0)) - 0.5);
+  wave *= 1.0 - smoothstep(0.1, 0.5, p.y + 0.15 * sin(p.x * 2.0 + t));
+  float on = step(bayer8(cell), clamp(wave, 0.0, 1.0));
+  gl_FragColor = sx_out(u_c0.rgb, on * u_c0.a);
+}
+`;
+/** A wave rendered as ordered 1-bit dither, like an old screen. */
+export function ditherWave(options = {}) {
+    const colors = slots(options.color ? [options.color] : undefined, ["var(--color-sx-accent)"]);
+    return defineWebglEffect(DITHER_WAVE_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_pixel: Math.max(1, options.pixel ?? 3), u_seed: options.seed ?? 0 },
+        fallback: stillFallback(DITHER_WAVE_META, "A still checker of 1-bit dots fading upward.", "conic-gradient(var(--sx-bg-c1) 25%, transparent 0 50%, var(--sx-bg-c1) 0 75%, transparent 0) 0 0 / 6px 6px", options, colors),
+    });
+}

package/dist/backgrounds/effects/glitch/ditherWave.schema.d.ts

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

package/dist/backgrounds/effects/glitch/ditherWave.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField } from "../../../schema/common.js";
+export const DITHER_WAVE_SCHEMA = defineSchema()({
+    id: "dither-wave",
+    family: "background",
+    factory: "ditherWave",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        pixel: { kind: "number", label: "Pixel size", min: 1, max: 12, step: 1, unit: "px", default: 3 },
+        color: { kind: "color", label: "Ink", default: "var(--color-sx-accent)" },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/glitch/matrixRain.d.ts

@@ -0,0 +1,15 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const MATRIX_RAIN_META: EffectMeta;
+export interface MatrixRainOptions extends LayerOptions {
+    /** Glyph size in px. */
+    readonly size?: number;
+    /** 1 = default fall speed. */
+    readonly speed?: number;
+    /** Trail colour, then head colour. */
+    readonly colors?: readonly string[];
+    /** 0–1, how fast trails fade (higher = shorter trails). */
+    readonly fade?: number;
+    readonly seed?: number;
+}
+/** Columns of falling glyphs leaving fading trails. Runs at 30 fps. */
+export declare function matrixRain(options?: MatrixRainOptions): CanvasEffect;

package/dist/backgrounds/effects/glitch/matrixRain.js

@@ -0,0 +1,58 @@
+import { defineCanvasEffect } from "../define.js";
+import { fadeTrail, paint, rand } from "../canvasKit.js";
+export const MATRIX_RAIN_META = {
+    id: "matrix-rain",
+    label: "Matrix (digital rain)",
+    category: "glitch",
+    family: "canvas",
+    cost: { kb: "2–4 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    note: "Cap to ~30 fps; the look doesn't need 60.",
+};
+/** Half-width katakana and digits, the classic set. */
+const GLYPHS = Array.from({ length: 58 }, (_, i) => String.fromCharCode(0xff66 + i)).concat("0123456789".split(""));
+const BASE_ROWS_PER_SECOND = 14;
+function program(size, speed, fade) {
+    return {
+        init(env, random) {
+            const cols = Math.ceil(env.width / size);
+            const rows = Math.ceil(env.height / size);
+            const drops = Array.from({ length: cols }, () => ({
+                row: rand(random, -rows, rows),
+                rate: rand(random, 0.6, 1.4),
+                glyph: GLYPHS[0] ?? "0",
+                bright: false,
+            }));
+            return { random, size, rows, drops };
+        },
+        step(state, deltaMs) {
+            const { random } = state;
+            for (const d of state.drops) {
+                d.row += d.rate * BASE_ROWS_PER_SECOND * speed * (deltaMs / 1000);
+                d.glyph = GLYPHS[Math.floor(random() * GLYPHS.length)] ?? "0";
+                d.bright = random() > 0.6;
+                // past the bottom: restart above the top, now or a little later
+                if (d.row > state.rows && random() > 0.97)
+                    d.row = rand(random, -8, 0);
+            }
+        },
+        draw(ctx, state, env) {
+            fadeTrail(ctx, env, fade);
+            ctx.font = `${state.size}px ui-monospace, SFMono-Regular, Menlo, monospace`;
+            ctx.textBaseline = "top";
+            state.drops.forEach((d, col) => {
+                if (d.row < 0)
+                    return;
+                ctx.fillStyle = paint(env, d.bright ? 1 : 0);
+                ctx.fillText(d.glyph, col * state.size, Math.floor(d.row) * state.size);
+            });
+        },
+    };
+}
+/** Columns of falling glyphs leaving fading trails. Runs at 30 fps. */
+export function matrixRain(options = {}) {
+    return defineCanvasEffect(MATRIX_RAIN_META, program(options.size ?? 16, options.speed ?? 1, options.fade ?? 0.09), options, {
+        colors: options.colors ?? ["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 35%, white)"],
+        fps: 30,
+    });
+}

package/dist/backgrounds/effects/glitch/matrixRain.schema.d.ts

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

package/dist/backgrounds/effects/glitch/matrixRain.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { colorsField, layerFields, seedField } from "../../../schema/common.js";
+export const MATRIX_RAIN_SCHEMA = defineSchema()({
+    id: "matrix-rain",
+    family: "background",
+    factory: "matrixRain",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Glyph size", min: 8, max: 40, step: 1, unit: "px", default: 16 },
+        speed: { kind: "number", label: "Speed", min: 0.1, max: 4, step: 0.05, default: 1 },
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 35%, white)"], 2, 2), help: "The trail, then the leading glyph." },
+        fade: { kind: "number", label: "Trail fade", min: 0.01, max: 1, step: 0.01, default: 0.09, help: "Higher = shorter trails." },
+        seed: seedField(1),
+    },
+});

package/dist/backgrounds/effects/glitch/retroScreen.d.ts

@@ -0,0 +1,12 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const RETRO_SCREEN_META: EffectMeta;
+export interface RetroScreenOptions extends LayerOptions {
+    /** Colour cast of the old tube; defaults to the theme accent. */
+    readonly tint?: string;
+    /** 0–1, how dark the fine scanlines are. */
+    readonly strength?: number;
+    /** Rounded black screen corners, like a TV bezel. `false` (default) for none. */
+    readonly bezel?: string | false;
+}
+/** An old CRT-anime look over whatever is below: colour cast, fine scanlines, rounded shading. */
+export declare function retroScreen(options?: RetroScreenOptions): CssEffect;

package/dist/backgrounds/effects/glitch/retroScreen.js

@@ -0,0 +1,50 @@
+import { defineCssEffect, duration } from "../define.js";
+export const RETRO_SCREEN_META = {
+    id: "retro-screen",
+    label: "Retro Anime Screen",
+    category: "glitch",
+    family: "css",
+    cost: { kb: "~2 KB + the image/video", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "Cost is mostly the artwork underneath.",
+};
+// Meant to sit over artwork (an image(), a video(), an aurora): a colour cast,
+// fine 2 px scanlines that breathe slightly, and a rounded inner shadow. With
+// a bezel, the shading box is inset from the edges and its outward shadow
+// fills that margin and the rounded corners (the layer clips the rest).
+const CSS = `@layer components {
+  :where([data-sx-bg="retro-screen"]) {
+    background: linear-gradient(to bottom, color-mix(in oklab, var(--sx-bg-tint) 22%, transparent), color-mix(in oklab, var(--sx-bg-tint) 6%, transparent));
+  }
+  :where([data-sx-bg="retro-screen"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(to bottom, color-mix(in oklab, black calc(var(--sx-bg-strength) * 100%), transparent) 0 1px, transparent 1px 2px);
+    animation: sx-bg-retro ${duration("2.4s")} steps(4) infinite alternate;
+  }
+  :where([data-sx-bg="retro-screen"])::after {
+    content: "";
+    position: absolute;
+    inset: var(--sx-bg-edge);
+    border-radius: 4cqmin;
+    box-shadow:
+      0 0 0 8cqmin var(--sx-bg-bezel),
+      inset 0 0 9cqmin 1cqmin color-mix(in oklab, black 50%, transparent);
+  }
+  @keyframes sx-bg-retro {
+    from { opacity: 0.8; }
+    to { opacity: 1; }
+  }
+}`;
+/** An old CRT-anime look over whatever is below: colour cast, fine scanlines, rounded shading. */
+export function retroScreen(options = {}) {
+    return defineCssEffect(RETRO_SCREEN_META, CSS, options, {
+        vars: {
+            "--sx-bg-tint": options.tint ?? "var(--color-sx-accent)",
+            "--sx-bg-strength": options.strength ?? 0.3,
+            "--sx-bg-bezel": options.bezel === undefined || options.bezel === false ? "transparent" : options.bezel,
+            "--sx-bg-edge": options.bezel === undefined || options.bezel === false ? "0px" : "2.5cqmin",
+        },
+    });
+}

package/dist/backgrounds/effects/glitch/retroScreen.schema.d.ts

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

package/dist/backgrounds/effects/glitch/retroScreen.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const RETRO_SCREEN_SCHEMA = defineSchema()({
+    id: "retro-screen",
+    family: "background",
+    factory: "retroScreen",
+    fields: {
+        ...layerFields(),
+        tint: { kind: "color", label: "Tube tint", default: "var(--color-sx-accent)" },
+        strength: { kind: "number", label: "Scanlines", min: 0, max: 1, step: 0.01, default: 0.3 },
+        bezel: { kind: "color", label: "Bezel", autoNote: "none", help: "Rounded screen corners in this colour, like a TV." },
+    },
+});

package/dist/backgrounds/effects/glitch/rgbShift.d.ts

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const RGB_SHIFT_META: EffectMeta;
+export interface RgbShiftOptions extends LayerOptions {
+    readonly speed?: number;
+    /** The three channel colours; default red, green, blue. */
+    readonly colors?: readonly string[];
+    /** How the channels mix: `screen` adds light (white where all meet), `multiply` for light pages. */
+    readonly mix?: "screen" | "multiply" | "lighten" | "plus-lighter";
+    /** Orbit radius in % of the layer's longer side. */
+    readonly orbit?: number;
+}
+/** Red, green and blue light drifting past each other. */
+export declare function rgbShift(options?: RgbShiftOptions): CssEffect;

package/dist/backgrounds/effects/glitch/rgbShift.js

@@ -0,0 +1,58 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+export const RGB_SHIFT_META = {
+    id: "rgb-shift",
+    label: "RGB background effect",
+    category: "glitch",
+    family: "css",
+    cost: { kb: "<2 KB", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "A filter on a full-screen layer repaints it each frame.",
+};
+// Three soft colour discs on slow orbits, blended like light. No filter, so
+// nothing repaints: each disc only moves (rotate - translate - unrotate keeps
+// it upright while it circles).
+const CSS = `@layer components {
+  :where([data-sx-bg="rgb-shift"]) {
+    isolation: isolate;
+  }
+  :where([data-sx-bg="rgb-shift"] [data-sx-bg-part="channel"]) {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: 90cqmax;
+    aspect-ratio: 1;
+    margin-inline-start: -45cqmax;
+    margin-block-start: -45cqmax;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, var(--c), transparent);
+    mix-blend-mode: var(--sx-bg-mix);
+    animation: sx-bg-rgb ${duration("var(--d)")} linear var(--delay) infinite;
+  }
+  @keyframes sx-bg-rgb {
+    from { transform: rotate(0deg) translate3d(var(--sx-bg-orbit), 0, 0) rotate(0deg); }
+    to { transform: rotate(360deg) translate3d(var(--sx-bg-orbit), 0, 0) rotate(-360deg); }
+  }
+}`;
+/** Red, green and blue light drifting past each other. */
+export function rgbShift(options = {}) {
+    const palette = paletteVars(options.colors ?? ["red", "lime", "blue"]);
+    const durations = [17, 21, 25];
+    const nodes = [0, 1, 2].map((i) => {
+        const d = durations[i] ?? 20;
+        return {
+            part: "channel",
+            vars: {
+                "--c": paletteRef(i, palette.count),
+                "--d": `${d}s`,
+                // a third of an orbit apart, so the discs start spread out
+                "--delay": `${-round((d * i) / 3, 2)}s`,
+            },
+        };
+    });
+    return defineCssEffect(RGB_SHIFT_META, CSS, options, {
+        vars: { ...palette.vars, "--sx-bg-mix": options.mix ?? "screen", "--sx-bg-orbit": `${options.orbit ?? 14}cqmax` },
+        nodes,
+    });
+}

package/dist/backgrounds/effects/glitch/rgbShift.schema.d.ts

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

package/dist/backgrounds/effects/glitch/rgbShift.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, colorsField } from "../../../schema/common.js";
+export const RGB_SHIFT_SCHEMA = defineSchema()({
+    id: "rgb-shift",
+    family: "background",
+    factory: "rgbShift",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        colors: { ...colorsField(["red", "lime", "blue"], 1, 6), help: "The three channels." },
+        mix: { kind: "choice", label: "Channel mix", values: ["screen", "multiply", "lighten", "plus-lighter"], default: "screen", help: "screen adds light; multiply for light pages." },
+        orbit: { kind: "number", label: "Orbit", min: 0, max: 40, step: 0.5, unit: "%", default: 14, help: "Of the layer's longer side." },
+    },
+});

package/dist/backgrounds/effects/glitch/vhsStatic.d.ts

@@ -0,0 +1,12 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const VHS_STATIC_META: EffectMeta;
+export interface VhsStaticOptions extends LayerOptions {
+    readonly speed?: number;
+    /** How much static, 0–1. */
+    readonly strength?: number;
+    /** Two colours: the screen and the static. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Analogue TV static with a rolling tracking band. */
+export declare function vhsStatic(options?: VhsStaticOptions): WebglEffect;

package/dist/backgrounds/effects/glitch/vhsStatic.js

@@ -0,0 +1,48 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, slots, stillFallback } from "../shaderKit.js";
+export const VHS_STATIC_META = {
+    id: "vhs-static",
+    label: "Pixel Distort: VHS Glitch Static Backgrounds",
+    category: "glitch",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner, no video)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Generated in a shader, so no 1–4 MB video to download.",
+};
+// Static that changes 24 times a second (fresh hash per frame and per
+// 1.5 px block, with slightly different values per channel for colour
+// bleed), rows that jitter sideways, a tracking band that rolls down the
+// screen and tears the picture, and scanlines.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform float u_speed;
+uniform float u_strength;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_OUT}
+void main() {
+  float t = u_time * u_speed;
+  float frame = floor(t * 24.0) + u_seed * 101.0;
+  vec2 px = gl_FragCoord.xy;
+  float row = floor(px.y / (2.0 * u_dpr));
+  float band = 1.0 - smoothstep(0.0, 0.07, abs(v_uv.y - (1.0 - fract(t * 0.13))));
+  px.x += (sx_hash(vec2(row, frame)) - 0.5) * 6.0 * u_dpr * u_strength + band * 24.0 * u_dpr * sin(v_uv.y * 90.0 + t * 30.0);
+  vec2 block = floor(px / (1.5 * u_dpr));
+  vec3 n = vec3(sx_hash(block + frame * vec2(13.7, 7.1)), sx_hash(block + frame * vec2(5.3, 11.9) + 1.0), sx_hash(block + frame * vec2(9.1, 3.7) + 2.0));
+  float grey = n.g;
+  vec3 noise = mix(vec3(grey), n, 0.3);
+  float scan = 0.82 + 0.18 * sin(gl_FragCoord.y / u_dpr * 3.14159 * 0.5);
+  vec3 c = mix(u_c0.rgb, u_c1.rgb * noise, clamp(u_strength * 0.6 + band * 0.4, 0.0, 1.0)) * scan;
+  gl_FragColor = sx_out(c, 1.0);
+}
+`;
+/** Analogue TV static with a rolling tracking band. */
+export function vhsStatic(options = {}) {
+    const colors = slots(options.colors, ["var(--color-sx-secondary)", "var(--color-sx-ink)"]);
+    return defineWebglEffect(VHS_STATIC_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_strength: Math.min(1, Math.max(0, options.strength ?? 0.6)), u_seed: options.seed ?? 0 },
+        fps: 30,
+        fallback: stillFallback(VHS_STATIC_META, "Still scanlines over the screen colour.", "repeating-linear-gradient(transparent 0 2px, color-mix(in oklab, var(--sx-bg-c2) 18%, transparent) 2px 3px), var(--sx-bg-c1)", options, colors),
+    });
+}

package/dist/backgrounds/effects/glitch/vhsStatic.schema.d.ts

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

package/dist/backgrounds/effects/glitch/vhsStatic.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const VHS_STATIC_SCHEMA = defineSchema()({
+    id: "vhs-static",
+    family: "background",
+    factory: "vhsStatic",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        strength: { kind: "number", label: "Static", min: 0, max: 1, step: 0.01, default: 0.6 },
+        colors: { ...colorsField(["var(--color-sx-secondary)", "var(--color-sx-ink)"], 1, 2), help: "The screen, then the static." },
+        seed: seedField(),
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const ANIMATED_GRID_META: EffectMeta;
+export interface AnimatedGridOptions extends LayerOptions {
+    readonly speed?: number;
+    readonly cols?: number;
+    readonly rows?: number;
+    /** Two colours the cells blend between. */
+    readonly colors?: readonly string[];
+    /** Seconds for one colour sweep. */
+    readonly duration?: number;
+}
+/** A grid of cells whose colour sweeps across in a diagonal wave. */
+export declare function animatedGrid(options?: AnimatedGridOptions): CssEffect;

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

@@ -0,0 +1,63 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { paletteVars } from "../palette.js";
+import { CELL_GRID, cells } from "./lines.js";
+export const ANIMATED_GRID_META = {
+    id: "animated-grid",
+    label: "Animated Grid",
+    category: "grid",
+    family: "css",
+    cost: { kb: "2–4 KB", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "Default 10×15 = 150 cells.",
+};
+// Each cell is colour 1 with colour 2 on its ::before; fading that ::before's
+// opacity IS the colour interpolation, with no repaint of background-color.
+// Corner rounding steps 0 / 12.5 / 25 / 37.5 % along the diagonals.
+const CSS = `@layer components {
+  :where([data-sx-bg="animated-grid"]) {
+    ${CELL_GRID}
+    gap: 1cqmin;
+  }
+  :where([data-sx-bg="animated-grid"] [data-sx-bg-part="cell"]) {
+    position: relative;
+    border-radius: var(--r);
+    background: var(--sx-bg-c1);
+    opacity: 0.55;
+  }
+  :where([data-sx-bg="animated-grid"] [data-sx-bg-part="cell"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--sx-bg-c2);
+    opacity: 0;
+    animation: sx-bg-agrid ${duration("var(--sx-bg-d)")} ease-in-out var(--delay) infinite alternate;
+  }
+  @keyframes sx-bg-agrid {
+    to { opacity: 1; }
+  }
+}`;
+/** A grid of cells whose colour sweeps across in a diagonal wave. */
+export function animatedGrid(options = {}) {
+    const palette = paletteVars(options.colors && options.colors.length >= 2 ? options.colors : ["var(--color-sx-accent)", "var(--color-sx-primary)"]);
+    const cols = cells(options.cols, 15, 30);
+    const rows = cells(options.rows, 10, 20);
+    const d = options.duration ?? 3;
+    const nodes = [];
+    for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+            nodes.push({
+                part: "cell",
+                vars: {
+                    "--r": `${((x + y) % 4) * 12.5}%`,
+                    "--delay": `${-round(((x + y) / (cols + rows)) * d * 2, 2)}s`,
+                },
+            });
+        }
+    }
+    return defineCssEffect(ANIMATED_GRID_META, CSS, options, {
+        vars: { ...palette.vars, "--sx-bg-cols": cols, "--sx-bg-rows": rows, "--sx-bg-d": `${d}s` },
+        nodes,
+    });
+}

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

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

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

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, colorsField } from "../../../schema/common.js";
+export const ANIMATED_GRID_SCHEMA = defineSchema()({
+    id: "animated-grid",
+    family: "background",
+    factory: "animatedGrid",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cols: { kind: "integer", label: "Columns", min: 1, max: 30, default: 15 },
+        rows: { kind: "integer", label: "Rows", min: 1, max: 20, default: 10 },
+        colors: { ...colorsField(["var(--color-sx-accent)", "var(--color-sx-primary)"], 2, 2), help: "The two the cells blend between." },
+        duration: { kind: "number", label: "Sweep", min: 0.5, max: 20, step: 0.5, unit: "s", default: 3 },
+    },
+});

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

@@ -0,0 +1,26 @@
+import type { EffectMeta, LayerOptions, SvgEffect, WebglEffect } from "../../types.js";
+export declare const CONTOUR_LINES_META: EffectMeta;
+export interface ContourLinesOptions extends LayerOptions {
+    /** Number of height levels (4–30). */
+    readonly levels?: number;
+    /** Every n-th line is drawn heavier, like a map's index contours (0 = none). */
+    readonly index?: number;
+    /** Size of the hills: smaller = broader terrain. */
+    readonly scale?: number;
+    readonly color?: string;
+    /** Line width in px. */
+    readonly line?: number;
+    readonly seed?: number;
+    /** `webgl`: the terrain flows (the atlas's animated, Mid+ version; the static SVG is its fallback). Default `svg`. */
+    readonly renderer?: "svg" | "webgl";
+    /** Flow speed of the WebGL version. */
+    readonly speed?: number;
+}
+/** Topographic map lines over seeded terrain. Static by default; `renderer: "webgl"` makes the terrain flow. */
+export declare function contourLines(options: ContourLinesOptions & {
+    readonly renderer: "webgl";
+}): WebglEffect;
+export declare function contourLines(options?: ContourLinesOptions & {
+    readonly renderer?: "svg";
+}): SvgEffect;
+export declare function contourLines(options?: ContourLinesOptions): SvgEffect | WebglEffect;