@edwinvakayil/calligraphy 1.2.6 → 1.3.0

package/dist/animation.d.ts

@@ -1,15 +1,9 @@
 import { HeroAnimation } from "./types";
 export declare function injectAnimationStyles(): void;
+/** Returns the CSS class for whole-element animations, or "" for split ones. */
 export declare function getAnimationClass(animation: HeroAnimation): string;
-/**
- * Wraps each word in an animated span.
- * <em> tokens are preserved as-is in the HTML — Typography's useEffect
- * will apply inline styles to them after mount.
- */
-export declare function buildStaggerHTML(html: string): string;
-/**
- * Wraps each character in an animated span.
- * <em> tags are preserved in the output — Typography's useEffect applies
- * the actual italic/non-italic inline styles after the DOM is ready.
- */
-export declare function buildLettersHTML(html: string): string;
+/** True if the animation needs the HTML to be split into word/char spans. */
+export declare function isSplitAnimation(animation: HeroAnimation): boolean;
+export declare function buildSplitHTML(animation: HeroAnimation, html: string): string;
+export declare const buildStaggerHTML: (html: string) => string;
+export declare const buildLettersHTML: (html: string) => string;

package/dist/index.d.ts

@@ -1,11 +1,30 @@
 import React, { HTMLAttributes, ElementType, CSSProperties } from 'react';
 
+interface TypographyTheme {
+    /** Default Google Font for all Typography components */
+    font?: string;
+    /** Default accent color for <em> italic spans in Display / H1 */
+    accentColor?: string;
+    /** Default italic setting for Display / H1 heroes */
+    italic?: boolean;
+    /** Default entrance animation for Display / H1 heroes */
+    animation?: HeroAnimation;
+    /** Default text color applied to all variants */
+    color?: string;
+}
+interface TypographyProviderProps {
+    theme: TypographyTheme;
+    children: React.ReactNode;
+}
+declare const TypographyProvider: React.FC<TypographyProviderProps>;
+
 type TypographyVariant = "Display" | "H1" | "H2" | "H3" | "H4" | "H5" | "H6" | "Subheading" | "Overline" | "Body" | "Label" | "Caption";
 type TextAlign = "left" | "center" | "right" | "justify";
 /**
  * Built-in hero text entrance animations.
  * Applied via CSS keyframes — GPU-composited, 60fps safe.
  *
+ * — Original —
  * rise       — smooth upward fade-in (universal default)
  * stagger    — each word rises in sequence
  * clip       — text unmasked left-to-right (editorial)
@@ -16,8 +35,20 @@ type TextAlign = "left" | "center" | "right" | "justify";
  * swipe      — slides in from the right
  * typewriter — character-by-character reveal
  * bounce     — drops from above with a soft bounce
+ *
+ * — Modern —
+ * velvet     — words drift in with a soft skew (buttery & modern)
+ * curtain    — each word clips upward like a rising curtain
+ * morph      — squash-and-stretch spring (expressive & bold)
+ * ground     — words emerge from behind the baseline (editorial)
+ * cascade    — diagonal character waterfall (dynamic & layered)
+ * spotlight  — expands from compressed letterspace (cinematic)
+ * ink        — words fade in with a gentle scale (calm & precise)
+ * hinge      — words rotate in from their left edge (mechanical)
+ * stretch    — horizontal rubber-band expand (playful & punchy)
+ * peel       — bottom-to-top clip reveal per word (sharp)
  */
