@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/text/effects/warp/fuzz.js

@@ -0,0 +1,62 @@
+// warpFuzz's program: the text drawn once onto a hidden canvas, then copied to the visible one in thin rows, each pushed
+// sideways by a random amount every frame, like a bad TV picture. Imported only by warpFuzz.
+import { createColorResolver } from "../../../backgrounds/runtime/color.js";
+import { attachLoop, drawWords, rgba, snapshot } from "../../runtime/canvasText.js";
+import { MOUSE } from "../pointer/kit.js";
+export function attachFuzz(el, id, s) {
+    const layer = el.querySelector(`[data-sx-text-layer="${id}"]`);
+    const show = el.querySelector("[data-sx-text-show]");
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!layer || !show || !ctx)
+        return () => { };
+    layer.appendChild(canvas);
+    const resolver = createColorResolver(el);
+    const source = document.createElement("canvas");
+    let dpr = 1;
+    let amount = s.rest;
+    let target = s.rest;
+    const loop = attachLoop(el, layer, {
+        measure() {
+            const snap = snapshot(layer, show, (c) => resolver.resolve(c));
+            dpr = snap.dpr;
+            canvas.width = Math.max(1, Math.round(snap.w * dpr));
+            canvas.height = Math.max(1, Math.round(snap.h * dpr));
+            drawWords(source, snap, rgba(snap.color));
+        },
+        frame(_t, dt) {
+            // ease towards the hover's strength, then shake each row by up to that much
+            amount += (target - amount) * Math.min(1, dt * 8);
+            const w = canvas.width;
+            const row = Math.max(1, Math.round(s.row * dpr));
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.clearRect(0, 0, w, canvas.height);
+            const shake = loop.still() ? 0 : amount * dpr;
+            for (let y = 0; y < canvas.height; y += row) {
+                ctx.drawImage(source, 0, y, w, row, (Math.random() * 2 - 1) * shake, y, w, row);
+            }
+            el.setAttribute("data-sx-text-drawn", "");
+            return true;
+        },
+    });
+    const mouse = window.matchMedia(MOUSE).matches;
+    const enter = () => {
+        target = s.hover;
+        loop.wake();
+    };
+    const leave = () => {
+        target = s.rest;
+    };
+    if (mouse) {
+        el.addEventListener("pointerenter", enter);
+        el.addEventListener("pointerleave", leave);
+    }
+    return () => {
+        loop.stop();
+        el.removeEventListener("pointerenter", enter);
+        el.removeEventListener("pointerleave", leave);
+        resolver.dispose();
+        canvas.remove();
+        el.removeAttribute("data-sx-text-drawn");
+    };
+}

package/dist/text/effects/warp/kit.d.ts

@@ -0,0 +1,14 @@
+import type { SvgElement } from "../../../backgrounds/types.js";
+import type { TextLayer } from "../../types.js";
+/**
+ * A filter's id, from the effect and the options that shape it. Not per text: two texts with the same options carry the
+ * same filter twice, which draws the same, so a stylesheet can point at it (`url(#…)`) without knowing which text it is.
+ */
+export declare const filterId: (id: string, ...options: readonly (string | number)[]) => string;
+/** The layer the filters live in. */
+export declare const defs: (filters: readonly SvgElement[]) => TextLayer;
+/**
+ * Shows the filters' layer at no size at all: a filter inside `display: none` draws nothing in Chromium, so the layer is
+ * there, but takes no room and paints nothing.
+ */
+export declare const defsCss: (id: string) => string;

package/dist/text/effects/warp/kit.js

@@ -0,0 +1,14 @@
+// What the SVG-filter text effects share: a zero-size layer that holds the filters, and their ids.
+import { at, hostOf, layerOf } from "../kit.js";
+/**
+ * A filter's id, from the effect and the options that shape it. Not per text: two texts with the same options carry the
+ * same filter twice, which draws the same, so a stylesheet can point at it (`url(#…)`) without knowing which text it is.
+ */
+export const filterId = (id, ...options) => `sx-text-${id}-${options.join("-").replace(/[^\w-]/g, "_")}`;
+/** The layer the filters live in. */
+export const defs = (filters) => ({ part: "defs", svg: { children: filters } });
+/**
+ * Shows the filters' layer at no size at all: a filter inside `display: none` draws nothing in Chromium, so the layer is
+ * there, but takes no room and paints nothing.
+ */
+export const defsCss = (id) => `  ${at(`${hostOf(id)} ${layerOf(id, "defs")}`)} { display: block; inset: auto; inline-size: 0; block-size: 0; overflow: hidden; }`;

