@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/text/effects/enter/enterBox.js

@@ -0,0 +1,23 @@
+import { END_X, SHOW, START_X, at, enter, layerOf, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterBox";
+const BOX = layerOf(ID);
+// The box grows across from the reading start, then shrinks away towards the end; the text appears behind it at the
+// half-way mark, when the box covers it whole.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${BOX}`)} { display: block; background: ${v(ID, "color")}; }`)}
+${enter(ID, {
+    target: BOX,
+    name: "box",
+    from: `scale: 0 1; transform-origin: ${START_X} 50%;`,
+    frames: `0% { scale: 0 1; transform-origin: ${START_X} 50%; } 50% { scale: 1 1; transform-origin: ${START_X} 50%; } 50.01% { scale: 1 1; transform-origin: ${END_X} 50%; } 100% { scale: 0 1; transform-origin: ${END_X} 50%; }`,
+    ease: "cubic-bezier(0.7, 0, 0.3, 1)",
+})}
+${enter(ID, { target: SHOW, name: "text", from: "opacity: 0;", frames: "0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; }", ease: "linear" })}`;
+/** A block of colour wipes across the text and away again, leaving the text behind it. */
+export function enterBox(options = {}) {
+    return defineEnter(ID, CSS, options, {
+        duration: 1.1,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)" },
+        parts: { layers: [{}] },
+    });
+}

package/dist/text/effects/enter/enterBox.schema.d.ts

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

package/dist/text/effects/enter/enterBox.schema.js

@@ -0,0 +1,11 @@
+import { textEnterFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_BOX_SCHEMA = defineSchema()({
+    id: "enterBox",
+    family: "text",
+    factory: "enterBox",
+    fields: {
+        ...textEnterFields({ duration: 1.1 }),
+        color: { kind: "color", label: "Box colour", default: "var(--color-sx-primary)" },
+    },
+});

package/dist/text/effects/enter/enterFlip.d.ts

@@ -0,0 +1,10 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterFlipOptions extends EnterOptions {
+    /** `"flip"` (default): each piece stands up from lying back on its baseline. `"fold"`: it unfolds down from its top edge, like paper. */
+    readonly kind?: "flip" | "fold";
+    /** The viewer's distance, in em: smaller is a stronger 3D look. Default `6`. */
+    readonly perspective?: number;
+}
+/** Letters turn into place in 3D, one after another; `kind: "fold"` unfolds them like paper. */
+export declare function enterFlip(options?: EnterFlipOptions): TextEffect;

package/dist/text/effects/enter/enterFlip.js

@@ -0,0 +1,20 @@
+import { SHOW, UNIT, at, enter, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterFlip";
+// Perspective goes on whatever holds the pieces (the text, a line, a word), so each piece turns in its own 3D space.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] :is(${SHOW}, [data-sx-text-line], [data-sx-text-word])`)} { perspective: ${v(ID, "perspective")}; }
+    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} { transform-origin: 50% ${v(ID, "origin")}; backface-visibility: hidden; }`)}
+${enter(ID, { from: `opacity: 0; rotate: x ${v(ID, "angle")};` })}`;
+/** Letters turn into place in 3D, one after another; `kind: "fold"` unfolds them like paper. */
+export function enterFlip(options = {}) {
+    const fold = options.kind === "fold";
+    return defineEnter(ID, CSS, options, {
+        by: "chars",
+        duration: 0.7,
+        vars: {
+            [varName(ID, "angle")]: fold ? "-100deg" : "90deg",
+            [varName(ID, "origin")]: fold ? "0%" : "100%",
+            [varName(ID, "perspective")]: `${options.perspective ?? 6}em`,
+        },
+    });
+}

package/dist/text/effects/enter/enterFlip.schema.d.ts

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

package/dist/text/effects/enter/enterFlip.schema.js

@@ -0,0 +1,14 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_FLIP_SCHEMA = defineSchema()({
+    id: "enterFlip",
+    family: "text",
+    factory: "enterFlip",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.7 }),
+        from: textFromField(),
+        kind: { kind: "choice", label: "Kind", values: ["flip", "fold"], labels: { flip: "Flip up", fold: "Unfold down" }, default: "flip" },
+        perspective: { kind: "number", label: "Perspective", min: 1, max: 30, step: 0.5, unit: "em", default: 6, advanced: true },
+    },
+});

