@sharedex/ui 0.0.0-stage → 0.9.0

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

@@ -0,0 +1,154 @@
+import { link, renderTo, setUniform, WebglUnavailable } from "../../runtime/webgl.js";
+import { defineGpuEffect } from "../define.js";
+import { SX_GLOW, slots, stillFallback } from "../shaderKit.js";
+export const LIQUID_SCULPTURE_META = {
+    id: "liquid-sculpture",
+    label: "Liquid Sculpture Hero",
+    category: "glass",
+    family: "webgl",
+    cost: { kb: "~4 KB (own runner, no model data)", cpu: 2, gpu: 4 },
+    tier: "high",
+    needs: { pointer: true },
+    note: "125k particles by default (40k on touch screens); every one is placed by the GPU, the CPU does nothing per frame.",
+};
+export const SCULPTURE_MAX = 200000;
+const COARSE_MAX = 40000;
+/**
+ * Per particle: (u, v) where it sits on the shape's surface and a random
+ * value for its own wobble and colour. Three floats each. Pure.
+ */
+export function sculptureParticles(count, random) {
+    const n = Math.min(SCULPTURE_MAX, Math.max(1000, Math.round(count)));
+    const data = new Float32Array(n * 3);
+    for (let i = 0; i < data.length; i++)
+        data[i] = random();
+    return data;
+}
+// Every particle is a point on a surface given by (u, v): a noisy sphere
+// (the "liquid") and a (2, 3) torus knot (the "sculpture"). The vertex shader
+// morphs between the two over time, wobbles each point a little, turns the
+// whole thing (toward the pointer while it is over the layer) and projects it
+// with perspective. Points are soft discs added together, so dense regions
+// glow.
+export const LIQUID_SCULPTURE_SHADERS = {
+    vertex: `attribute vec3 a_p;
+uniform float u_time;
+uniform float u_aspect;
+uniform float u_size;
+uniform float u_dpr;
+uniform vec2 u_pointer;
+uniform float u_pointer_in;
+varying float v_shade;
+varying float v_tone;
+const float TAU = 6.2831853;
+vec3 knotCentre(float t) {
+  float c = cos(3.0 * t);
+  return vec3((2.0 + c) * cos(2.0 * t), (2.0 + c) * sin(2.0 * t), sin(3.0 * t)) * 0.28;
+}
+vec3 knot(float u, float v) {
+  float t = u * TAU;
+  vec3 c = knotCentre(t);
+  vec3 tangent = normalize(knotCentre(t + 0.01) - c);
+  vec3 n = normalize(cross(tangent, vec3(0.0, 0.0, 1.0)));
+  vec3 b = cross(tangent, n);
+  float a = v * TAU;
+  return c + (n * cos(a) + b * sin(a)) * 0.11;
+}
+vec3 blob(float u, float v, float t) {
+  float theta = u * TAU;
+  float phi = acos(2.0 * v - 1.0);
+  vec3 d = vec3(sin(phi) * cos(theta), cos(phi), sin(phi) * sin(theta));
+  float n = sin(d.x * 4.0 + t) * sin(d.y * 5.0 - t * 1.3) * sin(d.z * 3.0 + t * 0.7);
+  return d * (0.7 + 0.16 * n);
+}
+mat3 turnY(float a) {
+  float c = cos(a);
+  float s = sin(a);
+  return mat3(c, 0.0, -s, 0.0, 1.0, 0.0, s, 0.0, c);
+}
+mat3 turnX(float a) {
+  float c = cos(a);
+  float s = sin(a);
+  return mat3(1.0, 0.0, 0.0, 0.0, c, s, 0.0, -s, c);
+}
+void main() {
+  float t = u_time * 0.35;
+  float morph = smoothstep(0.15, 0.85, 0.5 + 0.5 * sin(t * 0.6));
+  vec3 p = mix(blob(a_p.x, a_p.y, t), knot(a_p.x, a_p.y), morph);
+  p += 0.012 * vec3(sin(t * 3.0 + a_p.z * 40.0), cos(t * 2.6 + a_p.z * 31.0), sin(t * 2.2 + a_p.z * 17.0));
+  float yaw = t * 0.5 + (u_pointer.x - 0.5) * 1.4 * u_pointer_in;
+  float pitch = 0.35 - (u_pointer.y - 0.5) * 0.9 * u_pointer_in;
+  p = turnX(pitch) * turnY(yaw) * p;
+  float depth = 2.6 - p.z;
+  float k = 1.9 * min(1.0, u_aspect);
+  gl_Position = vec4(p.x * k / (depth * u_aspect), p.y * k / depth, 0.0, 1.0);
+  gl_PointSize = u_size * u_dpr * 2.6 / depth;
+  v_shade = clamp(0.55 + p.z * 0.7, 0.15, 1.0);
+  v_tone = a_p.z;
+}`,
+    fragment: `precision mediump float;
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform float u_alpha;
+varying float v_shade;
+varying float v_tone;
+void main() {
+  float d = length(gl_PointCoord - 0.5);
+  float a = (1.0 - smoothstep(0.1, 0.5, d)) * u_alpha * v_shade;
+  vec3 c = mix(mix(u_c0.rgb, u_c1.rgb, v_tone), u_c2.rgb, v_shade * v_shade * 0.6);
+  gl_FragColor = vec4(c * a, a);
+}`,
+};
+function program(count, size, speed) {
+    return {
+        api: "webgl",
+        warmup: 0,
+        init(gl, frame, random) {
+            const linked = link(gl, LIQUID_SCULPTURE_SHADERS.vertex, LIQUID_SCULPTURE_SHADERS.fragment, ["a_p"]);
+            const data = sculptureParticles(frame.coarse ? Math.min(count, COARSE_MAX) : count, random);
+            const buffer = gl.createBuffer();
+            if (!buffer)
+                throw new WebglUnavailable("could not create a buffer");
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+            const n = data.length / 3;
+            // fewer particles each carry more light, so the total brightness stays about the same
+            return { linked, buffer, count: n, alpha: Math.min(0.9, 0.16 * Math.sqrt(125000 / n)) };
+        },
+        frame(gl, s, f) {
+            renderTo(gl, null, f.width, f.height);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.ONE, gl.ONE); // light adds up
+            gl.useProgram(s.linked.program);
+            setUniform(gl, s.linked.loc("u_time"), f.time * speed);
+            setUniform(gl, s.linked.loc("u_aspect"), f.width / f.height);
+            setUniform(gl, s.linked.loc("u_size"), size);
+            setUniform(gl, s.linked.loc("u_dpr"), f.dpr);
+            setUniform(gl, s.linked.loc("u_pointer"), f.pointer);
+            setUniform(gl, s.linked.loc("u_pointer_in"), f.pointerIn ? 1 : 0);
+            setUniform(gl, s.linked.loc("u_alpha"), s.alpha);
+            for (let i = 0; i < 3; i++)
+                setUniform(gl, s.linked.loc(`u_c${i}`), f.colors[i] ?? [1, 1, 1, 1]);
+            gl.bindBuffer(gl.ARRAY_BUFFER, s.buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+            gl.drawArrays(gl.POINTS, 0, s.count);
+            gl.disable(gl.BLEND);
+        },
+        dispose(gl, s) {
+            gl.deleteBuffer(s.buffer);
+            s.linked.dispose();
+        },
+    };
+}
+/** A glowing sculpture of particles that melts between a liquid blob and a knot. */
+export function liquidSculpture(options = {}) {
+    const colors = slots(options.colors, [SX_GLOW[1], SX_GLOW[2], "color-mix(in oklab, var(--color-sx-accent) 40%, white)"]);
+    return defineGpuEffect(LIQUID_SCULPTURE_META, program(Math.min(SCULPTURE_MAX, Math.max(1000, options.count ?? 125000)), Math.max(0.5, options.size ?? 1.6), options.speed ?? 1), options, {
+        colors,
+        fallback: stillFallback(LIQUID_SCULPTURE_META, "A still glow where the sculpture would be.", "radial-gradient(circle at 50% 50%, var(--sx-bg-c3), transparent 18%), radial-gradient(ellipse 30% 40% at 50% 50%, var(--sx-bg-c1), transparent 70%)", options, colors),
+    });
+}