package/dist/text/effects/warp/shader.d.ts

@@ -0,0 +1,7 @@
+export interface ShaderSettings {
+    /** How far the ripple bends the letters, in px. */
+    readonly strength: number;
+    /** How much the scroll's speed bends them (0: not at all). */
+    readonly scroll: number;
+}
+export declare function attachShader(el: HTMLElement, id: string, s: ShaderSettings): () => void;

package/dist/text/effects/warp/shader.js

@@ -0,0 +1,177 @@
+// warpShader's program: the text drawn onto a canvas, uploaded as a texture, and bent by a fragment shader: a ripple that
+// runs out from under the mouse, and a wave that follows the scroll's speed. One WebGL context, through gpu/surface.ts, made
+// only once the text is on screen and handed back when it has been off screen a while. Imported only by warpShader.
+import { createColorResolver } from "../../../backgrounds/runtime/color.js";
+import { FRAGMENT_HEADER, FULLSCREEN_VERTEX, fullscreenTriangle, link, setUniform } from "../../../backgrounds/runtime/webgl.js";
+import { createGpuSurface } from "../../../gpu/surface.js";
+import { scrollSpeed, watchScrollSpeed } from "../../../transitions/shader/scrollSpeed.js";
+import { attachLoop, drawWords, rgba, snapshot } from "../../runtime/canvasText.js";
+import { MOUSE } from "../pointer/kit.js";
+// u_hover: 0-1, how much the ripple shows; u_scroll: the scroll's speed, eased. The ripple's rings move out from the
+// pointer and fade with distance; the scroll wave bends rows sideways. The texture holds the text, premultiplied.
+const FRAGMENT = `${FRAGMENT_HEADER}
+uniform sampler2D u_text;
+uniform float u_hover;
+uniform float u_scroll;
+uniform float u_strength;
+void main() {
+  vec2 px = v_uv * u_resolution;
+  vec2 at = u_pointer * u_resolution;
+  vec2 away = px - at;
+  float d = length(away);
+  float ring = sin(d * 0.06 / u_dpr - u_time * 7.0) * exp(-d / (160.0 * u_dpr));
+  vec2 bend = (d > 0.0 ? away / d : vec2(0.0)) * ring * u_hover * u_strength * u_dpr;
+  bend.x += sin(v_uv.y * 9.0 + u_time * 3.0) * u_scroll * u_strength * u_dpr;
+  vec2 uv = v_uv - bend / u_resolution;
+  gl_FragColor = texture2D(u_text, vec2(uv.x, 1.0 - uv.y));
+}`;
+export function attachShader(el, id, s) {
+    const layer = el.querySelector(`[data-sx-text-layer="${id}"]`);
+    const show = el.querySelector("[data-sx-text-show]");
+    if (!layer || !show)
+        return () => { };
+    const resolver = createColorResolver(el);
+    const source = document.createElement("canvas");
+    const losses = { current: [] };
+    let canvas = document.createElement("canvas");
+    let surface;
+    let onScreen = false;
+    let failed = false;
+    let fresh = true;
+    let hover = 0;
+    let hoverTarget = 0;
+    let scroll = 0;
+    let pointer = [0.5, 0.5];
+    const upload = (gl, texture) => {
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+        fresh = false;
+    };
+    const make = () => {
+        canvas.remove();
+        canvas = document.createElement("canvas");
+        canvas.width = source.width;
+        canvas.height = source.height;
+        layer.appendChild(canvas);
+        surface?.destroy();
+        surface = createGpuSurface(canvas, {
+            api: "webgl",
+            label: id,
+            init(gl) {
+                const linked = link(gl, FULLSCREEN_VERTEX, FRAGMENT);
+                const triangle = fullscreenTriangle(gl);
+                const texture = gl.createTexture();
+                if (!texture)
+                    throw new Error("no texture");
+                gl.bindTexture(gl.TEXTURE_2D, texture);
+                for (const [k, v] of [[gl.TEXTURE_MIN_FILTER, gl.LINEAR], [gl.TEXTURE_MAG_FILTER, gl.LINEAR], [gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE], [gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE]]) {
+                    gl.texParameteri(gl.TEXTURE_2D, k, v);
+                }
+                fresh = true;
+                return { linked, triangle, texture };
+            },
+            dispose(gl, st) {
+                st.triangle.dispose();
+                st.linked.dispose();
+                gl.deleteTexture(st.texture);
+            },
+            isVisible: () => onScreen,
+            renew: () => {
+                make();
+                loop.wake();
+            },
+            // no WebGL here: the HTML text stays as it is
+            fail: () => {
+                failed = true;
+                canvas.remove();
+                el.removeAttribute("data-sx-text-drawn");
+            },
+            losses,
+        });
+    };
+    const loop = attachLoop(el, layer, {
+        measure() {
+            const snap = snapshot(layer, show, (c) => resolver.resolve(c));
+            drawWords(source, snap, rgba(snap.color));
+            canvas.width = source.width;
+            canvas.height = source.height;
+            fresh = true;
+        },
+        frame(t, dt) {
+            if (failed)
+                return false;
+            if (!surface)
+                make();
+            const live = surface?.ensure();
+            if (!live)
+                return false;
+            const { gl, state } = live;
+            if (fresh)
+                upload(gl, state.texture);
+            hover += (hoverTarget - hover) * Math.min(1, dt * 5);
+            scroll += (Math.min(1, Math.abs(scrollSpeed())) * s.scroll - scroll) * Math.min(1, dt * 6);
+            gl.viewport(0, 0, canvas.width, canvas.height);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(state.linked.program);
+            setUniform(gl, state.linked.loc("u_time"), t);
+            setUniform(gl, state.linked.loc("u_resolution"), [canvas.width, canvas.height]);
+            setUniform(gl, state.linked.loc("u_dpr"), Math.min(2, window.devicePixelRatio || 1));
+            setUniform(gl, state.linked.loc("u_pointer"), pointer);
+            setUniform(gl, state.linked.loc("u_hover"), hover);
+            setUniform(gl, state.linked.loc("u_scroll"), scroll);
+            setUniform(gl, state.linked.loc("u_strength"), s.strength);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, state.texture);
+            gl.uniform1i(state.linked.loc("u_text"), 0);
+            state.triangle.draw();
+            el.setAttribute("data-sx-text-drawn", "");
+            // keep drawing while anything bends it; at rest, nothing runs
+            return hover > 0.002 || hoverTarget > 0 || scroll > 0.002;
+        },
+    });
+    const io = new IntersectionObserver(([entry]) => {
+        onScreen = !!entry?.isIntersecting;
+        if (onScreen) {
+            if (surface && !surface.shown())
+                return;
+            loop.wake();
+        }
+        else
+            surface?.hidden();
+    });
+    io.observe(el);
+    const mouse = window.matchMedia(MOUSE).matches;
+    const move = (e) => {
+        const box = layer.getBoundingClientRect();
+        pointer = [(e.clientX - box.left) / Math.max(1, box.width), 1 - (e.clientY - box.top) / Math.max(1, box.height)];
+        loop.wake();
+    };
+    const enter = (e) => {
+        hoverTarget = 1;
+        move(e);
+    };
+    const leave = () => {
+        hoverTarget = 0;
+        loop.wake();
+    };
+    if (mouse && !loop.still()) {
+        el.addEventListener("pointerenter", enter);
+        el.addEventListener("pointermove", move, { passive: true });
+        el.addEventListener("pointerleave", leave);
+    }
+    const unwatch = s.scroll > 0 && !loop.still() ? watchScrollSpeed(() => loop.wake()) : undefined;
+    return () => {
+        loop.stop();
+        io.disconnect();
+        unwatch?.();
+        el.removeEventListener("pointerenter", enter);
+        el.removeEventListener("pointermove", move);
+        el.removeEventListener("pointerleave", leave);
+        surface?.destroy();
+        resolver.dispose();
+        canvas.remove();
+        el.removeAttribute("data-sx-text-drawn");
+    };
+}

