@sharedex/ui 0.0.0-stage → 0.10.0

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;

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 },
+    },
+});