@sharedex/ui 0.0.0-stage → 0.9.0

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

@@ -0,0 +1,22 @@
+// What the pointer effects share: the piece that moves under the pointer, and the checks their programs make before
+// they attach anything. Selectors are pure strings; the functions below them run only in the browser.
+/**
+ * The piece a hover effect moves, as a raw selector inside the host: each letter, or each whole word where letters are
+ * not cut (Arabic and the other joined scripts move by the word, never by the letter).
+ */
+export const LETTER = ":is([data-sx-text-char], [data-sx-text-word]:not(:has([data-sx-text-char])))";
+/** The piece's place in the text: its letter index, or its word index where letters are not cut. */
+export const LETTER_I = "var(--sx-i, var(--sx-wi, 0))";
+/** Where a mouse is: hover effects run there only, so a tap never leaves one stuck on a phone. */
+export const MOUSE = "(hover: hover) and (pointer: fine)";
+/** The pieces of `el` a pointer program works on: its letters, or its words where letters are not cut. */
+export function piecesOf(el) {
+    const chars = [...el.querySelectorAll("[data-sx-text-char]")];
+    return chars.length > 0 ? chars : [...el.querySelectorAll("[data-sx-text-word]")];
+}
+/** There is a mouse, and the reader welcomes motion: a pointer program attaches only then. */
+export function mayFollow() {
+    return window.matchMedia(MOUSE).matches && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** Rounded for an inline custom property: no float noise in the markup, and an unchanged value is skipped. */
+export const round3 = (n) => String(Math.round(n * 1000) / 1000);

package/dist/text/effects/pointer/near.d.ts

@@ -0,0 +1,18 @@
+export interface NearRule {
+    /**
+     * `"radius"`: the distance in any direction, fading out at `reach` px. `"row"`: the distance along the line only,
+     * fading out at `reach` × the text's width (the whole line is in play, like pressing on it).
+     */
+    readonly shape: "radius" | "row";
+    readonly reach: number;
+    /** Also write which way the pointer is from each piece (`--sx-text-nx`, `--sx-text-ny`, -1 to 1): for a pull. */
+    readonly direction?: boolean;
+}
+/**
+ * Writes `--sx-text-near` (0 to 1) on each letter (or word, where letters are not cut) of `el`, at most once per frame,
+ * only while the mouse is over it. Sets `data-sx-text-follow` once attached (with `--sx-text-weight`, the text's own
+ * weight, so a weight effect starts from it) and `data-sx-text-near` while the mouse is over. Each centre is measured
+ * once, when the mouse arrives: a measure every frame would force a layout each time. Nothing attaches without a mouse
+ * or under reduced motion. Returns what stops it.
+ */
+export declare function attachNear(el: HTMLElement, rule: NearRule): () => void;

package/dist/text/effects/pointer/near.js

@@ -0,0 +1,89 @@
+// How near the pointer is to each letter, written as a number the effect's CSS turns into weight, width, size or pull.
+// Shared by pointerProximity and pointerPressure. Browser only; attached by their programs, never by Text.
+import { mayFollow, piecesOf, round3 } from "./kit.js";
+/** A smooth fall-off: 1 at the pointer, 0 at the edge of its reach, with no corner at either end. */
+const ease = (t) => t * t * (3 - 2 * t);
+/**
+ * Writes `--sx-text-near` (0 to 1) on each letter (or word, where letters are not cut) of `el`, at most once per frame,
+ * only while the mouse is over it. Sets `data-sx-text-follow` once attached (with `--sx-text-weight`, the text's own
+ * weight, so a weight effect starts from it) and `data-sx-text-near` while the mouse is over. Each centre is measured
+ * once, when the mouse arrives: a measure every frame would force a layout each time. Nothing attaches without a mouse
+ * or under reduced motion. Returns what stops it.
+ */
+export function attachNear(el, rule) {
+    if (!mayFollow())
+        return () => { };
+    el.setAttribute("data-sx-text-follow", "");
+    el.style.setProperty("--sx-text-weight", getComputedStyle(el).fontWeight);
+    let pieces = [];
+    let centres = [];
+    let written = [];
+    let width = 0;
+    let frame = 0;
+    let at;
+    const write = () => {
+        frame = 0;
+        if (!at)
+            return;
+        const box = el.getBoundingClientRect();
+        const px = at.x - box.left;
+        const py = at.y - box.top;
+        const reach = rule.shape === "row" ? Math.max(1, rule.reach * width) : Math.max(1, rule.reach);
+        pieces.forEach((piece, i) => {
+            const c = centres[i];
+            const dx = px - c.x;
+            const dy = py - c.y;
+            const d = rule.shape === "row" ? Math.abs(dx) : Math.hypot(dx, dy);
+            const near = round3(ease(Math.max(0, 1 - d / reach)));
+            if (written[i] === near)
+                return;
+            written[i] = near;
+            piece.style.setProperty("--sx-text-near", near);
+            if (rule.direction) {
+                const len = Math.hypot(dx, dy) || 1;
+                piece.style.setProperty("--sx-text-nx", round3(dx / len));
+                piece.style.setProperty("--sx-text-ny", round3(dy / len));
+            }
+        });
+    };
+    const onMove = (e) => {
+        at = { x: e.clientX, y: e.clientY };
+        if (!frame)
+            frame = requestAnimationFrame(write);
+    };
+    const onEnter = (e) => {
+        pieces = piecesOf(el);
+        const box = el.getBoundingClientRect();
+        width = box.width;
+        centres = pieces.map((p) => {
+            const r = p.getBoundingClientRect();
+            return { x: r.left + r.width / 2 - box.left, y: r.top + r.height / 2 - box.top };
+        });
+        written = [];
+        el.setAttribute("data-sx-text-near", "");
+        el.addEventListener("pointermove", onMove, { passive: true });
+        onMove(e);
+    };
+    const onLeave = () => {
+        el.removeEventListener("pointermove", onMove);
+        cancelAnimationFrame(frame);
+        frame = 0;
+        at = undefined;
+        el.removeAttribute("data-sx-text-near");
+        // back to rest: the effect's transition eases each piece home
+        for (const piece of pieces) {
+            piece.style.removeProperty("--sx-text-near");
+            piece.style.removeProperty("--sx-text-nx");
+            piece.style.removeProperty("--sx-text-ny");
+        }
+        written = [];
+    };
+    el.addEventListener("pointerenter", onEnter);
+    el.addEventListener("pointerleave", onLeave);
+    return () => {
+        onLeave();
+        el.removeEventListener("pointerenter", onEnter);
+        el.removeAttribute("data-sx-text-follow");
+        el.style.removeProperty("--sx-text-weight");
+    };
+}

package/dist/text/effects/pointer/pointerJello.d.ts

@@ -0,0 +1,12 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerJelloOptions {
+    /** How far each letter squashes and stretches, 1 the default. */
+    readonly strength?: number;
+    /** Seconds one wobble takes. Default `0.8`. */
+    readonly duration?: number;
+}
+/**
+ * Each letter the mouse touches wobbles like jelly, and finishes its wobble after the mouse moves on. Mouse only: on a
+ * touch screen the text stays as it is. It carries code: the page needs `"use client"`.
+ */
+export declare function pointerJello(options?: PointerJelloOptions): TextEffect;

package/dist/text/effects/pointer/pointerJello.js

@@ -0,0 +1,30 @@
+import { at, defineText, hostOf, v, varName } from "../kit.js";
+import { attachHit } from "./hit.js";
+import { LETTER } from "./kit.js";
+const ID = "pointerJello";
+const S = v(ID, "strength");
+/** One squash or stretch, `k` of the way: x wider and y shorter for a positive `k`, the other way round for a negative. */
+const squash = (k) => `scale3d(calc(1 + ${k} * ${S}), calc(1 - ${k} * ${S}), 1)`;
+// A jelly wobble that dies away. It plays on a letter the program marks, and runs to its end after the mouse moves on.
+const CSS = `  @keyframes sx-text-${ID} {
+    30% { transform: ${squash(0.25)}; }
+    40% { transform: ${squash(-0.25)}; }
+    50% { transform: ${squash(0.15)}; }
+    65% { transform: ${squash(-0.05)}; }
+    75% { transform: ${squash(0.05)}; }
+    to { transform: none; }
+  }
+  ${at(`${hostOf(ID)} ${LETTER}[data-sx-text-hit]`)} { animation: sx-text-${ID} ${v(ID, "time")} ease-out; }`;
+/**
+ * Each letter the mouse touches wobbles like jelly, and finishes its wobble after the mouse moves on. Mouse only: on a
+ * touch screen the text stays as it is. It carries code: the page needs `"use client"`.
+ */
+export function pointerJello(options = {}) {
+    const program = { attach: (el) => attachHit(el, `sx-text-${ID}`), signature: ID };
+    return defineText(ID, CSS, {
+        vars: { [varName(ID, "strength")]: options.strength ?? 1, [varName(ID, "time")]: `${options.duration ?? 0.8}s` },
+        claims: ["move"],
+        needs: { split: "chars" },
+        program,
+    });
+}

package/dist/text/effects/pointer/pointerJello.schema.d.ts

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

package/dist/text/effects/pointer/pointerJello.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_JELLO_SCHEMA = defineSchema()({
+    id: "pointerJello",
+    family: "text",
+    factory: "pointerJello",
+    fields: {
+        strength: { kind: "number", label: "Wobble", min: 0, max: 2, step: 0.1, default: 1 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 2, step: 0.05, unit: "s", default: 0.8 },
+    },
+});

package/dist/text/effects/pointer/pointerPressure.d.ts

@@ -0,0 +1,14 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerPressureOptions {
+    /** The letters' weight goes from light, far from the mouse, to heavy under it. Default `true`. */
+    readonly weight?: boolean;
+    /** Their width goes from narrow to wide the same way (a font with a width axis). Default `true`. */
+    readonly width?: boolean;
+    /** How far along the line the press spreads, as a share of the text's width. Default `0.35`. */
+    readonly reach?: number;
+}
+/**
+ * Letters swell heavier and wider where the mouse presses along the line, and thin out away from it (needs a variable
+ * font; best with one that has weight and width axes). Mouse only. It carries code: the page needs `"use client"`.
+ */
+export declare function pointerPressure(options?: PointerPressureOptions): TextEffect;

package/dist/text/effects/pointer/pointerPressure.js

@@ -0,0 +1,38 @@
+import { at, defineText, hostOf, v, varName } from "../kit.js";
+import { LETTER } from "./kit.js";
+import { attachNear } from "./near.js";
+const ID = "pointerPressure";
+const NEAR = "var(--sx-text-near, 0)";
+const PIECE = at(`${hostOf(ID)}[data-sx-text-follow] ${LETTER}`);
+const PRESSED = at(`${hostOf(ID)}[data-sx-text-near] ${LETTER}`);
+// At rest the letters are as the text is. While the mouse is over the line every letter takes part: light and narrow far
+// from it, heavy and wide under it. The transition brings the whole line in and out of that, and smooths the frames.
+function css(weight, width) {
+    const moved = [weight ? "font-weight" : "", width ? "font-stretch" : ""].filter(Boolean);
+    if (moved.length === 0)
+        return "";
+    return `  ${PIECE} { transition: ${moved.map((p) => `${p} 0.3s ease-out`).join(", ")}; }
+  ${PRESSED} {${weight ? `\n    font-weight: calc(${v(ID, "light")} + ${NEAR} * (${v(ID, "heavy")} - ${v(ID, "light")}));` : ""}${width ? `\n    font-stretch: calc((${v(ID, "narrow")} + ${NEAR} * (${v(ID, "wide")} - ${v(ID, "narrow")})) * 1%);` : ""}
+  }`;
+}
+/**
+ * Letters swell heavier and wider where the mouse presses along the line, and thin out away from it (needs a variable
+ * font; best with one that has weight and width axes). Mouse only. It carries code: the page needs `"use client"`.
+ */
+export function pointerPressure(options = {}) {
+    const weight = options.weight ?? true;
+    const width = options.width ?? true;
+    const reach = options.reach ?? 0.35;
+    const program = { attach: (el) => attachNear(el, { shape: "row", reach }), signature: `${ID}:${reach}` };
+    return defineText(ID, css(weight, width) || `  ${PIECE} { transition: none; }`, {
+        vars: {
+            [varName(ID, "light")]: 200,
+            [varName(ID, "heavy")]: 900,
+            [varName(ID, "narrow")]: 80,
+            [varName(ID, "wide")]: 125,
+        },
+        claims: ["font"],
+        needs: { split: "chars", maxPieces: 60 },
+        program,
+    });
+}

package/dist/text/effects/pointer/pointerPressure.schema.d.ts

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

package/dist/text/effects/pointer/pointerPressure.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_PRESSURE_SCHEMA = defineSchema()({
+    id: "pointerPressure",
+    family: "text",
+    factory: "pointerPressure",
+    fields: {
+        weight: { kind: "boolean", label: "Weight", default: true },
+        width: { kind: "boolean", label: "Width", default: true, help: "Needs a font with a width axis." },
+        reach: { kind: "number", label: "Spread", min: 0.1, max: 1, step: 0.05, default: 0.35, help: "Of the text's width." },
+    },
+});

package/dist/text/effects/pointer/pointerProximity.d.ts

@@ -0,0 +1,18 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerProximityOptions {
+    /**
+     * What changes in the letters near the mouse. `"weight"` (default): they grow bolder, smoothly with a variable font
+     * (in steps with a font that has a few weights). `"width"`: wider, with a font that has a width axis. `"scale"`: larger
+     * (Magnify). `"pull"`: they lean towards the mouse (Magnet).
+     */
+    readonly affects?: "weight" | "width" | "scale" | "pull";
+    /** How far the mouse reaches, in px. Default `120`. */
+    readonly radius?: number;
+    /** How strongly, 1 the default. */
+    readonly strength?: number;
+}
+/**
+ * Letters near the mouse grow bolder, wider or larger, or lean towards it, and settle back as it moves on. Mouse only:
+ * on a touch screen the text stays as it is. Best on a short heading. It carries code: the page needs `"use client"`.
+ */
+export declare function pointerProximity(options?: PointerProximityOptions): TextEffect;

package/dist/text/effects/pointer/pointerProximity.js

@@ -0,0 +1,40 @@
+import { at, defineText, hostOf, v, varName } from "../kit.js";
+import { LETTER } from "./kit.js";
+import { attachNear } from "./near.js";
+const ID = "pointerProximity";
+const NEAR = "var(--sx-text-near, 0)";
+const PIECE = at(`${hostOf(ID)}[data-sx-text-follow] ${LETTER}`);
+// The program writes each letter's nearness (0 to 1) while the mouse is over the text; at rest it is 0 and every letter
+// is as the text is. The transition smooths the steps between frames and eases each letter home when the mouse leaves.
+const RULES = {
+    weight: `font-weight: min(1000, calc(var(--sx-text-weight, 400) + ${NEAR} * ${v(ID, "amount")}));
+    transition: font-weight 0.2s ease-out;`,
+    width: `font-stretch: calc(100% + ${NEAR} * ${v(ID, "amount")} * 1%);
+    transition: font-stretch 0.2s ease-out;`,
+    scale: `transform: scale(calc(1 + ${NEAR} * ${v(ID, "amount")}));
+    transform-origin: 50% 100%;
+    transition: transform 0.2s ease-out;`,
+    pull: `transform: translate(calc(var(--sx-text-nx, 0) * ${NEAR} * ${v(ID, "amount")} * 1em), calc(var(--sx-text-ny, 0) * ${NEAR} * ${v(ID, "amount")} * 1em));
+    transition: transform 0.2s ease-out;`,
+};
+/** At strength 1: 500 weight, 25 % wider, 40 % larger, a 0.25 em lean. */
+const AMOUNT = { weight: 500, width: 25, scale: 0.4, pull: 0.25 };
+/**
+ * Letters near the mouse grow bolder, wider or larger, or lean towards it, and settle back as it moves on. Mouse only:
+ * on a touch screen the text stays as it is. Best on a short heading. It carries code: the page needs `"use client"`.
+ */
+export function pointerProximity(options = {}) {
+    const affects = options.affects ?? "weight";
+    const radius = options.radius ?? 120;
+    const program = {
+        attach: (el) => attachNear(el, { shape: "radius", reach: radius, direction: affects === "pull" }),
+        signature: `${ID}:${affects}:${radius}`,
+    };
+    return defineText(ID, `  ${PIECE} {\n    ${RULES[affects]}\n  }`, {
+        vars: { [varName(ID, "amount")]: Math.round(AMOUNT[affects] * (options.strength ?? 1) * 1000) / 1000 },
+        claims: [affects === "weight" || affects === "width" ? "font" : "move"],
+        // every letter may change on every frame: keep it to a heading
+        needs: { split: "chars", maxPieces: 60 },
+        program,
+    });
+}

package/dist/text/effects/pointer/pointerProximity.schema.d.ts

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

package/dist/text/effects/pointer/pointerProximity.schema.js

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_PROXIMITY_SCHEMA = defineSchema()({
+    id: "pointerProximity",
+    family: "text",
+    factory: "pointerProximity",
+    fields: {
+        affects: {
+            kind: "choice",
+            label: "Near the mouse, letters grow",
+            values: ["weight", "width", "scale", "pull"],
+            labels: { weight: "Bolder", width: "Wider", scale: "Larger", pull: "Towards it" },
+            default: "weight",
+            help: "Bolder and wider are smooth with a variable font.",
+        },
+        radius: { kind: "number", label: "Reach", min: 40, max: 320, step: 5, unit: "px", default: 120 },
+        strength: { kind: "number", label: "Strength", min: 0, max: 3, step: 0.1, default: 1 },
+    },
+});

package/dist/text/effects/pointer/pointerRipple.d.ts

@@ -0,0 +1,14 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerRippleOptions {
+    /** How high each letter jumps, in em. Default `0.25`. */
+    readonly height?: number;
+    /** How fast the wave spreads, in px a second. Default `900`. */
+    readonly speed?: number;
+    /** Seconds one letter's jump takes. Default `0.5`. */
+    readonly duration?: number;
+}
+/**
+ * A wave runs out through the letters from where a finger taps or the mouse clicks or comes in. Works on touch screens.
+ * It carries code: the page needs `"use client"`.
+ */
+export declare function pointerRipple(options?: PointerRippleOptions): TextEffect;

package/dist/text/effects/pointer/pointerRipple.js

@@ -0,0 +1,63 @@
+import { at, defineText, hostOf, v, varName } from "../kit.js";
+import { LETTER, MOUSE, piecesOf, round3 } from "./kit.js";
+const ID = "pointerRipple";
+const NAME = `sx-text-${ID}`;
+// The program writes each letter's distance from where the wave starts (--sx-text-d, px) and restarts the wave by
+// taking data-sx-text-ripple off and putting it back: each letter jumps once, later the further away it is.
+const CSS = `  @keyframes ${NAME} {
+    35% { transform: translateY(calc(${v(ID, "height")} * -1em)) scale(1.06); }
+    to { transform: none; }
+  }
+  ${at(`${hostOf(ID)} ${LETTER}`)} { transform-origin: 50% 100%; }
+  ${at(`${hostOf(ID)}[data-sx-text-ripple] ${LETTER}`)} {
+    animation: ${NAME} ${v(ID, "time")} ease-out calc(var(--sx-text-d, 0) / ${v(ID, "speed")} * 1s) both;
+  }`;
+/**
+ * Starts the wave from a tap or click anywhere, and from where the mouse comes in. The one pointer program that attaches
+ * on a touch screen: a tap is how it works there. Nothing attaches under reduced motion. Returns what stops it.
+ */
+function attachRipple(el) {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return () => { };
+    const mouse = window.matchMedia(MOUSE).matches;
+    const from = (x, y) => {
+        for (const piece of piecesOf(el)) {
+            const r = piece.getBoundingClientRect();
+            piece.style.setProperty("--sx-text-d", round3(Math.hypot(r.left + r.width / 2 - x, r.top + r.height / 2 - y)));
+        }
+        el.removeAttribute("data-sx-text-ripple");
+        // one forced layout, so taking the mark off and putting it back restarts the animation
+        void el.offsetWidth;
+        el.setAttribute("data-sx-text-ripple", "");
+    };
+    const onDown = (e) => from(e.clientX, e.clientY);
+    const onEnter = (e) => {
+        if (e.pointerType === "mouse")
+            from(e.clientX, e.clientY);
+    };
+    el.addEventListener("pointerdown", onDown, { passive: true });
+    if (mouse)
+        el.addEventListener("pointerenter", onEnter);
+    return () => {
+        el.removeEventListener("pointerdown", onDown);
+        el.removeEventListener("pointerenter", onEnter);
+        el.removeAttribute("data-sx-text-ripple");
+    };
+}
+/**
+ * A wave runs out through the letters from where a finger taps or the mouse clicks or comes in. Works on touch screens.
+ * It carries code: the page needs `"use client"`.
+ */
+export function pointerRipple(options = {}) {
+    const program = { attach: attachRipple, signature: ID };
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "height")]: options.height ?? 0.25,
+            [varName(ID, "speed")]: options.speed ?? 900,
+            [varName(ID, "time")]: `${options.duration ?? 0.5}s`,
+        },
+        claims: ["move"],
+        needs: { split: "chars" },
+        program,
+    });
+}