package/dist/text/effects/warp/warpAscii.d.ts

@@ -0,0 +1,14 @@
+import type { TextEffect } from "../../types.js";
+export interface WarpAsciiOptions {
+    /** The characters from faint to dense. Default `" .:-=+*#%@"`. */
+    readonly characters?: string;
+    /** A character cell's size, in px. Smaller is finer and costs more. Default an eighth of the text's size. */
+    readonly cell?: number;
+    /** A few characters flicker. Default `true`. */
+    readonly flicker?: boolean;
+}
+/**
+ * The text redrawn as ASCII characters, denser where the letters are, a few of them flickering (a canvas). For big
+ * headings. High tier: other devices get the text in a monospace face (`warpAscii-lite`). It carries code (`"use client"`).
+ */
+export declare function warpAscii(options?: WarpAsciiOptions): TextEffect;

package/dist/text/effects/warp/warpAscii.js

@@ -0,0 +1,22 @@
+import { provideTier } from "../../runtime/tier.js";
+import { SHOW, at, defineText, hostOf, layerOf } from "../kit.js";
+import { attachAscii } from "./ascii.js";
+const ID = "warpAscii";
+// The canvas stands in for the text once it has drawn; until then, and without scripts, the HTML text shows. Big
+// headings only: the letters are drawn in cells of a few px each.
+const LOOK = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; }
+  ${at(`${hostOf(ID)}[data-sx-text-drawn] ${SHOW}`)} { opacity: 0; }`;
+// Without the canvas (`-lite`): the text in a monospace face, the closest plain-text look.
+const LITE = `${ID}-lite`;
+const LITE_LOOK = `  ${at(`${hostOf(LITE)} ${SHOW}`)} { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }`;
+/**
+ * The text redrawn as ASCII characters, denser where the letters are, a few of them flickering (a canvas). For big
+ * headings. High tier: other devices get the text in a monospace face (`warpAscii-lite`). It carries code (`"use client"`).
+ */
+export function warpAscii(options = {}) {
+    provideTier();
+    const settings = { ramp: options.characters ?? " .:-=+*#%@", cell: options.cell ?? 0, flicker: options.flicker ?? true };
+    const program = { attach: (el) => attachAscii(el, ID, settings), signature: JSON.stringify(settings) };
+    const lite = defineText(LITE, "", { look: LITE_LOOK });
+    return defineText(ID, "", { tier: "high", fallback: lite, look: LOOK, layers: [{}], claims: ["paint"], program });
+}

package/dist/text/effects/warp/warpAscii.schema.d.ts

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

package/dist/text/effects/warp/warpAscii.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_ASCII_SCHEMA = defineSchema()({
+    id: "warpAscii",
+    family: "text",
+    factory: "warpAscii",
+    fields: {
+        characters: { kind: "text", label: "Characters, faint to dense", default: " .:-=+*#%@" },
+        cell: { kind: "number", label: "Cell", min: 3, max: 30, step: 1, unit: "px", autoNote: "an eighth of the text's size", autoValue: 8 },
+        flicker: { kind: "boolean", label: "Flicker", default: true },
+    },
+});

package/dist/text/effects/warp/warpFuzz.d.ts

@@ -0,0 +1,14 @@
+import type { TextEffect } from "../../types.js";
+export interface WarpFuzzOptions {
+    /** px the rows shake at rest. Default `2`. */
+    readonly strength?: number;
+    /** px they shake while hovered. Default `9`. */
+    readonly hover?: number;
+    /** A row's height, in px. Default `2`. */
+    readonly row?: number;
+}
+/**
+ * Rows of the text jitter sideways like a bad TV picture, harder under the mouse (a canvas). Mid tier: a weaker device
+ * gets the text shivering in CSS (`warpFuzz-lite`). It carries code: the page needs `"use client"`.
+ */
+export declare function warpFuzz(options?: WarpFuzzOptions): TextEffect;

package/dist/text/effects/warp/warpFuzz.js

@@ -0,0 +1,32 @@
+import { provideTier } from "../../runtime/tier.js";
+import { SHOW, at, defineText, hostOf, layerOf, loop, v, varName } from "../kit.js";
+import { attachFuzz } from "./fuzz.js";
+const ID = "warpFuzz";
+// The canvas stands in for the text once it has drawn (data-sx-text-drawn), with room round it for the rows to shake
+// into; until then, and without scripts, the HTML text shows.
+const LOOK = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; inset: -0.2em -0.6em; }
+  ${at(`${hostOf(ID)}[data-sx-text-drawn] ${SHOW}`)} { opacity: 0; }`;
+// Without the canvas (`-lite`): the whole text shivers sideways in steps.
+const LITE = `${ID}-lite`;
+const LITE_CSS = `  @keyframes sx-text-${LITE} {
+    0%, 100% { translate: 0 0; }
+    25% { translate: calc(${v(LITE, "strength")} * -1) 0; }
+    50% { translate: ${v(LITE, "strength")} 0; }
+    75% { translate: calc(${v(LITE, "strength")} * -0.5) 0; }
+  }
+${loop(LITE, SHOW, `sx-text-${LITE} 0.24s steps(1) infinite`)}`;
+/**
+ * Rows of the text jitter sideways like a bad TV picture, harder under the mouse (a canvas). Mid tier: a weaker device
+ * gets the text shivering in CSS (`warpFuzz-lite`). It carries code: the page needs `"use client"`.
+ */
+export function warpFuzz(options = {}) {
+    provideTier();
+    const settings = { rest: options.strength ?? 2, hover: options.hover ?? 9, row: options.row ?? 2 };
+    const program = { attach: (el) => attachFuzz(el, ID, settings), signature: JSON.stringify(settings) };
+    const lite = defineText(LITE, LITE_CSS, {
+        vars: { [varName(LITE, "strength")]: `${Math.max(1, settings.rest)}px` },
+        claims: ["move"],
+        needs: { loop: true },
+    });
+    return defineText(ID, "", { tier: "mid", fallback: lite, look: LOOK, layers: [{}], claims: ["paint"], program });
+}