package/dist/text/effects/enter/enterMask.d.ts

@@ -0,0 +1,5 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterTiming } from "./kit.js";
+export type EnterMaskOptions = EnterTiming;
+/** Each line slides up from behind an invisible edge, one after another. The cleanest heading entrance. */
+export declare function enterMask(options?: EnterMaskOptions): TextEffect;

package/dist/text/effects/enter/enterMask.js

@@ -0,0 +1,15 @@
+import { UNIT, at, enter, scripted } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterMask";
+// Each line is the edge the words hide behind. The padding gives tall marks and descenders room inside the clip, and
+// the negative margin gives the room back, so the lines sit where they would without the effect.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} {
+      overflow: clip;
+      padding-block: 0.15em;
+      margin-block: -0.15em;
+    }`)}
+${enter(ID, { target: `${UNIT} > *`, from: "translate: 0 115%;" })}`;
+/** Each line slides up from behind an invisible edge, one after another. The cleanest heading entrance. */
+export function enterMask(options = {}) {
+    return defineEnter(ID, CSS, { ...options, by: "lines" }, { by: "lines", duration: 0.9 });
+}

package/dist/text/effects/enter/enterMask.schema.d.ts

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

package/dist/text/effects/enter/enterMask.schema.js

@@ -0,0 +1,11 @@
+import { textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_MASK_SCHEMA = defineSchema()({
+    id: "enterMask",
+    family: "text",
+    factory: "enterMask",
+    fields: {
+        ...textEnterFields({ duration: 0.9 }),
+        from: textFromField(),
+    },
+});

package/dist/text/effects/enter/enterPop.d.ts

@@ -0,0 +1,5 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export type EnterPopOptions = EnterOptions;
+/** Letters pop up from nothing with a springy overshoot, one after another. */
+export declare function enterPop(options?: EnterPopOptions): TextEffect;

package/dist/text/effects/enter/enterPop.js

@@ -0,0 +1,8 @@
+import { SPRING, enter } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterPop";
+const CSS = enter(ID, { from: "opacity: 0; scale: 0;", ease: SPRING });
+/** Letters pop up from nothing with a springy overshoot, one after another. */
+export function enterPop(options = {}) {
+    return defineEnter(ID, CSS, options, { by: "chars", duration: 0.6 });
+}

package/dist/text/effects/enter/enterPop.schema.d.ts

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

package/dist/text/effects/enter/enterPop.schema.js

@@ -0,0 +1,12 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_POP_SCHEMA = defineSchema()({
+    id: "enterPop",
+    family: "text",
+    factory: "enterPop",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.6 }),
+        from: textFromField(),
+    },
+});

package/dist/text/effects/enter/enterRandom.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterRandomOptions extends Omit<EnterOptions, "from"> {
+    /** Which shuffle: the same seed gives the same order, on the server and in the browser. Default `1`. */
+    readonly seed?: number;
+}
+/** Letters fade in out of order, in a shuffle that stays the same on every load. */
+export declare function enterRandom(options?: EnterRandomOptions): TextEffect;

package/dist/text/effects/enter/enterRandom.js

@@ -0,0 +1,9 @@
+import { enter } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterRandom";
+const CSS = enter(ID, { from: "opacity: 0; translate: 0 0.3em;" });
+/** Letters fade in out of order, in a shuffle that stays the same on every load. */
+export function enterRandom(options = {}) {
+    const seed = options.seed ?? 1;
+    return defineEnter(ID, CSS, { stagger: 0.025, ...options }, { by: "chars", duration: 0.5, needs: { seed } }, "random");
+}

package/dist/text/effects/enter/enterRandom.schema.d.ts

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

package/dist/text/effects/enter/enterRandom.schema.js

@@ -0,0 +1,12 @@
+import { seedField, textByField, textEnterFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_RANDOM_SCHEMA = defineSchema()({
+    id: "enterRandom",
+    family: "text",
+    factory: "enterRandom",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.5, stagger: 0.025 }),
+        seed: seedField(1),
+    },
+});

