@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/transitions/scroll/Curtain.schema.d.ts

@@ -0,0 +1,2 @@
+/** `<Curtain>`: nothing to set but its sections, which the page supplies. */
+export declare const CURTAIN_SCHEMA: import("../../schema/types.js").Schema;

package/dist/transitions/scroll/Curtain.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../schema/define.js";
+/** `<Curtain>`: nothing to set but its sections, which the page supplies. */
+export const CURTAIN_SCHEMA = defineSchema()({
+    id: "curtain",
+    family: "scroll",
+    factory: "Curtain",
+    fields: {},
+    code: ["children", "as", "className", "panelClassName"],
+});

package/dist/transitions/scroll/PinnedExpand.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export interface PinnedExpandProps {
+    readonly image: string;
+    readonly alt?: string;
+    /** How long it stays pinned while it opens, in screen heights of scrolling. Default `1.5`. */
+    readonly length?: number;
+    /** The starting box, as fractions of the screen: `[width, height]`. Default `[0.55, 0.6]`. */
+    readonly from?: readonly [number, number];
+    /** Corner radius of the starting box, px (it goes to 0). Default `24`. */
+    readonly radius?: number;
+    /** How zoomed-in the picture starts inside its box (it settles to 1). Default `0.15`. */
+    readonly zoom?: number;
+    /** Shown over the picture (a caption, a heading). */
+    readonly children?: ReactNode;
+    readonly className?: string;
+}
+/**
+ * A picture pinned to the screen that opens from a rounded box to the whole
+ * screen as you scroll, then scrolls away. Scrolling back closes it again.
+ *
+ * ```tsx
+ * <PinnedExpand image="/studio.jpg" alt="The studio" length={1.5}>
+ *   <h2 className="…">Inside the studio</h2>
+ * </PinnedExpand>
+ * ```
+ *
+ * A wrapper `1 + length` screens tall with a sticky stage; the box is one
+ * clip-path driven by `--sx-p` from the wrapper's native view timeline, or a
+ * scroll listener where there is none. Under reduced motion it is open from
+ * the start. Needs no `overflow: hidden` parent (`overflow: clip` is fine).
+ */
+export declare function PinnedExpand({ image, alt, length, from, radius, zoom, children, className, }: PinnedExpandProps): import("react").JSX.Element;

package/dist/transitions/scroll/PinnedExpand.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { PartStyle } from "../hosts/shared.js";
+import { PIN_CSS } from "./css.js";
+import { pinProgress } from "./progress.js";
+import { useScrubFallback } from "./useScrub.js";
+const pct = (n) => `${Math.round(n * 10000) / 100}%`;
+/**
+ * A picture pinned to the screen that opens from a rounded box to the whole
+ * screen as you scroll, then scrolls away. Scrolling back closes it again.
+ *
+ * ```tsx
+ * <PinnedExpand image="/studio.jpg" alt="The studio" length={1.5}>
+ *   <h2 className="…">Inside the studio</h2>
+ * </PinnedExpand>
+ * ```
+ *
+ * A wrapper `1 + length` screens tall with a sticky stage; the box is one
+ * clip-path driven by `--sx-p` from the wrapper's native view timeline, or a
+ * scroll listener where there is none. Under reduced motion it is open from
+ * the start. Needs no `overflow: hidden` parent (`overflow: clip` is fine).
+ */
+export function PinnedExpand({ image, alt = "", length = 1.5, from = [0.55, 0.6], radius = 24, zoom = 0.15, children, className, }) {
+    const ref = useRef(null);
+    const stage = useRef(null);
+    const travel = Math.max(0.25, length);
+    // the starting box as insets, % of the stage: [x, y]
+    const insets = [(1 - Math.min(1, Math.max(0, from[0]))) * 50, (1 - Math.min(1, Math.max(0, from[1]))) * 50];
+    const r = Math.max(0, radius);
+    const z = Math.max(0, zoom);
+    useScrubFallback(ref, () => {
+        const root = ref.current;
+        const el = stage.current;
+        if (!root || !el)
+            return [];
+        const frame = el.querySelector("[data-sx-pin-frame]");
+        const img = frame?.querySelector(":scope > img") ?? null;
+        const [x, y] = insets;
+        return [
+            {
+                el,
+                progress: (v) => pinProgress(root.getBoundingClientRect().top, root.offsetHeight, v.height, v.insetTop, v.insetBottom),
+                // the final values on the frame and the picture (not --sx-p, which would restyle the whole stage)
+                apply: (p) => {
+                    const k = 1 - p;
+                    if (frame)
+                        frame.style.clipPath = `inset(${(k * y).toFixed(3)}% ${(k * x).toFixed(3)}% round ${(k * r).toFixed(2)}px)`;
+                    if (img)
+                        img.style.scale = String(1 + k * z);
+                },
+                reset: () => {
+                    frame?.style.removeProperty("clip-path");
+                    img?.style.removeProperty("scale");
+                },
+            },
+        ];
+    }, { reduced: 1 }, [travel, from[0], from[1], radius, zoom]);
+    const style = {
+        blockSize: `${Math.round((1 + travel) * 100)}dvh`,
+        "--sx-pin-x": pct(insets[0] / 100),
+        "--sx-pin-y": pct(insets[1] / 100),
+        "--sx-pin-r": `${r}px`,
+        "--sx-pin-zoom": z,
+    };
+    return (_jsxs("div", { ref: ref, "data-sx-pin": "", className: className, style: style, children: [_jsx(PartStyle, { id: "pin", css: PIN_CSS }), _jsxs("div", { ref: stage, "data-sx-pin-stage": "", children: [_jsx("div", { "data-sx-pin-frame": "", children: _jsx("img", { src: image, alt: alt, draggable: false, decoding: "async" }) }), children === undefined || children === null ? null : _jsx("div", { "data-sx-pin-content": "", children: children })] })] }));
+}