package/dist/text/effects/warp/warpFuzz.schema.d.ts

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

package/dist/text/effects/warp/warpFuzz.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_FUZZ_SCHEMA = defineSchema()({
+    id: "warpFuzz",
+    family: "text",
+    factory: "warpFuzz",
+    fields: {
+        strength: { kind: "number", label: "At rest", min: 0, max: 20, step: 0.5, unit: "px", default: 2 },
+        hover: { kind: "number", label: "Hovered", min: 0, max: 40, step: 0.5, unit: "px", default: 9 },
+        row: { kind: "number", label: "Row height", min: 1, max: 8, step: 1, unit: "px", default: 2 },
+    },
+});

package/dist/text/effects/warp/warpGlitch.d.ts

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface WarpGlitchOptions {
+    /** `"loop"` (default): a short burst every few seconds. `"hover"`: it glitches while hovered or focused. */
+    readonly on?: "loop" | "hover";
+    /** The two copies' colours. Default the theme's primary and accent. */
+    readonly colors?: readonly string[];
+    /** How far the slices jump, in px. Default `4`. */
+    readonly strength?: number;
+    /** Seconds from one burst to the next (`loop`). Default `3`. */
+    readonly every?: number;
+}
+/** The text glitches: coloured slices jump and shift for a moment, every few seconds or while hovered. Plain CSS. */
+export declare function warpGlitch(options?: WarpGlitchOptions): TextEffect;