-type HeroAnimation = "rise" | "stagger" | "clip" | "pop" | "letters" | "blur" | "flip" | "swipe" | "typewriter" | "bounce";
+type HeroAnimation = "rise" | "stagger" | "clip" | "pop" | "letters" | "blur" | "flip" | "swipe" | "typewriter" | "bounce" | "velvet" | "curtain" | "morph" | "ground" | "cascade" | "spotlight" | "ink" | "hinge" | "stretch" | "peel";
 interface TypographyProps extends HTMLAttributes<HTMLElement> {
     /** Typography scale variant */
     variant?: TypographyVariant;
@@ -58,24 +89,6 @@ interface TypographyProps extends HTMLAttributes<HTMLElement> {
 
 declare const Typography: React.FC<TypographyProps>;
 
-interface TypographyTheme {
-    /** Default Google Font for all Typography components */
-    font?: string;
-    /** Default accent color for <em> italic spans in Display / H1 */
-    accentColor?: string;
-    /** Default italic setting for Display / H1 heroes */
-    italic?: boolean;
-    /** Default entrance animation for Display / H1 heroes */
-    animation?: HeroAnimation;
-    /** Default text color applied to all variants */
-    color?: string;
-}
-interface TypographyProviderProps {
-    theme: TypographyTheme;
-    children: React.ReactNode;
-}
-declare const TypographyProvider: React.FC<TypographyProviderProps>;
-
 /**
  * A curated list of popular Google Fonts.
  * Pass any valid Google Font name to the `font` prop — if it's in this list,

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useMemo, useContext, useRef, useEffect, Children, isValidElement } from 'react';
+import { createContext, useMemo, useContext, useRef, useInsertionEffect, useEffect, Children, isValidElement } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -127,28 +127,55 @@ function preloadFonts(families) {
 
 const STYLE_ID = "rts-hero-animations";
 const CSS = `
-@keyframes rts-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
-@keyframes rts-clip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
-@keyframes rts-pop{0%{opacity:0;transform:scale(0.75)}60%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
-@keyframes rts-blur{from{opacity:0;filter:blur(14px);transform:scale(1.04)}to{opacity:1;filter:blur(0);transform:scale(1)}}
-@keyframes rts-flip{from{opacity:0;transform:perspective(600px) rotateX(30deg) translateY(20px)}to{opacity:1;transform:perspective(600px) rotateX(0) translateY(0)}}
-@keyframes rts-swipe{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
-@keyframes rts-bounce{0%{opacity:0;transform:translateY(-60px)}60%{opacity:1;transform:translateY(10px)}80%{transform:translateY(-5px)}100%{transform:translateY(0)}}
-@keyframes rts-type{from{width:0}to{width:100%}}
-@keyframes rts-blink{50%{border-color:transparent}}
-@keyframes rts-word-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
-@keyframes rts-letter-in{from{opacity:0;transform:translateX(-16px) rotate(-4deg)}to{opacity:1;transform:none}}
+@keyframes rts-rise        { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
+@keyframes rts-clip        { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0% 0 0)} }
+@keyframes rts-pop         { 0%{opacity:0;transform:scale(0.75)} 60%{opacity:1;transform:scale(1.04)} 100%{transform:scale(1)} }
+@keyframes rts-blur        { from{opacity:0;filter:blur(14px);transform:scale(1.04)} to{opacity:1;filter:blur(0);transform:scale(1)} }
+@keyframes rts-flip        { from{opacity:0;transform:perspective(600px) rotateX(30deg) translateY(20px)} to{opacity:1;transform:perspective(600px) rotateX(0) translateY(0)} }
+@keyframes rts-swipe       { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
+@keyframes rts-bounce      { 0%{opacity:0;transform:translateY(-60px)} 60%{opacity:1;transform:translateY(10px)} 80%{transform:translateY(-5px)} 100%{transform:translateY(0)} }
+@keyframes rts-type        { from{width:0} to{width:100%} }
+@keyframes rts-blink       { 50%{border-color:transparent} }
+@keyframes rts-word-rise   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
+@keyframes rts-letter-in   { from{opacity:0;transform:translateX(-16px) rotate(-4deg)} to{opacity:1;transform:none} }
 
-.rts-rise      { animation: rts-rise 0.9s cubic-bezier(0.16,1,0.3,1) both }
-.rts-clip      { animation: rts-clip 1.1s cubic-bezier(0.77,0,0.18,1) both }
-.rts-pop       { animation: rts-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) both }
-.rts-blur      { animation: rts-blur 1s cubic-bezier(0.16,1,0.3,1) both }
-.rts-flip      { animation: rts-flip 0.9s cubic-bezier(0.16,1,0.3,1) both; transform-origin: center bottom }
-.rts-swipe     { animation: rts-swipe 0.8s cubic-bezier(0.16,1,0.3,1) both }
-.rts-bounce    { animation: rts-bounce 0.9s cubic-bezier(0.36,0.07,0.19,0.97) both }
-.rts-typewriter{ overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; width: 0; animation: rts-type 1.6s steps(22,end) both, rts-blink 0.7s step-end 1.6s 3 }
-.rts-word      { display: inline-block; opacity: 0; transform: translateY(24px); animation: rts-word-rise 0.7s cubic-bezier(0.16,1,0.3,1) both }
-.rts-letter    { display: inline-block; opacity: 0; transform: translateX(-16px) rotate(-4deg); animation: rts-letter-in 0.5s cubic-bezier(0.16,1,0.3,1) both }
+/* ── New modern animations ─────────────────────────────────────────────── */
+
+@keyframes rts-velvet      { from{opacity:0;transform:translate(-12px,20px) skewX(4deg)} to{opacity:1;transform:translate(0,0) skewX(0deg)} }
+@keyframes rts-curtain     { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0% 0)} }
+@keyframes rts-morph       { 0%{opacity:0;transform:scaleY(0.3) scaleX(1.3) translateY(10px)} 60%{opacity:1;transform:scaleY(1.08) scaleX(0.97)} 100%{transform:scaleY(1) scaleX(1)} }
+@keyframes rts-ground      { from{transform:translateY(110%);opacity:0} to{transform:translateY(0);opacity:1} }
+@keyframes rts-cascade     { from{opacity:0;transform:translateY(-28px) translateX(10px) rotate(8deg)} to{opacity:1;transform:none} }
+@keyframes rts-spotlight   { 0%{opacity:0;letter-spacing:0.3em;transform:scaleX(1.15)} 100%{opacity:1;letter-spacing:-0.03em;transform:scaleX(1)} }
+@keyframes rts-ink         { 0%{opacity:0;transform:translateY(6px) scale(0.96)} 100%{opacity:1;transform:translateY(0) scale(1)} }
+@keyframes rts-hinge       { from{opacity:0;transform:perspective(400px) rotateY(-40deg) translateX(-20px)} to{opacity:1;transform:perspective(400px) rotateY(0) translateX(0)} }
+@keyframes rts-stretch     { 0%{opacity:0;transform:scaleX(0.05)} 60%{transform:scaleX(1.04)} 100%{opacity:1;transform:scaleX(1)} }
+@keyframes rts-peel        { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0% 0 0 0)} }
+
+/* ── Whole-element classes (no splitting needed) ───────────────────────── */
+.rts-rise       { animation: rts-rise 0.9s cubic-bezier(0.16,1,0.3,1) both }
+.rts-clip       { animation: rts-clip 1.1s cubic-bezier(0.77,0,0.18,1) both }
+.rts-pop        { animation: rts-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) both }
+.rts-blur       { animation: rts-blur 1s cubic-bezier(0.16,1,0.3,1) both }
+.rts-flip       { animation: rts-flip 0.9s cubic-bezier(0.16,1,0.3,1) both; transform-origin: center bottom }
+.rts-swipe      { animation: rts-swipe 0.8s cubic-bezier(0.16,1,0.3,1) both }
+.rts-bounce     { animation: rts-bounce 0.9s cubic-bezier(0.36,0.07,0.19,0.97) both }
+.rts-typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; width: 0; animation: rts-type 1.6s steps(22,end) both, rts-blink 0.7s step-end 1.6s 3 }
+.rts-morph      { animation: rts-morph 0.8s cubic-bezier(0.34,1.56,0.64,1) both }
+.rts-spotlight  { animation: rts-spotlight 1s cubic-bezier(0.16,1,0.3,1) both }
+.rts-stretch    { animation: rts-stretch 0.9s cubic-bezier(0.34,1.56,0.64,1) both }
+
+/* ── Per-word / per-character span classes ─────────────────────────────── */
+.rts-word           { display:inline-block;opacity:0;transform:translateY(24px);animation:rts-word-rise 0.7s cubic-bezier(0.16,1,0.3,1) both }
+.rts-letter         { display:inline-block;opacity:0;transform:translateX(-16px) rotate(-4deg);animation:rts-letter-in 0.5s cubic-bezier(0.16,1,0.3,1) both }
+.rts-velvet-word    { display:inline-block;opacity:0;animation:rts-velvet 0.65s cubic-bezier(0.16,1,0.3,1) both }
+.rts-curtain-word   { display:inline-block;overflow:hidden;animation:rts-curtain 0.7s cubic-bezier(0.77,0,0.18,1) both }
+.rts-ground-wrap    { display:inline-block;overflow:hidden;vertical-align:bottom }
+.rts-ground-inner   { display:inline-block;animation:rts-ground 0.65s cubic-bezier(0.16,1,0.3,1) both }
+.rts-cascade-ch     { display:inline-block;opacity:0;animation:rts-cascade 0.45s cubic-bezier(0.34,1.56,0.64,1) both }
+.rts-ink-word       { display:inline-block;opacity:0;animation:rts-ink 0.9s cubic-bezier(0.16,1,0.3,1) both }
+.rts-hinge-word     { display:inline-block;opacity:0;transform-origin:left center;animation:rts-hinge 0.6s cubic-bezier(0.16,1,0.3,1) both }
+.rts-peel-word      { display:inline-block;overflow:hidden;animation:rts-peel 0.6s cubic-bezier(0.77,0,0.18,1) both }
 `;
 function injectAnimationStyles() {
     if (typeof document === "undefined")
@@ -160,52 +187,47 @@ function injectAnimationStyles() {
     style.textContent = CSS;
     document.head.appendChild(style);
 }
+// ─── Whole-element class map ──────────────────────────────────────────────────
+const WHOLE_CLASS_MAP = {
+    rise: "rts-rise",
+    clip: "rts-clip",
+    pop: "rts-pop",
+    blur: "rts-blur",
+    flip: "rts-flip",
+    swipe: "rts-swipe",
+    bounce: "rts-bounce",
+    typewriter: "rts-typewriter",
+    morph: "rts-morph",
+    spotlight: "rts-spotlight",
+    stretch: "rts-stretch",
+};
+/** Returns the CSS class for whole-element animations, or "" for split ones. */
 function getAnimationClass(animation) {
     var _a;
-    const map = {
-        rise: "rts-rise",
-        clip: "rts-clip",
-        pop: "rts-pop",
-        blur: "rts-blur",
-        flip: "rts-flip",
-        swipe: "rts-swipe",
-        bounce: "rts-bounce",
-        typewriter: "rts-typewriter",
-        stagger: "",
-        letters: "",
-    };
-    return (_a = map[animation]) !== null && _a !== void 0 ? _a : "";
+    return (_a = WHOLE_CLASS_MAP[animation]) !== null && _a !== void 0 ? _a : "";
 }
-/**
- * Wraps each word in an animated span.
- * <em> tokens are preserved as-is in the HTML — Typography's useEffect
- * will apply inline styles to them after mount.
- */
-function buildStaggerHTML(html) {
+/** True if the animation needs the HTML to be split into word/char spans. */
+function isSplitAnimation(animation) {
+    return !(animation in WHOLE_CLASS_MAP);
+}
+// ─── HTML builders for split animations ──────────────────────────────────────
+function wrapWords(html, cls, delayStep) {
     var _a;
     const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
     return tokens
         .map((tok, i) => {
-        const delay = (i * 0.07).toFixed(2);
+        const delay = (i * delayStep).toFixed(2);
         if (tok.startsWith("<em>")) {
-            // Wrap the inner text in the animated span, keep <em> outside
-            const inner = tok.slice(4, -5);
-            return `<em><span class="rts-word" style="animation-delay:${delay}s">${inner}</span></em>`;
+            return `<em><span class="${cls}" style="animation-delay:${delay}s">${tok.slice(4, -5)}</span></em>`;
         }
-        return `<span class="rts-word" style="animation-delay:${delay}s">${tok}</span>`;
+        return `<span class="${cls}" style="animation-delay:${delay}s">${tok}</span>`;
     })
         .join(" ");
 }
-/**
- * Wraps each character in an animated span.
- * <em> tags are preserved in the output — Typography's useEffect applies
- * the actual italic/non-italic inline styles after the DOM is ready.
- */
-function buildLettersHTML(html) {
+function wrapChars(html, cls, delayStep) {
     const result = [];
     let inEm = false;
     let delay = 0;
-    const step = 0.04;
     let i = 0;
     while (i < html.length) {
         if (html.startsWith("<em>", i)) {
@@ -224,14 +246,40 @@ function buildLettersHTML(html) {
             i++;
             continue;
         }
-        const span = `<span class="rts-letter" style="animation-delay:${delay.toFixed(2)}s">${ch}</span>`;
-        // Preserve <em> wrapper in DOM — styles applied by useEffect
+        const span = `<span class="${cls}" style="animation-delay:${delay.toFixed(2)}s">${ch}</span>`;
         result.push(inEm ? `<em>${span}</em>` : span);
-        delay += step;
+        delay += delayStep;
         i++;
     }
     return result.join("");
 }
+function wrapGround(html, delayStep) {
+    var _a;
+    const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
+    return tokens
+        .map((tok, i) => {
+        const delay = (i * delayStep).toFixed(2);
+        const inner = tok.startsWith("<em>")
+            ? `<em>${tok.slice(4, -5)}</em>`
+            : tok;
+        return `<span class="rts-ground-wrap"><span class="rts-ground-inner" style="animation-delay:${delay}s">${inner}</span></span>`;
+    })
+        .join(" ");
+}
+function buildSplitHTML(animation, html) {
+    switch (animation) {
+        case "stagger": return wrapWords(html, "rts-word", 0.07);
+        case "letters": return wrapChars(html, "rts-letter", 0.04);
+        case "velvet": return wrapWords(html, "rts-velvet-word", 0.08);
+        case "curtain": return wrapWords(html, "rts-curtain-word", 0.10);
+        case "ground": return wrapGround(html, 0.09);
+        case "cascade": return wrapChars(html, "rts-cascade-ch", 0.05);
+        case "ink": return wrapWords(html, "rts-ink-word", 0.10);
+        case "hinge": return wrapWords(html, "rts-hinge-word", 0.09);
+        case "peel": return wrapWords(html, "rts-peel-word", 0.10);
+        default: return html;
+    }
+}
 
 // ─── Defaults ─────────────────────────────────────────────────────────────────
 const DEFAULT_THEME = {
@@ -396,7 +444,7 @@ function renderChildrenWithEmStyles(children, italic, accentColor, headingFont)
     });
 }
 function applyEmStylesDOM(container, italic, accentColor, headingFont) {
-    const applyTo = (el) => {
+    const apply = (el) => {
         if (italic) {
             el.style.fontFamily = "'Instrument Serif', serif";
             el.style.fontStyle = "italic";
@@ -410,63 +458,74 @@ function applyEmStylesDOM(container, italic, accentColor, headingFont) {
             el.style.color = "inherit";
         }
     };
-    container.querySelectorAll("em").forEach(applyTo);
-    container.querySelectorAll("em > span").forEach(applyTo);
+    container.querySelectorAll("em").forEach(apply);
+    container.querySelectorAll("em > span").forEach(apply);
 }
 // ─── Component ───────────────────────────────────────────────────────────────
 const Typography = (_a) => {
     var _b;
-    var { variant = "Body", 
-    // Explicit undefined = "not set by caller" → fall through to context
-    font: fontProp, color: colorProp, animation: animationProp, italic: italicProp, accentColor: accentColorProp, align, className, style, children, as, truncate, maxLines } = _a, rest = __rest(_a, ["variant", "font", "color", "animation", "italic", "accentColor", "align", "className", "style", "children", "as", "truncate", "maxLines"]);
+    var { variant = "Body", font: fontProp, color: colorProp, animation: animationProp, italic: italicProp, accentColor: accentColorProp, align, className, style, children, as, truncate, maxLines } = _a, rest = __rest(_a, ["variant", "font", "color", "animation", "italic", "accentColor", "align", "className", "style", "children", "as", "truncate", "maxLines"]);
     const theme = useTypographyTheme();
     const isHero = variant === "Display" || variant === "H1";
     const ref = useRef(null);
-    // Prop wins if explicitly provided; otherwise fall back to theme value.
-    // We use `?? ` (nullish coalescing) so that false / 0 / "" from props still win.
+    // Prop wins; fall back to theme; fall back to built-in default
     const font = fontProp !== null && fontProp !== void 0 ? fontProp : (theme.font || undefined);
     const color = colorProp !== null && colorProp !== void 0 ? colorProp : (theme.color || undefined);
-    const animation = isHero
-        ? ((_b = animationProp !== null && animationProp !== void 0 ? animationProp : theme.animation) !== null && _b !== void 0 ? _b : undefined)
-        : undefined;
+    const animation = isHero ? ((_b = animationProp !== null && animationProp !== void 0 ? animationProp : theme.animation) !== null && _b !== void 0 ? _b : undefined) : undefined;
     const italic = italicProp !== null && italicProp !== void 0 ? italicProp : theme.italic;
     const accentColor = accentColorProp !== null && accentColorProp !== void 0 ? accentColorProp : theme.accentColor;
-    // Always pre-load Instrument Serif for hero elements
-    if (isHero) {
-        injectFont(INSTRUMENT_SERIF_URL);
-    }
-    // Inject heading Google Font
-    if (font && GOOGLE_FONTS.includes(font)) {
-        injectFont(buildFontUrl(font));
-    }
-    // Inject animation keyframes once
-    if (animation && isHero) {
-        injectAnimationStyles();
-    }
-    // Re-stamp em styles after DOM updates (animation / dangerouslySetInnerHTML path)
+    // ── useInsertionEffect: inject <link> and <style> tags ────────────────────
+    //
+    // WHY useInsertionEffect instead of plain render-phase calls:
+    //
+    // 1. Server safety — useInsertionEffect (like all effects) is never called
+    //    on the server, so document.createElement / document.head never run
+    //    during SSR. The isBrowser guard in ssr.ts is a belt-and-suspenders
+    //    backup, but the effect boundary is the real guarantee.
+    //
+    // 2. Correctness — React 18 concurrent mode can call the render function
+    //    multiple times before committing. Doing DOM work in render can fire
+    //    those side-effects redundantly or out of order. useInsertionEffect
+    //    fires synchronously before the browser paints, once per commit.
+    //
+    // 3. No FOUC — because it fires before paint (earlier than useLayoutEffect),
+    //    the <style> tag is in the DOM before any text is visible, so there is
+    //    no flash of unstyled / wrong-font text.
+    useInsertionEffect(() => {
+        // Instrument Serif — always pre-load for hero so toggling italic is instant
+        if (isHero) {
+            injectFont(INSTRUMENT_SERIF_URL);
+        }
+        // Heading Google Font
+        if (font && GOOGLE_FONTS.includes(font)) {
+            injectFont(buildFontUrl(font));
+        }
+        // Animation keyframe stylesheet
+        if (animation && isHero) {
+            injectAnimationStyles();
+        }
+    }, [isHero, font, animation]);
+    // ── useEffect: re-stamp inline styles on <em> after DOM updates ───────────
     useEffect(() => {
         if (!isHero || !animation || !ref.current)
             return;
         applyEmStylesDOM(ref.current, italic, accentColor, font);
     }, [italic, accentColor, font, animation, isHero]);
     const Tag = (as !== null && as !== void 0 ? as : variantTagMap[variant]);
-    // ── Animation path ────────────────────────────────────────────────────────
+    // ── Animation path: build inner HTML ─────────────────────────────────────
     let animClass = "";
     let heroHTML = null;
     if (animation && isHero) {
         const rawHTML = childrenToHTML(children);
-        if (animation === "stagger") {
-            heroHTML = buildStaggerHTML(rawHTML);
-        }
-        else if (animation === "letters") {
-            heroHTML = buildLettersHTML(rawHTML);
+        if (isSplitAnimation(animation)) {
+            heroHTML = buildSplitHTML(animation, rawHTML);
         }
         else {
             heroHTML = rawHTML;
             animClass = getAnimationClass(animation);
         }
     }
-    // ── Computed styles ───────────────────────────────────────────────────────
+    // ── Computed container styles ─────────────────────────────────────────────
     const computedStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, variantStyleMap[variant]), (font ? { fontFamily: `'${font}', sans-serif` } : {})), (color ? { color } : {})), (align ? { textAlign: align } : {})), (truncate
         ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
         : {})), (maxLines && !truncate
@@ -481,7 +540,7 @@ const Typography = (_a) => {
     if (heroHTML !== null) {
         return (jsx(Tag, Object.assign({ ref: ref, className: [animClass, className].filter(Boolean).join(" "), style: computedStyle, dangerouslySetInnerHTML: { __html: heroHTML } }, rest), animation));
     }
-    // ── Render: standard path (real React children) ───────────────────────────
+    // ── Render: standard path ────────────────────────────────────────────────
     const processedChildren = isHero
         ? renderChildrenWithEmStyles(children, italic, accentColor, font)
         : children;