package/dist/transitions/scroll/PinnedExpand.schema.d.ts

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

package/dist/transitions/scroll/PinnedExpand.schema.js

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../schema/define.js";
+export const PINNED_EXPAND_SCHEMA = defineSchema()({
+    id: "pinnedExpand",
+    family: "scroll",
+    factory: "PinnedExpand",
+    // the picture and the caption are the page's content
+    code: ["image", "alt", "children", "className"],
+    fields: {
+        length: { kind: "number", label: "Pinned for", min: 0.5, max: 4, step: 0.1, unit: "screens", default: 1.5, help: "Of scrolling, while it opens." },
+        from: {
+            kind: "vector", label: "Starting box", labels: ["width", "height"], min: 0.1, max: 1, step: 0.01, default: [0.55, 0.6],
+            help: "As shares of the screen; it opens to fill it.",
+        },
+        radius: { kind: "integer", label: "Starting corners", min: 0, max: 96, unit: "px", default: 24, help: "They go square as it opens." },
+        zoom: { kind: "number", label: "Starting zoom", min: 0, max: 0.6, step: 0.01, default: 0.15, help: "The picture starts this much closer and settles." },
+    },
+});

package/dist/transitions/scroll/SplitText.d.ts

@@ -0,0 +1,39 @@
+import { type ElementType } from "react";
+export interface SplitTextProps {
+    /** The text. Plain text only (no markup inside). */
+    readonly children: string;
+    /** `"lines"` (default): each line slides up out of its own box. `"words"`: each word rises and fades in. */
+    readonly by?: "lines" | "words";
+    /** The element to render. Default `p`. */
+    readonly as?: ElementType;
+    /** Seconds between one line (or word) and the next. Default `0.08` for lines, `0.03` for words. */
+    readonly stagger?: number;
+    /** Seconds before the first one starts. Default `0`. */
+    readonly delay?: number;
+    /** Seconds each one takes. Default `0.8`. */
+    readonly duration?: number;
+    /** Play once (default) or every time it comes back into view. */
+    readonly once?: boolean;
+    /** How much must be on screen before it plays, 0–1. Default `0.3`. */
+    readonly threshold?: number;
+    /** For scripts written without spaces: the language, so words are cut where a reader expects. */
+    readonly locale?: string;
+    readonly className?: string;
+}
+/**
+ * A heading or paragraph that reveals line by line (or word by word) when it
+ * scrolls into view.
+ *
+ * ```tsx
+ * <SplitText as="h2" className="text-sx-display">Design that moves with you</SplitText>
+ * ```
+ *
+ * The text is cut into the pieces a line can never break inside (words with
+ * their punctuation; Intl.Segmenter words for scripts without spaces) and
+ * never into letters, so joined scripts such as Arabic stay joined. Lines are
+ * found by measuring where those pieces wrap, and found again when the width
+ * changes. Screen readers read the full text once; the pieces are hidden from
+ * them. Under reduced motion it fades in. Before the script runs the text is
+ * hidden (it is in the HTML, so search engines still read it).
+ */
+export declare function SplitText({ children, by, as: Tag, stagger, delay, duration, once, threshold, locale, className, }: SplitTextProps): import("react").JSX.Element;