package/dist/text/effects/warp/warpGlitch.js

@@ -0,0 +1,59 @@
+import { SHOW, at, defineText, hostOf, layerOf, loop, v, varName, whenOn } from "../kit.js";
+import { THEME_COLORS } from "../ink/kit.js";
+const ID = "warpGlitch";
+const S = v(ID, "strength");
+const HIDDEN = "clip-path: inset(50% 0 50% 0); translate: 0 0;";
+/** One frame of the burst: a slice of the copy, `top`% to `bottom`% from the edges, shifted `k` × the strength. */
+const slice = (at, top, bottom, k) => `    ${at}% { clip-path: inset(${top}% 0 ${bottom}% 0); translate: calc(${S} * ${k}) 0; }`;
+// Two copies in the theme's colours sit over the text, each cut to a thin slice that jumps about and shifts sideways
+// for a moment, then nothing; the text itself shudders with them. Only clip-path and translate move, in steps.
+const FRAMES = `  @keyframes sx-text-${ID}-a {
+    0%, 84%, 100% { ${HIDDEN} }
+${[slice(86, 10, 62, -1), slice(89, 68, 6, 1), slice(92, 32, 44, -0.6), slice(95, 80, 3, 0.8), slice(98, 46, 36, -1)].join("\n")}
+  }
+  @keyframes sx-text-${ID}-b {
+    0%, 84%, 100% { ${HIDDEN} }
+${[slice(86, 58, 18, 1), slice(89, 20, 64, -0.8), slice(92, 70, 12, 1), slice(95, 6, 74, -1), slice(98, 30, 52, 0.6)].join("\n")}
+  }
+  @keyframes sx-text-${ID}-show {
+    0%, 85%, 91%, 97%, 100% { translate: 0 0; }
+    88% { translate: calc(${S} * 0.4) 0; }
+    94% { translate: calc(${S} * -0.4) 0; }
+  }
+  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; ${HIDDEN} }
+  ${at(`${hostOf(ID)} ${layerOf(ID, "a")}`)} { color: ${v(ID, "a")}; -webkit-text-fill-color: ${v(ID, "a")}; }
+  ${at(`${hostOf(ID)} ${layerOf(ID, "b")}`)} { color: ${v(ID, "b")}; -webkit-text-fill-color: ${v(ID, "b")}; }`;
+const run = (part, name, time) => `sx-text-${ID}-${name} ${time} steps(1) infinite${part}`;
+function css(hover) {
+    if (!hover) {
+        const time = v(ID, "time");
+        return `${FRAMES}
+${loop(ID, layerOf(ID, "a"), run("", "a", time))}
+${loop(ID, layerOf(ID, "b"), run("", "b", time))}
+${loop(ID, SHOW, run("", "show", time))}`;
+    }
+    // hovered: the burst over and over, fast; still paused off screen like any endless animation
+    const fast = "0.9s";
+    return `${FRAMES}
+${whenOn(ID, layerOf(ID, "a"), `animation: ${run("", "a", fast)};`)}
+${whenOn(ID, layerOf(ID, "b"), `animation: ${run(" 0.15s", "b", fast)};`)}
+${whenOn(ID, SHOW, `animation: ${run("", "show", fast)};`)}
+  ${at(`${hostOf(ID)}[data-sx-text-live]:not([data-sx-text-on]) :is(${SHOW}, ${layerOf(ID)})`)} { animation-play-state: paused; }`;
+}
+/** The text glitches: coloured slices jump and shift for a moment, every few seconds or while hovered. Plain CSS. */
+export function warpGlitch(options = {}) {
+    const colors = options.colors ?? THEME_COLORS;
+    const a = colors[0] ?? THEME_COLORS[0];
+    const b = colors[1] ?? a;
+    return defineText(ID, css(options.on === "hover"), {
+        vars: {
+            [varName(ID, "a")]: a,
+            [varName(ID, "b")]: b,
+            [varName(ID, "strength")]: `${options.strength ?? 4}px`,
+            [varName(ID, "time")]: `${options.every ?? 3}s`,
+        },
+        layers: [{ copy: true, part: "a" }, { copy: true, part: "b" }],
+        claims: ["shadow"],
+        needs: { loop: true },
+    });
+}

