@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/text/effects/solid/fall.js

@@ -0,0 +1,91 @@
+// solidFall's program: our own small physics. Each letter is a box with gravity that falls to the floor (the bottom of
+// the element around the text) or onto a letter already lying under it, bounces a little and tips over. It computes
+// only while something is falling, then stops. Only solidFall imports this.
+import { piecesOf, round3 } from "../pointer/kit.js";
+/** A number in [0, 1) from an index: the same fall every time. */
+const hash = (i) => {
+    const s = Math.sin(i * 78.233) * 43758.5453;
+    return s - Math.floor(s);
+};
+/** Where `b`'s bottom can go: the floor, or the top of the highest landed body that overlaps it from side to side. */
+export function supportOf(b, landed, floor) {
+    let support = floor;
+    for (const o of landed) {
+        if (o.left < b.right - 1 && o.right > b.left + 1)
+            support = Math.min(support, o.bottom + o.dy - o.height);
+    }
+    return support;
+}
+export function attachFall(el, s) {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return () => { };
+    let frame = 0;
+    let started = false;
+    const fall = () => {
+        if (started)
+            return;
+        started = true;
+        stopTrigger();
+        const floor = (el.parentElement ?? el).getBoundingClientRect().bottom;
+        const bodies = piecesOf(el).map((piece, i) => {
+            const r = piece.getBoundingClientRect();
+            return {
+                el: piece, left: r.left, right: r.right, bottom: r.bottom, height: r.height,
+                wait: hash(i) * 0.35, tilt: (hash(i + 31) * 2 - 1) * 14,
+                dy: 0, vy: 0, bounces: 0, landed: false,
+            };
+        });
+        el.setAttribute("data-sx-text-falling", "");
+        let last = 0;
+        let t = 0;
+        const tick = (now) => {
+            const dt = last === 0 ? 0 : Math.min(0.05, (now - last) / 1000);
+            last = now;
+            t += dt;
+            // the lowest first, so a letter always lands on one that has already landed
+            const order = [...bodies].sort((a, b) => b.bottom + b.dy - (a.bottom + a.dy));
+            for (const b of order) {
+                if (b.landed || t < b.wait)
+                    continue;
+                b.vy += s.gravity * dt;
+                b.dy += b.vy * dt;
+                const support = supportOf(b, bodies.filter((o) => o.landed), floor);
+                if (b.bottom + b.dy >= support) {
+                    b.dy = support - b.bottom;
+                    if (b.vy > 220 && b.bounces < 2) {
+                        b.vy = -b.vy * s.bounce;
+                        b.bounces++;
+                    }
+                    else {
+                        b.vy = 0;
+                        b.landed = true;
+                        b.el.setAttribute("data-sx-text-landed", "");
+                    }
+                }
+                b.el.style.transform = `translateY(${round3(b.dy)}px)${b.landed ? ` rotate(${round3(b.tilt)}deg)` : ""}`;
+            }
+            frame = bodies.every((b) => b.landed) ? 0 : requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+    };
+    let stopTrigger = () => { };
+    if (s.trigger === "enter") {
+        const io = new IntersectionObserver(([entry]) => entry?.isIntersecting && fall(), { threshold: 0.6 });
+        io.observe(el);
+        stopTrigger = () => io.disconnect();
+    }
+    else {
+        const type = s.trigger === "hover" ? "pointerenter" : "pointerdown";
+        el.addEventListener(type, fall);
+        stopTrigger = () => el.removeEventListener(type, fall);
+    }
+    return () => {
+        stopTrigger();
+        cancelAnimationFrame(frame);
+        el.removeAttribute("data-sx-text-falling");
+        for (const piece of piecesOf(el)) {
+            piece.style.removeProperty("transform");
+            piece.removeAttribute("data-sx-text-landed");
+        }
+    };
+}

package/dist/text/effects/solid/particles.d.ts

@@ -0,0 +1,7 @@
+export interface ParticleSettings {
+    /** px between two dots. */
+    readonly gap: number;
+    /** How far round the mouse dots are pushed away, in px; 0: it doesn't; -1: 1.2 × the text's size. */
+    readonly radius: number;
+}
+export declare function attachParticles(el: HTMLElement, id: string, s: ParticleSettings): () => void;

package/dist/text/effects/solid/particles.js

@@ -0,0 +1,137 @@
+// solidParticles' program: the letters sampled into dots, which fly in and settle into the text the first time it is on
+// screen, scatter away from the mouse, and spring back. The loop stops once every dot is at rest. Only solidParticles
+// imports this.
+import { createColorResolver } from "../../../backgrounds/runtime/color.js";
+import { attachLoop, drawWords, rgba, snapshot } from "../../runtime/canvasText.js";
+import { MOUSE } from "../pointer/kit.js";
+/** At most this many dots: past it the gap widens, so a long text costs the same as a short one. */
+const MOST = 3500;
+/** The spring that pulls each dot home, and how fast its swing dies away (a little overshoot, then still). */
+const PULL = 55;
+const DAMP = 11;
+/** Where the dots sit: one every `gap` px where the letters are, read from the text drawn at one pixel per px. */
+function targetsOf(source, w, h, gap) {
+    const c = source.getContext("2d");
+    if (!c)
+        return { at: [], gap };
+    const data = c.getImageData(0, 0, source.width, source.height).data;
+    for (let g = gap;; g += 1) {
+        const at = [];
+        for (let y = 0; y < h; y += g) {
+            for (let x = 0; x < w; x += g)
+                if ((data[(Math.floor(y) * source.width + Math.floor(x)) * 4 + 3] ?? 0) > 128)
+                    at.push([x, y]);
+        }
+        if (at.length <= MOST || g > 12)
+            return { at, gap: g };
+    }
+}
+/** A number in [0, 1) from an index: the same scatter every time, no randomness. */
+const hash = (i) => {
+    const s = Math.sin(i * 12.9898) * 43758.5453;
+    return s - Math.floor(s);
+};
+export function attachParticles(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");
+    // read back on every measure: the first getContext call decides, so it asks for a canvas that is cheap to read
+    source.getContext("2d", { willReadFrequently: true });
+    let dots = [];
+    let size = 2;
+    let color = "currentColor";
+    let dpr = 1;
+    let w = 0;
+    let h = 0;
+    let pointer;
+    let radius = 0;
+    const loop = attachLoop(el, layer, {
+        measure() {
+            const snap = snapshot(layer, show, (c) => resolver.resolve(c));
+            dpr = snap.dpr;
+            w = snap.w;
+            h = snap.h;
+            canvas.width = Math.max(1, Math.round(w * dpr));
+            canvas.height = Math.max(1, Math.round(h * dpr));
+            color = rgba(snap.color);
+            radius = s.radius < 0 ? snap.size * 1.2 : s.radius;
+            drawWords(source, { ...snap, dpr: 1 }, "black");
+            const { at, gap } = targetsOf(source, w, h, s.gap);
+            size = Math.max(1, gap * 0.8);
+            const first = dots.length === 0;
+            // the first time, each dot starts scattered round the text; after a resize, the dots keep where they are
+            dots = at.map(([tx, ty], i) => {
+                const old = dots[i];
+                const x = old ? old.x : first ? tx + (hash(i) - 0.5) * w * 0.9 : tx;
+                const y = old ? old.y : first ? ty + (hash(i + 7919) - 0.5) * h * 2.2 : ty;
+                return { tx, ty, x, y, vx: 0, vy: 0 };
+            });
+        },
+        frame(_t, dt) {
+            const still = loop.still();
+            let moving = false;
+            const r = radius;
+            for (const d of dots) {
+                if (still) {
+                    d.x = d.tx;
+                    d.y = d.ty;
+                    continue;
+                }
+                let ax = (d.tx - d.x) * PULL - d.vx * DAMP;
+                let ay = (d.ty - d.y) * PULL - d.vy * DAMP;
+                if (pointer && r > 0) {
+                    const dx = d.x - pointer.x;
+                    const dy = d.y - pointer.y;
+                    const dist = Math.hypot(dx, dy);
+                    if (dist < r && dist > 0.01) {
+                        // gentle and local: a hole that follows the mouse, not a blast
+                        const push = (1 - dist / r) * 3200;
+                        ax += (dx / dist) * push;
+                        ay += (dy / dist) * push;
+                    }
+                }
+                d.vx += ax * dt;
+                d.vy += ay * dt;
+                d.x += d.vx * dt;
+                d.y += d.vy * dt;
+                if (Math.abs(d.vx) + Math.abs(d.vy) > 2 || Math.abs(d.tx - d.x) + Math.abs(d.ty - d.y) > 0.3)
+                    moving = true;
+            }
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, w, h);
+            ctx.fillStyle = color;
+            for (const d of dots)
+                ctx.fillRect(d.x, d.y, size, size);
+            el.setAttribute("data-sx-text-drawn", "");
+            return moving || dt === 0;
+        },
+    });
+    const mouse = window.matchMedia(MOUSE).matches && s.radius !== 0;
+    const move = (e) => {
+        const box = layer.getBoundingClientRect();
+        pointer = { x: e.clientX - box.left, y: e.clientY - box.top };
+        loop.wake();
+    };
+    const leave = () => {
+        pointer = undefined;
+        loop.wake();
+    };
+    if (mouse) {
+        el.addEventListener("pointermove", move, { passive: true });
+        el.addEventListener("pointerleave", leave);
+    }
+    return () => {
+        loop.stop();
+        el.removeEventListener("pointermove", move);
+        el.removeEventListener("pointerleave", leave);
+        resolver.dispose();
+        canvas.remove();
+        el.removeAttribute("data-sx-text-drawn");
+    };
+}