package/dist/backgrounds/effects/glass/liquidSculpture.schema.d.ts

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

package/dist/backgrounds/effects/glass/liquidSculpture.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const LIQUID_SCULPTURE_SCHEMA = defineSchema()({
+    id: "liquid-sculpture",
+    family: "background",
+    factory: "liquidSculpture",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        count: { kind: "integer", label: "Particles", min: 1000, max: 200000, default: 125000, help: "Touch screens get at most 40 000." },
+        size: { kind: "number", label: "Particle size", min: 0.5, max: 6, step: 0.1, unit: "px", default: 1.6 },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-accent) 55%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-secondary))", "color-mix(in oklab, var(--color-sx-accent) 40%, white)"], 1, 3), help: "Two for the body, one for the bright near side." },
+        seed: seedField(),
+    },
+});

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

@@ -0,0 +1,29 @@
+import type { CanvasEffect, EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const ASCII_ART_META: EffectMeta;
+export interface AsciiArtOptions extends LayerOptions {
+    /** Cell size in px. */
+    readonly size?: number;
+    readonly speed?: number;
+    /** Characters from empty to full. */
+    readonly ramp?: string;
+    /** Zoom of the noise field: smaller = bigger shapes. */
+    readonly scale?: number;
+    readonly color?: string;
+    readonly seed?: number;
+    /** `webgl`: the GPU draws the characters from built-in bitmaps (no CPU work per frame). Default `canvas`. */
+    readonly renderer?: "canvas" | "webgl";
+}
+/**
+ * Noise is sampled every STRIDE cells and blended in between: the field's
+ * shapes are ~14 cells across, so this looks the same and costs ~1/9 of
+ * the noise lookups.
+ */
+export declare const ASCII_STRIDE = 3;
+/** A field of characters rippling like a slow noise landscape. */
+export declare function asciiArt(options: AsciiArtOptions & {
+    readonly renderer: "webgl";
+}): WebglEffect;
+export declare function asciiArt(options?: AsciiArtOptions & {
+    readonly renderer?: "canvas";
+}): CanvasEffect;
+export declare function asciiArt(options?: AsciiArtOptions): CanvasEffect | WebglEffect;

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

@@ -0,0 +1,132 @@
+import { fbm, noise3 } from "../../runtime/noise.js";
+import { defineCanvasEffect, defineCssEffect, liteMeta, svgUrl } from "../define.js";
+import { paint } from "../canvasKit.js";
+import { asciiArtWebgl } from "./asciiArtGl.js";
+export const ASCII_ART_META = {
+    id: "ascii-art",
+    label: "ASCII art background",
+    category: "glitch",
+    family: "canvas",
+    cost: { kb: "3–15 KB", cpu: 2, gpu: 2 },
+    tier: "mid",
+    note: "WebGL version moves the work off the CPU.",
+};
+const ASCII_LITE_META = liteMeta({ ...ASCII_ART_META, family: "css" }, "A still field of characters (one SVG tile), no per-frame work.");
+/**
+ * Noise is sampled every STRIDE cells and blended in between: the field's
+ * shapes are ~14 cells across, so this looks the same and costs ~1/9 of
+ * the noise lookups.
+ */
+export const ASCII_STRIDE = 3;
+function program(size, speed, ramp, scale, seed) {
+    const steps = ramp.length;
+    return {
+        init(env) {
+            const cols = Math.ceil(env.width / size);
+            const rows = Math.ceil(env.height / size);
+            const gridCols = Math.ceil(cols / ASCII_STRIDE) + 1;
+            const gridRows = Math.ceil(rows / ASCII_STRIDE) + 1;
+            return {
+                noise: noise3(seed), time: 0, cols, rows, levels: new Uint8Array(cols * rows),
+                grid: new Float32Array(gridCols * gridRows), gridCols, drawn: null, atlas: null, atlasKey: "",
+            };
+        },
+        step(state, deltaMs) {
+            state.time += deltaMs * speed;
+            const z = state.time * 0.00025;
+            const { grid, gridCols } = state;
+            const gridRows = grid.length / gridCols;
+            for (let gy = 0; gy < gridRows; gy++) {
+                for (let gx = 0; gx < gridCols; gx++) {
+                    // cells are taller than wide, hence the 1.6
+                    grid[gy * gridCols + gx] = fbm(state.noise, gx * ASCII_STRIDE * scale, gy * ASCII_STRIDE * scale * 1.6, z);
+                }
+            }
+            for (let y = 0; y < state.rows; y++) {
+                const gy = Math.floor(y / ASCII_STRIDE);
+                const fy = (y % ASCII_STRIDE) / ASCII_STRIDE;
+                for (let x = 0; x < state.cols; x++) {
+                    const gx = Math.floor(x / ASCII_STRIDE);
+                    const fx = (x % ASCII_STRIDE) / ASCII_STRIDE;
+                    const i = gy * gridCols + gx;
+                    const top = (grid[i] ?? 0) + ((grid[i + 1] ?? 0) - (grid[i] ?? 0)) * fx;
+                    const bottom = (grid[i + gridCols] ?? 0) + ((grid[i + gridCols + 1] ?? 0) - (grid[i + gridCols] ?? 0)) * fx;
+                    const v = top + (bottom - top) * fy;
+                    const level = Math.floor(((v + 1) / 2) * steps * 1.15);
+                    state.levels[y * state.cols + x] = Math.max(0, Math.min(steps - 1, level));
+                }
+            }
+        },
+        // Only cells whose character changed are redrawn: the field drifts slowly,
+        // so most frames touch a few percent of the cells instead of all of them.
+        draw(ctx, state, env) {
+            const key = `${env.dpr}|${paint(env, 0)}`;
+            if (!state.atlas || state.atlasKey !== key) {
+                state.drawn = null; // new glyphs (theme or pixel ratio changed): repaint everything
+                const atlas = document.createElement("canvas");
+                atlas.width = Math.ceil(size * steps * env.dpr);
+                atlas.height = Math.ceil(size * env.dpr);
+                const a = atlas.getContext("2d");
+                if (a) {
+                    a.scale(env.dpr, env.dpr);
+                    a.font = `${Math.round(size * 0.9)}px ui-monospace, SFMono-Regular, Menlo, monospace`;
+                    a.textAlign = "center";
+                    a.textBaseline = "middle";
+                    a.fillStyle = paint(env, 0);
+                    for (let i = 0; i < steps; i++)
+                        a.fillText(ramp[i] ?? " ", i * size + size / 2, size / 2);
+                }
+                state.atlas = atlas;
+                state.atlasKey = key;
+            }
+            const src = size * env.dpr;
+            const atlas = state.atlas;
+            if (!state.drawn) {
+                ctx.clearRect(0, 0, env.width, env.height);
+                for (let i = 0; i < state.levels.length; i++) {
+                    const level = state.levels[i] ?? 0;
+                    if (level > 0)
+                        ctx.drawImage(atlas, level * src, 0, src, src, (i % state.cols) * size, Math.floor(i / state.cols) * size, size, size);
+                }
+                state.drawn = state.levels.slice();
+                return;
+            }
+            const drawn = state.drawn;
+            for (let i = 0; i < state.levels.length; i++) {
+                const level = state.levels[i] ?? 0;
+                if (level === drawn[i])
+                    continue;
+                const x = (i % state.cols) * size;
+                const y = Math.floor(i / state.cols) * size;
+                ctx.clearRect(x, y, size, size);
+                if (level > 0)
+                    ctx.drawImage(atlas, level * src, 0, src, src, x, y, size, size);
+                drawn[i] = level;
+            }
+        },
+    };
+}
+const LITE_TILE = svgUrl("<svg xmlns='http://www.w3.org/2000/svg' width='120' height='56' font-family='monospace' font-size='13'>" +
+    "<text x='2' y='13'>.:-=+*#=-:.  .:</text><text x='2' y='27'>:=*#%@%#*=:..:-</text>" +
+    "<text x='2' y='41'>.:-=+*#=-:.  .:</text><text x='2' y='55'>  .:-==-:.  .:-</text></svg>");
+const LITE_CSS = `@layer components {
+  :where([data-sx-bg="ascii-art-lite"]) {
+    background: var(--sx-bg-color);
+    mask-image: var(--sx-bg-tile);
+    mask-size: 120px 56px;
+  }
+}`;
+export function asciiArt(options = {}) {
+    const color = options.color ?? "color-mix(in oklab, var(--color-sx-accent) 75%, transparent)";
+    const ramp = options.ramp && options.ramp.length > 1 ? options.ramp : " .:-=+*#%@";
+    const lite = defineCssEffect(ASCII_LITE_META, LITE_CSS, options, {
+        vars: { "--sx-bg-color": color, "--sx-bg-tile": LITE_TILE },
+    });
+    if (options.renderer === "webgl")
+        return asciiArtWebgl(ASCII_ART_META, options, color, lite);
+    return defineCanvasEffect(ASCII_ART_META, program(options.size ?? 14, options.speed ?? 1, ramp, options.scale ?? 0.07, options.seed ?? 5), options, {
+        colors: [color],
+        fps: 24,
+        fallback: lite,
+    });
+}

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

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

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

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField } from "../../../schema/common.js";
+export const ASCII_ART_SCHEMA = defineSchema()({
+    id: "ascii-art",
+    family: "background",
+    factory: "asciiArt",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Cell size", min: 6, max: 40, step: 1, unit: "px", default: 14 },
+        speed: speedField(),
+        ramp: { kind: "text", label: "Characters", default: " .:-=+*#%@", help: "From empty to full." },
+        scale: { kind: "number", label: "Shape size", min: 0.01, max: 0.3, step: 0.005, default: 0.07, help: "Smaller = bigger shapes." },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 75%, transparent)" },
+        seed: seedField(),
+        renderer: { kind: "choice", label: "Renderer", values: ["canvas", "webgl"], labels: { "canvas": "Canvas (CPU)", "webgl": "WebGL (GPU)" }, default: "canvas", advanced: true },
+    },
+});

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