package/dist/transitions/scroll/SplitText.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { PartStyle } from "../hosts/shared.js";
+import { useInView } from "../reveal/Reveal.js";
+import { SPLIT_CSS, SR_ONLY } from "./css.js";
+import { lineStarts, splitWords } from "./split.js";
+const seconds = (n) => `${Number(n.toFixed(3))}s`;
+/**
+ * A heading or paragraph that reveals line by line (or word by word) when it
+ * scrolls into view.
+ *
+ * ```tsx
+ * <SplitText as="h2" className="text-sx-display">Design that moves with you</SplitText>
+ * ```
+ *
+ * The text is cut into the pieces a line can never break inside (words with
+ * their punctuation; Intl.Segmenter words for scripts without spaces) and
+ * never into letters, so joined scripts such as Arabic stay joined. Lines are
+ * found by measuring where those pieces wrap, and found again when the width
+ * changes. Screen readers read the full text once; the pieces are hidden from
+ * them. Under reduced motion it fades in. Before the script runs the text is
+ * hidden (it is in the HTML, so search engines still read it).
+ */
+export function SplitText({ children, by = "lines", as: Tag = "p", stagger = by === "lines" ? 0.08 : 0.03, delay = 0, duration = 0.8, once = true, threshold = 0.3, locale, className, }) {
+    const ref = useRef(null);
+    const pieces = useMemo(() => splitWords(children, locale), [children, locale]);
+    // for "lines": the index of the first piece of each line, once measured (null = measure first)
+    const [starts, setStarts] = useState(null);
+    useInView(ref, "data-sx-in", once, threshold);
+    // Lines: lay the pieces out as words, measure where they wrap, then render lines.
+    // Measure again whenever the width changes (another font size, another screen).
+    useLayoutEffect(() => {
+        const root = ref.current;
+        if (by !== "lines" || !root)
+            return;
+        let width = -1;
+        const measure = () => {
+            const words = [...root.querySelectorAll("[data-sx-split-word]")];
+            if (words.length === 0)
+                return;
+            setStarts(lineStarts(words.map((w) => w.offsetTop)));
+        };
+        if (starts === null)
+            measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            const next = Math.round(entry?.contentRect.width ?? 0);
+            if (width !== -1 && next !== width)
+                setStarts(null); // back to words, measured again on the next layout
+            width = next;
+        });
+        ro.observe(root);
+        return () => ro.disconnect();
+    }, [by, starts, pieces]);
+    const style = {
+        "--sx-split-stagger": seconds(stagger),
+        "--sx-split-delay": seconds(delay),
+        "--sx-split-duration": seconds(duration),
+    };
+    const words = () => {
+        let n = 0;
+        return pieces.map((piece, i) => piece.space ? (piece.text) : (_jsx("span", { "data-sx-split-word": "", style: { "--sx-i": n++ }, children: piece.text }, i)));
+    };
+    const lines = () => {
+        if (!starts)
+            return null;
+        const wordIndex = pieces.flatMap((p, i) => (p.space ? [] : [i]));
+        return starts.map((start, line) => {
+            const from = wordIndex[start] ?? 0;
+            const to = line + 1 < starts.length ? (wordIndex[starts[line + 1]] ?? pieces.length) : pieces.length;
+            const text = pieces
+                .slice(from, to)
+                .map((p) => p.text)
+                .join("")
+                .trim();
+            return (_jsx("span", { "data-sx-split-line": "", style: { "--sx-i": line }, children: _jsx("span", { "data-sx-split-inner": "", children: text }) }, line));
+        });
+    };
+    const mode = by === "words" ? "words" : starts ? "lines" : "measuring";
+    return (_jsxs(Tag, { ref: ref, "data-sx-split": mode, className: className, style: style, children: [_jsx(PartStyle, { id: "split", css: SPLIT_CSS }), _jsx("span", { style: SR_ONLY, children: children }), _jsx("span", { "aria-hidden": "true", style: mode === "lines" ? { display: "block" } : undefined, children: mode === "lines" ? lines() : words() })] }));
+}

