@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/cursor/cursorGlow.js

@@ -0,0 +1,42 @@
+import { defineCssEffect } from "../define.js";
+export const CURSOR_GLOW_META = {
+    id: "cursor-glow",
+    label: "Spotlight / cursor glow",
+    category: "cursor",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "Cheapest interactive effect there is.",
+};
+// The runtime writes --sx-pointer-x/y (px from the root's top-left corner) and
+// data-sx-pointer="in" on the root. Pointer coordinates are physical, so this
+// effect does not mirror in RTL. A touch drag moves the glow too.
+const CSS = `@layer components {
+  :where([data-sx-bg="cursor-glow"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+      circle var(--sx-bg-size) at var(--sx-pointer-x, 50%) var(--sx-pointer-y, 35%),
+      color-mix(in oklab, var(--sx-bg-color) calc(var(--sx-bg-strength) * 100%), transparent),
+      transparent 70%
+    );
+    opacity: var(--sx-bg-idle);
+    transition: opacity 400ms ease;
+  }
+  :where([data-sx-pointer="in"] [data-sx-bg="cursor-glow"])::before {
+    opacity: 1;
+  }
+}`;
+/** A soft glow that follows the cursor. */
+export function cursorGlow(options = {}) {
+    return defineCssEffect(CURSOR_GLOW_META, CSS, options, {
+        vars: {
+            "--sx-bg-size": `${options.size ?? 420}px`,
+            "--sx-bg-color": options.color ?? "var(--color-sx-accent)",
+            "--sx-bg-strength": options.strength ?? 0.45,
+            "--sx-bg-idle": options.idle ?? 0.5,
+        },
+    });
+}

package/dist/backgrounds/effects/cursor/cursorGlow.schema.d.ts

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

package/dist/backgrounds/effects/cursor/cursorGlow.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const CURSOR_GLOW_SCHEMA = defineSchema()({
+    id: "cursor-glow",
+    family: "background",
+    factory: "cursorGlow",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Radius", min: 80, max: 1200, step: 10, unit: "px", default: 420 },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        strength: { kind: "number", label: "Strength", min: 0, max: 1, step: 0.01, default: 0.45 },
+        idle: { kind: "number", label: "Shown before the pointer", min: 0, max: 1, step: 0.01, default: 0.5 },
+    },
+});

package/dist/backgrounds/effects/cursor/fluidCursor.d.ts