package/dist/text/effects/enter/enterRedact.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterRedactOptions extends EnterOptions {
+    /** The bars' colour. Default the theme's ink. */
+    readonly color?: string;
+}
+/** Black bars over each word, like a redacted document, slide off one after another. */
+export declare function enterRedact(options?: EnterRedactOptions): TextEffect;

package/dist/text/effects/enter/enterRedact.js

@@ -0,0 +1,22 @@
+import { COVER, END_X, UNIT, at, enter, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterRedact";
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} { position: relative; }
+    ${at(`[data-sx-text~="${ID}"] ${COVER}`)} {
+      display: block;
+      position: absolute;
+      inset: -0.06em -0.08em;
+      background: ${v(ID, "color")};
+      border-radius: 0.06em;
+      transform-origin: ${END_X} 50%;
+    }`)}
+${enter(ID, { target: COVER, from: "scale: 1 1;", frames: "from { scale: 1 1; } to { scale: 0 1; }", ease: "cubic-bezier(0.7, 0, 0.2, 1)" })}`;
+/** Black bars over each word, like a redacted document, slide off one after another. */
+export function enterRedact(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.1, ...options }, {
+        by: "words",
+        duration: 0.45,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-ink)" },
+        needs: { cover: true },
+    });
+}

package/dist/text/effects/enter/enterRedact.schema.d.ts

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

package/dist/text/effects/enter/enterRedact.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_REDACT_SCHEMA = defineSchema()({
+    id: "enterRedact",
+    family: "text",
+    factory: "enterRedact",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.45, stagger: 0.1 }),
+        from: textFromField(),
+        color: { kind: "color", label: "Bar colour", default: "var(--color-sx-ink)" },
+    },
+});

package/dist/text/effects/enter/enterRise.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterRiseOptions extends EnterOptions {
+    /** How far below each piece starts, in em. Default `0.6`. */
+    readonly distance?: number;
+}
+/** Each piece fades in as it rises into place, one after another. The classic heading entrance. */
+export declare function enterRise(options?: EnterRiseOptions): TextEffect;

package/dist/text/effects/enter/enterRise.js

@@ -0,0 +1,8 @@
+import { enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterRise";
+const CSS = enter(ID, { from: `opacity: 0; translate: 0 ${v(ID, "distance")};` });
+/** Each piece fades in as it rises into place, one after another. The classic heading entrance. */
+export function enterRise(options = {}) {
+    return defineEnter(ID, CSS, options, { by: "words", duration: 0.6, vars: { [varName(ID, "distance")]: `${options.distance ?? 0.6}em` } });
+}

package/dist/text/effects/enter/enterRise.schema.d.ts

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

package/dist/text/effects/enter/enterRise.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_RISE_SCHEMA = defineSchema()({
+    id: "enterRise",
+    family: "text",
+    factory: "enterRise",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.6 }),
+        from: textFromField(),
+        distance: { kind: "number", label: "Distance", min: 0, max: 3, step: 0.05, unit: "em", default: 0.6 },
+    },
+});

package/dist/text/effects/enter/enterSkeleton.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterSkeletonOptions extends EnterOptions {
+    /** The placeholder bars' colour. Default a light tint of the theme's ink. */
+    readonly color?: string;
+}
+/** Grey placeholder bars pulse where the words will be, then fade away to show them: a loading skeleton turning into text. */
+export declare function enterSkeleton(options?: EnterSkeletonOptions): TextEffect;

package/dist/text/effects/enter/enterSkeleton.js

@@ -0,0 +1,24 @@
+import { COVER, UNIT, at, enter, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterSkeleton";
+// The bars pulse (opacity, not a moving gradient: that would repaint every frame) and fade out; the words, hidden while
+// they wait, appear under the fading bars.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} { position: relative; }
+    ${at(`[data-sx-text~="${ID}"] ${COVER}`)} {
+      display: block;
+      position: absolute;
+      inset: 0.04em 0;
+      background: ${v(ID, "color")};
+      border-radius: 0.25em;
+    }`)}
+${enter(ID, { target: COVER, name: "bar", from: "opacity: 1;", frames: "0%, 40%, 75% { opacity: 1; } 20%, 60% { opacity: 0.45; } 100% { opacity: 0; }", ease: "ease-in-out" })}
+${enter(ID, { target: UNIT, name: "words", from: "color: transparent;", frames: "0%, 74.9% { color: transparent; }", ease: "linear" })}`;
+/** Grey placeholder bars pulse where the words will be, then fade away to show them: a loading skeleton turning into text. */
+export function enterSkeleton(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.05, ...options }, {
+        by: "words",
+        duration: 1.4,
+        vars: { [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-ink) 14%, transparent)" },
+        needs: { cover: true },
+    });
+}

