@sharedex/ui 0.0.0-stage → 0.9.0

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

@@ -0,0 +1,21 @@
+import { SHOW, at, defineText, hostOf, v, varName, whenOn } from "../kit.js";
+const ID = "pointerTilt";
+const MAX = v(ID, "max");
+const P = `perspective(${v(ID, "perspective")})`;
+/** -1 to 1 across the text, from the pointer's place in it (physical, like the pointer). */
+const DX = "(var(--sx-text-px, 0.5) * 2 - 1)";
+const DY = "(var(--sx-text-py, 0.5) * 2 - 1)";
+// The text leans towards the mouse and settles back flat when it leaves. Only the visible text turns, never its box.
+const CSS = `  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    transform: ${P} rotateX(0deg) rotateY(0deg);
+    transition: transform 0.45s var(--ease-sx-out, ease-out);
+  }
+${whenOn(ID, SHOW, `transform: ${P} rotateX(calc(${DY} * ${MAX} * -1deg)) rotateY(calc(${DX} * ${MAX} * 1deg)); transition: transform 0.12s ease-out;`)}`;
+/** The text leans towards the mouse in 3D. Needs a mouse: still elsewhere. */
+export function pointerTilt(options = {}) {
+    return defineText(ID, CSS, {
+        vars: { [varName(ID, "max")]: options.max ?? 14, [varName(ID, "perspective")]: `${options.perspective ?? 600}px` },
+        claims: ["move"],
+        needs: { pointer: true },
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_TILT_SCHEMA = defineSchema()({
+    id: "pointerTilt",
+    family: "text",
+    factory: "pointerTilt",
+    fields: {
+        max: { kind: "number", label: "Lean", min: 0, max: 45, step: 1, unit: "°", default: 14 },
+        perspective: { kind: "number", label: "Perspective", min: 200, max: 2000, step: 50, unit: "px", default: 600, help: "Smaller looks more dramatic." },
+    },
+});

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

@@ -0,0 +1,18 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerTrailOptions {
+    /** What trails behind the mouse: a character, an emoji or a short word. Default `"✦"`. */
+    readonly content?: string;
+    /** Its colour. Default the theme's primary. */
+    readonly color?: string;
+    /** Its size, in em of the text. Default `0.5`. */
+    readonly size?: number;
+    /** px the mouse travels between one mark and the next. Default `28`. */
+    readonly spacing?: number;
+    /** Seconds a mark takes to fade. Default `0.8`. */
+    readonly duration?: number;
+}
+/**
+ * Little marks (a star, an emoji, a word) trail behind the mouse over the text and fade. Mouse only: nothing happens on
+ * a touch screen. It carries code: the page needs `"use client"`.
+ */
+export declare function pointerTrail(options?: PointerTrailOptions): TextEffect;

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

@@ -0,0 +1,83 @@
+import { at, defineText, hostOf, layerOf, v, varName } from "../kit.js";
+import { mayFollow, round3 } from "./kit.js";
+const ID = "pointerTrail";
+const MARK = at(`${hostOf(ID)} ${layerOf(ID)} > [data-sx-text-node]`);
+/** At most this many marks at once: the oldest goes first. */
+const MOST = 14;
+// Each mark lands where the mouse was (--sx-text-at-x/y, px from the layer's top left, physical like the pointer's
+// numbers), turned a little, then rises, shrinks and fades. The program removes it when its animation ends.
+const CSS = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; }
+  ${MARK} {
+    inset: 0 auto auto 0;
+    translate: calc(var(--sx-text-at-x) - 50%) calc(var(--sx-text-at-y) - 50%);
+    rotate: var(--sx-text-turn, 0deg);
+    font-size: calc(${v(ID, "size")} * 1em);
+    line-height: 1;
+    white-space: nowrap;
+    color: ${v(ID, "color")};
+    -webkit-text-fill-color: ${v(ID, "color")};
+    animation: sx-text-${ID} ${v(ID, "time")} ease-out forwards;
+  }
+  @keyframes sx-text-${ID} {
+    to { opacity: 0; scale: 0.3; translate: calc(var(--sx-text-at-x) - 50%) calc(var(--sx-text-at-y) - 50% - 1.2em); }
+  }`;
+function attachTrail(el, content, spacing) {
+    if (!mayFollow())
+        return () => { };
+    let n = 0;
+    let last;
+    const layer = () => el.querySelector(`[data-sx-text-layer="${ID}"]`);
+    const onMove = (e) => {
+        const host = layer();
+        if (!host)
+            return;
+        const box = host.getBoundingClientRect();
+        const x = e.clientX - box.left;
+        const y = e.clientY - box.top;
+        if (last && Math.hypot(x - last.x, y - last.y) < spacing)
+            return;
+        last = { x, y };
+        const mark = document.createElement("span");
+        mark.setAttribute("data-sx-text-node", "");
+        mark.textContent = content;
+        mark.style.setProperty("--sx-text-at-x", `${round3(x)}px`);
+        mark.style.setProperty("--sx-text-at-y", `${round3(y)}px`);
+        // turned a little, a different way each time: the same steps on every run, nothing random
+        mark.style.setProperty("--sx-text-turn", `${((n++ * 47) % 50) - 25}deg`);
+        mark.addEventListener("animationend", () => mark.remove(), { once: true });
+        host.append(mark);
+        while (host.childElementCount > MOST)
+            host.firstElementChild?.remove();
+    };
+    const onLeave = () => {
+        last = undefined;
+    };
+    el.addEventListener("pointermove", onMove, { passive: true });
+    el.addEventListener("pointerleave", onLeave);
+    return () => {
+        el.removeEventListener("pointermove", onMove);
+        el.removeEventListener("pointerleave", onLeave);
+        layer()?.replaceChildren();
+    };
+}
+/**
+ * Little marks (a star, an emoji, a word) trail behind the mouse over the text and fade. Mouse only: nothing happens on
+ * a touch screen. It carries code: the page needs `"use client"`.
+ */
+export function pointerTrail(options = {}) {
+    const content = options.content ?? "✦";
+    const spacing = options.spacing ?? 28;
+    const program = {
+        attach: (el) => attachTrail(el, content, spacing),
+        signature: `${ID}:${JSON.stringify(content)}:${spacing}`,
+    };
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "size")]: options.size ?? 0.5,
+            [varName(ID, "time")]: `${options.duration ?? 0.8}s`,
+        },
+        layers: [{ part: "marks" }],
+        program,
+    });
+}

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

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

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

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_TRAIL_SCHEMA = defineSchema()({
+    id: "pointerTrail",
+    family: "text",
+    factory: "pointerTrail",
+    fields: {
+        content: { kind: "text", label: "Mark", default: "✦", help: "A character, an emoji or a short word." },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+        size: { kind: "number", label: "Size", min: 0.2, max: 2, step: 0.05, unit: "em", default: 0.5 },
+        spacing: { kind: "number", label: "Spacing", min: 8, max: 120, step: 2, unit: "px", default: 28 },
+        duration: { kind: "number", label: "Fade", min: 0.2, max: 3, step: 0.05, unit: "s", default: 0.8 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface PointerWaveOptions {
+    /** How high each letter jumps, in em. Default `0.25`. */
+    readonly height?: number;
+    /** Seconds one letter's jump takes. Default `0.5`. */
+    readonly duration?: number;
+    /** Seconds between one letter and the next. Default `0.035`. */
+    readonly stagger?: number;
+}
+/** A wave runs through the letters, one after another, on hover or keyboard focus. Plain CSS; mouse and keyboard only. */
+export declare function pointerWave(options?: PointerWaveOptions): TextEffect;

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

@@ -0,0 +1,23 @@
+import { at, defineText, hostOf, v, varName, whenOn } from "../kit.js";
+import { LETTER, LETTER_I } from "./kit.js";
+const ID = "pointerWave";
+// Each letter jumps and lands, the next one a moment later, from the reading start: a wave that runs through the word
+// once per hover or keyboard focus. Arabic and the other joined scripts wave word by word.
+const CSS = `  @keyframes sx-text-${ID} {
+    40% { transform: translateY(calc(${v(ID, "height")} * -1em)); }
+    to { transform: none; }
+  }
+  ${at(`${hostOf(ID)} ${LETTER}`)} { transform-origin: 50% 100%; }
+${whenOn(ID, LETTER, `animation: sx-text-${ID} ${v(ID, "time")} ease-in-out calc(${LETTER_I} * ${v(ID, "stagger")}) both;`)}`;
+/** A wave runs through the letters, one after another, on hover or keyboard focus. Plain CSS; mouse and keyboard only. */
+export function pointerWave(options = {}) {
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "height")]: options.height ?? 0.25,
+            [varName(ID, "time")]: `${options.duration ?? 0.5}s`,
+            [varName(ID, "stagger")]: `${options.stagger ?? 0.035}s`,
+        },
+        claims: ["move"],
+        needs: { split: "chars" },
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const POINTER_WAVE_SCHEMA = defineSchema()({
+    id: "pointerWave",
+    family: "text",
+    factory: "pointerWave",
+    fields: {
+        height: { kind: "number", label: "Height", min: 0, max: 1, step: 0.05, unit: "em", default: 0.25 },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 2, step: 0.05, unit: "s", default: 0.5 },
+        stagger: { kind: "number", label: "Stagger", min: 0, max: 0.2, step: 0.005, unit: "s", default: 0.035 },
+    },
+});

package/dist/text/effects/scrub/scrubCylinder.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface ScrubCylinderOptions {
+    /** How far the drum turns while the text crosses the screen, in degrees. Default `150`. */
+    readonly turn?: number;
+    /** The angle between one line and the next on the drum, in degrees. Default `28`. */
+    readonly step?: number;
+    /** The drum's radius, in line heights. Default `3`. */
+    readonly radius?: number;
+}
+/** The lines sit round a turning drum that rolls as you scroll (Codrops' 3D text on scroll). */
+export declare function scrubCylinder(options?: ScrubCylinderOptions): TextEffect;

package/dist/text/effects/scrub/scrubCylinder.js

@@ -0,0 +1,24 @@
+import { SHOW, at, defineText, hostOf, scrub, v, varName } from "../kit.js";
+import { provideScrub } from "../../runtime/scrub.js";
+const ID = "scrubCylinder";
+const LINE = "[data-sx-text-line]";
+// Every line moves to the middle, turns on one shared drum and steps back out by the radius; lines that turn past
+// the side hide their backs. --sx-n is the number of lines (they are what moves).
+const MID = "(var(--sx-n, 1) - 1) / 2";
+const pose = (q) => `transform: translateY(calc((${MID} - var(--sx-li, 0)) * 1lh)) translateZ(calc(${v(ID, "radius")} * -1lh)) rotateX(calc((${MID} - var(--sx-li, 0)) * ${v(ID, "step")} + (${q} - 0.5) * ${v(ID, "turn")})) translateZ(calc(${v(ID, "radius")} * 1lh));`;
+const CSS = `  ${at(`${hostOf(ID)} ${SHOW}`)} { display: block; perspective: 9em; transform-style: preserve-3d; }
+  ${at(`${hostOf(ID)} ${LINE}`)} { backface-visibility: hidden; }
+${scrub(ID, { target: LINE, pose, range: [0, 100] })}`;
+/** The lines sit round a turning drum that rolls as you scroll (Codrops' 3D text on scroll). */
+export function scrubCylinder(options = {}) {
+    provideScrub();
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "turn")]: `${options.turn ?? 150}deg`,
+            [varName(ID, "step")]: `${options.step ?? 28}deg`,
+            [varName(ID, "radius")]: options.radius ?? 3,
+        },
+        claims: ["move"],
+        needs: { split: "lines", order: "start", scroll: true },
+    });
+}

package/dist/text/effects/scrub/scrubCylinder.schema.d.ts

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

package/dist/text/effects/scrub/scrubCylinder.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SCRUB_CYLINDER_SCHEMA = defineSchema()({
+    id: "scrubCylinder",
+    family: "text",
+    factory: "scrubCylinder",
+    fields: {
+        turn: { kind: "number", label: "Turn", min: 0, max: 360, step: 5, unit: "°", default: 150 },
+        step: { kind: "number", label: "Between lines", min: 5, max: 60, step: 1, unit: "°", default: 28 },
+        radius: { kind: "number", label: "Radius", min: 1, max: 10, step: 0.25, unit: "lines", default: 3 },
+    },
+});

package/dist/text/effects/scrub/scrubFloat.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect, TextSplit } from "../../types.js";
+export interface ScrubFloatOptions {
+    /** What floats up. Default letters (whole words in joined scripts such as Arabic). */
+    readonly by?: TextSplit;
+    /** How tall the pieces start, stretched: 1 is not at all. Default `2.2`. */
+    readonly stretch?: number;
+}
+/** Letters rise and settle into place one after another, tied to the scroll (React Bits ScrollFloat). */
+export declare function scrubFloat(options?: ScrubFloatOptions): TextEffect;

package/dist/text/effects/scrub/scrubFloat.js

@@ -0,0 +1,14 @@
+import { defineText, scrub, v, varName } from "../kit.js";
+import { provideScrub } from "../../runtime/scrub.js";
+const ID = "scrubFloat";
+const pose = (q) => `opacity: ${q}; translate: 0 calc((1 - ${q}) * 120%); scale: 1 calc(1 + (1 - ${q}) * (${v(ID, "stretch")} - 1)); transform-origin: 50% 0%;`;
+const CSS = scrub(ID, { pose, range: [5, 45], share: 0.45 });
+/** Letters rise and settle into place one after another, tied to the scroll (React Bits ScrollFloat). */
+export function scrubFloat(options = {}) {
+    provideScrub();
+    return defineText(ID, CSS, {
+        vars: { [varName(ID, "stretch")]: options.stretch ?? 2.2 },
+        claims: ["enter"],
+        needs: { split: options.by ?? "chars", order: "start", scroll: true },
+    });
+}

package/dist/text/effects/scrub/scrubFloat.schema.d.ts

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

package/dist/text/effects/scrub/scrubFloat.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SCRUB_FLOAT_SCHEMA = defineSchema()({
+    id: "scrubFloat",
+    family: "text",
+    factory: "scrubFloat",
+    fields: {
+        by: { kind: "choice", label: "Moves", values: ["chars", "words", "lines"], labels: { chars: "Letters", words: "Words", lines: "Lines" }, default: "chars" },
+        stretch: { kind: "number", label: "Starting stretch", min: 1, max: 4, step: 0.1, default: 2.2 },
+    },
+});

package/dist/text/effects/scrub/scrubHighlight.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect, TextSplit } from "../../types.js";
+export interface ScrubHighlightOptions {
+    /** What lights up in turn. Default words. */
+    readonly by?: TextSplit;
+    /** How the pieces start: faded (default), faded and blurred, or faded with the block turned a little (React Bits ScrollReveal). */
+    readonly from?: "dim" | "blur" | "rotate";
+    /** How much of its colour a piece keeps before it lights up, 0-1. Default `0.15`. */
+    readonly dim?: number;
+}
+/** Grey words turn dark one by one as you scroll, for a long "about us" paragraph. Plain CSS where the browser can. */
+export declare function scrubHighlight(options?: ScrubHighlightOptions): TextEffect;

package/dist/text/effects/scrub/scrubHighlight.js

@@ -0,0 +1,22 @@
+import { SHOW, defineText, scrub, v, varName } from "../kit.js";
+import { provideScrub } from "../../runtime/scrub.js";
+const ID = "scrubHighlight";
+const pose = (q) => `opacity: calc(${v(ID, "dim")} + (1 - ${v(ID, "dim")}) * ${q}); filter: blur(calc((1 - ${q}) * ${v(ID, "blur")}));`;
+const turned = (q) => `rotate: calc((1 - ${q}) * ${v(ID, "turn")}); transform-origin: 0% 50%;`;
+// The pieces light up one after another as the text crosses from the lower part of the screen to its upper middle.
+const CSS = `${scrub(ID, { pose, range: [10, 55], share: 0.2 })}
+${scrub(ID, { target: SHOW, name: "turn", pose: turned, range: [5, 50] })}`;
+/** Grey words turn dark one by one as you scroll, for a long "about us" paragraph. Plain CSS where the browser can. */
+export function scrubHighlight(options = {}) {
+    provideScrub();
+    const from = options.from ?? "dim";
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "dim")]: options.dim ?? 0.15,
+            [varName(ID, "blur")]: from === "blur" ? "0.12em" : "0em",
+            [varName(ID, "turn")]: from === "rotate" ? "3deg" : "0deg",
+        },
+        claims: ["enter"],
+        needs: { split: options.by ?? "words", order: "start", scroll: true },
+    });
+}

package/dist/text/effects/scrub/scrubHighlight.schema.d.ts

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

package/dist/text/effects/scrub/scrubHighlight.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SCRUB_HIGHLIGHT_SCHEMA = defineSchema()({
+    id: "scrubHighlight",
+    family: "text",
+    factory: "scrubHighlight",
+    fields: {
+        by: { kind: "choice", label: "Moves", values: ["chars", "words", "lines"], labels: { chars: "Letters", words: "Words", lines: "Lines" }, default: "words" },
+        from: { kind: "choice", label: "Starts", values: ["dim", "blur", "rotate"], labels: { dim: "Faded", blur: "Faded and blurred", rotate: "Faded and turned" }, default: "dim" },
+        dim: { kind: "number", label: "Faded to", min: 0, max: 1, step: 0.05, default: 0.15 },
+    },
+});

package/dist/text/effects/scrub/scrubMarker.d.ts

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface ScrubMarkerOptions {
+    /** The marker's colour. Default the theme's accent, see-through. */
+    readonly color?: string;
+    /** How tall the stroke is, in em: small is an underline, about 1 is a full highlight. Default `0.4`. */
+    readonly thickness?: number;
+    /** Seconds it takes to draw. Default `0.9`. */
+    readonly duration?: number;
+    /** Seconds before it starts, once on screen. Default `0.2`. */
+    readonly delay?: number;
+}
+/** A highlighter stroke draws itself under the words as they come into view. */
+export declare function scrubMarker(options?: ScrubMarkerOptions): TextEffect;

package/dist/text/effects/scrub/scrubMarker.js

@@ -0,0 +1,29 @@
+import { DIR, SHOW, at, defineText, enter, hostOf, seconds, v, varName } from "../kit.js";
+const ID = "scrubMarker";
+// The marker is the text's own background, so it follows every line of a wrapped phrase. It is the look (shipped
+// always); the entrance draws it from the reading start: a background size, a repaint for under a second.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    display: inline;
+    padding-inline: 0.08em;
+    background: linear-gradient(${v(ID, "color")}, ${v(ID, "color")}) no-repeat;
+    background-size: 100% ${v(ID, "thickness")};
+    background-position: calc((1 - ${DIR}) * 50%) 92%;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }`;
+const CSS = enter(ID, { target: SHOW, from: `background-size: 0% ${v(ID, "thickness")};`, ease: "cubic-bezier(0.5, 0, 0.2, 1)" });
+/** A highlighter stroke draws itself under the words as they come into view. */
+export function scrubMarker(options = {}) {
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent) 45%, transparent)",
+            [varName(ID, "thickness")]: `${options.thickness ?? 0.4}em`,
+            [varName(ID, "time")]: seconds(options.duration ?? 0.9),
+            [varName(ID, "stagger")]: "0s",
+            [varName(ID, "delay")]: seconds(options.delay ?? 0.2),
+        },
+        claims: ["enter"],
+        needs: { inView: true },
+    });
+}