package/dist/text/effects/solid/solidEcho.d.ts

@@ -0,0 +1,15 @@
+import type { TextEffect } from "../../types.js";
+export interface SolidEchoOptions {
+    /** How many echoes. Default `5`. */
+    readonly count?: number;
+    /** How far apart they sit, in em. Default `0.12`. */
+    readonly gap?: number;
+    /** The echoes' colour. Default the text's own. */
+    readonly color?: string;
+    /** `false` (default): they fan out once as the text enters. `true`: they breathe out and back without end. */
+    readonly loop?: boolean;
+    /** Seconds the fan-out takes (or one breath, with `loop`). Default `0.9` (`2.4` with `loop`). */
+    readonly duration?: number;
+}
+/** Faint copies trail behind the text and fan out, once as it enters or breathing without end. Plain CSS. */
+export declare function solidEcho(options?: SolidEchoOptions): TextEffect;

package/dist/text/effects/solid/solidEcho.js

@@ -0,0 +1,44 @@
+import { DIR, at, defineText, enter, hostOf, layerOf, loop, seconds, v, varName } from "../kit.js";
+const ID = "solidEcho";
+const echo = (i) => layerOf(ID, `e${i}`);
+/** Echo `i`'s place, `scale` × its rest: behind the text, down and to the reading end. */
+const place = (i, scale) => `translate: calc(${v(ID, "gap")} * ${i} * ${scale} * ${DIR}) calc(${v(ID, "gap")} * ${i} * ${scale});`;
+function sheets(count, looping) {
+    const ids = Array.from({ length: count }, (_, k) => k + 1);
+    // the echoes and where they rest: still copies, fainter the further out
+    const look = ids
+        .map((i) => `  ${at(`${hostOf(ID)} ${echo(i)}`)} { display: block; z-index: ${-i}; opacity: ${Math.round((1 - i / (count + 1)) * 55) / 100}; color: ${v(ID, "color")}; -webkit-text-fill-color: ${v(ID, "color")}; ${place(i, "1")} }`)
+        .join("\n");
+    if (looping) {
+        const css = ids
+            .map((i) => `  @keyframes sx-text-${ID}-e${i} { from { ${place(i, "0.3")} } to { ${place(i, "1.6")} } }
+${loop(ID, echo(i), `sx-text-${ID}-e${i} ${v(ID, "time")} ease-in-out calc(${i} * -0.12s) infinite alternate`)}`)
+            .join("\n");
+        return { look, css };
+    }
+    // entering, each echo fans out from behind the letters, the nearest first (its place in the order is its --sx-o)
+    const css = ids
+        .map((i) => `  ${at(`${hostOf(ID)} ${echo(i)}`)} { --sx-o: ${i - 1}; }\n${enter(ID, { target: echo(i), name: `e${i}`, from: "translate: 0 0; opacity: 0;" })}`)
+        .join("\n");
+    return { look, css };
+}
+/** Faint copies trail behind the text and fan out, once as it enters or breathing without end. Plain CSS. */
+export function solidEcho(options = {}) {
+    const count = Math.max(1, Math.min(8, Math.round(options.count ?? 5)));
+    const looping = options.loop ?? false;
+    const { look, css } = sheets(count, looping);
+    const layers = Array.from({ length: count }, (_, k) => ({ copy: true, part: `e${k + 1}`, slot: "under" }));
+    return defineText(ID, css, {
+        look,
+        vars: {
+            [varName(ID, "gap")]: `${options.gap ?? 0.12}em`,
+            [varName(ID, "color")]: options.color ?? "currentColor",
+            [varName(ID, "time")]: seconds(options.duration ?? (looping ? 2.4 : 0.9)),
+            [varName(ID, "delay")]: "0s",
+            [varName(ID, "stagger")]: "0.06s",
+        },
+        layers,
+        claims: ["shadow"],
+        needs: looping ? { loop: true } : { inView: true },
+    });
+}