package/dist/transitions/scroll/SplitText.schema.d.ts

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

package/dist/transitions/scroll/SplitText.schema.js

@@ -0,0 +1,26 @@
+import { defineSchema } from "../../schema/define.js";
+export const SPLIT_TEXT_SCHEMA = defineSchema()({
+    id: "splitText",
+    family: "scroll",
+    factory: "SplitText",
+    // the text is the page's content
+    code: ["children", "as", "className"],
+    fields: {
+        by: {
+            kind: "choice", label: "Comes in", values: ["lines", "words"],
+            labels: { lines: "Line by line, sliding up", words: "Word by word, rising" }, default: "lines",
+        },
+        stagger: {
+            kind: "number", label: "Between pieces", min: 0, max: 0.4, step: 0.01, unit: "s",
+            autoValue: 0.08, autoNote: "0.08 s for lines, 0.03 s for words",
+        },
+        delay: { kind: "number", label: "Delay", min: 0, max: 3, step: 0.05, unit: "s", default: 0 },
+        duration: { kind: "number", label: "Each piece takes", min: 0.1, max: 3, step: 0.05, unit: "s", default: 0.8 },
+        once: { kind: "boolean", label: "Only the first time", default: true, help: "Off: plays every time it comes back into view." },
+        threshold: { kind: "number", label: "In view", min: 0, max: 1, step: 0.05, default: 0.3, help: "How much must be on screen before it plays.", advanced: true },
+        locale: {
+            kind: "text", label: "Language", placeholder: "ja, th, zh…", autoNote: "the page's", advanced: true,
+            help: "For scripts written without spaces, so words are cut where a reader expects.",
+        },
+    },
+});

package/dist/transitions/scroll/StackCards.d.ts

@@ -0,0 +1,37 @@
+import { type ElementType, type ReactNode } from "react";
+export interface StackCardsProps {
+    /** The cards, in order. Each should be at most a screen tall. */
+    readonly children?: ReactNode;
+    /** Where the first card sticks, px from the top of the viewport (clear a fixed header). Default `80`. */
+    readonly top?: number;
+    /** How much of each covered card still peeks out above the next, px. Default `16`. */
+    readonly peek?: number;
+    /** How much a covered card shrinks, 0–1. Default `0.08`. */
+    readonly shrink?: number;
+    /** How far a covered card fades towards the surface colour, 0–1. Default `0.35`. */
+    readonly dim?: number;
+    /** Space between the cards while they scroll in, px. Default `32`. */
+    readonly gap?: number;
+    readonly as?: ElementType;
+    readonly className?: string;
+    /** Classes for each card's box (its rounding is reused by the fade). */
+    readonly cardClassName?: string;
+}
+/**
+ * Cards that stack as you scroll: each one sticks near the top, the next one
+ * slides up over it, and the covered card shrinks and fades a little, so the
+ * pile reads like cards placed on top of each other.
+ *
+ * ```tsx
+ * <StackCards top={96} cardClassName="rounded-3xl">
+ *   {projects.map((p) => <ProjectCard key={p.id} {...p} />)}
+ * </StackCards>
+ * ```
+ *
+ * Sticky positioning; each card follows the next card's native view timeline
+ * (scale and a veil's opacity, which the browser can animate off the main
+ * thread), or, without one, a scroll listener writes how far it is covered. Under reduced motion the cards still
+ * stack, but nothing shrinks. Like any sticky layout it needs no `overflow:
+ * hidden` parent (`overflow: clip` is fine).
+ */
+export declare function StackCards({ children, top, peek, shrink, dim, gap, as: Tag, className, cardClassName, }: StackCardsProps): import("react").JSX.Element;