package/dist/text/effects/warp/warpGlitch.schema.d.ts

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

package/dist/text/effects/warp/warpGlitch.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_GLITCH_SCHEMA = defineSchema()({
+    id: "warpGlitch",
+    family: "text",
+    factory: "warpGlitch",
+    fields: {
+        on: { kind: "choice", label: "When", values: ["loop", "hover"], labels: { loop: "Every few seconds", hover: "While hovered" }, default: "loop" },
+        colors: { kind: "colors", label: "Colours", min: 2, max: 2, default: ["var(--color-sx-primary)", "var(--color-sx-accent)"] },
+        strength: { kind: "number", label: "Jump", min: 1, max: 20, step: 1, unit: "px", default: 4 },
+        every: { kind: "number", label: "Every", min: 1, max: 12, step: 0.5, unit: "s", default: 3 },
+    },
+});

package/dist/text/effects/warp/warpGoo.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "../enter/kit.js";
+export interface WarpGooOptions extends EnterOptions {
+    /** How far the letters melt into each other, in px of blur. Default `6`. */
+    readonly melt?: number;
+}
+/**
+ * Letters pop in and run together like liquid as they land (an SVG goo filter), and melt together again on hover. Mid
+ * tier: a weaker device gets the pop without the liquid (`warpGoo-lite`).
+ */
+export declare function warpGoo(options?: WarpGooOptions): TextEffect;

