@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/shader/plasmaGrid.js

@@ -0,0 +1,51 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_OUT, SX_GLOW, slots, stillFallback } from "../shaderKit.js";
+export const PLASMA_GRID_META = {
+    id: "plasma-grid",
+    label: "Shader Background (plasma grid)",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner, no library)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "No library, so very light to load. GPU cost depends on the shader math.",
+};
+// The classic plasma (four sine waves added up) is sampled once per grid
+// cell, so each tile glows with one colour and brightness; the tiles' soft
+// edges leave a dark gap. Transparent between tiles.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform float u_speed;
+uniform float u_cell;
+uniform float u_gap;
+uniform float u_seed;
+${GLSL_OUT}
+void main() {
+  float size = max(2.0, u_cell * u_dpr);
+  vec2 id = floor(gl_FragCoord.xy / size);
+  vec2 f = fract(gl_FragCoord.xy / size);
+  vec2 q = (id + 0.5) * size / u_resolution.y * 6.0;
+  float t = u_time * u_speed * 0.6 + u_seed * 3.0;
+  float v = sin(q.x + t) + sin(q.y * 1.3 - t * 1.1) + sin((q.x + q.y) * 0.7 + t * 0.6) + sin(length(q - vec2(3.0)) * 1.5 - t * 1.4);
+  v = 0.5 + 0.125 * v;
+  float g = u_gap * 0.5;
+  float tile = smoothstep(g, g + 0.06, f.x) * smoothstep(g, g + 0.06, f.y) * smoothstep(1.0 - g, 0.94 - g, f.x) * smoothstep(1.0 - g, 0.94 - g, f.y);
+  vec3 c = mix(mix(u_c0.rgb, u_c1.rgb, smoothstep(0.0, 0.5, v)), u_c2.rgb, smoothstep(0.5, 1.0, v));
+  gl_FragColor = sx_out(c, tile * (0.2 + 0.8 * v));
+}
+`;
+/** A grid of tiles glowing with a slowly moving plasma. */
+export function plasmaGrid(options = {}) {
+    const colors = slots(options.colors, SX_GLOW);
+    return defineWebglEffect(PLASMA_GRID_META, FRAGMENT, options, {
+        colors,
+        uniforms: {
+            u_speed: options.speed ?? 1,
+            u_cell: Math.max(4, options.cell ?? 22),
+            u_gap: Math.min(0.4, Math.max(0, options.gap ?? 0.14)),
+            u_seed: options.seed ?? 0,
+        },
+        fallback: stillFallback(PLASMA_GRID_META, "Still tiles: a grid over a soft colour wash.", "linear-gradient(transparent 85%, var(--color-sx-secondary) 0) 0 0 / 22px 22px, linear-gradient(90deg, transparent 85%, var(--color-sx-secondary) 0) 0 0 / 22px 22px, radial-gradient(circle at 30% 40%, var(--sx-bg-c1), transparent 60%), radial-gradient(circle at 70% 60%, var(--sx-bg-c2), transparent 60%)", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/plasmaGrid.schema.d.ts

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

package/dist/backgrounds/effects/shader/plasmaGrid.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const PLASMA_GRID_SCHEMA = defineSchema()({
+    id: "plasma-grid",
+    family: "background",
+    factory: "plasmaGrid",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cell: { kind: "number", label: "Cell size", min: 4, max: 80, step: 1, unit: "px", default: 22 },
+        gap: { kind: "number", label: "Gap", min: 0, max: 0.4, step: 0.01, default: 0.14, help: "A fraction of a cell." },
+        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) 50%, var(--color-sx-secondary))"], 1, 3), help: "Low to high plasma." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/rainbow.d.ts

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const RAINBOW_META: EffectMeta;
+export interface RainbowOptions extends LayerOptions {
+    readonly speed?: number;
+    /** The bands, in order; default a full rainbow. */
+    readonly colors?: readonly string[];
+    /** Width of one full rainbow, in % of the layer width. */
+    readonly band?: number;
+    /** 0–1, how much each colour is softened toward the theme surface. */
+    readonly soften?: number;
+}
+/** A flowing rainbow gradient. */
+export declare function rainbow(options?: RainbowOptions): CssEffect;

package/dist/backgrounds/effects/shader/rainbow.js

@@ -0,0 +1,41 @@
+import { defineCssEffect, duration } from "../define.js";
+export const RAINBOW_META = {
+    id: "rainbow",
+    label: "Pure CSS Rainbow Background",
+    category: "shader",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    note: "Animating background-position repaints each frame. Move an oversized layer with transform instead.",
+};
+const RAINBOW = ["red", "orange", "yellow", "lime", "cyan", "blue", "magenta"];
+// The gradient repeats every band; the pseudo-element overhangs one band on
+// each side and slides by exactly one band, so the loop is seamless. Only the
+// transform changes, never background-position.
+const CSS = `@layer components {
+  :where([data-sx-bg="rainbow"])::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(-1 * var(--sx-bg-band));
+    background-image: linear-gradient(to right, var(--sx-bg-stops));
+    background-size: var(--sx-bg-band) 100%;
+    animation: sx-bg-rainbow ${duration("var(--sx-bg-d)")} linear infinite;
+  }
+  @keyframes sx-bg-rainbow {
+    to { transform: translate3d(var(--sx-bg-band), 0, 0); }
+  }
+}`;
+/** A flowing rainbow gradient. */
+export function rainbow(options = {}) {
+    const soften = Math.round((options.soften ?? 0.25) * 100);
+    const colors = (options.colors && options.colors.length > 1 ? options.colors : RAINBOW).map((c) => soften > 0 ? `color-mix(in oklch, ${c} ${100 - soften}%, var(--color-sx-secondary))` : c);
+    const first = colors[0] ?? "transparent";
+    return defineCssEffect(RAINBOW_META, CSS, options, {
+        vars: {
+            "--sx-bg-stops": [...colors, first].join(", "),
+            "--sx-bg-band": `${options.band ?? 120}cqw`,
+            "--sx-bg-d": "12s",
+        },
+    });
+}

package/dist/backgrounds/effects/shader/rainbow.schema.d.ts

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

package/dist/backgrounds/effects/shader/rainbow.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, colorsField } from "../../../schema/common.js";
+export const RAINBOW_SCHEMA = defineSchema()({
+    id: "rainbow",
+    family: "background",
+    factory: "rainbow",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        colors: { ...colorsField(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta"], 2, 12), help: "The bands, in order." },
+        band: { kind: "number", label: "Band width", min: 20, max: 400, step: 5, unit: "%", default: 120, help: "One full rainbow, of the layer width." },
+        soften: { kind: "number", label: "Soften", min: 0, max: 1, step: 0.01, default: 0.25, help: "Toward the theme surface." },
+    },
+});

package/dist/backgrounds/effects/shader/shaderLines.d.ts

@@ -0,0 +1,12 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const SHADER_LINES_META: EffectMeta;
+export interface ShaderLinesOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Mosaic cell size in px. */
+    readonly cell?: number;
+    /** Three colours for the lines. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A mosaic of short lines with light running along them. */
+export declare function shaderLines(options?: ShaderLinesOptions): WebglEffect;

package/dist/backgrounds/effects/shader/shaderLines.js

@@ -0,0 +1,52 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, SX_GLOW, slots, stillFallback } from "../shaderKit.js";
+export const SHADER_LINES_META = {
+    id: "shader-lines",
+    label: "Shader Lines",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner instead of Three.js)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Mosaic of animated lines, rewritten in raw WebGL (the atlas's own suggestion): ~2 KB instead of ~160 KB.",
+};
+// Every cell of a grid draws one faint line through its centre, at one of
+// four angles chosen by a hash of the cell; a bright segment runs along it
+// on the cell's own clock. Together they read as a shifting mosaic.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform float u_speed;
+uniform float u_cell;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_OUT}
+void main() {
+  float size = max(4.0, u_cell * u_dpr);
+  vec2 id = floor(gl_FragCoord.xy / size);
+  vec2 f = fract(gl_FragCoord.xy / size) - 0.5;
+  float h = sx_hash(id + u_seed * 17.0);
+  float o = floor(h * 4.0);
+  vec2 dir = vec2(1.0, 0.0);
+  if (o > 0.5) dir = vec2(0.0, 1.0);
+  if (o > 1.5) dir = vec2(0.7071, 0.7071);
+  if (o > 2.5) dir = vec2(0.7071, -0.7071);
+  float across = abs(dot(f, vec2(-dir.y, dir.x)));
+  float along = dot(f, dir);
+  float phase = fract(u_time * u_speed * (0.15 + h * 0.4) + h * 7.0);
+  float head = smoothstep(0.35, 0.0, abs(along - (phase * 1.8 - 0.9)));
+  float width = 1.2 / size;
+  float line = smoothstep(width * 1.5, width * 0.5, across) * (0.12 + head);
+  vec3 c = mix(u_c0.rgb, u_c1.rgb, fract(h * 13.0));
+  c = mix(c, u_c2.rgb, step(0.8, fract(h * 29.0)));
+  gl_FragColor = sx_out(c, line);
+}
+`;
+/** A mosaic of short lines with light running along them. */
+export function shaderLines(options = {}) {
+    const colors = slots(options.colors, SX_GLOW);
+    return defineWebglEffect(SHADER_LINES_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_cell: Math.max(8, options.cell ?? 36), u_seed: options.seed ?? 0 },
+        fallback: stillFallback(SHADER_LINES_META, "Still diagonal hatching in the same colour.", "repeating-linear-gradient(45deg, transparent 0 17px, color-mix(in oklab, var(--sx-bg-c1) 35%, transparent) 17px 18px), repeating-linear-gradient(-45deg, transparent 0 25px, color-mix(in oklab, var(--sx-bg-c2) 25%, transparent) 25px 26px)", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/shaderLines.schema.d.ts

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

package/dist/backgrounds/effects/shader/shaderLines.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const SHADER_LINES_SCHEMA = defineSchema()({
+    id: "shader-lines",
+    family: "background",
+    factory: "shaderLines",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cell: { kind: "number", label: "Cell size", min: 8, max: 120, step: 1, unit: "px", default: 36 },
+        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) 50%, var(--color-sx-secondary))"], 1, 3) },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/shaderRipples.d.ts

@@ -0,0 +1,14 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const SHADER_RIPPLES_META: EffectMeta;
+export interface ShaderRipplesOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Rings per layer height. */
+    readonly rings?: number;
+    /** Ring line sharpness: higher = thinner. */
+    readonly sharpness?: number;
+    /** Three colours the rings cycle through. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Concentric rings of colour travelling outward. */
+export declare function shaderRipples(options?: ShaderRipplesOptions): WebglEffect;

package/dist/backgrounds/effects/shader/shaderRipples.js

@@ -0,0 +1,54 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_SPACE, SX_GLOW, slots, stillFallback } from "../shaderKit.js";
+export const SHADER_RIPPLES_META = {
+    id: "shader-ripples",
+    label: "Shader Animation",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner instead of Three.js)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Full-screen concentric ripples. Raw WebGL instead of Three.js: ~2 KB instead of ~160 KB.",
+};
+// Thin bright rings travel outward from the centre. Each colour channel's
+// rings are a hair apart, so edges split into colour, and the colour itself
+// cycles with distance and time. Transparent between rings.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform float u_speed;
+uniform float u_rings;
+uniform float u_sharpness;
+uniform float u_seed;
+${GLSL_SPACE}
+float ring(float r, float t) {
+  float w = fract(r * u_rings - t);
+  return pow(1.0 - abs(w * 2.0 - 1.0), u_sharpness);
+}
+void main() {
+  vec2 p = sx_centered();
+  float r = length(p);
+  float t = u_time * u_speed * 0.5 + u_seed;
+  vec3 split = vec3(ring(r - 0.004, t), ring(r, t), ring(r + 0.004, t));
+  float k = 0.5 + 0.5 * sin(r * 5.0 - t * 1.3);
+  vec3 tint = mix(mix(u_c0.rgb, u_c1.rgb, k), u_c2.rgb, 0.5 + 0.5 * sin(t * 0.4 + r * 2.0));
+  float fade = 1.0 - smoothstep(0.15, 1.1, r) * 0.7;
+  // light, already premultiplied: it adds onto whatever is below
+  vec3 light = min(tint * mix(vec3(split.g), split, 0.6) * fade * 1.8, vec3(1.0));
+  gl_FragColor = vec4(light, max(light.r, max(light.g, light.b)));
+}
+`;
+/** Concentric rings of colour travelling outward. */
+export function shaderRipples(options = {}) {
+    const colors = slots(options.colors, SX_GLOW);
+    return defineWebglEffect(SHADER_RIPPLES_META, FRAGMENT, options, {
+        colors,
+        uniforms: {
+            u_speed: options.speed ?? 1,
+            u_rings: Math.max(1, options.rings ?? 7),
+            u_sharpness: Math.max(1, options.sharpness ?? 18),
+            u_seed: options.seed ?? 0,
+        },
+        fallback: stillFallback(SHADER_RIPPLES_META, "Still rings from a repeating radial gradient.", "repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, color-mix(in oklab, var(--sx-bg-c1) 70%, transparent) 19px 20px, transparent 21px 28px)", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/shaderRipples.schema.d.ts

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

package/dist/backgrounds/effects/shader/shaderRipples.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const SHADER_RIPPLES_SCHEMA = defineSchema()({
+    id: "shader-ripples",
+    family: "background",
+    factory: "shaderRipples",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        rings: { kind: "number", label: "Rings", min: 1, max: 20, step: 0.5, default: 7, help: "Per layer height." },
+        sharpness: { kind: "number", label: "Sharpness", min: 1, max: 60, step: 1, default: 18, help: "Higher = thinner lines." },
+        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) 50%, var(--color-sx-secondary))"], 1, 3) },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/smoothMesh.d.ts

@@ -0,0 +1,12 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const SMOOTH_MESH_META: EffectMeta;
+export interface SmoothMeshOptions extends LayerOptions {
+    readonly speed?: number;
+    /** How strongly the bands fold, 0–1. */
+    readonly fold?: number;
+    /** Four colours, mixed in two pairs. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Silky colour bands folding slowly into each other. */
+export declare function smoothMesh(options?: SmoothMeshOptions): WebglEffect;

package/dist/backgrounds/effects/shader/smoothMesh.js

@@ -0,0 +1,45 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_OUT, GLSL_SPACE, SX_FIELD, slots, stillFallback } from "../shaderKit.js";
+export const SMOOTH_MESH_META = {
+    id: "smooth-mesh",
+    label: "Hero section with smooth bg Shader",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner, no library)", cpu: 1, gpu: 2 },
+    tier: "mid",
+    note: "Silky bands of colour folding slowly; no noise, just layered sine warps.",
+};
+// Space is bent three times by sine waves of rising frequency, then two
+// smooth ramps across the bent space mix two pairs of colours. Cheap (a few
+// sin / cos per pixel) and very smooth, which suits a hero behind text.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform vec4 u_c3;
+uniform float u_speed;
+uniform float u_fold;
+uniform float u_seed;
+${GLSL_SPACE}${GLSL_OUT}
+void main() {
+  vec2 p = sx_centered();
+  float t = u_time * u_speed * 0.12 + u_seed * 5.0;
+  for (int i = 1; i < 4; i++) {
+    float fi = float(i);
+    p += vec2(u_fold * 0.4 / fi * sin(fi * 2.3 * p.y + t + 0.3 * fi), u_fold * 0.4 / fi * cos(fi * 1.7 * p.x + t * 1.1 + fi));
+  }
+  float a = 0.5 + 0.5 * sin(p.x * 2.2 + t);
+  float b = 0.5 + 0.5 * cos(p.y * 2.6 - t * 0.8);
+  vec3 c = mix(mix(u_c0.rgb, u_c1.rgb, a), mix(u_c3.rgb, u_c2.rgb, a), b);
+  gl_FragColor = sx_out(c, 1.0);
+}
+`;
+/** Silky colour bands folding slowly into each other. */
+export function smoothMesh(options = {}) {
+    const colors = slots(options.colors, SX_FIELD);
+    return defineWebglEffect(SMOOTH_MESH_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_fold: options.fold ?? 0.8, u_seed: options.seed ?? 0 },
+        fallback: stillFallback(SMOOTH_MESH_META, "A still diagonal blend of the same colours.", "linear-gradient(125deg, var(--sx-bg-c1), var(--sx-bg-c2) 40%, var(--sx-bg-c4) 70%, var(--sx-bg-c3))", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/smoothMesh.schema.d.ts

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

package/dist/backgrounds/effects/shader/smoothMesh.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const SMOOTH_MESH_SCHEMA = defineSchema()({
+    id: "smooth-mesh",
+    family: "background",
+    factory: "smoothMesh",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        fold: { kind: "number", label: "Fold", min: 0, max: 2, step: 0.05, default: 0.8 },
+        colors: { ...colorsField(["var(--color-sx-secondary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))"], 1, 4), help: "Mixed in two pairs." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/waveDistortion.d.ts

@@ -0,0 +1,12 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const WAVE_DISTORTION_META: EffectMeta;
+export interface WaveDistortionOptions extends LayerOptions {
+    readonly speed?: number;
+    /** How far the waves push the colours around, 0–1. */
+    readonly strength?: number;
+    /** Four colours: three for the field, one for the crests. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Bands of colour bent by crossing waves, with bright crests. */
+export declare function waveDistortion(options?: WaveDistortionOptions): WebglEffect;

package/dist/backgrounds/effects/shader/waveDistortion.js

@@ -0,0 +1,47 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_OUT, GLSL_SPACE, SX_FIELD, slots, stillFallback } from "../shaderKit.js";
+export const WAVE_DISTORTION_META = {
+    id: "wave-distortion",
+    label: "WebGL Shader",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner instead of Three.js)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Colorful wave distortion, in raw WebGL instead of Three.js.",
+};
+// Space is pushed sideways and up by crossing sine waves three times over;
+// colours are then ramps across that bent space, and the crests of one more
+// wave are lifted toward the fourth colour, which reads as flowing light.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform vec4 u_c3;
+uniform float u_speed;
+uniform float u_strength;
+uniform float u_seed;
+${GLSL_SPACE}${GLSL_OUT}
+void main() {
+  vec2 p = sx_centered();
+  float t = u_time * u_speed * 0.4 + u_seed * 2.0;
+  for (int i = 0; i < 3; i++) {
+    float fi = float(i);
+    p.x += u_strength * 0.3 * sin(p.y * 3.0 + t + fi * 1.7);
+    p.y += u_strength * 0.24 * sin(p.x * 2.5 - t * 1.2 + fi);
+  }
+  float k = 0.5 + 0.5 * sin(p.x * 2.0 + p.y * 1.5 + t);
+  float k2 = 0.5 + 0.5 * sin(p.y * 3.0 - t * 0.7);
+  vec3 c = mix(mix(u_c0.rgb, u_c1.rgb, k), u_c2.rgb, k2 * 0.6);
+  float crest = pow(1.0 - abs(sin(p.y * 6.0 + t)), 16.0);
+  gl_FragColor = sx_out(mix(c, u_c3.rgb, crest * 0.55), 1.0);
+}
+`;
+/** Bands of colour bent by crossing waves, with bright crests. */
+export function waveDistortion(options = {}) {
+    const colors = slots(options.colors, SX_FIELD);
+    return defineWebglEffect(WAVE_DISTORTION_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_strength: Math.min(1, Math.max(0, options.strength ?? 0.7)), u_seed: options.seed ?? 0 },
+        fallback: stillFallback(WAVE_DISTORTION_META, "Still bands of the same colours.", "linear-gradient(170deg, var(--sx-bg-c1), var(--sx-bg-c2) 35%, var(--sx-bg-c3) 65%, var(--sx-bg-c1))", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/waveDistortion.schema.d.ts

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

package/dist/backgrounds/effects/shader/waveDistortion.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const WAVE_DISTORTION_SCHEMA = defineSchema()({
+    id: "wave-distortion",
+    family: "background",
+    factory: "waveDistortion",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        strength: { kind: "number", label: "Strength", min: 0, max: 1, step: 0.01, default: 0.7 },
+        colors: { ...colorsField(["var(--color-sx-secondary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))"], 1, 4), help: "Three for the field, one for the crests." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shaderKit.d.ts

@@ -0,0 +1,24 @@
+import type { CssEffect, CssVars, EffectMeta, LayerOptions } from "../types.js";
+/**
+ * Hash, value noise and fbm. The hash avoids sin() (which loses precision on
+ * mediump phones); output of sx_noise / sx_fbm is in [0, 1].
+ */
+export declare const GLSL_NOISE = "\nfloat sx_hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\nfloat sx_noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(mix(sx_hash(i), sx_hash(i + vec2(1.0, 0.0)), u.x),\n             mix(sx_hash(i + vec2(0.0, 1.0)), sx_hash(i + vec2(1.0, 1.0)), u.x), u.y);\n}\nfloat sx_fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 5; i++) {\n    v += a * sx_noise(p);\n    p = p * 2.02 + vec2(1.7, 9.2);\n    a *= 0.5;\n  }\n  return v / 0.97;\n}\n";
+/** Coordinates centred on the layer, y up, 1 unit = the layer height (round on any aspect). */
+export declare const GLSL_SPACE = "\nvec2 sx_centered() {\n  return (v_uv - 0.5) * vec2(u_resolution.x / u_resolution.y, 1.0);\n}\n";
+/** Premultiplied output (the canvas is premultipliedAlpha: true). */
+export declare const GLSL_OUT = "\nvec4 sx_out(vec3 c, float a) {\n  a = clamp(a, 0.0, 1.0);\n  return vec4(c * a, a);\n}\n";
+/** `colors` cycled to exactly `defaults.length` slots: a shader declares a fixed number of colour uniforms. */
+export declare function slots(colors: readonly string[] | undefined, defaults: readonly string[]): string[];
+/** `--sx-bg-c1 … --sx-bg-cN` for a list of colours (for the CSS fallback). */
+export declare function slotVars(colors: readonly string[]): CssVars;
+/**
+ * The still CSS stand-in for a WebGL effect: same colours, drawn with
+ * gradients, no animation. `background` may use `var(--sx-bg-c1…)`.
+ */
+export declare function stillFallback(meta: EffectMeta, note: string, background: string, options: LayerOptions, colors: readonly string[]): CssEffect;
+/** Default colour sets in the theme's family. */
+export declare const SX_FIELD: readonly ["var(--color-sx-secondary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))"];
+export declare const SX_GLOW: readonly ["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) 50%, var(--color-sx-secondary))"];
+/** A number as a GLSL float literal (`2` -> `2.0`). */
+export declare function glf(n: number): string;

package/dist/backgrounds/effects/shaderKit.js

@@ -0,0 +1,90 @@
+// ---------------------------------------------------------------------------
+// What the WebGL effects share: GLSL chunks (as strings, concatenated in front
+// of an effect's own source), colour slots, and the still CSS stand-in every
+// WebGL effect carries as its fallback. Pure.
+// ---------------------------------------------------------------------------
+import { defineCssEffect, liteMeta } from "./define.js";
+/**
+ * Hash, value noise and fbm. The hash avoids sin() (which loses precision on
+ * mediump phones); output of sx_noise / sx_fbm is in [0, 1].
+ */
+export const GLSL_NOISE = `
+float sx_hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+float sx_noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(sx_hash(i), sx_hash(i + vec2(1.0, 0.0)), u.x),
+             mix(sx_hash(i + vec2(0.0, 1.0)), sx_hash(i + vec2(1.0, 1.0)), u.x), u.y);
+}
+float sx_fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  for (int i = 0; i < 5; i++) {
+    v += a * sx_noise(p);
+    p = p * 2.02 + vec2(1.7, 9.2);
+    a *= 0.5;
+  }
+  return v / 0.97;
+}
+`;
+/** Coordinates centred on the layer, y up, 1 unit = the layer height (round on any aspect). */
+export const GLSL_SPACE = `
+vec2 sx_centered() {
+  return (v_uv - 0.5) * vec2(u_resolution.x / u_resolution.y, 1.0);
+}
+`;
+/** Premultiplied output (the canvas is premultipliedAlpha: true). */
+export const GLSL_OUT = `
+vec4 sx_out(vec3 c, float a) {
+  a = clamp(a, 0.0, 1.0);
+  return vec4(c * a, a);
+}
+`;
+/** `colors` cycled to exactly `defaults.length` slots: a shader declares a fixed number of colour uniforms. */
+export function slots(colors, defaults) {
+    const list = colors && colors.length > 0 ? colors : defaults;
+    return defaults.map((_, i) => list[i % list.length] ?? defaults[i] ?? "currentColor");
+}
+/** `--sx-bg-c1 … --sx-bg-cN` for a list of colours (for the CSS fallback). */
+export function slotVars(colors) {
+    const vars = {};
+    colors.forEach((c, i) => {
+        vars[`--sx-bg-c${i + 1}`] = c;
+    });
+    return vars;
+}
+/**
+ * The still CSS stand-in for a WebGL effect: same colours, drawn with
+ * gradients, no animation. `background` may use `var(--sx-bg-c1…)`.
+ */
+export function stillFallback(meta, note, background, options, colors) {
+    const lite = liteMeta({ ...meta, family: "css" }, note);
+    const css = `@layer components {
+  :where([data-sx-bg="${lite.id}"]) {
+    background: ${background};
+  }
+}`;
+    return defineCssEffect(lite, css, options, { vars: slotVars(colors) });
+}
+/** Default colour sets in the theme's family. */
+export const SX_FIELD = [
+    "var(--color-sx-secondary)",
+    "var(--color-sx-accent)",
+    "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))",
+    "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))",
+];
+export const SX_GLOW = [
+    "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) 50%, var(--color-sx-secondary))",
+];
+/** A number as a GLSL float literal (`2` -> `2.0`). */
+export function glf(n) {
+    const s = String(Math.round(n * 1e5) / 1e5);
+    return s.includes(".") || s.includes("e") ? s : `${s}.0`;
+}

package/dist/backgrounds/effects/svgKit.d.ts

@@ -0,0 +1,26 @@
+export type Point = readonly [x: number, y: number];
+/** A coordinate as a short string: one decimal, no trailing ".0". */
+export declare function num(n: number): string;
+/**
+ * A smooth curve through `points`: each point becomes the control of a
+ * quadratic segment ending halfway to the next one, so the line bends
+ * gently with no corners. Starts and ends exactly on the first and last point.
+ */
+export declare function smoothPath(points: readonly Point[]): string;
+/**
+ * A periodic wave covering x = 0 to `periods * period`, sampled 16 times per
+ * period: the y at `x` equals the y at `x + period`, so sliding it sideways
+ * by exactly one period loops without a seam. `closeTo` closes the shape
+ * down (or up) to that y, for a filled wave.
+ */
+export declare function wavePath(opts: {
+    readonly period: number;
+    readonly periods: number;
+    readonly base: number;
+    readonly amplitude: number;
+    /** Phase in turns (0–1). */
+    readonly phase?: number;
+    /** A second harmonic, as a fraction of `amplitude`, for a less regular swell. */
+    readonly harmonic?: number;
+    readonly closeTo?: number;
+}): string;