@@ -0,0 +1,19 @@
+import type { CssEffect, EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const ASCII_ART_GL_META: (meta: EffectMeta) => EffectMeta;
+/**
+ * 4 × 5 pixel bitmaps for the characters the WebGL version can draw (`X` =
+ * ink). Stored per row as small integers, so they stay exact even on GPUs
+ * that only have half-precision floats.
+ */
+export declare const GLYPHS: Readonly<Record<string, readonly [string, string, string, string, string]>>;
+/** A row's ink as a number: bit x is set when column x is inked. */
+export declare function rowBits(row: string): number;
+/** The ramp reduced to characters the shader can draw (at least two). */
+export declare function shaderRamp(ramp: string): string;
+export declare function asciiArtWebgl(meta: EffectMeta, options: LayerOptions & {
+    readonly size?: number;
+    readonly speed?: number;
+    readonly ramp?: string;
+    readonly scale?: number;
+    readonly seed?: number;
+}, color: string, fallback: CssEffect): WebglEffect;

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

@@ -0,0 +1,92 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, glf } from "../shaderKit.js";
+export const ASCII_ART_GL_META = (meta) => ({
+    ...meta,
+    family: "webgl",
+    note: "WebGL version: characters drawn by the GPU from tiny built-in bitmaps, no CPU work per frame.",
+});
+/**
+ * 4 × 5 pixel bitmaps for the characters the WebGL version can draw (`X` =
+ * ink). Stored per row as small integers, so they stay exact even on GPUs
+ * that only have half-precision floats.
+ */
+export const GLYPHS = {
+    " ": ["....", "....", "....", "....", "...."],
+    ".": ["....", "....", "....", "....", ".X.."],
+    ":": ["....", ".X..", "....", ".X..", "...."],
+    "-": ["....", "....", "XXX.", "....", "...."],
+    "=": ["....", "XXX.", "....", "XXX.", "...."],
+    "+": ["....", ".X..", "XXX.", ".X..", "...."],
+    "*": ["X.X.", ".X..", "XXX.", ".X..", "X.X."],
+    "#": [".X.X", "XXXX", ".X.X", "XXXX", ".X.X"],
+    "%": ["X..X", "..X.", ".X..", "X...", "X..X"],
+    "@": [".XX.", "X..X", "X.XX", "X...", ".XXX"],
+};
+/** A row's ink as a number: bit x is set when column x is inked. */
+export function rowBits(row) {
+    let n = 0;
+    for (let x = 0; x < row.length; x++)
+        if (row[x] === "X")
+            n += 2 ** x;
+    return n;
+}
+/** The ramp reduced to characters the shader can draw (at least two). */
+export function shaderRamp(ramp) {
+    const known = [...ramp].filter((c) => c in GLYPHS).join("");
+    return known.length >= 2 ? known : " .:-=+*#%@";
+}
+/** `glyphRow(level, y)`: the ink bits of row y (0 = top) of ramp character `level`. */
+function glyphFunction(ramp) {
+    const branches = [...ramp].map((ch, i) => {
+        const rows = (GLYPHS[ch] ?? GLYPHS[" "] ?? []).map(rowBits);
+        const body = `a = vec4(${rows.slice(0, 4).map(glf).join(", ")}); b = ${glf(rows[4] ?? 0)};`;
+        return i === 0 ? `  if (level < 0.5) { ${body} }` : `  else if (level < ${glf(i + 0.5)}) { ${body} }`;
+    });
+    return `float glyphRow(float level, float y) {
+  vec4 a = vec4(0.0);
+  float b = 0.0;
+${branches.join("\n")}
+  return y < 0.5 ? a.x : y < 1.5 ? a.y : y < 2.5 ? a.z : y < 3.5 ? a.w : b;
+}`;
+}
+const fragment = (ramp) => `
+uniform vec4 u_c0;
+uniform float u_size;
+uniform float u_speed;
+uniform float u_scale;
+uniform float u_steps;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_OUT}
+${glyphFunction(ramp)}
+void main() {
+  vec2 cellSize = vec2(0.62, 1.0) * u_size * u_dpr;
+  vec2 cell = floor(gl_FragCoord.xy / cellSize);
+  vec2 f = fract(gl_FragCoord.xy / cellSize);
+  // the glyph sits in a 5 × 7 grid: one column of space on the right, a row above and below
+  vec2 g = vec2(f.x * 5.0, (1.0 - f.y) * 7.0 - 1.0);
+  float t = u_time * u_speed * 0.25 + u_seed * 3.0;
+  float v = sx_fbm(vec2(cell.x * 0.62, cell.y) * u_scale + vec2(t * 0.3, -t * 0.2));
+  float level = floor(clamp((v - 0.15) * 1.4, 0.0, 0.999) * u_steps);
+  float ink = 0.0;
+  if (g.x >= 0.0 && g.x < 4.0 && g.y >= 0.0 && g.y < 5.0) {
+    float row = glyphRow(level, floor(g.y));
+    ink = mod(floor(row / exp2(floor(g.x))), 2.0);
+  }
+  gl_FragColor = sx_out(u_c0.rgb, ink * u_c0.a);
+}
+`;
+export function asciiArtWebgl(meta, options, color, fallback) {
+    const ramp = shaderRamp(options.ramp ?? " .:-=+*#%@");
+    return defineWebglEffect(ASCII_ART_GL_META(meta), fragment(ramp), options, {
+        colors: [color],
+        uniforms: {
+            u_size: Math.max(6, options.size ?? 14),
+            u_speed: options.speed ?? 1,
+            u_scale: options.scale ?? 0.07,
+            u_steps: ramp.length,
+            u_seed: options.seed ?? 5,
+        },
+        fps: 24,
+        fallback,
+    });
+}

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