package/dist/text/effects/scrub/scrubMarker.schema.d.ts

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

package/dist/text/effects/scrub/scrubMarker.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SCRUB_MARKER_SCHEMA = defineSchema()({
+    id: "scrubMarker",
+    family: "text",
+    factory: "scrubMarker",
+    fields: {
+        color: { kind: "color", label: "Marker", default: "color-mix(in oklab, var(--color-sx-accent) 45%, transparent)" },
+        thickness: { kind: "number", label: "Thickness", min: 0.05, max: 1.2, step: 0.05, unit: "em", default: 0.4 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 3, step: 0.05, unit: "s", default: 0.9 },
+        delay: { kind: "number", label: "Delay", min: 0, max: 3, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/text/effects/scrub/scrubParallax.d.ts

@@ -0,0 +1,7 @@
+import type { TextEffect } from "../../types.js";
+export interface ScrubParallaxOptions {
+    /** How far the lines spread apart as they cross the screen, in line heights. Default `0.6`. */
+    readonly depth?: number;
+}
+/** Each line moves at a different speed as you scroll, so the heading seems to come apart and settle. */
+export declare function scrubParallax(options?: ScrubParallaxOptions): TextEffect;

package/dist/text/effects/scrub/scrubParallax.js

@@ -0,0 +1,15 @@
+import { defineText, scrub, v, varName } from "../kit.js";
+import { provideScrub } from "../../runtime/scrub.js";
+const ID = "scrubParallax";
+// Each line moves by its own amount: the further down, the more. In the middle of the screen they sit where they are.
+const pose = (q) => `translate: 0 calc((0.5 - ${q}) * ${v(ID, "depth")} * (var(--sx-li, 0) + 1) * 1lh);`;
+const CSS = scrub(ID, { pose, range: [0, 100] });
+/** Each line moves at a different speed as you scroll, so the heading seems to come apart and settle. */
+export function scrubParallax(options = {}) {
+    provideScrub();
+    return defineText(ID, CSS, {
+        vars: { [varName(ID, "depth")]: options.depth ?? 0.6 },
+        claims: ["move"],
+        needs: { split: "lines", order: "start", scroll: true },
+    });
+}

package/dist/text/effects/scrub/scrubParallax.schema.d.ts

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

package/dist/text/effects/scrub/scrubParallax.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SCRUB_PARALLAX_SCHEMA = defineSchema()({
+    id: "scrubParallax",
+    family: "text",
+    factory: "scrubParallax",
+    fields: {
+        depth: { kind: "number", label: "Depth", min: 0, max: 3, step: 0.05, default: 0.6, help: "How far the lines spread apart, in line heights." },
+    },
+});

package/dist/text/effects/scrub/scrubPin.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface ScrubPinOptions {
+    /** `"scale"` (default): the word starts huge and shrinks to its size. `"slide"`: a word wider than the screen slides across it. */
+    readonly kind?: "scale" | "slide";
+    /** How long it stays pinned, in screen heights of scrolling. Default `1.5`. */
+    readonly length?: number;
+    /** How large it starts, with `scale`. Default `4`. */
+    readonly from?: number;
+}
+/** A huge word that shrinks, or slides across the screen, while its section stays pinned. Award-site classic. */
+export declare function scrubPin(options?: ScrubPinOptions): TextEffect;

package/dist/text/effects/scrub/scrubPin.js

@@ -0,0 +1,39 @@
+import { DIR, SHOW, at, defineText, hostOf, scrub, v, varName } from "../kit.js";
+import { provideScrub } from "../../runtime/scrub.js";
+const ID = "scrubPin";
+const INNER = `${SHOW} > [data-sx-text-inner]`;
+// The text becomes as tall as the pinned stretch; its show sticks to the screen and the word moves on the text's
+// contain timeline. Under reduced motion none of it applies: a normal heading.
+const CSS = `  ${at(hostOf(ID))} { display: block; block-size: calc((1 + ${v(ID, "length")}) * 100svh); }
+  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    position: sticky;
+    inset-block-start: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: 100svh;
+    overflow: clip;
+    container-type: inline-size;
+  }
+  ${at(`${hostOf(ID)} ${INNER}`)} { white-space: nowrap; }
+${scrub(ID, {
+    target: INNER,
+    timeline: "contain",
+    range: [0, 100],
+    pose: (q) => `scale: calc(1 + (1 - ${q}) * (${v(ID, "from")} - 1) * ${v(ID, "scales")}); translate: calc((0.5 - ${q}) * (100cqw + 100%) * ${DIR} * ${v(ID, "slides")}) 0;`,
+})}`;
+/** A huge word that shrinks, or slides across the screen, while its section stays pinned. Award-site classic. */
+export function scrubPin(options = {}) {
+    provideScrub();
+    const slide = options.kind === "slide";
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "length")]: options.length ?? 1.5,
+            [varName(ID, "from")]: options.from ?? 4,
+            [varName(ID, "scales")]: slide ? 0 : 1,
+            [varName(ID, "slides")]: slide ? 1 : 0,
+        },
+        claims: ["move"],
+        needs: { scroll: true, inner: true },
+    });
+}