package/dist/text/effects/solid/solidEcho.schema.d.ts

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

package/dist/text/effects/solid/solidEcho.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SOLID_ECHO_SCHEMA = defineSchema()({
+    id: "solidEcho",
+    family: "text",
+    factory: "solidEcho",
+    fields: {
+        count: { kind: "integer", label: "Echoes", min: 1, max: 8, default: 5 },
+        gap: { kind: "number", label: "Gap", min: 0.02, max: 0.5, step: 0.01, unit: "em", default: 0.12 },
+        color: { kind: "color", label: "Colour", default: "currentColor" },
+        loop: { kind: "boolean", label: "Breathe without end", default: false },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 6, step: 0.1, unit: "s", default: 0.9 },
+    },
+});

package/dist/text/effects/solid/solidFall.d.ts

@@ -0,0 +1,16 @@
+import type { TextEffect } from "../../types.js";
+import { type FallSettings } from "./fall.js";
+export interface SolidFallOptions {
+    /** What makes the letters fall: the text coming into view (default), the mouse over it, or a tap or click. */
+    readonly trigger?: FallSettings["trigger"];
+    /** How hard they fall, 1 the default. */
+    readonly gravity?: number;
+    /** How much they bounce, 0-1. Default `0.3`. */
+    readonly bounce?: number;
+}
+/**
+ * The letters fall with gravity, pile up at the bottom of the element round the text, and tip over (our own small
+ * physics, which stops once everything rests). Give the text's parent room below it. Mid tier: a weaker device gets the
+ * letters dropping into place (`solidFall-lite`). It carries code: the page needs `"use client"`.
+ */
+export declare function solidFall(options?: SolidFallOptions): TextEffect;