package/dist/text/effects/enter/enterSkeleton.schema.d.ts

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

package/dist/text/effects/enter/enterSkeleton.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_SKELETON_SCHEMA = defineSchema()({
+    id: "enterSkeleton",
+    family: "text",
+    factory: "enterSkeleton",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 1.4, stagger: 0.05 }),
+        from: textFromField(),
+        color: { kind: "color", label: "Bar colour", default: "color-mix(in oklab, var(--color-sx-ink) 14%, transparent)" },
+    },
+});

package/dist/text/effects/enter/enterStamp.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterStampOptions extends EnterOptions {
+    /** How large each piece starts, before it lands. Default `2.2`. */
+    readonly size?: number;
+}
+/** Each word slams down from large, like a rubber stamp, with a small shake as it lands. */
+export declare function enterStamp(options?: EnterStampOptions): TextEffect;

package/dist/text/effects/enter/enterStamp.js

@@ -0,0 +1,15 @@
+import { enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterStamp";
+// It speeds up into the landing (ease-in), then shakes a little, smaller each time.
+const CSS = enter(ID, {
+    from: `opacity: 0; scale: ${v(ID, "size")};`,
+    frames: `0% { opacity: 0; scale: ${v(ID, "size")}; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
+    50% { opacity: 1; scale: 1; translate: 0 0; animation-timing-function: ease-in-out; }
+    60% { translate: 0.05em 0; } 70% { translate: -0.04em 0; } 80% { translate: 0.025em 0; } 90% { translate: -0.01em 0; }
+    100% { opacity: 1; scale: 1; translate: 0 0; }`,
+});
+/** Each word slams down from large, like a rubber stamp, with a small shake as it lands. */
+export function enterStamp(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.22, ...options }, { by: "words", duration: 0.8, vars: { [varName(ID, "size")]: options.size ?? 2.2 } });
+}

package/dist/text/effects/enter/enterStamp.schema.d.ts

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

package/dist/text/effects/enter/enterStamp.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_STAMP_SCHEMA = defineSchema()({
+    id: "enterStamp",
+    family: "text",
+    factory: "enterStamp",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.8, stagger: 0.22 }),
+        from: textFromField(),
+        size: { kind: "number", label: "Starting size", min: 1, max: 5, step: 0.1, default: 2.2 },
+    },
+});

package/dist/text/effects/enter/enterTracking.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterTiming } from "./kit.js";
+export interface EnterTrackingOptions extends Omit<EnterTiming, "stagger" | "from"> {
+    /** The extra space between letters it starts with, in em. Default `0.5`. */
+    readonly spread?: number;
+}
+/** The letters start spaced wide apart and close in as the text fades in. Arabic and other joined scripts just fade. */
+export declare function enterTracking(options?: EnterTrackingOptions): TextEffect;

package/dist/text/effects/enter/enterTracking.js

@@ -0,0 +1,11 @@
+import { SHOW, enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterTracking";
+// Letter spacing reflows the text on every frame: allowed on one heading (listed in the test). Joined scripts get a
+// plain fade instead, because spacing out Arabic letters breaks the joins between them.
+const CSS = `${enter(ID, { target: SHOW, from: `opacity: 0; letter-spacing: ${v(ID, "spread")};` })}
+${enter(ID, { target: SHOW, name: "joined", when: "[data-sx-text-joined]", from: "opacity: 0;" })}`;
+/** The letters start spaced wide apart and close in as the text fades in. Arabic and other joined scripts just fade. */
+export function enterTracking(options = {}) {
+    return defineEnter(ID, CSS, options, { duration: 1.2, vars: { [varName(ID, "spread")]: `${options.spread ?? 0.5}em` } });
+}

package/dist/text/effects/enter/enterTracking.schema.d.ts

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

package/dist/text/effects/enter/enterTracking.schema.js

@@ -0,0 +1,11 @@
+import { textEnterFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_TRACKING_SCHEMA = defineSchema()({
+    id: "enterTracking",
+    family: "text",
+    factory: "enterTracking",
+    fields: {
+        ...textEnterFields({ duration: 1.2 }),
+        spread: { kind: "number", label: "Starting spread", min: 0, max: 2, step: 0.05, unit: "em", default: 0.5 },
+    },
+});

package/dist/text/effects/enter/enterWords.d.ts

@@ -0,0 +1,5 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export type EnterWordsOptions = EnterOptions;
+/** Words fade in one after another, without moving, like a sentence being written. */
+export declare function enterWords(options?: EnterWordsOptions): TextEffect;

package/dist/text/effects/enter/enterWords.js

@@ -0,0 +1,9 @@
+import { enter } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterWords";
+// no movement and an even pace: words appear the way a sentence is written out
+const CSS = enter(ID, { from: "opacity: 0;", ease: "ease-in-out" });
+/** Words fade in one after another, without moving, like a sentence being written. */
+export function enterWords(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.08, ...options }, { by: "words", duration: 0.5 });
+}