@@ -0,0 +1,33 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const FLUID_CURSOR_META: EffectMeta;
+export interface FluidCursorOptions extends LayerOptions {
+    /** Simulation cells on the layer's shorter side. Default 128; touch screens get at most 64. */
+    readonly simulation?: number;
+    /** Dye (colour) cells on the shorter side. Default 512; touch screens get at most 256. */
+    readonly dye?: number;
+    /** Swirliness (vorticity confinement), 0–60. */
+    readonly curl?: number;
+    /** How fast the colour fades, per second. */
+    readonly fade?: number;
+    /** Splash size, 0–1. */
+    readonly radius?: number;
+    /** Colours the splashes cycle through (up to 6). */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Simulation sizes for a layer: `short` cells on its shorter side. Pure. */
+export declare function fluidGrid(width: number, height: number, short: number): readonly [number, number];
+export declare const FLUID_CURSOR_SHADERS: {
+    readonly vertex: "#version 300 es\nin vec2 a_pos;\nuniform vec2 u_texel;\nout vec2 vUv;\nout vec2 vL;\nout vec2 vR;\nout vec2 vT;\nout vec2 vB;\nvoid main() {\n  vUv = a_pos * 0.5 + 0.5;\n  vL = vUv - vec2(u_texel.x, 0.0);\n  vR = vUv + vec2(u_texel.x, 0.0);\n  vT = vUv + vec2(0.0, u_texel.y);\n  vB = vUv - vec2(0.0, u_texel.y);\n  gl_Position = vec4(a_pos, 0.0, 1.0);\n}";
+    readonly splat: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_target;\nuniform float u_aspect;\nuniform vec3 u_colour;\nuniform vec2 u_point;\nuniform float u_radius;\nvoid main() {\n  vec2 p = vUv - u_point;\n  p.x *= u_aspect;\n  vec3 splat = exp(-dot(p, p) / u_radius) * u_colour;\n  o = vec4(texture(u_target, vUv).xyz + splat, 1.0);\n}";
+    readonly curl: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_velocity;\nvoid main() {\n  float l = texture(u_velocity, vL).y;\n  float r = texture(u_velocity, vR).y;\n  float t = texture(u_velocity, vT).x;\n  float b = texture(u_velocity, vB).x;\n  o = vec4(0.5 * (r - l - t + b), 0.0, 0.0, 1.0);\n}";
+    readonly vorticity: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_velocity;\nuniform sampler2D u_curl;\nuniform float u_strength;\nuniform float u_dt;\nvoid main() {\n  float l = texture(u_curl, vL).x;\n  float r = texture(u_curl, vR).x;\n  float t = texture(u_curl, vT).x;\n  float b = texture(u_curl, vB).x;\n  float c = texture(u_curl, vUv).x;\n  vec2 force = 0.5 * vec2(abs(t) - abs(b), abs(r) - abs(l));\n  force /= length(force) + 0.0001;\n  force *= u_strength * c;\n  force.y *= -1.0;\n  vec2 v = texture(u_velocity, vUv).xy + force * u_dt;\n  o = vec4(clamp(v, -1000.0, 1000.0), 0.0, 1.0);\n}";
+    readonly divergence: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_velocity;\nvoid main() {\n  float l = texture(u_velocity, vL).x;\n  float r = texture(u_velocity, vR).x;\n  float t = texture(u_velocity, vT).y;\n  float b = texture(u_velocity, vB).y;\n  vec2 c = texture(u_velocity, vUv).xy;\n  // walls: the flow into an edge is reflected\n  if (vL.x < 0.0) l = -c.x;\n  if (vR.x > 1.0) r = -c.x;\n  if (vT.y > 1.0) t = -c.y;\n  if (vB.y < 0.0) b = -c.y;\n  o = vec4(0.5 * (r - l + t - b), 0.0, 0.0, 1.0);\n}";
+    readonly fade: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_source;\nuniform float u_value;\nvoid main() {\n  o = u_value * texture(u_source, vUv);\n}";
+    readonly pressure: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_pressure;\nuniform sampler2D u_divergence;\nvoid main() {\n  float l = texture(u_pressure, vL).x;\n  float r = texture(u_pressure, vR).x;\n  float t = texture(u_pressure, vT).x;\n  float b = texture(u_pressure, vB).x;\n  float d = texture(u_divergence, vUv).x;\n  o = vec4((l + r + b + t - d) * 0.25, 0.0, 0.0, 1.0);\n}";
+    readonly gradient: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_pressure;\nuniform sampler2D u_velocity;\nvoid main() {\n  float l = texture(u_pressure, vL).x;\n  float r = texture(u_pressure, vR).x;\n  float t = texture(u_pressure, vT).x;\n  float b = texture(u_pressure, vB).x;\n  vec2 v = texture(u_velocity, vUv).xy - vec2(r - l, t - b);\n  o = vec4(v, 0.0, 1.0);\n}";
+    readonly advect: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_velocity;\nuniform sampler2D u_source;\nuniform vec2 u_simTexel;\nuniform float u_dt;\nuniform float u_dissipation;\nvoid main() {\n  vec2 back = vUv - u_dt * texture(u_velocity, vUv).xy * u_simTexel;\n  o = texture(u_source, back) / (1.0 + u_dissipation * u_dt);\n}";
+    readonly display: "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nin vec2 vUv;\nin vec2 vL;\nin vec2 vR;\nin vec2 vT;\nin vec2 vB;\nout vec4 o;\nuniform sampler2D u_dye;\nvoid main() {\n  vec3 c = clamp(texture(u_dye, vUv).rgb, 0.0, 1.0);\n  o = vec4(c, max(c.r, max(c.g, c.b)));\n}";
+};
+/** Ink that swirls behind the cursor like a liquid. */
+export declare function fluidCursor(options?: FluidCursorOptions): WebglEffect;

package/dist/backgrounds/effects/cursor/fluidCursor.js

@@ -0,0 +1,322 @@
+import { bindTexture, createTarget, disposeTarget, fullscreenTriangle, link, pingPong, renderTo, requireFloatTargets, setUniform, } from "../../runtime/webgl.js";
+import { defineGpuEffect } from "../define.js";
+import { SX_GLOW, slots, stillFallback } from "../shaderKit.js";
+export const FLUID_CURSOR_META = {
+    id: "fluid-cursor",
+    label: "Fluid simulation / splash cursor",
+    category: "cursor",
+    family: "webgl",
+    cost: { kb: "~6 KB (own solver)", cpu: 1, gpu: 4 },
+    tier: "high",
+    needs: { pointer: true },
+    note: "Many full-screen passes per frame; the simulation runs at 128 cells (64 on touch screens).",
+};
+/** Simulation sizes for a layer: `short` cells on its shorter side. Pure. */
+export function fluidGrid(width, height, short) {
+    const aspect = width / Math.max(1, height);
+    return aspect >= 1 ? [Math.round(short * aspect), short] : [short, Math.round(short / aspect)];
+}
+const PRESSURE_ITERATIONS = 20;
+const PRESSURE_ITERATIONS_COARSE = 8;
+const SPLAT_FORCE = 6000;
+// Stable fluids (Jos Stam, 1999), the usual GPU arrangement: velocity and
+// dye are textures; each frame adds the pointer's push as splats, keeps
+// swirls alive (vorticity confinement), makes the velocity field
+// incompressible (divergence -> Jacobi pressure iterations -> subtract the
+// pressure gradient) and carries velocity and dye along it (advection).
+const VERTEX = `#version 300 es
+in vec2 a_pos;
+uniform vec2 u_texel;
+out vec2 vUv;
+out vec2 vL;
+out vec2 vR;
+out vec2 vT;
+out vec2 vB;
+void main() {
+  vUv = a_pos * 0.5 + 0.5;
+  vL = vUv - vec2(u_texel.x, 0.0);
+  vR = vUv + vec2(u_texel.x, 0.0);
+  vT = vUv + vec2(0.0, u_texel.y);
+  vB = vUv - vec2(0.0, u_texel.y);
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}`;
+const HEAD = `#version 300 es
+precision highp float;
+precision highp sampler2D;
+in vec2 vUv;
+in vec2 vL;
+in vec2 vR;
+in vec2 vT;
+in vec2 vB;
+out vec4 o;
+`;
+export const FLUID_CURSOR_SHADERS = {
+    vertex: VERTEX,
+    splat: `${HEAD}uniform sampler2D u_target;
+uniform float u_aspect;
+uniform vec3 u_colour;
+uniform vec2 u_point;
+uniform float u_radius;
+void main() {
+  vec2 p = vUv - u_point;
+  p.x *= u_aspect;
+  vec3 splat = exp(-dot(p, p) / u_radius) * u_colour;
+  o = vec4(texture(u_target, vUv).xyz + splat, 1.0);
+}`,
+    curl: `${HEAD}uniform sampler2D u_velocity;
+void main() {
+  float l = texture(u_velocity, vL).y;
+  float r = texture(u_velocity, vR).y;
+  float t = texture(u_velocity, vT).x;
+  float b = texture(u_velocity, vB).x;
+  o = vec4(0.5 * (r - l - t + b), 0.0, 0.0, 1.0);
+}`,
+    vorticity: `${HEAD}uniform sampler2D u_velocity;
+uniform sampler2D u_curl;
+uniform float u_strength;
+uniform float u_dt;
+void main() {
+  float l = texture(u_curl, vL).x;
+  float r = texture(u_curl, vR).x;
+  float t = texture(u_curl, vT).x;
+  float b = texture(u_curl, vB).x;
+  float c = texture(u_curl, vUv).x;
+  vec2 force = 0.5 * vec2(abs(t) - abs(b), abs(r) - abs(l));
+  force /= length(force) + 0.0001;
+  force *= u_strength * c;
+  force.y *= -1.0;
+  vec2 v = texture(u_velocity, vUv).xy + force * u_dt;
+  o = vec4(clamp(v, -1000.0, 1000.0), 0.0, 1.0);
+}`,
+    divergence: `${HEAD}uniform sampler2D u_velocity;
+void main() {
+  float l = texture(u_velocity, vL).x;
+  float r = texture(u_velocity, vR).x;
+  float t = texture(u_velocity, vT).y;
+  float b = texture(u_velocity, vB).y;
+  vec2 c = texture(u_velocity, vUv).xy;
+  // walls: the flow into an edge is reflected
+  if (vL.x < 0.0) l = -c.x;
+  if (vR.x > 1.0) r = -c.x;
+  if (vT.y > 1.0) t = -c.y;
+  if (vB.y < 0.0) b = -c.y;
+  o = vec4(0.5 * (r - l + t - b), 0.0, 0.0, 1.0);
+}`,
+    fade: `${HEAD}uniform sampler2D u_source;
+uniform float u_value;
+void main() {
+  o = u_value * texture(u_source, vUv);
+}`,
+    pressure: `${HEAD}uniform sampler2D u_pressure;
+uniform sampler2D u_divergence;
+void main() {
+  float l = texture(u_pressure, vL).x;
+  float r = texture(u_pressure, vR).x;
+  float t = texture(u_pressure, vT).x;
+  float b = texture(u_pressure, vB).x;
+  float d = texture(u_divergence, vUv).x;
+  o = vec4((l + r + b + t - d) * 0.25, 0.0, 0.0, 1.0);
+}`,
+    gradient: `${HEAD}uniform sampler2D u_pressure;
+uniform sampler2D u_velocity;
+void main() {
+  float l = texture(u_pressure, vL).x;
+  float r = texture(u_pressure, vR).x;
+  float t = texture(u_pressure, vT).x;
+  float b = texture(u_pressure, vB).x;
+  vec2 v = texture(u_velocity, vUv).xy - vec2(r - l, t - b);
+  o = vec4(v, 0.0, 1.0);
+}`,
+    advect: `${HEAD}uniform sampler2D u_velocity;
+uniform sampler2D u_source;
+uniform vec2 u_simTexel;
+uniform float u_dt;
+uniform float u_dissipation;
+void main() {
+  vec2 back = vUv - u_dt * texture(u_velocity, vUv).xy * u_simTexel;
+  o = texture(u_source, back) / (1.0 + u_dissipation * u_dt);
+}`,
+    display: `${HEAD}uniform sampler2D u_dye;
+void main() {
+  vec3 c = clamp(texture(u_dye, vUv).rgb, 0.0, 1.0);
+  o = vec4(c, max(c.r, max(c.g, c.b)));
+}`,
+};
+function program(opts) {
+    const sizes = (f) => ({
+        sim: fluidGrid(f.width, f.height, f.coarse ? Math.min(opts.sim, 64) : opts.sim),
+        dye: fluidGrid(f.width, f.height, Math.min(f.coarse ? Math.min(opts.dye, 256) : opts.dye, Math.min(f.width, f.height))),
+    });
+    const allocate = (gl, s) => ({
+        velocity: pingPong(gl, s.sim[0], s.sim[1], { float: true }),
+        dye: pingPong(gl, s.dye[0], s.dye[1], { float: true }),
+        pressure: pingPong(gl, s.sim[0], s.sim[1], { float: true }),
+        divergence: createTarget(gl, s.sim[0], s.sim[1], { float: true }),
+        curl: createTarget(gl, s.sim[0], s.sim[1], { float: true }),
+    });
+    const free = (s) => {
+        s.velocity.dispose();
+        s.dye.dispose();
+        s.pressure.dispose();
+        disposeTarget(s.gl, s.divergence);
+        disposeTarget(s.gl, s.curl);
+    };
+    return {
+        api: "webgl2",
+        warmup: 90,
+        init(context, frame, random) {
+            const gl = requireFloatTargets(context);
+            const passes = {};
+            for (const name of Object.keys(FLUID_CURSOR_SHADERS)) {
+                if (name !== "vertex")
+                    passes[name] = link(gl, FLUID_CURSOR_SHADERS.vertex, FLUID_CURSOR_SHADERS[name]);
+            }
+            const s = sizes(frame);
+            return { gl, passes, triangle: fullscreenTriangle(gl), sim: s.sim, dyeSize: s.dye, ...allocate(gl, s), last: null, hue: random() * 6, random };
+        },
+        frame(_context, st, f) {
+            const { gl, passes } = st;
+            const s = sizes(f);
+            if (s.sim[0] !== st.sim[0] || s.sim[1] !== st.sim[1] || s.dye[0] !== st.dyeSize[0] || s.dye[1] !== st.dyeSize[1]) {
+                free(st);
+                Object.assign(st, allocate(gl, s), { sim: s.sim, dyeSize: s.dye });
+            }
+            const dt = Math.min(f.delta, 1 / 30) || 1 / 60;
+            const aspect = f.width / f.height;
+            const simTexel = [1 / st.sim[0], 1 / st.sim[1]];
+            const dyeTexel = [1 / st.dyeSize[0], 1 / st.dyeSize[1]];
+            gl.disable(gl.BLEND);
+            const use = (name, texel) => {
+                const p = passes[name];
+                gl.useProgram(p.program);
+                setUniform(gl, p.loc("u_texel"), texel);
+                return p;
+            };
+            const colour = (k) => {
+                const list = f.colors.length > 0 ? f.colors : [[1, 1, 1, 1]];
+                const i = Math.floor(k) % list.length;
+                return list[i] ?? [1, 1, 1, 1];
+            };
+            const splat = (x, y, dx, dy, c, size) => {
+                let p = use("splat", simTexel);
+                setUniform(gl, p.loc("u_aspect"), aspect);
+                setUniform(gl, p.loc("u_point"), [x, y]);
+                setUniform(gl, p.loc("u_radius"), (opts.radius / 100) * size * (aspect > 1 ? aspect : 1));
+                setUniform(gl, p.loc("u_colour"), [dx, dy, 0]);
+                renderTo(gl, st.velocity.write, f.width, f.height);
+                bindTexture(gl, p.loc("u_target"), st.velocity.read.texture, 0);
+                st.triangle.draw();
+                st.velocity.swap();
+                p = use("splat", dyeTexel);
+                setUniform(gl, p.loc("u_aspect"), aspect);
+                setUniform(gl, p.loc("u_point"), [x, y]);
+                setUniform(gl, p.loc("u_radius"), (opts.radius / 100) * size * (aspect > 1 ? aspect : 1));
+                setUniform(gl, p.loc("u_colour"), [c[0] * 0.15, c[1] * 0.15, c[2] * 0.15]);
+                renderTo(gl, st.dye.write, f.width, f.height);
+                bindTexture(gl, p.loc("u_target"), st.dye.read.texture, 0);
+                st.triangle.draw();
+                st.dye.swap();
+            };
+            // input: the pointer pushes while it moves over the layer; otherwise an
+            // invisible hand wanders (so it lives on touch screens and in demos)
+            st.hue += dt * 0.6;
+            const t = f.time;
+            const here = f.pointerIn
+                ? f.pointer
+                : [0.5 + 0.34 * Math.sin(t * 0.55), 0.5 + 0.28 * Math.sin(t * 0.83 + 1.3)];
+            if (st.last) {
+                const dx = here[0] - st.last[0];
+                const dy = here[1] - st.last[1];
+                if (Math.abs(dx) + Math.abs(dy) > 1e-5)
+                    splat(here[0], here[1], dx * SPLAT_FORCE, dy * SPLAT_FORCE, colour(st.hue), 1);
+            }
+            st.last = here;
+            for (const [x, y] of f.taps) {
+                for (let i = 0; i < 4; i++) {
+                    const a = st.random() * Math.PI * 2;
+                    splat(x, y, Math.cos(a) * 900, Math.sin(a) * 900, colour(st.hue + i), 2.5);
+                }
+            }
+            // curl -> vorticity
+            let p = use("curl", simTexel);
+            renderTo(gl, st.curl, f.width, f.height);
+            bindTexture(gl, p.loc("u_velocity"), st.velocity.read.texture, 0);
+            st.triangle.draw();
+            p = use("vorticity", simTexel);
+            setUniform(gl, p.loc("u_strength"), opts.curl);
+            setUniform(gl, p.loc("u_dt"), dt);
+            renderTo(gl, st.velocity.write, f.width, f.height);
+            bindTexture(gl, p.loc("u_velocity"), st.velocity.read.texture, 0);
+            bindTexture(gl, p.loc("u_curl"), st.curl.texture, 1);
+            st.triangle.draw();
+            st.velocity.swap();
+            // divergence -> pressure (start from the last solution, faded) -> subtract its gradient
+            p = use("divergence", simTexel);
+            renderTo(gl, st.divergence, f.width, f.height);
+            bindTexture(gl, p.loc("u_velocity"), st.velocity.read.texture, 0);
+            st.triangle.draw();
+            p = use("fade", simTexel);
+            setUniform(gl, p.loc("u_value"), 0.8);
+            renderTo(gl, st.pressure.write, f.width, f.height);
+            bindTexture(gl, p.loc("u_source"), st.pressure.read.texture, 0);
+            st.triangle.draw();
+            st.pressure.swap();
+            p = use("pressure", simTexel);
+            bindTexture(gl, p.loc("u_divergence"), st.divergence.texture, 1);
+            const iterations = f.coarse ? PRESSURE_ITERATIONS_COARSE : PRESSURE_ITERATIONS;
+            for (let i = 0; i < iterations; i++) {
+                renderTo(gl, st.pressure.write, f.width, f.height);
+                bindTexture(gl, p.loc("u_pressure"), st.pressure.read.texture, 0);
+                st.triangle.draw();
+                st.pressure.swap();
+            }
+            p = use("gradient", simTexel);
+            renderTo(gl, st.velocity.write, f.width, f.height);
+            bindTexture(gl, p.loc("u_pressure"), st.pressure.read.texture, 0);
+            bindTexture(gl, p.loc("u_velocity"), st.velocity.read.texture, 1);
+            st.triangle.draw();
+            st.velocity.swap();
+            // advect velocity, then dye
+            p = use("advect", simTexel);
+            setUniform(gl, p.loc("u_simTexel"), simTexel);
+            setUniform(gl, p.loc("u_dt"), dt);
+            setUniform(gl, p.loc("u_dissipation"), 0.2);
+            renderTo(gl, st.velocity.write, f.width, f.height);
+            bindTexture(gl, p.loc("u_velocity"), st.velocity.read.texture, 0);
+            bindTexture(gl, p.loc("u_source"), st.velocity.read.texture, 1);
+            st.triangle.draw();
+            st.velocity.swap();
+            p = use("advect", dyeTexel);
+            setUniform(gl, p.loc("u_dissipation"), opts.fade);
+            renderTo(gl, st.dye.write, f.width, f.height);
+            bindTexture(gl, p.loc("u_velocity"), st.velocity.read.texture, 0);
+            bindTexture(gl, p.loc("u_source"), st.dye.read.texture, 1);
+            st.triangle.draw();
+            st.dye.swap();
+            p = use("display", dyeTexel);
+            renderTo(gl, null, f.width, f.height);
+            bindTexture(gl, p.loc("u_dye"), st.dye.read.texture, 0);
+            st.triangle.draw();
+        },
+        dispose(_gl, st) {
+            free(st);
+            st.triangle.dispose();
+            for (const p of Object.values(st.passes))
+                p.dispose();
+        },
+    };
+}
+/** Ink that swirls behind the cursor like a liquid. */
+export function fluidCursor(options = {}) {
+    const colors = slots(options.colors, SX_GLOW);
+    return defineGpuEffect(FLUID_CURSOR_META, program({
+        sim: Math.min(256, Math.max(32, Math.round(options.simulation ?? 128))),
+        dye: Math.min(1024, Math.max(64, Math.round(options.dye ?? 512))),
+        curl: Math.min(60, Math.max(0, options.curl ?? 28)),
+        fade: Math.max(0, options.fade ?? 0.8),
+        radius: Math.min(1, Math.max(0.02, options.radius ?? 0.22)),
+    }), options, {
+        colors,
+        fallback: stillFallback(FLUID_CURSOR_META, "A still wisp of the colours, no simulation.", "radial-gradient(ellipse 35% 25% at 40% 55%, color-mix(in oklab, var(--sx-bg-c1) 70%, transparent), transparent 70%), radial-gradient(ellipse 25% 30% at 62% 42%, color-mix(in oklab, var(--sx-bg-c2) 60%, transparent), transparent 70%)", options, colors),
+    });
+}

package/dist/backgrounds/effects/cursor/fluidCursor.schema.d.ts

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

package/dist/backgrounds/effects/cursor/fluidCursor.schema.js

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField, colorsField } from "../../../schema/common.js";
+export const FLUID_CURSOR_SCHEMA = defineSchema()({
+    id: "fluid-cursor",
+    family: "background",
+    factory: "fluidCursor",
+    fields: {
+        ...layerFields(),
+        simulation: { kind: "integer", label: "Simulation cells", min: 32, max: 256, default: 128, advanced: true, help: "On the shorter side; touch screens get at most 64." },
+        dye: { kind: "integer", label: "Colour cells", min: 64, max: 1024, default: 512, advanced: true, help: "On the shorter side; touch screens get at most 256." },
+        curl: { kind: "number", label: "Swirl", min: 0, max: 60, step: 1, default: 28 },
+        fade: { kind: "number", label: "Colour fade", min: 0, max: 4, step: 0.05, default: 0.8, help: "Per second." },
+        radius: { kind: "number", label: "Splash size", min: 0.02, max: 1, step: 0.01, default: 0.22 },
+        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: "The splashes cycle through them." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/cursor/proximityMask.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const PROXIMITY_MASK_META: EffectMeta;
+export interface ProximityMaskOptions extends LayerOptions {
+    /** The image revealed near the cursor. Without one, a generated pattern in the theme colours. */
+    readonly src?: string;
+    /** Reveal radius in px. */
+    readonly radius?: number;
+    /** 0–1, how much of the image shows everywhere else. */
+    readonly hint?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** An image revealed in a soft circle that follows the cursor (and wanders on touch screens). */
+export declare function proximityMask(options?: ProximityMaskOptions): CanvasEffect;

package/dist/backgrounds/effects/cursor/proximityMask.js

@@ -0,0 +1,104 @@
+import { defineCanvasEffect } from "../define.js";
+import { aim, paint, TAU } from "../canvasKit.js";
+export const PROXIMITY_MASK_META = {
+    id: "proximity-mask",
+    label: "Canvas Proximity Mask Effect",
+    category: "cursor",
+    family: "canvas",
+    cost: { kb: "2–4 KB + image", cpu: 2, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "Give touch users a tap or auto-play version.",
+};
+/** Draws `img` covering the w × h box (CSS object-fit: cover). */
+function drawCover(ctx, img, w, h) {
+    const scale = Math.max(w / img.width, h / img.height);
+    const dw = img.width * scale;
+    const dh = img.height * scale;
+    ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2, dw, dh);
+}
+/** The built-in reveal: a palette gradient with a dot screen, made once per size and palette. */
+function generatedArt(env) {
+    const art = document.createElement("canvas");
+    art.width = Math.max(1, Math.round(env.width));
+    art.height = Math.max(1, Math.round(env.height));
+    const a = art.getContext("2d");
+    if (!a)
+        return art;
+    const g = a.createLinearGradient(0, 0, env.width, env.height);
+    g.addColorStop(0, paint(env, 0));
+    g.addColorStop(1, paint(env, 1));
+    a.fillStyle = g;
+    a.fillRect(0, 0, env.width, env.height);
+    a.fillStyle = "rgba(255, 255, 255, 0.35)";
+    for (let y = 8; y < env.height; y += 16) {
+        for (let x = 8; x < env.width; x += 16) {
+            a.beginPath();
+            a.arc(x, y, 1.6, 0, TAU);
+            a.fill();
+        }
+    }
+    return art;
+}
+// Draw the picture, then keep only a soft circle of it around the spot
+// ('destination-in' with a radial gradient), then lay a faint copy back under
+// everything ('destination-over') so the picture is hinted at elsewhere.
+function program(src, radius, hint) {
+    return {
+        init(env) {
+            return { time: 0, x: env.width / 2, y: env.height / 2, art: null, artKey: "", image: null };
+        },
+        step(state, deltaMs, pointer, env) {
+            state.time += deltaMs;
+            const target = aim(pointer, state.time, env, 0.7);
+            const k = 1 - Math.exp(-deltaMs / 90);
+            state.x += (target.x - state.x) * k;
+            state.y += (target.y - state.y) * k;
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            let picture = null;
+            if (src) {
+                if (!state.image) {
+                    state.image = new Image();
+                    state.image.crossOrigin = "anonymous";
+                    state.image.decoding = "async";
+                    state.image.src = src;
+                }
+                if (state.image.complete && state.image.naturalWidth > 0)
+                    picture = state.image;
+            }
+            else {
+                const key = `${env.width}x${env.height}|${paint(env, 0)}|${paint(env, 1)}`;
+                if (!state.art || state.artKey !== key) {
+                    state.art = generatedArt(env);
+                    state.artKey = key;
+                }
+                picture = state.art;
+            }
+            if (!picture)
+                return;
+            drawCover(ctx, picture, env.width, env.height);
+            ctx.save();
+            ctx.globalCompositeOperation = "destination-in";
+            const g = ctx.createRadialGradient(state.x, state.y, 0, state.x, state.y, radius);
+            g.addColorStop(0, "rgba(0, 0, 0, 1)");
+            g.addColorStop(0.6, "rgba(0, 0, 0, 0.6)");
+            g.addColorStop(1, "rgba(0, 0, 0, 0)");
+            ctx.fillStyle = g;
+            ctx.fillRect(0, 0, env.width, env.height);
+            if (hint > 0) {
+                ctx.globalCompositeOperation = "destination-over";
+                ctx.globalAlpha = hint;
+                drawCover(ctx, picture, env.width, env.height);
+            }
+            ctx.restore();
+        },
+    };
+}
+/** An image revealed in a soft circle that follows the cursor (and wanders on touch screens). */
+export function proximityMask(options = {}) {
+    return defineCanvasEffect(PROXIMITY_MASK_META, program(options.src, options.radius ?? 170, options.hint ?? 0.06), options, {
+        colors: options.colors ?? ["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 40%, var(--color-sx-primary))"],
+    });
+}

package/dist/backgrounds/effects/cursor/proximityMask.schema.d.ts

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

package/dist/backgrounds/effects/cursor/proximityMask.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField, colorsField } from "../../../schema/common.js";
+export const PROXIMITY_MASK_SCHEMA = defineSchema()({
+    id: "proximity-mask",
+    family: "background",
+    factory: "proximityMask",
+    fields: {
+        ...layerFields(),
+        src: { kind: "text", label: "Revealed image", url: true, autoNote: "a pattern in the theme colours" },
+        radius: { kind: "number", label: "Reveal radius", min: 40, max: 600, step: 5, unit: "px", default: 170 },
+        hint: { kind: "number", label: "Shown elsewhere", min: 0, max: 1, step: 0.01, default: 0.06 },
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 40%, var(--color-sx-primary))"], 1, 6) },
+        seed: seedField(1),
+    },
+});

package/dist/backgrounds/effects/cursor/waterRipple.d.ts

@@ -0,0 +1,30 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const WATER_RIPPLE_META: EffectMeta;
+export interface WaterRippleOptions extends LayerOptions {
+    /** Your image under the water (same origin, or served with CORS). Default: pool tiles in theme colours. */
+    readonly src?: string;
+    /** Ripple strength of a tap, 0–1. */
+    readonly strength?: number;
+    /** Leave small ripples behind the moving pointer. Default true. */
+    readonly trail?: boolean;
+    /** Drops fall on their own while nobody interacts. Default true. */
+    readonly rain?: boolean;
+    /** How fast ripples die out, 0 (never) to 1 (at once). */
+    readonly damping?: number;
+    /** Pool tiles per layer height (the default floor). */
+    readonly tiles?: number;
+    /** Three colours: water, tile lines, highlights. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A drop for the shader: centre (0–1), radius (fraction of the height), strength. */
+export type Drop = readonly [x: number, y: number, radius: number, strength: number];
+/** The simulation grid for a layer of `width` × `height`: `long` cells on the longer side. Pure. */
+export declare function rippleGrid(width: number, height: number, long: number): readonly [number, number];
+export declare const WATER_RIPPLE_SHADERS: {
+    readonly vertex: "attribute vec2 a_pos;\nvarying vec2 v_uv;\nvoid main() {\n  v_uv = a_pos * 0.5 + 0.5;\n  gl_Position = vec4(a_pos, 0.0, 1.0);\n}";
+    readonly step: "precision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_state;\nuniform vec2 u_texel;\nuniform float u_damping;\nuniform float u_aspect;\nuniform vec4 u_drops[8];\nuniform float u_dropCount;\n\nvec2 enc(float h) {\n  float v = clamp(h * 0.5 + 0.5, 0.0, 1.0) * 255.0;\n  float hi = floor(v);\n  return vec2(hi / 255.0, v - hi);\n}\nfloat dec(vec2 c) {\n  return (floor(c.x * 255.0 + 0.5) + c.y) / 255.0 * 2.0 - 1.0;\n}\n\nvoid main() {\n  vec4 s = texture2D(u_state, v_uv);\n  float now = dec(s.xy);\n  float before = dec(s.zw);\n  float sum = dec(texture2D(u_state, v_uv + vec2(u_texel.x, 0.0)).xy)\n            + dec(texture2D(u_state, v_uv - vec2(u_texel.x, 0.0)).xy)\n            + dec(texture2D(u_state, v_uv + vec2(0.0, u_texel.y)).xy)\n            + dec(texture2D(u_state, v_uv - vec2(0.0, u_texel.y)).xy);\n  float next = (sum * 0.5 - before) * u_damping;\n  for (int i = 0; i < 8; i++) {\n    if (float(i) >= u_dropCount) break;\n    vec4 d = u_drops[i];\n    float r = length((v_uv - d.xy) * vec2(u_aspect, 1.0)) / d.z;\n    if (r < 1.0) next += d.w * (0.5 + 0.5 * cos(r * 3.14159));\n  }\n  gl_FragColor = vec4(enc(next), enc(now));\n}";
+    readonly display: "precision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_state;\nuniform sampler2D u_image;\nuniform vec2 u_texel;\nuniform float u_aspect;\nuniform float u_imageAspect;\nuniform float u_hasImage;\nuniform float u_tiles;\nuniform vec4 u_c0;\nuniform vec4 u_c1;\nuniform vec4 u_c2;\n\nvec2 enc(float h) {\n  float v = clamp(h * 0.5 + 0.5, 0.0, 1.0) * 255.0;\n  float hi = floor(v);\n  return vec2(hi / 255.0, v - hi);\n}\nfloat dec(vec2 c) {\n  return (floor(c.x * 255.0 + 0.5) + c.y) / 255.0 * 2.0 - 1.0;\n}\n\nvoid main() {\n  float hl = dec(texture2D(u_state, v_uv - vec2(u_texel.x, 0.0)).xy);\n  float hr = dec(texture2D(u_state, v_uv + vec2(u_texel.x, 0.0)).xy);\n  float hb = dec(texture2D(u_state, v_uv - vec2(0.0, u_texel.y)).xy);\n  float ht = dec(texture2D(u_state, v_uv + vec2(0.0, u_texel.y)).xy);\n  vec2 slope = vec2(hr - hl, ht - hb);\n  vec2 uv = v_uv + slope * 0.08;\n  vec3 floorColour;\n  if (u_hasImage > 0.5) {\n    // cover-fit the image\n    vec2 scale = u_aspect > u_imageAspect ? vec2(1.0, u_imageAspect / u_aspect) : vec2(u_aspect / u_imageAspect, 1.0);\n    floorColour = texture2D(u_image, (uv - 0.5) * scale + 0.5).rgb;\n  } else {\n    vec2 g = uv * vec2(u_aspect, 1.0) * u_tiles;\n    vec2 f = abs(fract(g) - 0.5);\n    float line = smoothstep(0.44, 0.5, max(f.x, f.y));\n    floorColour = mix(u_c0.rgb, u_c1.rgb, line * 0.7);\n  }\n  vec3 n = normalize(vec3(-slope * 24.0, 1.0));\n  float light = pow(clamp(dot(n, normalize(vec3(-0.35, 0.45, 0.82))), 0.0, 1.0), 40.0);\n  float shade = 1.0 + dot(slope, vec2(-0.7, 0.7)) * 5.0;\n  gl_FragColor = vec4(clamp(floorColour * shade + u_c2.rgb * light * 0.9, 0.0, 1.0), 1.0);\n}";
+};
+/** Water over a pool floor (or your image) that ripples where you tap, and rains while nobody does. */
+export declare function waterRipple(options?: WaterRippleOptions): WebglEffect;