package/dist/text/effects/warp/warpGoo.js

@@ -0,0 +1,46 @@
+import { provideTier } from "../../runtime/tier.js";
+import { SHOW, SPRING, UNIT, at, enter, hostOf, scripted, v, varName, whenOn } from "../kit.js";
+import { defineEnter } from "../enter/kit.js";
+import { defs, defsCss, filterId } from "./kit.js";
+const ID = "warpGoo";
+/** Blur, then a hard edge on the blur's alpha: shapes that come close run together like drops of liquid. */
+const goo = (melt) => ({
+    tag: "filter",
+    attrs: { id: filterId(ID, melt), x: "-20%", y: "-40%", width: "140%", height: "180%" },
+    children: [
+        { tag: "feGaussianBlur", attrs: { in: "SourceGraphic", "std-deviation": melt, result: "blur" } },
+        { tag: "feColorMatrix", attrs: { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" } },
+        { tag: "feComposite", attrs: { in: "SourceGraphic", in2: "goo", operator: "atop" } },
+    ],
+});
+const GOO = v(ID, "filter");
+/** The whole entrance: one piece's time plus every piece's stagger, so the liquid look lasts until the last one lands. */
+const WHOLE = `calc(${v(ID, "time")} + var(--sx-n, 1) * ${v(ID, "stagger")})`;
+// The letters pop in through the goo filter and run together as they land; the filter goes off at the end, so the text
+// rests crisp. Hovered, it runs together again as the letters drip a little, each its own way.
+const CSS = `${defsCss(ID)}
+${enter(ID, { from: "opacity: 0; scale: 0.2; translate: 0 0.5em;", ease: SPRING })}
+${enter(ID, { target: SHOW, name: "show", from: `filter: ${GOO};`, frames: `from, 85% { filter: ${GOO}; } to { filter: none; }`, ease: "linear" })}
+${scripted(`    ${at(`${hostOf(ID)} ${SHOW}`)} { animation-duration: ${WHOLE}; }`)}
+  :where([data-sx-text~="${ID}"] ${UNIT}) { transition: translate 0.45s var(--ease-sx-out, ease-out); }
+${whenOn(ID, SHOW, `filter: ${GOO};`)}
+${whenOn(ID, UNIT, "translate: 0 calc(sin(var(--sx-o, 0) * 1.9) * 0.16em + 0.08em);")}`;
+// Without the filter (`-lite`): the same springy pop, no liquid.
+const LITE = `${ID}-lite`;
+const LITE_CSS = enter(LITE, { from: "opacity: 0; scale: 0.2; translate: 0 0.5em;", ease: SPRING });
+/**
+ * Letters pop in and run together like liquid as they land (an SVG goo filter), and melt together again on hover. Mid
+ * tier: a weaker device gets the pop without the liquid (`warpGoo-lite`).
+ */
+export function warpGoo(options = {}) {
+    provideTier();
+    const melt = options.melt ?? 6;
+    const spec = { by: "chars", duration: 0.7, needs: { maxPieces: 40 } };
+    const lite = defineEnter(LITE, LITE_CSS, options, spec);
+    const main = defineEnter(ID, CSS, options, {
+        ...spec,
+        vars: { [varName(ID, "filter")]: `url(#${filterId(ID, melt)})` },
+        parts: { layers: [defs([goo(melt)])], tier: "mid", fallback: lite },
+    });
+    return main;
+}

package/dist/text/effects/warp/warpGoo.schema.d.ts

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

package/dist/text/effects/warp/warpGoo.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_GOO_SCHEMA = defineSchema()({
+    id: "warpGoo",
+    family: "text",
+    factory: "warpGoo",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.7 }),
+        from: textFromField(),
+        melt: { kind: "number", label: "Melt", min: 1, max: 16, step: 0.5, unit: "px", default: 6 },
+    },
+});