package/dist/text/effects/solid/solidFall.js

@@ -0,0 +1,23 @@
+import { provideTier } from "../../runtime/tier.js";
+import { at, defineText, enter, hostOf } from "../kit.js";
+import { defineEnter } from "../enter/kit.js";
+import { LETTER } from "../pointer/kit.js";
+import { attachFall } from "./fall.js";
+const ID = "solidFall";
+// The program moves each letter with an inline transform while it falls; once landed, its tilt eases in.
+const CSS = `  ${at(`${hostOf(ID)} ${LETTER}[data-sx-text-landed]`)} { transition: transform 0.35s var(--ease-sx-out, ease-out); }`;
+// Without the physics (`-lite`): the letters drop into place from above and bounce once, in CSS.
+const LITE = `${ID}-lite`;
+const LITE_CSS = enter(LITE, { from: "opacity: 0; translate: 0 -1.2em;", ease: "linear(0, 0.5 30%, 1 50%, 0.85 62%, 1 75%, 0.97 86%, 1)" });
+/**
+ * The letters fall with gravity, pile up at the bottom of the element round the text, and tip over (our own small
+ * physics, which stops once everything rests). Give the text's parent room below it. Mid tier: a weaker device gets the
+ * letters dropping into place (`solidFall-lite`). It carries code: the page needs `"use client"`.
+ */
+export function solidFall(options = {}) {
+    provideTier();
+    const settings = { trigger: options.trigger ?? "enter", gravity: 2600 * (options.gravity ?? 1), bounce: options.bounce ?? 0.3 };
+    const program = { attach: (el) => attachFall(el, settings), signature: JSON.stringify(settings) };
+    const lite = defineEnter(LITE, LITE_CSS, {}, { by: "chars", duration: 0.8 });
+    return defineText(ID, CSS, { tier: "mid", fallback: lite, claims: ["move"], needs: { split: "chars" }, program });
+}