package/dist/transitions/scroll/StackCards.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useId, useRef } from "react";
+import { PartStyle } from "../hosts/shared.js";
+import { nativeScrollTimelineWorks } from "../../backgrounds/hosts/useLayerNeeds.js";
+import { STACK_CSS } from "./css.js";
+import { stackProgress } from "./progress.js";
+import { useScrubFallback } from "./useScrub.js";
+/** Native path: view timelines, plus `timeline-scope` so a card can follow its neighbour's. */
+const nativeStack = (root) => typeof CSS !== "undefined" && CSS.supports("timeline-scope", "--sx-a") && nativeScrollTimelineWorks(root);
+/**
+ * Cards that stack as you scroll: each one sticks near the top, the next one
+ * slides up over it, and the covered card shrinks and fades a little, so the
+ * pile reads like cards placed on top of each other.
+ *
+ * ```tsx
+ * <StackCards top={96} cardClassName="rounded-3xl">
+ *   {projects.map((p) => <ProjectCard key={p.id} {...p} />)}
+ * </StackCards>
+ * ```
+ *
+ * Sticky positioning; each card follows the next card's native view timeline
+ * (scale and a veil's opacity, which the browser can animate off the main
+ * thread), or, without one, a scroll listener writes how far it is covered. Under reduced motion the cards still
+ * stack, but nothing shrinks. Like any sticky layout it needs no `overflow:
+ * hidden` parent (`overflow: clip` is fine).
+ */
+export function StackCards({ children, top = 80, peek = 16, shrink = 0.08, dim = 0.35, gap = 32, as: Tag = "div", className, cardClassName, }) {
+    const ref = useRef(null);
+    const uid = useId().replace(/[^\w-]/g, "");
+    const items = Children.toArray(children);
+    const name = (i) => `--sx-stack-${uid}-${i}`;
+    const stickTop = (i) => top + i * peek;
+    useScrubFallback(ref, () => {
+        const root = ref.current;
+        if (!root)
+            return [];
+        const cards = [...root.querySelectorAll(":scope > [data-sx-stack-card]")];
+        return cards.slice(0, -1).map((card, i) => {
+            const inner = card.firstElementChild;
+            const veil = inner.querySelector(":scope > [data-sx-stack-veil]");
+            return {
+                el: inner,
+                progress: (v) => stackProgress(cards[i + 1].getBoundingClientRect().top, stickTop(i + 1), v.height, v.insetBottom),
+                // the final values, on the two elements that change (not --sx-p, which would restyle the whole card)
+                apply: (p) => {
+                    inner.style.scale = String(1 - p * shrink);
+                    if (veil)
+                        veil.style.opacity = String(p * dim);
+                },
+                reset: () => {
+                    inner.style.removeProperty("scale");
+                    veil?.style.removeProperty("opacity");
+                },
+            };
+        });
+    }, { native: nativeStack, reduced: 0 }, [items.length, top, peek, shrink, dim]);
+    const rootStyle = {
+        "--sx-stack-top": `${top}px`,
+        "--sx-stack-peek": `${peek}px`,
+        "--sx-stack-shrink": shrink,
+        "--sx-stack-dim": dim,
+        "--sx-stack-gap": `${gap}px`,
+        timelineScope: items.map((_, i) => name(i)).join(", ") || undefined,
+    };
+    return (_jsxs(Tag, { ref: ref, "data-sx-stack": "", className: className, style: rootStyle, children: [_jsx(PartStyle, { id: "stack", css: STACK_CSS }), items.map((child, i) => {
+                const next = i < items.length - 1;
+                return (_jsx("div", { "data-sx-stack-card": "", style: { "--sx-i": i, viewTimelineName: name(i) }, children: _jsxs("div", { "data-sx-stack-inner": "", "data-sx-stack-next": next ? "" : undefined, className: cardClassName, style: next ? { "--sx-stack-tl": name(i + 1), "--sx-stack-next-top": `${stickTop(i + 1)}px` } : undefined, children: [child, next ? _jsx("span", { "data-sx-stack-veil": "", "aria-hidden": "true" }) : null] }) }, i));
+            })] }));
+}

