@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/text-effect/text-effect-presets.js

@@ -0,0 +1,292 @@
+//#region src/components/text-effect/text-effect-presets.ts
+const PREFIX = "dowel-text-effect";
+const EASE_OUT = "var(--ease-out-quint)";
+const EASE_STAGE = "cubic-bezier(0.18, 1, 0.32, 1)";
+const EASE_BUILD = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+const EASE_EXIT = "cubic-bezier(0.4, 0, 0.2, 1)";
+const PRESETS = {
+	"blur-out-up": {
+		by: "word",
+		stagger: 28,
+		duration: 560,
+		ease: EASE_OUT,
+		from: {
+			blur: 6,
+			y: 10
+		}
+	},
+	"bottom-up-letters": {
+		by: "character",
+		stagger: 88,
+		duration: 400,
+		ease: EASE_STAGE,
+		from: { y: 46 }
+	},
+	"depth-parallax-words": {
+		by: "word",
+		stagger: 70,
+		duration: 700,
+		ease: EASE_OUT,
+		from: {
+			blur: 3,
+			scale: .92,
+			y: 18
+		}
+	},
+	"focus-blur-resolve": {
+		by: "whole",
+		stagger: 0,
+		duration: 760,
+		ease: EASE_OUT,
+		from: {
+			blur: 14,
+			scale: 1.01,
+			y: 14
+		}
+	},
+	"kinetic-center-build": {
+		by: "word",
+		stagger: 430,
+		duration: 430,
+		first: 340,
+		ease: EASE_BUILD,
+		from: {
+			blur: 3.5,
+			scale: .992,
+			x: 88,
+			y: 6
+		},
+		layout: "row",
+		exit: {
+			target: "pieces",
+			to: {
+				blur: 2.5,
+				y: -6
+			},
+			duration: 260,
+			ease: EASE_EXIT
+		},
+		root: "block"
+	},
+	"line-by-line-slide": {
+		by: "line",
+		stagger: 120,
+		duration: 900,
+		ease: EASE_OUT,
+		from: { x: -48 },
+		root: "block"
+	},
+	"mask-reveal-up": {
+		by: "line",
+		stagger: 90,
+		duration: 760,
+		ease: EASE_OUT,
+		from: {
+			blur: 6,
+			y: 30
+		},
+		mask: true,
+		root: "block"
+	},
+	"micro-scale-fade": {
+		by: "whole",
+		stagger: 0,
+		duration: 600,
+		ease: "cubic-bezier(0.32, 0.72, 0, 1)",
+		from: { scale: .96 }
+	},
+	"per-character-rise": {
+		by: "character",
+		stagger: 24,
+		duration: 700,
+		ease: EASE_BUILD,
+		from: { y: 32 }
+	},
+	"reveal-text": {
+		by: "whole",
+		stagger: 0,
+		duration: 250,
+		ease: "var(--ease-overshoot)",
+		directions: {
+			up: { y: 24 },
+			down: { y: -24 },
+			start: { x: 24 },
+			end: { x: -24 }
+		}
+	},
+	"scale-down-fade": {
+		by: "whole",
+		stagger: 0,
+		duration: 520,
+		ease: EASE_OUT,
+		from: {
+			scale: 1.04,
+			y: 8
+		}
+	},
+	"short-slide-down": {
+		by: "word",
+		stagger: 500,
+		duration: 500,
+		first: 360,
+		ease: EASE_BUILD,
+		from: {
+			blur: 2.4,
+			scale: .992,
+			y: -28
+		},
+		layout: "column",
+		exit: {
+			target: "pieces",
+			to: {
+				blur: 1.2,
+				y: 10
+			},
+			duration: 320,
+			ease: EASE_EXIT
+		},
+		root: "block"
+	},
+	"short-slide-right": {
+		by: "word",
+		stagger: 92,
+		duration: 210,
+		ease: EASE_BUILD,
+		from: {},
+		layout: "glide",
+		group: {
+			from: {
+				opacity: 1,
+				blur: 1.2,
+				x: -24
+			},
+			duration: 520,
+			ease: EASE_BUILD
+		},
+		exit: {
+			target: "group",
+			to: {
+				blur: 1,
+				x: 12
+			},
+			duration: 320,
+			ease: EASE_EXIT
+		},
+		root: "relative inline-block overflow-hidden align-bottom"
+	},
+	"soft-blur-in": {
+		by: "character",
+		stagger: 25,
+		duration: 900,
+		ease: EASE_OUT,
+		from: {
+			blur: 12,
+			y: 16
+		}
+	},
+	"spring-scale-in": {
+		by: "word",
+		stagger: 95,
+		duration: 360,
+		ease: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+		from: { scale: .7 }
+	},
+	"stagger-from-center": {
+		by: "character",
+		stagger: 22,
+		duration: 620,
+		ease: EASE_OUT,
+		from: {
+			blur: 3,
+			y: 12
+		},
+		order: "center"
+	},
+	"stagger-from-edges": {
+		by: "character",
+		stagger: 22,
+		duration: 620,
+		ease: EASE_OUT,
+		from: {
+			blur: 3,
+			y: 12
+		},
+		order: "edges"
+	},
+	"top-down-letters": {
+		by: "character",
+		stagger: 88,
+		duration: 400,
+		ease: EASE_STAGE,
+		from: { y: -46 }
+	},
+	"wave-text": {
+		by: "character",
+		stagger: 50,
+		duration: 1200,
+		ease: "cubic-bezier(0.37, 0, 0.63, 1)",
+		loop: true,
+		frames: "0%,50%,100%{transform:translateY(0)}25%{transform:translateY(calc(var(--text-effect-amplitude, 8px) * -1))}75%{transform:translateY(calc(var(--text-effect-amplitude, 8px) * .5))}"
+	}
+};
+/** Every preset, in catalogue order. Stories and tests iterate this. */
+const textEffectPresetNames = Object.keys(PRESETS);
+function pose(p) {
+	const rules = [`opacity:${String(p.opacity ?? 0)}`];
+	const moves = [];
+	if (p.x || p.y) {
+		const x = p.x ? `calc(var(--text-effect-inline, 1) * ${String(p.x)}px)` : "0";
+		moves.push(`translate(${x},${String(p.y ?? 0)}px)`);
+	}
+	if (p.scale !== void 0) moves.push(`scale(${String(p.scale)})`);
+	if (moves.length > 0) rules.push(`transform:${moves.join(" ")}`);
+	if (p.blur) rules.push(`filter:blur(${String(p.blur)}px)`);
+	return rules.join(";");
+}
+/** Rest for exactly the properties a pose moves: visible, untransformed, sharp. */
+function rest(p) {
+	const rules = ["opacity:1"];
+	if (p.x || p.y || p.scale !== void 0) rules.push("transform:none");
+	if (p.blur) rules.push("filter:none");
+	return rules.join(";");
+}
+const enter = (name, p) => `@keyframes ${name}{from{${pose(p)}}to{${rest(p)}}}`;
+const leave = (name, p) => `@keyframes ${name}{from{${rest(p)}}to{${pose(p)}}}`;
+function keyframesFor(name) {
+	const spec = PRESETS[name];
+	const id = `${PREFIX}-${name}`;
+	const out = [];
+	if (spec.frames) out.push(`@keyframes ${id}{${spec.frames}}`);
+	if (spec.from) out.push(enter(id, spec.from));
+	if (spec.directions) for (const [direction, p] of Object.entries(spec.directions)) out.push(enter(`${id}-${direction}`, p));
+	if (spec.group) out.push(enter(`${id}-group`, spec.group.from));
+	if (spec.exit) out.push(leave(`${id}-exit`, spec.exit.to));
+	return out.join("\n");
+}
+const PIECE = "[data-slot=text-effect-piece]";
+const CELL = "[data-slot=text-effect-cell]";
+const CONTENT = "[data-slot=text-effect-content]";
+const STYLES = `
+[data-slot=text-effect]:dir(rtl){--text-effect-inline:-1}
+${PIECE}{display:inline-block;white-space:pre;animation-name:var(--text-effect-name,none);animation-duration:var(--text-effect-duration);animation-timing-function:var(--text-effect-ease);animation-delay:calc((var(--text-effect-delay) + var(--i, 0) * var(--text-effect-stagger)) * var(--motion-scale, 1));animation-iteration-count:var(--text-effect-count,1);animation-direction:var(--text-effect-direction,normal);animation-fill-mode:both}
+[data-slot=text-effect-word]{display:inline-block;white-space:nowrap}
+[data-slot=text-effect-mask]{display:inline-block;overflow:hidden;vertical-align:bottom}
+[data-by=line]>${PIECE},[data-by=line]>[data-slot=text-effect-mask],[data-by=line] [data-slot=text-effect-mask]>${PIECE}{display:block}
+${CONTENT}[data-layout=row]{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
+${CONTENT}[data-layout=column]{display:flex;flex-direction:column;align-items:center}
+${CONTENT}[data-layout=glide]{display:inline-flex;flex-wrap:nowrap;gap:.25em}
+${CELL}{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;min-width:0;min-height:0;animation-name:var(--text-effect-grow,none);animation-duration:var(--text-effect-duration);animation-timing-function:var(--text-effect-ease);animation-delay:calc((var(--text-effect-delay) + var(--i, 0) * var(--text-effect-stagger)) * var(--motion-scale, 1));animation-fill-mode:both}
+${CELL}[data-first]{animation-name:none}
+${CELL}>${PIECE}{min-width:0;min-height:0}
+[data-layout=row]>${CELL}+${CELL}>${PIECE}{padding-inline-start:10px}
+[data-layout=column]>${CELL}+${CELL}>${PIECE}{padding-block-start:12px}
+[data-slot=text-effect][data-state=idle] :is(${PIECE},${CELL},${CONTENT}){animation-play-state:paused}
+@media (prefers-reduced-motion: reduce){${PIECE}{animation-iteration-count:1}}
+@keyframes ${PREFIX}-grow-inline{from{grid-template-columns:0fr}to{grid-template-columns:1fr}}
+@keyframes ${PREFIX}-grow-block{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}
+${textEffectPresetNames.map(keyframesFor).join("\n")}
+`;
+//#endregion
+export { PREFIX, PRESETS, STYLES, textEffectPresetNames };
+
+//# sourceMappingURL=text-effect-presets.js.map