package/dist/text/effects/pointer/pointerRipple.schema.d.ts

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

package/dist/text/effects/pointer/pointerRipple.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_RIPPLE_SCHEMA = defineSchema()({
+    id: "pointerRipple",
+    family: "text",
+    factory: "pointerRipple",
+    fields: {
+        height: { kind: "number", label: "Height", min: 0, max: 1, step: 0.05, unit: "em", default: 0.25 },
+        speed: { kind: "number", label: "Spread speed", min: 100, max: 3000, step: 50, unit: "px/s", default: 900 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 2, step: 0.05, unit: "s", default: 0.5 },
+    },
+});

package/dist/text/effects/pointer/pointerRoll.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerRollOptions {
+    /** Seconds between one letter and the next. Default `0.025`. */
+    readonly stagger?: number;
+    /** Seconds one letter takes. Default `0.4`. */
+    readonly duration?: number;
+}
+/** Each letter rolls up and a copy rolls in after it, one after another, on hover or keyboard focus. Plain CSS. */
+export declare function pointerRoll(options?: PointerRollOptions): TextEffect;

package/dist/text/effects/pointer/pointerRoll.js

@@ -0,0 +1,27 @@
+import { EASE, PAINT, at, defineText, hostOf, v, varName, whenOn } from "../kit.js";
+import { LETTER, LETTER_I } from "./kit.js";
+const ID = "pointerRoll";
+/** How far a letter rolls: further than the letter's box plus the clip's margin, so the copy never peeks in at rest. */
+const STEP = "2.2em";
+// Each letter (or whole word, in a joined script) is a window, clipped a little outside its box so tall marks and
+// descenders show. What rolls is the letter's inner span, carrying its own copy one step below as a still text-shadow
+// (the shadow is never animated: the span moves). clip-path, not overflow, so the letters keep their baseline.
+const CSS = `  ${at(`${hostOf(ID)} ${LETTER}`)} { clip-path: inset(-0.25em -0.1em); }
+  ${at(`${hostOf(ID)} ${LETTER} > ${PAINT}`)} {
+    display: inline-block;
+    text-shadow: 0 ${STEP} currentColor;
+    transition: translate ${v(ID, "time")} ${EASE} calc(${LETTER_I} * ${v(ID, "stagger")});
+  }
+${whenOn(ID, `${LETTER} > ${PAINT}`, `translate: 0 -${STEP};`)}`;
+/** Each letter rolls up and a copy rolls in after it, one after another, on hover or keyboard focus. Plain CSS. */
+export function pointerRoll(options = {}) {
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "stagger")]: `${options.stagger ?? 0.025}s`,
+            [varName(ID, "time")]: `${options.duration ?? 0.4}s`,
+        },
+        claims: ["move"],
+        // the paint span inside each letter is what rolls; the letter is its window
+        needs: { split: "chars", paint: true },
+    });
+}