@@ -0,0 +1,16 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const CRT_SCANLINES_META: EffectMeta;
+export interface CrtScanlinesOptions extends LayerOptions {
+    /** Scanline period in px. */
+    readonly line?: number;
+    /** 0–1, how dark the lines are. */
+    readonly strength?: number;
+    /** 0–1, how dark the corners get. */
+    readonly vignette?: number;
+    /** A slow bright band rolling down the screen. */
+    readonly roll?: boolean;
+    /** Shading colour; defaults to black. */
+    readonly color?: string;
+}
+/** Scanlines, a dark vignette and a rolling band: an old screen over whatever is below. */
+export declare function crtScanlines(options?: CrtScanlinesOptions): CssEffect;

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

@@ -0,0 +1,51 @@
+import { defineCssEffect, duration } from "../define.js";
+export const CRT_SCANLINES_META = {
+    id: "crt-scanlines",
+    label: "CRT scanlines + vignette",
+    category: "glitch",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Cheap way to get a retro screen feel.",
+};
+const CSS = `@layer components {
+  :where([data-sx-bg="crt-scanlines"]) {
+    background-image: repeating-linear-gradient(
+      to bottom,
+      color-mix(in oklab, var(--sx-bg-color) calc(var(--sx-bg-strength) * 100%), transparent) 0 1px,
+      transparent 1px var(--sx-bg-line)
+    );
+  }
+  :where([data-sx-bg="crt-scanlines"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at center, transparent 50%, color-mix(in oklab, var(--sx-bg-color) calc(var(--sx-bg-vignette) * 100%), transparent) 100%);
+  }
+  :where([data-sx-bg="crt-scanlines"])::before {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: 25%;
+    background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--color-sx-secondary) 9%, transparent), transparent);
+    opacity: var(--sx-bg-roll);
+    animation: sx-bg-crt-roll ${duration("9s")} linear infinite;
+  }
+  @keyframes sx-bg-crt-roll {
+    from { transform: translate3d(0, -100%, 0); }
+    to { transform: translate3d(0, 400%, 0); }
+  }
+}`;
+/** Scanlines, a dark vignette and a rolling band: an old screen over whatever is below. */
+export function crtScanlines(options = {}) {
+    return defineCssEffect(CRT_SCANLINES_META, CSS, options, {
+        vars: {
+            "--sx-bg-line": `${options.line ?? 3}px`,
+            "--sx-bg-strength": options.strength ?? 0.28,
+            "--sx-bg-vignette": options.vignette ?? 0.55,
+            "--sx-bg-roll": options.roll === false ? 0 : 1,
+            "--sx-bg-color": options.color ?? "black",
+        },
+    });
+}

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

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

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

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const CRT_SCANLINES_SCHEMA = defineSchema()({
+    id: "crt-scanlines",
+    family: "background",
+    factory: "crtScanlines",
+    fields: {
+        ...layerFields(),
+        line: { kind: "number", label: "Line period", min: 1, max: 12, step: 0.5, unit: "px", default: 3 },
+        strength: { kind: "number", label: "Line darkness", min: 0, max: 1, step: 0.01, default: 0.28 },
+        vignette: { kind: "number", label: "Dark corners", min: 0, max: 1, step: 0.01, default: 0.55 },
+        roll: { kind: "boolean", label: "Rolling band", default: true },
+        color: { kind: "color", label: "Shading", default: "black" },
+    },
+});

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