package/dist/text/effects/enter/enterWords.schema.d.ts

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

package/dist/text/effects/enter/enterWords.schema.js

@@ -0,0 +1,12 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_WORDS_SCHEMA = defineSchema()({
+    id: "enterWords",
+    family: "text",
+    factory: "enterWords",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.5, stagger: 0.08 }),
+        from: textFromField(),
+    },
+});

package/dist/text/effects/enter/kit.d.ts

@@ -0,0 +1,33 @@
+import type { TextEffect, TextNeeds, TextOrder, TextSplit, TextVars } from "../../types.js";
+import { type TextParts } from "../kit.js";
+/** The options every entrance takes (Magic UI's "Text Animate presets": the same looks by letter, word or line). */
+export interface EnterTiming {
+    /** Seconds one piece takes. */
+    readonly duration?: number;
+    /** Seconds between one piece and the next. Default by what moves: `0.03` letters, `0.07` words, `0.12` lines. */
+    readonly stagger?: number;
+    /** Seconds before the first piece starts. Default `0`. */
+    readonly delay?: number;
+    /** Which piece goes first: the reading start (default), the end, the middle out or the edges in. */
+    readonly from?: Exclude<TextOrder, "random">;
+}
+export interface EnterOptions extends EnterTiming {
+    /** What moves: letters, words or lines. Letters only in short text; joined scripts such as Arabic move by the word. */
+    readonly by?: TextSplit;
+}
+/** The stagger when none is given, by what moves. */
+export declare const STAGGER: Record<TextSplit, number>;
+export interface EnterSpec {
+    /** What it moves when `by` is left out (or always, for an effect without `by`). */
+    readonly by?: TextSplit;
+    readonly duration: number;
+    /** Its own vars, besides the timing. */
+    readonly vars?: TextVars;
+    /** Its own needs, besides `split`, `order` and `inView`. */
+    readonly needs?: TextNeeds;
+    readonly parts?: TextParts;
+}
+/** An entrance from its id, rules, options and defaults: timing vars, the `enter` claim, the pieces it needs. */
+export declare function defineEnter(id: string, css: string, options: EnterOptions & {
+    readonly seed?: number;
+}, spec: EnterSpec, order?: TextOrder): TextEffect;

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

@@ -0,0 +1,19 @@
+// What every entrance shares: the timing options and how they become vars and needs.
+import { defineText, seconds, varName } from "../kit.js";
+/** The stagger when none is given, by what moves. */
+export const STAGGER = { chars: 0.03, words: 0.07, lines: 0.12 };
+/** An entrance from its id, rules, options and defaults: timing vars, the `enter` claim, the pieces it needs. */
+export function defineEnter(id, css, options, spec, order) {
+    const by = options.by ?? spec.by;
+    return defineText(id, css, {
+        ...spec.parts,
+        vars: {
+            [varName(id, "time")]: seconds(options.duration ?? spec.duration),
+            [varName(id, "stagger")]: seconds(options.stagger ?? (by ? STAGGER[by] : 0)),
+            [varName(id, "delay")]: seconds(options.delay ?? 0),
+            ...spec.vars,
+        },
+        claims: ["enter"],
+        needs: { ...(by ? { split: by, order: order ?? options.from ?? "start" } : {}), inView: true, ...spec.needs },
+    });
+}