package/dist/transitions/scroll/StackCards.schema.d.ts

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

package/dist/transitions/scroll/StackCards.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../schema/define.js";
+export const STACK_CARDS_SCHEMA = defineSchema()({
+    id: "stackCards",
+    family: "scroll",
+    factory: "StackCards",
+    code: ["children", "as", "className", "cardClassName"],
+    fields: {
+        top: { kind: "integer", label: "Sticks at", min: 0, max: 240, unit: "px", default: 80, help: "From the top of the screen: clear a fixed header." },
+        peek: { kind: "integer", label: "Peek", min: 0, max: 64, unit: "px", default: 16, help: "How much of each covered card still shows above the next." },
+        shrink: { kind: "number", label: "Covered cards shrink", min: 0, max: 0.4, step: 0.01, default: 0.08 },
+        dim: { kind: "number", label: "Covered cards fade", min: 0, max: 1, step: 0.05, default: 0.35, help: "Towards the surface colour." },
+        gap: { kind: "integer", label: "Gap while scrolling in", min: 0, max: 160, unit: "px", default: 32 },
+    },
+});

package/dist/transitions/scroll/TextMaskZoom.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+export interface TextMaskZoomProps {
+    /** The picture seen through the text. */
+    readonly image: string;
+    /** A word or two: it starts as huge letters and grows until the picture fills the screen. */
+    readonly text: string;
+    /** How long it stays pinned while the text grows, in screen heights of scrolling. Default `2`. */
+    readonly length?: number;
+    /** How large the text gets at the end. Default `40`. */
+    readonly scale?: number;
+    /** Classes for the SVG `<text>` (font, weight, size; its `fill` must stay black: it is the hole in a mask). */
+    readonly textClassName?: string;
+    /** Shown over the stage (fades with your own classes, e.g. a caption at the end). */
+    readonly children?: ReactNode;
+    readonly className?: string;
+}
+/**
+ * The picture shows only through giant letters; as you scroll the letters grow
+ * until the picture fills the screen, then the section scrolls away.
+ *
+ * ```tsx
+ * <TextMaskZoom image="/coast.jpg" text="NORTH" length={2} />
+ * ```
+ *
+ * The picture lies underneath; over it, a cover in the section's background
+ * colour (`--sx-tmz-bg`, default `--color-sx-secondary`) with the text cut out
+ * (an inline SVG mask, so the text uses the page's own fonts). The whole cover
+ * grows, holes and all, with an ease-in cubic, then fades out over the last
+ * fifth: a transform and an opacity on one element, which the browser animates
+ * off the main thread (scaling the text inside the mask re-rendered it every
+ * frame). Pinned like `PinnedExpand` (native view timeline, scroll-listener
+ * fallback); under reduced motion the picture is shown whole. Screen readers
+ * get the text once.
+ */
+export declare function TextMaskZoom({ image, text, length, scale, textClassName, children, className }: TextMaskZoomProps): import("react").JSX.Element;