@@ -0,0 +1,15 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const DIGITAL_GLITCH_META: EffectMeta;
+export interface DigitalGlitchOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Seconds between bursts. */
+    readonly interval?: number;
+    /** Number of torn slices (1–24). */
+    readonly slices?: number;
+    /** How far slices jump sideways, in % of the layer width. */
+    readonly shift?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Short bursts of torn, colour-split horizontal slices. */
+export declare function digitalGlitch(options?: DigitalGlitchOptions): CssEffect;

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

@@ -0,0 +1,65 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+export const DIGITAL_GLITCH_META = {
+    id: "digital-glitch",
+    label: "Digital Glitch Effect Backgrounds",
+    category: "glitch",
+    family: "css",
+    cost: { kb: "1–5 KB CSS / 200 KB–1 MB images", cpu: 2, gpu: 2 },
+    tier: "all",
+    note: "Run glitches in short bursts, not a constant loop.",
+};
+// Horizontal slices that tear sideways for about a tenth of each cycle and are
+// invisible the rest of the time: a burst, then calm. steps(1) holds each
+// keyframe, so the jumps are hard cuts like a real signal error. Stack it over
+// another layer; on its own it is mostly empty by design.
+const CSS = `@layer components {
+  :where([data-sx-bg="digital-glitch"]) {
+    isolation: isolate;
+  }
+  :where([data-sx-bg="digital-glitch"] [data-sx-bg-part="slice"]) {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: var(--y);
+    block-size: var(--h);
+    background: linear-gradient(to right, transparent, var(--c) 15% 85%, transparent);
+    mix-blend-mode: screen;
+    opacity: 0;
+    animation: sx-bg-glitch ${duration("var(--sx-bg-d)")} steps(1) var(--delay) infinite;
+  }
+  @keyframes sx-bg-glitch {
+    0%, 88% { opacity: 0; transform: translate3d(0, 0, 0); }
+    89% { opacity: var(--o); transform: translate3d(var(--dx), 0, 0); }
+    91% { opacity: var(--o); transform: translate3d(calc(var(--dx) * -0.6), 0, 0) scaleY(1.8); }
+    93% { opacity: 0; transform: translate3d(0, 0, 0); }
+    95% { opacity: var(--o); transform: translate3d(calc(var(--dx) * 0.35), 0, 0); }
+    97%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
+  }
+}`;
+/** Short bursts of torn, colour-split horizontal slices. */
+export function digitalGlitch(options = {}) {
+    const palette = paletteVars(options.colors ?? ["red", "cyan", "var(--color-sx-accent)"]);
+    const r = rng(options.seed ?? 21);
+    const count = Math.min(24, Math.max(1, Math.round(options.slices ?? 10)));
+    const shift = options.shift ?? 8;
+    const nodes = [];
+    for (let i = 0; i < count; i++) {
+        nodes.push({
+            part: "slice",
+            vars: {
+                "--y": `${round(between(r, 0, 96), 1)}%`,
+                "--h": `${round(between(r, 0.6, 7), 1)}%`,
+                "--o": round(between(r, 0.35, 0.8)),
+                "--c": paletteRef(i, palette.count),
+                "--dx": `${round(between(r, -shift, shift), 1)}cqw`,
+                // small positive offsets keep every slice inside the same burst
+                "--delay": `${round(between(r, 0, 0.25), 2)}s`,
+            },
+        });
+    }
+    return defineCssEffect(DIGITAL_GLITCH_META, CSS, options, {
+        vars: { ...palette.vars, "--sx-bg-d": `${options.interval ?? 4}s` },
+        nodes,
+    });
+}

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

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

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

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const DIGITAL_GLITCH_SCHEMA = defineSchema()({
+    id: "digital-glitch",
+    family: "background",
+    factory: "digitalGlitch",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        interval: { kind: "number", label: "Seconds between bursts", min: 0.5, max: 20, step: 0.5, unit: "s", default: 4 },
+        slices: { kind: "integer", label: "Torn slices", min: 1, max: 24, default: 10 },
+        shift: { kind: "number", label: "Jump", min: 0, max: 40, step: 0.5, unit: "%", default: 8, help: "Of the layer width." },
+        colors: { ...colorsField(["red", "cyan", "var(--color-sx-accent)"], 1, 6) },
+        seed: seedField(21),
+    },
+});