package/dist/text/effects/scrub/scrubPin.schema.d.ts

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

package/dist/text/effects/scrub/scrubPin.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SCRUB_PIN_SCHEMA = defineSchema()({
+    id: "scrubPin",
+    family: "text",
+    factory: "scrubPin",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["scale", "slide"], labels: { scale: "Shrinks into place", slide: "Slides across" }, default: "scale" },
+        length: { kind: "number", label: "Pinned for", min: 0.5, max: 5, step: 0.1, unit: "screens", default: 1.5 },
+        from: { kind: "number", label: "Starting size", min: 1, max: 12, step: 0.5, default: 4 },
+    },
+});

package/dist/text/effects/scrub/scrubSkew.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface ScrubSkewOptions {
+    /** `"skew"` (default): the text leans with the scroll. `"stretch"`: it stretches taller the faster you scroll. */
+    readonly kind?: "skew" | "stretch";
+    /** How strongly, 1 the default. */
+    readonly strength?: number;
+}
+/** The text leans or stretches with the speed of the scroll, and settles when it stops. It carries code: `"use client"`. */
+export declare function scrubSkew(options?: ScrubSkewOptions): TextEffect;

package/dist/text/effects/scrub/scrubSkew.js

@@ -0,0 +1,37 @@
+import { scrollSpeed, watchScrollSpeed } from "../../../transitions/shader/scrollSpeed.js";
+import { watchOnScreen } from "../../runtime/onScreen.js";
+import { SHOW, at, defineText, hostOf, v, varName } from "../kit.js";
+const ID = "scrubSkew";
+// The program writes the page's scroll speed (screens per second, eased, 0 at rest) while the text is on screen.
+const CSS = `  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    display: inline-block;
+    transform: skewY(calc(var(--sx-text-speed, 0) * ${v(ID, "skew")} * -1deg)) scale(1, calc(1 + max(var(--sx-text-speed, 0), var(--sx-text-speed, 0) * -1) * ${v(ID, "stretch")}));
+  }`;
+function attach(el) {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return () => { };
+    let unwatch;
+    const write = () => el.style.setProperty("--sx-text-speed", String(Math.round(scrollSpeed() * 1000) / 1000));
+    const stop = watchOnScreen(el, (on) => {
+        unwatch?.();
+        unwatch = on ? watchScrollSpeed(write) : undefined;
+        if (!on)
+            el.style.removeProperty("--sx-text-speed");
+    });
+    return () => {
+        stop();
+        unwatch?.();
+        el.style.removeProperty("--sx-text-speed");
+    };
+}
+/** The text leans or stretches with the speed of the scroll, and settles when it stops. It carries code: `"use client"`. */
+export function scrubSkew(options = {}) {
+    const strength = options.strength ?? 1;
+    const stretch = options.kind === "stretch";
+    const program = { attach, signature: "scrubSkew" };
+    return defineText(ID, CSS, {
+        vars: { [varName(ID, "skew")]: stretch ? 0 : 3 * strength, [varName(ID, "stretch")]: stretch ? 0.12 * strength : 0 },
+        claims: ["move"],
+        program,
+    });
+}