package/dist/text/effects/solid/solidFall.schema.d.ts

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

package/dist/text/effects/solid/solidFall.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SOLID_FALL_SCHEMA = defineSchema()({
+    id: "solidFall",
+    family: "text",
+    factory: "solidFall",
+    fields: {
+        trigger: { kind: "choice", label: "Falls when", values: ["enter", "hover", "click"], labels: { enter: "It comes into view", hover: "The mouse is over it", click: "It is tapped or clicked" }, default: "enter" },
+        gravity: { kind: "number", label: "Gravity", min: 0.2, max: 3, step: 0.1, default: 1 },
+        bounce: { kind: "number", label: "Bounce", min: 0, max: 0.8, step: 0.05, default: 0.3 },
+    },
+});

package/dist/text/effects/solid/solidLayers.d.ts

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface SolidLayersOptions {
+    /** The layers run from the first colour (nearest the text) to the second. Default the theme's primary and accent. */
+    readonly colors?: readonly string[];
+    /** How many layers. Default `4`. */
+    readonly count?: number;
+    /** px between one layer and the next, at rest. Default `3`. */
+    readonly step?: number;
+    /** How far they fan out on hover, as a multiple of the rest. Default `2.5`. */
+    readonly spread?: number;
+}
+/** Coloured copies stacked behind the text, like layered print; they fan out on hover. Plain CSS. */
+export declare function solidLayers(options?: SolidLayersOptions): TextEffect;

package/dist/text/effects/solid/solidLayers.js

@@ -0,0 +1,41 @@
+import { DIR, at, defineText, hostOf, layerOf, v, varName, whenOn } from "../kit.js";
+import { THEME_COLORS } from "../ink/kit.js";
+const ID = "solidLayers";
+const layer = (i) => at(`${hostOf(ID)} ${layerOf(ID, `l${i}`)}`);
+/** Layer `i`'s offset, down and to the reading end, `scale` × its place at rest. */
+const offset = (i, scale) => `translate: calc(${v(ID, "step")} * ${i} * ${scale} * ${DIR}) calc(${v(ID, "step")} * ${i} * ${scale});`;
+// Copies of the text stacked behind it, each a step further out and a step towards the second colour: a printed, layered
+// look. Their place is the look; on hover they fan out further.
+function sheets(count) {
+    const ids = Array.from({ length: count }, (_, k) => k + 1);
+    const look = ids
+        .map((i) => {
+        const mix = `color-mix(in oklab, ${v(ID, "b")} ${Math.round((i * 100) / count)}%, ${v(ID, "a")})`;
+        return `  ${layer(i)} { display: block; z-index: ${-i}; color: ${mix}; -webkit-text-fill-color: ${mix}; ${offset(i, "1")} }`;
+    })
+        .join("\n");
+    const css = ids
+        .map((i) => `  ${layer(i)} { transition: translate 0.35s var(--ease-sx-out, ease-out) calc(${i} * 0.03s); }\n${whenOn(ID, layerOf(ID, `l${i}`), offset(i, v(ID, "spread")))}`)
+        .join("\n");
+    return { look, css };
+}
+/** Coloured copies stacked behind the text, like layered print; they fan out on hover. Plain CSS. */
+export function solidLayers(options = {}) {
+    const count = Math.max(1, Math.min(8, Math.round(options.count ?? 4)));
+    const colors = options.colors ?? THEME_COLORS;
+    const a = colors[0] ?? THEME_COLORS[0];
+    const b = colors[1] ?? a;
+    const { look, css } = sheets(count);
+    const layers = Array.from({ length: count }, (_, k) => ({ copy: true, part: `l${k + 1}`, slot: "under" }));
+    return defineText(ID, css, {
+        look,
+        vars: {
+            [varName(ID, "a")]: a,
+            [varName(ID, "b")]: b,
+            [varName(ID, "step")]: `${options.step ?? 3}px`,
+            [varName(ID, "spread")]: options.spread ?? 2.5,
+        },
+        layers,
+        claims: ["shadow"],
+    });
+}