package/dist/transitions/scroll/TextMaskZoom.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { PartStyle } from "../hosts/shared.js";
+import { SR_ONLY, TEXT_MASK_CSS } from "./css.js";
+import { pinProgress } from "./progress.js";
+import { useScrubFallback } from "./useScrub.js";
+/**
+ * The picture shows only through giant letters; as you scroll the letters grow
+ * until the picture fills the screen, then the section scrolls away.
+ *
+ * ```tsx
+ * <TextMaskZoom image="/coast.jpg" text="NORTH" length={2} />
+ * ```
+ *
+ * The picture lies underneath; over it, a cover in the section's background
+ * colour (`--sx-tmz-bg`, default `--color-sx-secondary`) with the text cut out
+ * (an inline SVG mask, so the text uses the page's own fonts). The whole cover
+ * grows, holes and all, with an ease-in cubic, then fades out over the last
+ * fifth: a transform and an opacity on one element, which the browser animates
+ * off the main thread (scaling the text inside the mask re-rendered it every
+ * frame). Pinned like `PinnedExpand` (native view timeline, scroll-listener
+ * fallback); under reduced motion the picture is shown whole. Screen readers
+ * get the text once.
+ */
+export function TextMaskZoom({ image, text, length = 2, scale = 40, textClassName, children, className }) {
+    const ref = useRef(null);
+    const stage = useRef(null);
+    const mask = `sx${useId().replace(/[^\w-]/g, "")}-text`;
+    const travel = Math.max(0.25, length);
+    useScrubFallback(ref, () => {
+        const root = ref.current;
+        const el = stage.current;
+        if (!root || !el)
+            return [];
+        const veil = el.querySelector("[data-sx-tmz-veil]");
+        const grow = Math.max(1, scale);
+        return [
+            {
+                el,
+                progress: (v) => pinProgress(root.getBoundingClientRect().top, root.offsetHeight, v.height, v.insetTop, v.insetBottom),
+                // the final values on the cover (not --sx-p, which would restyle the whole stage)
+                apply: (p) => {
+                    if (!veil)
+                        return;
+                    veil.style.transform = `scale(${(1 + p * p * p * (grow - 1)).toFixed(4)})`;
+                    veil.style.opacity = String(Math.min(1, Math.max(0, (1 - p) * 5)));
+                },
+                reset: () => {
+                    veil?.style.removeProperty("transform");
+                    veil?.style.removeProperty("opacity");
+                },
+            },
+        ];
+    }, { reduced: 1 }, [travel, scale]);
+    const style = { blockSize: `${Math.round((1 + travel) * 100)}dvh`, "--sx-tmz-scale": Math.max(1, scale) };
+    return (_jsxs("div", { ref: ref, "data-sx-tmz": "", className: className, style: style, children: [_jsx(PartStyle, { id: "tmz", css: TEXT_MASK_CSS }), _jsxs("div", { ref: stage, "data-sx-tmz-stage": "", children: [_jsx("span", { style: SR_ONLY, children: text }), _jsx("img", { "data-sx-tmz-image": "", src: image, alt: "", draggable: false, decoding: "async" }), _jsxs("svg", { "data-sx-tmz-veil": "", "aria-hidden": "true", focusable: "false", children: [_jsx("defs", { children: _jsxs("mask", { id: mask, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100%", height: "100%", children: [_jsx("rect", { "data-sx-tmz-keep": "", width: "100%", height: "100%" }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "central", className: textClassName, children: text })] }) }), _jsx("rect", { "data-sx-tmz-cover": "", width: "100%", height: "100%", mask: `url(#${mask})` })] }), children === undefined || children === null ? null : _jsx("div", { "data-sx-tmz-content": "", children: children })] })] }));
+}

package/dist/transitions/scroll/TextMaskZoom.schema.d.ts

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

package/dist/transitions/scroll/TextMaskZoom.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../schema/define.js";
+export const TEXT_MASK_ZOOM_SCHEMA = defineSchema()({
+    id: "textMaskZoom",
+    family: "scroll",
+    factory: "TextMaskZoom",
+    // the picture and the word are the page's content
+    code: ["image", "text", "textClassName", "children", "className"],
+    fields: {
+        length: { kind: "number", label: "Pinned for", min: 0.5, max: 5, step: 0.1, unit: "screens", default: 2, help: "Of scrolling, while the text grows." },
+        scale: { kind: "number", label: "Grows to", min: 5, max: 120, step: 1, unit: "×", default: 40, help: "Large enough that the picture fills the screen." },
+    },
+});

package/dist/transitions/scroll/css.d.ts

@@ -0,0 +1,17 @@
+export declare const CURTAIN_CSS: string;
+export declare const STACK_CSS: string;
+export declare const PIN_CSS: string;
+export declare const TEXT_MASK_CSS: string;
+export declare const SPLIT_CSS: string;
+/** Text for screen readers only: the part's real words, read once and in order. */
+export declare const SR_ONLY: {
+    readonly position: "absolute";
+    readonly inlineSize: "1px";
+    readonly blockSize: "1px";
+    readonly margin: "-1px";
+    readonly padding: 0;
+    readonly overflow: "hidden";
+    readonly clip: "rect(0 0 0 0)";
+    readonly whiteSpace: "nowrap";
+    readonly border: 0;
+};