package/dist/text/effects/scrub/scrubSkew.schema.d.ts

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

package/dist/text/effects/scrub/scrubSkew.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SCRUB_SKEW_SCHEMA = defineSchema()({
+    id: "scrubSkew",
+    family: "text",
+    factory: "scrubSkew",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["skew", "stretch"], labels: { skew: "Leans", stretch: "Stretches" }, default: "skew" },
+        strength: { kind: "number", label: "Strength", min: 0, max: 4, step: 0.1, default: 1 },
+    },
+});

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

@@ -0,0 +1,26 @@
+export interface FallSettings {
+    /** What starts it: the text coming into view, the mouse over it, or a tap or click on it. */
+    readonly trigger: "enter" | "hover" | "click";
+    /** px per second², the pull. */
+    readonly gravity: number;
+    /** How much of its speed a letter keeps on a bounce (0-1). */
+    readonly bounce: number;
+}
+interface Body {
+    readonly el: HTMLElement;
+    readonly left: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly height: number;
+    /** Seconds it waits before it lets go, and the tilt it lands with. */
+    readonly wait: number;
+    readonly tilt: number;
+    dy: number;
+    vy: number;
+    bounces: number;
+    landed: boolean;
+}
+/** Where `b`'s bottom can go: the floor, or the top of the highest landed body that overlaps it from side to side. */
+export declare function supportOf(b: Pick<Body, "left" | "right">, landed: readonly Pick<Body, "left" | "right" | "bottom" | "height" | "dy">[], floor: number): number;
+export declare function attachFall(el: HTMLElement, s: FallSettings): () => void;
+export {};