package/dist/text/effects/pointer/pointerRoll.schema.d.ts

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

package/dist/text/effects/pointer/pointerRoll.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_ROLL_SCHEMA = defineSchema()({
+    id: "pointerRoll",
+    family: "text",
+    factory: "pointerRoll",
+    fields: {
+        stagger: { kind: "number", label: "Stagger", min: 0, max: 0.2, step: 0.005, unit: "s", default: 0.025 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 2, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/text/effects/pointer/pointerShadow.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerShadowOptions {
+    /** The shadow's colour. Default the text's colour, see-through. */
+    readonly color?: string;
+    /** How far it falls from the text at most, in px. Default `14`. */
+    readonly distance?: number;
+    /** How soft it is, in px of blur. Default `6`. */
+    readonly blur?: number;
+}
+/** A soft shadow falls away from the mouse, as if it were the light. A still drop shadow without a mouse. */
+export declare function pointerShadow(options?: PointerShadowOptions): TextEffect;

package/dist/text/effects/pointer/pointerShadow.js

@@ -0,0 +1,33 @@
+import { at, defineText, hostOf, layerOf, v, varName } from "../kit.js";
+const ID = "pointerShadow";
+const SHADOW = at(`${hostOf(ID)} ${layerOf(ID)}`);
+const D = v(ID, "distance");
+/** At rest, and without a mouse: a little below the text, like light from above. */
+const REST = `translate: 0 calc(${D} * 0.4);`;
+// A blurred copy behind the text (never an animated text-shadow), moved with translate away from the mouse, as if the
+// mouse were the lamp. The pointer's numbers are physical, so the shadow falls the same way in a right-to-left page.
+const LOOK = `  ${SHADOW} {
+    display: block;
+    color: ${v(ID, "color")};
+    -webkit-text-fill-color: ${v(ID, "color")};
+    filter: blur(${v(ID, "blur")});
+    ${REST}
+  }`;
+const CSS = `  ${SHADOW} {
+    translate: calc((0.5 - var(--sx-text-px, 0.5)) * 2 * ${D}) calc((0.5 - var(--sx-text-py, 0.3)) * 2 * ${D});
+    transition: translate 0.25s ease-out;
+  }`;
+/** A soft shadow falls away from the mouse, as if it were the light. A still drop shadow without a mouse. */
+export function pointerShadow(options = {}) {
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, currentColor 30%, transparent)",
+            [varName(ID, "distance")]: `${options.distance ?? 14}px`,
+            [varName(ID, "blur")]: `${options.blur ?? 6}px`,
+        },
+        layers: [{ copy: true, slot: "under" }],
+        claims: ["shadow"],
+        needs: { pointer: true },
+    });
+}