package/dist/text/effects/solid/solidLayers.schema.d.ts

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

package/dist/text/effects/solid/solidLayers.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SOLID_LAYERS_SCHEMA = defineSchema()({
+    id: "solidLayers",
+    family: "text",
+    factory: "solidLayers",
+    fields: {
+        colors: { kind: "colors", label: "Colours", min: 2, max: 2, default: ["var(--color-sx-primary)", "var(--color-sx-accent)"] },
+        count: { kind: "integer", label: "Layers", min: 1, max: 8, default: 4 },
+        step: { kind: "number", label: "Step", min: 1, max: 12, step: 0.5, unit: "px", default: 3 },
+        spread: { kind: "number", label: "Hover spread", min: 1, max: 6, step: 0.1, default: 2.5 },
+    },
+});

package/dist/text/effects/solid/solidParticles.d.ts

@@ -0,0 +1,12 @@
+import type { TextEffect } from "../../types.js";
+export interface SolidParticlesOptions {
+    /** px between two dots. Smaller is finer and costs more. Default `3`. */
+    readonly gap?: number;
+    /** How far round the mouse the dots are pushed away, in px (`0`: they aren't). Default 1.2 × the text's size. */
+    readonly radius?: number;
+}
+/**
+ * The text made of dots, which fly together as it enters and scatter from the mouse (a canvas). Mid tier: a weaker
+ * device gets the letters flying in in CSS (`solidParticles-lite`). It carries code: the page needs `"use client"`.
+ */
+export declare function solidParticles(options?: SolidParticlesOptions): TextEffect;

package/dist/text/effects/solid/solidParticles.js