package/dist/components/text-effect/text-effect-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-effect-presets.js","names":[],"sources":["../../../src/components/text-effect/text-effect-presets.ts"],"sourcesContent":["// Ported from SmoothUI text animations (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\n/*\n * The data half of TextEffect: one row per SmoothUI source, and the hoisted\n * stylesheet generated from it. Timing, easing, stagger, distance and blur\n * are the sources' own numbers.\n */\n\nexport const PREFIX = \"dowel-text-effect\";\n\n/** How a string is split. `whole` animates it as one piece. */\nexport type TextEffectUnit = \"character\" | \"word\" | \"line\" | \"whole\";\n\n/** Where reveal-text travels to. `start`/`end` follow reading direction. */\nexport type TextEffectDirection = \"up\" | \"down\" | \"start\" | \"end\";\n\n/** A resting pose's opposite: where a piece starts (or, for an exit, ends). */\ninterface Pose {\n  /** Defaults to 0. */\n  opacity?: number;\n  /** Pixels along the inline axis; negative is toward the inline start. */\n  x?: number;\n  /** Pixels; positive is down. */\n  y?: number;\n  scale?: number;\n  /** Blur radius in pixels. */\n  blur?: number;\n}\n\ninterface Timing {\n  /** Milliseconds. */\n  duration: number;\n  ease: string;\n}\n\nexport interface PresetSpec extends Timing {\n  /** The source's split unit. */\n  by: TextEffectUnit;\n  /** Milliseconds between pieces. */\n  stagger: number;\n  /** The entrance pose. */\n  from?: Pose;\n  /** reveal-text: one entrance pose per `direction`. */\n  directions?: Record<TextEffectDirection, Pose>;\n  /** Raw keyframes, for a motion that is not pose → rest. */\n  frames?: string;\n  /** Stagger by distance from the center, or from the nearest edge. */\n  order?: \"center\" | \"edges\";\n  /** Repeats until reduced motion or unmount stops it. */\n  loop?: boolean;\n  /** Each piece rises out of an overflow-hidden mask. */\n  mask?: boolean;\n  /**\n   * The phrase builders. `row` and `column` grow each word's slot from zero,\n   * so the words already placed are pushed aside as the phrase re-centres;\n   * `glide` moves the whole phrase while its words fade in. The split is\n   * intrinsic to these, so `by` does not apply.\n   */\n  layout?: \"row\" | \"column\" | \"glide\";\n  /** Duration of the first piece, when it differs (it has nothing to push). */\n  first?: number;\n  /** Motion of the phrase as a whole (`glide`). */\n  group?: Timing & { from: Pose };\n  /** The source's own exit. Without one, `mode=\"exit\"` plays the entrance backwards. */\n  exit?: Timing & { target: \"pieces\" | \"group\"; to: Pose };\n  /** Classes on the root: the layout the source's root had. */\n  root?: string;\n}\n\nconst EASE_OUT = \"var(--ease-out-quint)\"; // cubic-bezier(0.22, 1, 0.36, 1), the sources' default\nconst EASE_STAGE = \"cubic-bezier(0.18, 1, 0.32, 1)\";\nconst EASE_BUILD = \"cubic-bezier(0.2, 0.8, 0.2, 1)\";\nconst EASE_EXIT = \"cubic-bezier(0.4, 0, 0.2, 1)\";\n\nexport const PRESETS = {\n  // An entrance despite its name: words arrive clean from a blur, drifting up.\n  \"blur-out-up\": {\n    by: \"word\",\n    stagger: 28,\n    duration: 560,\n    ease: EASE_OUT,\n    from: { blur: 6, y: 10 },\n  },\n  \"bottom-up-letters\": {\n    by: \"character\",\n    stagger: 88,\n    duration: 400,\n    ease: EASE_STAGE,\n    from: { y: 46 },\n  },\n  \"depth-parallax-words\": {\n    by: \"word\",\n    stagger: 70,\n    duration: 700,\n    ease: EASE_OUT,\n    from: { blur: 3, scale: 0.92, y: 18 },\n  },\n  \"focus-blur-resolve\": {\n    by: \"whole\",\n    stagger: 0,\n    duration: 760,\n    ease: EASE_OUT,\n    from: { blur: 14, scale: 1.01, y: 14 },\n  },\n  \"kinetic-center-build\": {\n    by: \"word\",\n    stagger: 430,\n    duration: 430,\n    first: 340,\n    ease: EASE_BUILD,\n    from: { blur: 3.5, scale: 0.992, x: 88, y: 6 },\n    layout: \"row\",\n    exit: { target: \"pieces\", to: { blur: 2.5, y: -6 }, duration: 260, ease: EASE_EXIT },\n    root: \"block\",\n  },\n  \"line-by-line-slide\": {\n    by: \"line\",\n    stagger: 120,\n    duration: 900,\n    ease: EASE_OUT,\n    from: { x: -48 },\n    root: \"block\",\n  },\n  \"mask-reveal-up\": {\n    by: \"line\",\n    stagger: 90,\n    duration: 760,\n    ease: EASE_OUT,\n    from: { blur: 6, y: 30 },\n    mask: true,\n    root: \"block\",\n  },\n  \"micro-scale-fade\": {\n    by: \"whole\",\n    stagger: 0,\n    duration: 600,\n    ease: \"cubic-bezier(0.32, 0.72, 0, 1)\",\n    from: { scale: 0.96 },\n  },\n  \"per-character-rise\": {\n    by: \"character\",\n    stagger: 24,\n    duration: 700,\n    ease: EASE_BUILD,\n    from: { y: 32 },\n  },\n  // The source leaves x/y on motion's default spring; a 250ms spring is an overshoot curve.\n  \"reveal-text\": {\n    by: \"whole\",\n    stagger: 0,\n    duration: 250,\n    ease: \"var(--ease-overshoot)\",\n    directions: { up: { y: 24 }, down: { y: -24 }, start: { x: 24 }, end: { x: -24 } },\n  },\n  \"scale-down-fade\": {\n    by: \"whole\",\n    stagger: 0,\n    duration: 520,\n    ease: EASE_OUT,\n    from: { scale: 1.04, y: 8 },\n  },\n  \"short-slide-down\": {\n    by: \"word\",\n    stagger: 500,\n    duration: 500,\n    first: 360,\n    ease: EASE_BUILD,\n    from: { blur: 2.4, scale: 0.992, y: -28 },\n    layout: \"column\",\n    exit: { target: \"pieces\", to: { blur: 1.2, y: 10 }, duration: 320, ease: EASE_EXIT },\n    root: \"block\",\n  },\n  \"short-slide-right\": {\n    by: \"word\",\n    stagger: 92,\n    duration: 210,\n    ease: EASE_BUILD,\n    from: {},\n    layout: \"glide\",\n    group: { from: { opacity: 1, blur: 1.2, x: -24 }, duration: 520, ease: EASE_BUILD },\n    exit: { target: \"group\", to: { blur: 1, x: 12 }, duration: 320, ease: EASE_EXIT },\n    root: \"relative inline-block overflow-hidden align-bottom\",\n  },\n  \"soft-blur-in\": {\n    by: \"character\",\n    stagger: 25,\n    duration: 900,\n    ease: EASE_OUT,\n    from: { blur: 12, y: 16 },\n  },\n  \"spring-scale-in\": {\n    by: \"word\",\n    stagger: 95,\n    duration: 360,\n    ease: \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n    from: { scale: 0.7 },\n  },\n  \"stagger-from-center\": {\n    by: \"character\",\n    stagger: 22,\n    duration: 620,\n    ease: EASE_OUT,\n    from: { blur: 3, y: 12 },\n    order: \"center\",\n  },\n  \"stagger-from-edges\": {\n    by: \"character\",\n    stagger: 22,\n    duration: 620,\n    ease: EASE_OUT,\n    from: { blur: 3, y: 12 },\n    order: \"edges\",\n  },\n  \"top-down-letters\": {\n    by: \"character\",\n    stagger: 88,\n    duration: 400,\n    ease: EASE_STAGE,\n    from: { y: -46 },\n  },\n  // A loop, not an entrance: each letter bobs up, down and back to rest.\n  \"wave-text\": {\n    by: \"character\",\n    stagger: 50,\n    duration: 1200,\n    ease: \"cubic-bezier(0.37, 0, 0.63, 1)\",\n    loop: true,\n    frames:\n      \"0%,50%,100%{transform:translateY(0)}\" +\n      \"25%{transform:translateY(calc(var(--text-effect-amplitude, 8px) * -1))}\" +\n      \"75%{transform:translateY(calc(var(--text-effect-amplitude, 8px) * .5))}\",\n  },\n} satisfies Record<string, PresetSpec>;\n\nexport type TextEffectPreset = keyof typeof PRESETS;\n\n/** Every preset, in catalogue order. Stories and tests iterate this. */\nexport const textEffectPresetNames = Object.keys(PRESETS) as TextEffectPreset[];\n\n/* Keyframes ------------------------------------------------------------- */\n\nfunction pose(p: Pose): string {\n  const rules = [`opacity:${String(p.opacity ?? 0)}`];\n  const moves: string[] = [];\n  if (p.x || p.y) {\n    const x = p.x ? `calc(var(--text-effect-inline, 1) * ${String(p.x)}px)` : \"0\";\n    moves.push(`translate(${x},${String(p.y ?? 0)}px)`);\n  }\n  if (p.scale !== undefined) moves.push(`scale(${String(p.scale)})`);\n  if (moves.length > 0) rules.push(`transform:${moves.join(\" \")}`);\n  if (p.blur) rules.push(`filter:blur(${String(p.blur)}px)`);\n  return rules.join(\";\");\n}\n\n/** Rest for exactly the properties a pose moves: visible, untransformed, sharp. */\nfunction rest(p: Pose): string {\n  const rules = [\"opacity:1\"];\n  if (p.x || p.y || p.scale !== undefined) rules.push(\"transform:none\");\n  if (p.blur) rules.push(\"filter:none\");\n  return rules.join(\";\");\n}\n\nconst enter = (name: string, p: Pose) => `@keyframes ${name}{from{${pose(p)}}to{${rest(p)}}}`;\nconst leave = (name: string, p: Pose) => `@keyframes ${name}{from{${rest(p)}}to{${pose(p)}}}`;\n\nfunction keyframesFor(name: TextEffectPreset): string {\n  const spec: PresetSpec = PRESETS[name];\n  const id = `${PREFIX}-${name}`;\n  const out: string[] = [];\n  if (spec.frames) out.push(`@keyframes ${id}{${spec.frames}}`);\n  if (spec.from) out.push(enter(id, spec.from));\n  if (spec.directions) {\n    for (const [direction, p] of Object.entries(spec.directions)) {\n      out.push(enter(`${id}-${direction}`, p));\n    }\n  }\n  if (spec.group) out.push(enter(`${id}-group`, spec.group.from));\n  if (spec.exit) out.push(leave(`${id}-exit`, spec.exit.to));\n  return out.join(\"\\n\");\n}\n\nconst PIECE = \"[data-slot=text-effect-piece]\";\nconst CELL = \"[data-slot=text-effect-cell]\";\nconst CONTENT = \"[data-slot=text-effect-content]\";\n\nexport const STYLES = `\n[data-slot=text-effect]:dir(rtl){--text-effect-inline:-1}\n${PIECE}{display:inline-block;white-space:pre;animation-name:var(--text-effect-name,none);animation-duration:var(--text-effect-duration);animation-timing-function:var(--text-effect-ease);animation-delay:calc((var(--text-effect-delay) + var(--i, 0) * var(--text-effect-stagger)) * var(--motion-scale, 1));animation-iteration-count:var(--text-effect-count,1);animation-direction:var(--text-effect-direction,normal);animation-fill-mode:both}\n[data-slot=text-effect-word]{display:inline-block;white-space:nowrap}\n[data-slot=text-effect-mask]{display:inline-block;overflow:hidden;vertical-align:bottom}\n[data-by=line]>${PIECE},[data-by=line]>[data-slot=text-effect-mask],[data-by=line] [data-slot=text-effect-mask]>${PIECE}{display:block}\n${CONTENT}[data-layout=row]{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}\n${CONTENT}[data-layout=column]{display:flex;flex-direction:column;align-items:center}\n${CONTENT}[data-layout=glide]{display:inline-flex;flex-wrap:nowrap;gap:.25em}\n${CELL}{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;min-width:0;min-height:0;animation-name:var(--text-effect-grow,none);animation-duration:var(--text-effect-duration);animation-timing-function:var(--text-effect-ease);animation-delay:calc((var(--text-effect-delay) + var(--i, 0) * var(--text-effect-stagger)) * var(--motion-scale, 1));animation-fill-mode:both}\n${CELL}[data-first]{animation-name:none}\n${CELL}>${PIECE}{min-width:0;min-height:0}\n[data-layout=row]>${CELL}+${CELL}>${PIECE}{padding-inline-start:10px}\n[data-layout=column]>${CELL}+${CELL}>${PIECE}{padding-block-start:12px}\n[data-slot=text-effect][data-state=idle] :is(${PIECE},${CELL},${CONTENT}){animation-play-state:paused}\n@media (prefers-reduced-motion: reduce){${PIECE}{animation-iteration-count:1}}\n@keyframes ${PREFIX}-grow-inline{from{grid-template-columns:0fr}to{grid-template-columns:1fr}}\n@keyframes ${PREFIX}-grow-block{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}\n${textEffectPresetNames.map(keyframesFor).join(\"\\n\")}\n`;\n"],"mappings":"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"}