package/dist/text/effects/ink/inkAurora.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface InkAuroraOptions {
+    /** The three lights' colours. Default the theme's primary, accent, and a mix of the two. */
+    readonly colors?: readonly [string, string, string];
+    /** The colour between the lights. Default the text's own colour. */
+    readonly base?: string;
+    /** Seconds for one full drift. Default `12`. */
+    readonly duration?: number;
+}
+/** Soft coloured lights drift slowly inside the letters, like the northern lights. */
+export declare function inkAurora(options?: InkAuroraOptions): TextEffect;

package/dist/text/effects/ink/inkAurora.js

@@ -0,0 +1,41 @@
+import { PAINT, at, defineText, hostOf, loop, seconds, v, varName } from "../kit.js";
+const ID = "inkAurora";
+/** Each light's place in its tile, as a share of the text's size: [x, y]. */
+const START = [[0, 0], [1 / 3, 1 / 2], [-1 / 3, 1 / 4]];
+/** Where each one has drifted after a loop, in whole tiles, so the loop has no seam. */
+const DRIFT = [[1, 0], [-1, 1], [0, -1]];
+const at3 = (shift) => shift
+    .map(([x, y], i) => {
+    const [sx, sy] = START[i];
+    return `calc(var(--sx-tx, 0px) * -1 + var(--sx-tw, 0px) * ${sx + x}) calc(var(--sx-ty, 0px) * -1 + var(--sx-th, 0px) * ${sy + y})`;
+})
+    .join(", ");
+const LIGHTS = [1, 2, 3].map((n) => `radial-gradient(closest-side, ${v(ID, `c${n}`)}, transparent)`).join(", ");
+// Three soft lights inside the letters drift by whole tiles of the text's size, so the loop has no seam. It moves the
+// background: the one way to move a fill inside letters (listed in the test).
+const LOOK = `  ${at(`${hostOf(ID)} ${PAINT}`)} {
+    background: ${LIGHTS}, ${v(ID, "base")};
+    background-size: var(--sx-tw, 100%) var(--sx-th, 100%);
+    background-position: ${at3([[0, 0], [0, 0], [0, 0]])};
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }`;
+const CSS = `  @keyframes sx-text-inkAurora { to { background-position: ${at3(DRIFT)}; } }
+${loop(ID, PAINT, `sx-text-inkAurora ${v(ID, "time")} linear infinite`)}`;
+/** Soft coloured lights drift slowly inside the letters, like the northern lights. */
+export function inkAurora(options = {}) {
+    const [c1, c2, c3] = options.colors ?? ["var(--color-sx-primary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-primary), var(--color-sx-accent))"];
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "c1")]: c1,
+            [varName(ID, "c2")]: c2,
+            [varName(ID, "c3")]: c3,
+            [varName(ID, "base")]: options.base ?? "currentColor",
+            [varName(ID, "time")]: seconds(options.duration ?? 12),
+        },
+        claims: ["paint"],
+        needs: { paint: true, loop: true },
+    });
+}

package/dist/text/effects/ink/inkAurora.schema.d.ts

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

package/dist/text/effects/ink/inkAurora.schema.js

@@ -0,0 +1,12 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const INK_AURORA_SCHEMA = defineSchema()({
+    id: "inkAurora",
+    family: "text",
+    factory: "inkAurora",
+    fields: {
+        colors: colorsField(["var(--color-sx-primary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-primary), var(--color-sx-accent))"], 3, 3, "Lights"),
+        base: { kind: "color", label: "Between the lights", default: "currentColor" },
+        duration: { kind: "number", label: "Drift time", min: 2, max: 40, step: 0.5, unit: "s", default: 12 },
+    },
+});

package/dist/text/effects/ink/inkColourful.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface InkColourfulOptions {
+    /** The colour the letters start from; the others come from turning its hue, so it needs some colour in it. Default the theme's accent. */
+    readonly color?: string;
+    /** Seconds for a letter to go round every colour. Default `5`. */
+    readonly duration?: number;
+}
+/** Every letter shows a different colour and they keep changing, a wave of colour running along the word. */
+export declare function inkColourful(options?: InkColourfulOptions): TextEffect;