@@ -0,0 +1,23 @@
+import { provideTier } from "../../runtime/tier.js";
+import { SHOW, at, defineText, enter, hostOf, layerOf } from "../kit.js";
+import { defineEnter } from "../enter/kit.js";
+import { attachParticles } from "./particles.js";
+const ID = "solidParticles";
+// The canvas stands in for the text once it has drawn, with room round it for the dots to fly in from; until then, and
+// without scripts, the HTML text shows.
+const LOOK = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; inset: -0.5em; }
+  ${at(`${hostOf(ID)}[data-sx-text-drawn] ${SHOW}`)} { opacity: 0; }`;
+// Without the canvas (`-lite`): the letters fly in from scattered places, seeded, in CSS.
+const LITE = `${ID}-lite`;
+const LITE_CSS = enter(LITE, { from: "opacity: 0; scale: 0.4; translate: calc(var(--sx-ra, 0) * 1.4em) calc(var(--sx-rb, 0) * 1.4em);" });
+/**
+ * The text made of dots, which fly together as it enters and scatter from the mouse (a canvas). Mid tier: a weaker
+ * device gets the letters flying in in CSS (`solidParticles-lite`). It carries code: the page needs `"use client"`.
+ */
+export function solidParticles(options = {}) {
+    provideTier();
+    const settings = { gap: Math.max(1, options.gap ?? 3), radius: options.radius ?? -1 };
+    const program = { attach: (el) => attachParticles(el, ID, settings), signature: JSON.stringify(settings) };
+    const lite = defineEnter(LITE, LITE_CSS, {}, { by: "chars", duration: 0.9, needs: { scatter: true, seed: 5 } });
+    return defineText(ID, "", { tier: "mid", fallback: lite, look: LOOK, layers: [{}], claims: ["paint"], program });
+}

package/dist/text/effects/solid/solidParticles.schema.d.ts

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

package/dist/text/effects/solid/solidParticles.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SOLID_PARTICLES_SCHEMA = defineSchema()({
+    id: "solidParticles",
+    family: "text",
+    factory: "solidParticles",
+    fields: {
+        gap: { kind: "number", label: "Dot spacing", min: 1, max: 8, step: 0.5, unit: "px", default: 3 },
+        radius: { kind: "number", label: "Mouse push", min: 0, max: 200, step: 5, unit: "px", autoNote: "1.2 × the text's size", autoValue: 40 },
+    },
+});

package/dist/text/effects/solid/solidShadow.d.ts

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface SolidShadowOptions {
+    /** `"extrude"` (default): a solid block, as if the letters were cut from something thick. `"long"`: a long shadow that fades out. */
+    readonly kind?: "extrude" | "long";
+    /** The shadow's colour. Default the text's colour mixed into the theme's background. */
+    readonly color?: string;
+    /** How far it reaches, in px. Default `8` (extrude) or `36` (long). */
+    readonly length?: number;
+    /** Seconds the shadow takes to grow out as the text enters (`0`: it is just there). Default `0.8`. */
+    readonly duration?: number;
+}
+/** A long or extruded 3D shadow behind the letters, which grows out of them as the text enters. Plain CSS. */
+export declare function solidShadow(options?: SolidShadowOptions): TextEffect;

package/dist/text/effects/solid/solidShadow.js

@@ -0,0 +1,39 @@
+import { DIR, at, defineText, enter, hostOf, layerOf, seconds, v, varName } from "../kit.js";
+const ID = "solidShadow";
+const SHADOW = layerOf(ID);
+const C = v(ID, "color");
+/** One copy of the letters every px out, down and to the reading end: a solid block, or one that fades away. */
+function shadows(kind, length) {
+    const n = Math.max(1, Math.min(60, Math.round(length)));
+    return Array.from({ length: n }, (_, k) => {
+        const i = k + 1;
+        const color = kind === "long" ? `color-mix(in oklab, ${C} ${Math.round(100 - (k * 100) / n)}%, transparent)` : C;
+        return `calc(${i}px * ${DIR}) ${i}px 0 ${color}`;
+    }).join(", ");
+}
+// The shadow is a copy behind the text with fixed shadows (they never animate). Entering, the copy slides out from
+// behind the letters, so the shadow seems to grow out of them; without scripts, or under reduced motion, it is just there.
+const look = (kind, length) => `  ${at(`${hostOf(ID)} ${SHADOW}`)} {
+    display: block;
+    -webkit-text-fill-color: transparent;
+    text-shadow: ${shadows(kind, length)};
+  }`;
+const CSS = enter(ID, { target: SHADOW, from: `translate: calc(${v(ID, "length")} * -1 * ${DIR}) calc(${v(ID, "length")} * -1);` });
+/** A long or extruded 3D shadow behind the letters, which grows out of them as the text enters. Plain CSS. */
+export function solidShadow(options = {}) {
+    const kind = options.kind ?? "extrude";
+    const length = options.length ?? (kind === "long" ? 36 : 8);
+    return defineText(ID, CSS, {
+        look: look(kind, length),
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, currentColor 40%, var(--color-sx-secondary))",
+            [varName(ID, "length")]: `${length}px`,
+            [varName(ID, "time")]: seconds(options.duration ?? 0.8),
+            [varName(ID, "delay")]: "0s",
+            [varName(ID, "stagger")]: "0s",
+        },
+        layers: [{ copy: true, slot: "under" }],
+        claims: ["shadow"],
+        needs: { inView: true },
+    });
+}

package/dist/text/effects/solid/solidShadow.schema.d.ts

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

package/dist/text/effects/solid/solidShadow.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SOLID_SHADOW_SCHEMA = defineSchema()({
+    id: "solidShadow",
+    family: "text",
+    factory: "solidShadow",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["extrude", "long"], labels: { extrude: "Extruded block", long: "Long shadow" }, default: "extrude" },
+        color: { kind: "color", label: "Shadow", default: "color-mix(in oklab, currentColor 40%, var(--color-sx-secondary))" },
+        length: { kind: "number", label: "Length", min: 1, max: 60, step: 1, unit: "px", default: 8 },
+        duration: { kind: "number", label: "Grows in", min: 0, max: 3, step: 0.05, unit: "s", default: 0.8 },
+    },
+});

package/dist/text/effects/stroke/strokeComic.d.ts

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface StrokeComicOptions {
+    /** The letters' colour. Default the theme's accent. */
+    readonly fill?: string;
+    /** The outline's and the shadow's colour. Default the theme's ink. */
+    readonly line?: string;
+    /** The outline's width, in em. Default `0.06`. */
+    readonly width?: number;
+    /** Pop in when the text enters the screen. Default `true`. */
+    readonly pop?: boolean;
+}
+/** Comic-book lettering: a thick outline, a hard offset shadow, and a springy pop as it enters. */
+export declare function strokeComic(options?: StrokeComicOptions): TextEffect;

package/dist/text/effects/stroke/strokeComic.js

@@ -0,0 +1,26 @@
+import { DIR, SHOW, SPRING, at, defineText, enter, hostOf, seconds, v, varName } from "../kit.js";
+const ID = "strokeComic";
+// The outline is drawn under the fill (paint-order), so it thickens outwards without eating into the letters. The
+// offset shadow is fixed: nothing repaints.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    color: ${v(ID, "fill")};
+    -webkit-text-stroke: calc(${v(ID, "width")} * 2) ${v(ID, "line")};
+    paint-order: stroke fill;
+    text-shadow: calc(${v(ID, "width")} * 1.6 * ${DIR}) calc(${v(ID, "width")} * 1.6) 0 ${v(ID, "line")};
+  }`;
+const POP = enter(ID, { target: SHOW, from: "opacity: 0; scale: 0.3; rotate: -8deg;", ease: SPRING });
+/** Comic-book lettering: a thick outline, a hard offset shadow, and a springy pop as it enters. */
+export function strokeComic(options = {}) {
+    const pop = options.pop ?? true;
+    return defineText(ID, pop ? POP : "", {
+        look: LOOK,
+        vars: {
+            [varName(ID, "fill")]: options.fill ?? "var(--color-sx-accent)",
+            [varName(ID, "line")]: options.line ?? "var(--color-sx-ink)",
+            [varName(ID, "width")]: `${options.width ?? 0.06}em`,
+            ...(pop ? { [varName(ID, "time")]: seconds(0.7), [varName(ID, "stagger")]: "0s", [varName(ID, "delay")]: "0s" } : {}),
+        },
+        claims: pop ? ["stroke", "enter"] : ["stroke"],
+        needs: pop ? { inView: true } : {},
+    });
+}

package/dist/text/effects/stroke/strokeComic.schema.d.ts

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

package/dist/text/effects/stroke/strokeComic.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STROKE_COMIC_SCHEMA = defineSchema()({
+    id: "strokeComic",
+    family: "text",
+    factory: "strokeComic",
+    fields: {
+        fill: { kind: "color", label: "Letters", default: "var(--color-sx-accent)" },
+        line: { kind: "color", label: "Outline and shadow", default: "var(--color-sx-ink)" },
+        width: { kind: "number", label: "Outline", min: 0.01, max: 0.2, step: 0.01, unit: "em", default: 0.06 },
+        pop: { kind: "boolean", label: "Pop in", default: true },
+    },
+});