package/dist/components/text-effect/text-effect.d.ts

@@ -0,0 +1,58 @@
+import { TextEffectDirection, TextEffectPreset, TextEffectUnit, textEffectPresetNames } from "./text-effect-presets.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, Key, Ref } from "react";
+//#region src/components/text-effect/text-effect.d.ts
+/** Root classes: the layout each source gave its wrapper. */
+declare const textEffectVariants: (props?: ({
+  preset?: "blur-out-up" | "bottom-up-letters" | "depth-parallax-words" | "focus-blur-resolve" | "kinetic-center-build" | "line-by-line-slide" | "mask-reveal-up" | "micro-scale-fade" | "per-character-rise" | "reveal-text" | "scale-down-fade" | "short-slide-down" | "short-slide-right" | "soft-blur-in" | "spring-scale-in" | "stagger-from-center" | "stagger-from-edges" | "top-down-letters" | "wave-text" | null | undefined;
+  by?: "line" | "word" | "character" | "whole" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextEffectElement = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface TextEffectProps extends Omit<ComponentPropsWithRef<"span">, "children" | "ref">, Omit<VariantProps<typeof textEffectVariants>, "preset" | "by"> {
+  /** The text. A string, because it is split; use `\n` to separate lines. */
+  children: string;
+  ref?: Ref<HTMLElement>;
+  /** The element to render. Headings keep their role and read as one string. */
+  as?: TextEffectElement;
+  /** Which SmoothUI animation to play. */
+  preset?: TextEffectPreset;
+  /**
+   * Split unit. Defaults to the source's. The phrase builders
+   * (kinetic-center-build, short-slide-down, short-slide-right) are always
+   * per word: their layout is the effect. Prefer `word` or `line` for
+   * joined scripts (Arabic, Devanagari): separate letters cannot join.
+   */
+  by?: TextEffectUnit;
+  /** Milliseconds before the first piece moves. */
+  delay?: number;
+  /** Milliseconds between pieces. Defaults to the preset's. */
+  stagger?: number;
+  /** Milliseconds each piece takes to enter (or one wave cycle). Defaults to the preset's. */
+  duration?: number;
+  /** reveal-text only: the way the text travels as it appears. */
+  direction?: TextEffectDirection;
+  /** wave-text only: peak height of the wave, in pixels. */
+  amplitude?: number;
+  /**
+   * `mount` plays immediately; `in-view` waits until the text first scrolls
+   * into view, once. Without IntersectionObserver (or on the server) the text
+   * renders at rest.
+   */
+  trigger?: "mount" | "in-view";
+  /**
+   * `enter` brings the text in. `exit` takes it out — with the source's own
+   * exit where it had one (the phrase builders), otherwise the entrance
+   * played backwards. An exit ends hidden; the sr-only copy remains. Has no
+   * effect on wave-text, which is a loop rather than an entrance.
+   */
+  mode?: "enter" | "exit";
+  /** Change it to replay. Changing `children`, `preset` or `mode` also replays. */
+  replayKey?: Key;
+  /** Called once the last piece settles. Never called for wave-text. */
+  onComplete?: () => void;
+}
+/** Text that animates in, piece by piece, in one of nineteen SmoothUI motions. */
+declare function TextEffect({ children, ref, as: Comp, preset, by, delay, stagger, duration, direction, amplitude, trigger, mode, replayKey, onComplete, className, style, ...props }: TextEffectProps): import("react").JSX.Element;
+//#endregion
+export { TextEffect, type TextEffectDirection, TextEffectElement, type TextEffectPreset, TextEffectProps, type TextEffectUnit, textEffectPresetNames, textEffectVariants };
+//# sourceMappingURL=text-effect.d.ts.map

package/dist/components/text-effect/text-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-effect.d.ts","names":[],"sources":["../../../src/components/text-effect/text-effect.tsx"],"mappings":";;;;;cA+DM,qBAAkB;;;6CAMtB;KA8JU;UAEK,wBAEb,KAAK,oDACL,KAAK,oBAAoB;;EAE3B;EACA,MAAM,IAAI;;EAEV,KAAK;;EAEL,SAAS;;;;;;;EAOT,KAAK;;EAEL;;EAEA;;EAEA;;EAEA,YAAY;;EAEZ;;;;;;EAMA;;;;;;;EAOA;;EAEA,YAAY;;EAEZ;;;iBAIc,aACd,UACA,KACA,IAAI,MACJ,QACA,IACA,OACA,SACA,UACA,WACA,WACA,SACA,MACA,WACA,YACA,WACA,UACG,SACF,kCAAe,IAAA"}

package/dist/components/text-effect/text-effect.js

@@ -0,0 +1,243 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { PREFIX, PRESETS, STYLES, textEffectPresetNames } from "./text-effect-presets.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/text-effect/text-effect.tsx
+const presetRoots = Object.fromEntries(textEffectPresetNames.map((name) => [name, PRESETS[name].root ?? ""]));
+/** Root classes: the layout each source gave its wrapper. */
+const textEffectVariants = cva("", {
+	variants: {
+		preset: presetRoots,
+		by: {
+			character: "",
+			word: "",
+			line: "block",
+			whole: ""
+		}
+	},
+	defaultVariants: { preset: "soft-blur-in" }
+});
+function orderOf(index, count, order) {
+	if (order === "center") return Math.abs(index - (count - 1) / 2);
+	if (order === "edges") return Math.min(index, count - 1 - index);
+	return index;
+}
+function ms(value) {
+	return `calc(${String(value)}ms * var(--motion-scale, 1))`;
+}
+function renderPieces(text, plan) {
+	const { unit, spec } = plan;
+	const units = unit === "character" ? Array.from(text) : unit === "word" ? text.split(" ") : unit === "line" ? text.split("\n") : [text];
+	const piece = (content, index) => {
+		const style = { "--i": orderOf(index, units.length, spec.order) };
+		if (index === 0 && spec.first !== void 0 && plan.grow) style["--text-effect-duration"] = ms(spec.first ?? 0);
+		let node = /* @__PURE__ */ jsx("span", {
+			"data-slot": "text-effect-piece",
+			"data-last": plan.last === index ? "" : void 0,
+			style,
+			children: content
+		}, index);
+		if (spec.mask) node = /* @__PURE__ */ jsx("span", {
+			"data-slot": "text-effect-mask",
+			children: node
+		}, index);
+		if (spec.layout === "row" || spec.layout === "column") node = /* @__PURE__ */ jsx("span", {
+			"data-slot": "text-effect-cell",
+			"data-first": index === 0 ? "" : void 0,
+			style: { "--i": style["--i"] },
+			children: node
+		}, index);
+		return node;
+	};
+	if (spec.layout) return units.map(piece);
+	if (unit === "word") return units.flatMap((word, index) => index === 0 ? [piece(word, index)] : [" ", piece(word, index)]);
+	if (unit === "character") {
+		const out = [];
+		let index = 0;
+		for (const [w, word] of text.split(" ").entries()) {
+			if (w > 0) out.push(piece(" ", index++));
+			const letters = Array.from(word).map((letter) => piece(letter, index++));
+			if (letters.length > 0) out.push(/* @__PURE__ */ jsx("span", {
+				"data-slot": "text-effect-word",
+				children: letters
+			}, `w${String(w)}`));
+		}
+		return out;
+	}
+	return units.map(piece);
+}
+/** The piece (or the phrase) that finishes last, so `onComplete` fires once. */
+function lastOf(count, plan, groupEnd) {
+	if (plan.spec.loop) return null;
+	let best = -1;
+	let bestEnd = -Infinity;
+	if (plan.pieces) for (let index = 0; index < count; index++) {
+		const firstDuration = index === 0 && plan.grow ? plan.spec.first : void 0;
+		const end = orderOf(index, count, plan.spec.order) * plan.stagger + (firstDuration ?? plan.duration);
+		if (end >= bestEnd) {
+			best = index;
+			bestEnd = end;
+		}
+	}
+	if (groupEnd !== null && groupEnd > bestEnd) return "group";
+	return best >= 0 ? best : null;
+}
+function countOf(text, unit) {
+	if (unit === "character") return Array.from(text).length;
+	if (unit === "word") return text.split(" ").length;
+	if (unit === "line") return text.split("\n").length;
+	return 1;
+}
+const noop = () => () => {};
+function subscribeReducedMotion(onChange) {
+	if (typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function prefersReducedMotion() {
+	if (typeof window.matchMedia !== "function") return false;
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+/** Text that animates in, piece by piece, in one of nineteen SmoothUI motions. */
+function TextEffect({ children, ref, as: Comp = "span", preset = "soft-blur-in", by, delay = 0, stagger, duration, direction = "up", amplitude = 8, trigger = "mount", mode = "enter", replayKey, onComplete, className, style, ...props }) {
+	const spec = PRESETS[preset];
+	const unit = spec.layout ? spec.by : by ?? spec.by;
+	const exiting = mode === "exit" && !spec.loop;
+	const reduced = useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);
+	const observable = useSyncExternalStore(noop, () => typeof IntersectionObserver !== "undefined", () => false);
+	const [seen, setSeen] = useState(false);
+	const node = useRef(null);
+	const setRef = useCallback((element) => {
+		node.current = element;
+		assignRef(ref, element);
+	}, [ref]);
+	const waiting = trigger === "in-view" && !seen;
+	useEffect(() => {
+		const element = node.current;
+		if (!waiting || !observable || !element) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setSeen(true);
+				observer.disconnect();
+			}
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [waiting, observable]);
+	const complete = useRef(onComplete);
+	useEffect(() => {
+		complete.current = onComplete;
+	});
+	useEffect(() => {
+		const element = node.current;
+		if (!element) return;
+		const onEnd = (event) => {
+			if (event.target instanceof Element && event.target.hasAttribute("data-last")) complete.current?.();
+		};
+		element.addEventListener("animationend", onEnd);
+		return () => element.removeEventListener("animationend", onEnd);
+	}, [Comp]);
+	const state = waiting ? observable ? "idle" : "static" : "playing";
+	const animated = state !== "static";
+	const exit = exiting ? spec.exit : void 0;
+	const id = `${PREFIX}-${preset}`;
+	const pieceRun = exit ? exit.target === "pieces" ? {
+		name: `${id}-exit`,
+		duration: exit.duration,
+		ease: exit.ease,
+		stagger: 0
+	} : null : {
+		name: spec.directions ? `${id}-${direction}` : id,
+		duration: duration ?? spec.duration,
+		ease: spec.ease,
+		stagger: stagger ?? spec.stagger
+	};
+	const groupRun = exit ? exit.target === "group" ? {
+		name: `${id}-exit`,
+		duration: exit.duration,
+		ease: exit.ease
+	} : null : spec.group ? {
+		name: `${id}-group`,
+		duration: spec.group.duration,
+		ease: spec.group.ease
+	} : null;
+	const base = {
+		unit,
+		spec,
+		duration: pieceRun?.duration ?? 0,
+		stagger: pieceRun?.stagger ?? 0,
+		pieces: pieceRun !== null,
+		grow: !exiting && (spec.layout === "row" || spec.layout === "column")
+	};
+	const plan = {
+		...base,
+		last: lastOf(countOf(children, unit), base, groupRun?.duration ?? null)
+	};
+	const vars = {
+		"--text-effect-name": animated && pieceRun ? pieceRun.name : "none",
+		"--text-effect-duration": ms(plan.duration),
+		"--text-effect-ease": pieceRun?.ease ?? "linear",
+		"--text-effect-delay": `${String(delay)}ms`,
+		"--text-effect-stagger": `${String(plan.stagger)}ms`,
+		"--text-effect-count": spec.loop && !reduced ? "infinite" : "1",
+		"--text-effect-direction": exiting && !exit ? "reverse" : "normal",
+		"--text-effect-grow": animated && plan.grow ? `${PREFIX}-grow-${spec.layout === "row" ? "inline" : "block"}` : "none"
+	};
+	if (spec.loop) vars["--text-effect-amplitude"] = `${String(amplitude)}px`;
+	if (animated && groupRun) Object.assign(vars, {
+		animationName: groupRun.name,
+		animationDuration: ms(groupRun.duration),
+		animationTimingFunction: groupRun.ease,
+		animationDelay: ms(delay),
+		animationFillMode: "both"
+	});
+	const run = [
+		String(replayKey ?? ""),
+		preset,
+		unit,
+		mode,
+		direction,
+		children
+	].join("\0");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs(Comp, {
+		ref: setRef,
+		"data-slot": "text-effect",
+		"data-preset": preset,
+		"data-mode": spec.loop ? "loop" : mode,
+		"data-state": state,
+		className: cn(textEffectVariants({
+			preset,
+			by: unit
+		}), className),
+		style,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "text-effect-label",
+			className: "sr-only",
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "text-effect-content",
+			"data-by": unit,
+			"data-layout": spec.layout,
+			"data-last": plan.last === "group" ? "" : void 0,
+			style: vars,
+			children: renderPieces(children, plan)
+		}, run)]
+	})] });
+}
+//#endregion
+export { TextEffect, textEffectPresetNames, textEffectVariants };
+
+//# sourceMappingURL=text-effect.js.map