package/dist/text/effects/pointer/pointerShadow.schema.d.ts

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

package/dist/text/effects/pointer/pointerShadow.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_SHADOW_SCHEMA = defineSchema()({
+    id: "pointerShadow",
+    family: "text",
+    factory: "pointerShadow",
+    fields: {
+        color: { kind: "color", label: "Shadow", default: "color-mix(in oklab, currentColor 30%, transparent)" },
+        distance: { kind: "number", label: "Distance", min: 0, max: 60, step: 1, unit: "px", default: 14 },
+        blur: { kind: "number", label: "Softness", min: 0, max: 30, step: 1, unit: "px", default: 6 },
+    },
+});

package/dist/text/effects/pointer/pointerSpotlight.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerSpotlightOptions {
+    /** The text's colour inside the light. Default the theme's primary. */
+    readonly color?: string;
+    /** How bright the text is outside the light, 0-1. Default `0.3`. */
+    readonly dim?: number;
+    /** The light's radius, in px. Default `110`. */
+    readonly radius?: number;
+}
+/** The text sits dim; a circle of light round the mouse shows it bright, in colour. Needs a mouse: plain text elsewhere. */
+export declare function pointerSpotlight(options?: PointerSpotlightOptions): TextEffect;

package/dist/text/effects/pointer/pointerSpotlight.js