package/dist/text/effects/warp/warpRgb.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface WarpRgbOptions {
+    /** The two fringes' colours. Default the theme's primary and accent. */
+    readonly colors?: readonly string[];
+    /** How far they split, in px. Default `4`. */
+    readonly distance?: number;
+    /** Seconds the split takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** On hover or keyboard focus, the text splits into coloured fringes, like a misaligned screen. Plain CSS. */
+export declare function warpRgb(options?: WarpRgbOptions): TextEffect;

package/dist/text/effects/warp/warpRgb.js

@@ -0,0 +1,32 @@
+import { DIR, at, defineText, hostOf, layerOf, v, varName, whenOn } from "../kit.js";
+import { THEME_COLORS } from "../ink/kit.js";
+const ID = "warpRgb";
+const D = v(ID, "distance");
+const copy = (part) => at(`${hostOf(ID)} ${layerOf(ID, part)}`);
+// Two tinted copies sit exactly behind the text, unseen. On hover or focus they slide apart, one each way (mirrored in a
+// right-to-left text), and the colours show as fringes on either side. Only translate moves.
+const CSS = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} {
+    display: block;
+    translate: 0 0;
+    transition: translate ${v(ID, "time")} var(--ease-sx-out, ease-out);
+  }
+  ${copy("a")} { color: ${v(ID, "a")}; -webkit-text-fill-color: ${v(ID, "a")}; }
+  ${copy("b")} { color: ${v(ID, "b")}; -webkit-text-fill-color: ${v(ID, "b")}; }
+${whenOn(ID, layerOf(ID, "a"), `translate: calc(${D} * -1 * ${DIR}) 0;`)}
+${whenOn(ID, layerOf(ID, "b"), `translate: calc(${D} * ${DIR}) calc(${D} * 0.25);`)}`;
+/** On hover or keyboard focus, the text splits into coloured fringes, like a misaligned screen. Plain CSS. */
+export function warpRgb(options = {}) {
+    const colors = options.colors ?? THEME_COLORS;
+    const a = colors[0] ?? THEME_COLORS[0];
+    const b = colors[1] ?? a;
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "a")]: a,
+            [varName(ID, "b")]: b,
+            [varName(ID, "distance")]: `${options.distance ?? 4}px`,
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+        layers: [{ copy: true, part: "a", slot: "under" }, { copy: true, part: "b", slot: "under" }],
+        claims: ["shadow"],
+    });
+}

package/dist/text/effects/warp/warpRgb.schema.d.ts

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

package/dist/text/effects/warp/warpRgb.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_RGB_SCHEMA = defineSchema()({
+    id: "warpRgb",
+    family: "text",
+    factory: "warpRgb",
+    fields: {
+        colors: { kind: "colors", label: "Colours", min: 2, max: 2, default: ["var(--color-sx-primary)", "var(--color-sx-accent)"] },
+        distance: { kind: "number", label: "Split", min: 1, max: 20, step: 1, unit: "px", default: 4 },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 1, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/text/effects/warp/warpShader.d.ts

@@ -0,0 +1,12 @@
+import type { TextEffect } from "../../types.js";
+export interface WarpShaderOptions {
+    /** How far the ripple bends the letters, in px. Default `10`. */
+    readonly strength?: number;
+    /** How much scrolling fast bends them, 0 to turn it off. Default `1`. */
+    readonly scroll?: number;
+}
+/**
+ * The letters ripple out from under the mouse and bend with the scroll's speed, drawn with a WebGL shader. High tier:
+ * other devices get a CSS wobble on hover (`warpShader-lite`). It carries code: the page needs `"use client"`.
+ */
+export declare function warpShader(options?: WarpShaderOptions): TextEffect;