@@ -0,0 +1,33 @@
+import { SHOW, at, defineText, hostOf, layerOf, v, varName, whenOn } from "../kit.js";
+import { MOUSE } from "./kit.js";
+const ID = "pointerSpotlight";
+const LIT = layerOf(ID);
+const MASK = `radial-gradient(circle ${v(ID, "radius")} at var(--sx-text-x, 50%) var(--sx-text-y, 50%), black 35%, transparent)`;
+// The text sits dim, and a bright copy over it shows only through a soft circle round the mouse (a mask moved by the
+// pointer's position: a small repaint per move, none at rest). Dim only where there is a mouse: on a touch screen, and
+// under reduced motion, the text is as it is, never left dim with no light to read it by.
+const CSS = `  @media ${MOUSE} {
+    ${at(`${hostOf(ID)} ${SHOW}`)} { opacity: ${v(ID, "dim")}; transition: opacity 0.3s ease-out; }
+    ${at(`${hostOf(ID)} ${LIT}`)} {
+      display: block;
+      color: ${v(ID, "color")};
+      -webkit-mask-image: ${MASK};
+      mask-image: ${MASK};
+      opacity: 0;
+      transition: opacity 0.3s ease-out;
+    }
+  }
+${whenOn(ID, LIT, "display: block; opacity: 1;")}`;
+/** The text sits dim; a circle of light round the mouse shows it bright, in colour. Needs a mouse: plain text elsewhere. */
+export function pointerSpotlight(options = {}) {
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "dim")]: options.dim ?? 0.3,
+            [varName(ID, "radius")]: `${options.radius ?? 110}px`,
+        },
+        layers: [{ copy: true }],
+        claims: ["paint"],
+        needs: { pointer: true },
+    });
+}

package/dist/text/effects/pointer/pointerSpotlight.schema.d.ts

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

package/dist/text/effects/pointer/pointerSpotlight.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_SPOTLIGHT_SCHEMA = defineSchema()({
+    id: "pointerSpotlight",
+    family: "text",
+    factory: "pointerSpotlight",
+    fields: {
+        color: { kind: "color", label: "In the light", default: "var(--color-sx-primary)" },
+        dim: { kind: "number", label: "Outside the light", min: 0, max: 1, step: 0.05, default: 0.3 },
+        radius: { kind: "number", label: "Light size", min: 30, max: 400, step: 5, unit: "px", default: 110 },
+    },
+});

package/dist/text/effects/pointer/pointerTilt.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerTiltOptions {
+    /** The most it leans, in degrees. Default `14`. */
+    readonly max?: number;
+    /** How close the viewer stands, in px. Smaller looks more dramatic. Default `600`. */
+    readonly perspective?: number;
+}
+/** The text leans towards the mouse in 3D. Needs a mouse: still elsewhere. */
+export declare function pointerTilt(options?: PointerTiltOptions): TextEffect;