@edwinvakayil/calligraphy 1.2.6 → 1.4.0

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,250 @@ 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}}
-
-.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 }
+/* ─── Easing tokens (reused across all keyframes) ──────────────────────────
+   All durations are tuned for perceptual smoothness:
+   - spring  = cubic-bezier(0.16,1,0.3,1)   — soft, natural overshoot
+   - snap    = cubic-bezier(0.77,0,0.18,1)   — fast-in, crisp-out
+   - bounce  = cubic-bezier(0.34,1.56,0.64,1)— elastic overshoot
+   - cinema  = cubic-bezier(0.4,0,0.2,1)     — material easing
+   ──────────────────────────────────────────────────────────────────────── */
+
+/* ── Batch 1 — originals ─────────────────────────────────────────────────── */
+@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}}
+
+/* ── Batch 2 — modern ────────────────────────────────────────────────────── */
+@keyframes rts-velvet    {from{opacity:0;transform:translate(-12px,20px) skewX(4deg)}to{opacity:1;transform:none}}
+@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:none}}
+@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:none}}
+@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:none}}
+@keyframes rts-peel      {from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0% 0 0 0)}}
+@keyframes rts-fold      {from{opacity:0;transform:rotateZ(-8deg) translateY(18px)}to{opacity:1;transform:none}}
+@keyframes rts-shear     {from{opacity:0;transform:skewY(8deg) translateY(12px)}to{opacity:1;transform:none}}
+/* ripple — elastic scale from compressed point, outward wave delay */
+@keyframes rts-ripple-w  {
+  0%  {opacity:0;transform:scale(0.4) translateY(20px)}
+  55% {opacity:1;transform:scale(1.08) translateY(-3px)}
+  75% {transform:scale(0.97) translateY(1px)}
+  100%{opacity:1;transform:scale(1) translateY(0)}
+}
+/* cinch — character pinches on scaleX then snaps open with skew */
+@keyframes rts-cinch {
+  0%  {opacity:0;transform:scaleX(0) skewX(20deg)}
+  50% {opacity:1;transform:scaleX(1.12) skewX(-4deg)}
+  75% {transform:scaleX(0.95) skewX(1deg)}
+  100%{opacity:1;transform:scaleX(1) skewX(0)}
+}
+/* tiltrise — words rise while untilting from a sideways lean */
+@keyframes rts-tiltrise {
+  0%  {opacity:0;transform:translateY(36px) rotate(-6deg) skewX(8deg)}
+  65% {opacity:1;transform:translateY(-3px) rotate(0.5deg) skewX(-1deg)}
+  100%{opacity:1;transform:translateY(0) rotate(0) skewX(0)}
+}
+@keyframes rts-cardflip  {from{opacity:0;transform:perspective(300px) rotateX(-90deg)}to{opacity:1;transform:perspective(300px) rotateX(0)}}
+@keyframes rts-conv-l    {from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
+@keyframes rts-conv-r    {from{opacity:0;transform:translateX( 40px)}to{opacity:1;transform:translateX(0)}}
+@keyframes rts-splitrise-t{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
+@keyframes rts-splitrise-b{from{opacity:0;transform:translateY( 24px)}to{opacity:1;transform:translateY(0)}}
+
+/* ── Batch 3 — new mechanics ─────────────────────────────────────────────── */
+
+/* tectonic: words slam from alternating sides with skew — unique X+skew combo */
+@keyframes rts-tec-l{from{opacity:0;transform:translateX(-55px) skewX(-7deg)}to{opacity:1;transform:none}}
+@keyframes rts-tec-r{from{opacity:0;transform:translateX( 55px) skewX( 7deg)}to{opacity:1;transform:none}}
+
+/* stratify: each word enters from deep Z with blur — different from blur (which is whole-el) */
+@keyframes rts-strat{
+  from{opacity:0;transform:perspective(900px) translateZ(-200px) rotateX(10deg);filter:blur(6px)}
+  to  {opacity:1;transform:perspective(900px) translateZ(0)     rotateX(0);    filter:blur(0)}
+}
+
+/* unfurl: line expands from center — horizontal center-clip, not edge-clip */
+@keyframes rts-unfurl{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0% 0 0%)}}
+
+/* gravityWell: chars fall from sky with precise physics micro-rotation */
+@keyframes rts-gwell{
+  0%  {opacity:0;transform:translateY(-72px) scale(1.18) rotate(-3.5deg)}
+  52% {opacity:1;transform:translateY(7px)  scale(0.98) rotate(0.4deg)}
+  78% {transform:translateY(-3px) scale(1.005) rotate(0)}
+  100%{opacity:1;transform:none}
+}
+
+/* orbit: words grow from dot, rotating on Z — scale+rotation combo, unique */
+@keyframes rts-orbit{
+  from{opacity:0;transform:scale(0.12) rotate(-28deg)}
+  58% {opacity:1;transform:scale(1.07) rotate(2.5deg)}
+  100%{opacity:1;transform:none}
+}
+
+/* liquid: per-word squash then overshoot spring — scaleY+scaleX cross-axis */
+@keyframes rts-liquid{
+  0%  {opacity:0;transform:scaleY(0.08) scaleX(1.5)  translateY(28px)}
+  40% {opacity:1;transform:scaleY(1.12) scaleX(0.94) translateY(-4px)}
+  65% {transform:scaleY(0.97) scaleX(1.015)}
+  100%{opacity:1;transform:none}
+}
+
+/* noiseFade: 3 random opacity waveforms per word — signal-lock feel */
+@keyframes rts-nf0{0%{opacity:0}22%{opacity:.7}44%{opacity:.1}66%{opacity:.95}88%{opacity:.4}100%{opacity:1}}
+@keyframes rts-nf1{0%{opacity:0}18%{opacity:.8}38%{opacity:.15}58%{opacity:1}78%{opacity:.5}100%{opacity:1}}
+@keyframes rts-nf2{0%{opacity:0}28%{opacity:.3}50%{opacity:.9}70%{opacity:.05}88%{opacity:.85}100%{opacity:1}}
+
+/* slab: scaleX from-left stamp — fastest entrance, print-press energy */
+@keyframes rts-slab{
+  0%  {opacity:0;transform:scaleX(0)    skewX(8deg)}
+  52% {opacity:1;transform:scaleX(1.05) skewX(-1deg)}
+  100%{opacity:1;transform:none}
+}
+
+/* thread: chars ride individual sine-wave Y offsets set via CSS var */
+@keyframes rts-thread{from{opacity:0;transform:translateY(var(--ty,18px))}to{opacity:1;transform:translateY(0)}}
+
+/* billboard: whole-line rotateY — different axis from flip (rotateX) */
+@keyframes rts-billboard{
+  from{opacity:0;transform:perspective(800px) rotateY(-32deg) translateX(-24px);filter:blur(3px)}
+  to  {opacity:1;transform:perspective(800px) rotateY(0)      translateX(0);    filter:blur(0)}
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   CLASS DECLARATIONS — all animations use animation-fill-mode: both so
+   the element stays at its final state without needing JS cleanup.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Batch 1 whole-element ───────────────────────────────────────────────── */
+.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}
+
+/* ── Batch 2 whole-element ───────────────────────────────────────────────── */
+.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}
+
+/* ── Batch 3 whole-element ───────────────────────────────────────────────── */
+.rts-unfurl     {animation:rts-unfurl    0.95s cubic-bezier(0.77,0,0.18,1) both}
+.rts-billboard  {animation:rts-billboard 0.95s cubic-bezier(0.16,1,0.3,1)  both;transform-origin:left center}
+
+/* ── Per-word / per-char spans (batch 1+2) ───────────────────────────────── */
+.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}
+.rts-fold-word    {display:inline-block;opacity:0;transform-origin:center bottom;animation:rts-fold 0.6s cubic-bezier(0.34,1.4,0.64,1) both}
+.rts-shear-word   {display:inline-block;opacity:0;animation:rts-shear   0.65s cubic-bezier(0.16,1,0.3,1) both}
+.rts-ripple-word  {display:inline-block;opacity:0;animation:rts-ripple-w 0.75s cubic-bezier(0.34,1.4,0.64,1) both}
+.rts-cinch-ch     {display:inline-block;opacity:0;transform-origin:center;animation:rts-cinch 0.55s cubic-bezier(0.34,1.2,0.64,1) both}
+.rts-tiltrise-word{display:inline-block;opacity:0;animation:rts-tiltrise 0.8s cubic-bezier(0.16,1,0.3,1) both}
+.rts-cardflip-ch  {display:inline-block;opacity:0;transform-origin:center bottom;animation:rts-cardflip 0.4s cubic-bezier(0.34,1.4,0.64,1) both}
+.rts-conv-l       {display:inline-block;opacity:0;animation:rts-conv-l  0.7s cubic-bezier(0.16,1,0.3,1) both}
+.rts-conv-r       {display:inline-block;opacity:0;animation:rts-conv-r  0.7s cubic-bezier(0.16,1,0.3,1) both}
+.rts-splitrise-t  {display:inline-block;opacity:0;animation:rts-splitrise-t 0.65s cubic-bezier(0.16,1,0.3,1) both}
+.rts-splitrise-b  {display:inline-block;opacity:0;animation:rts-splitrise-b 0.65s cubic-bezier(0.16,1,0.3,1) both}
+
+/* ── Per-word / per-char spans (batch 3) ────────────────────────────────── */
+.rts-tec-l      {display:inline-block;opacity:0;animation:rts-tec-l  0.65s cubic-bezier(0.16,1,0.3,1) both}
+.rts-tec-r      {display:inline-block;opacity:0;animation:rts-tec-r  0.65s cubic-bezier(0.16,1,0.3,1) both}
+.rts-strat-word {display:inline-block;opacity:0;animation:rts-strat  0.85s cubic-bezier(0.16,1,0.3,1) both}
+.rts-gwell-ch   {display:inline-block;opacity:0;animation:rts-gwell  0.62s cubic-bezier(0.36,0.07,0.19,0.97) both}
+.rts-orbit-word {display:inline-block;opacity:0;transform-origin:center;animation:rts-orbit 0.65s cubic-bezier(0.34,1.4,0.64,1) both}
+.rts-liquid-word{display:inline-block;opacity:0;transform-origin:center bottom;animation:rts-liquid 0.72s cubic-bezier(0.34,1.56,0.64,1) both}
+.rts-nf0        {display:inline-block;opacity:0;animation:rts-nf0 0.9s ease both}
+.rts-nf1        {display:inline-block;opacity:0;animation:rts-nf1 0.9s ease both}
+.rts-nf2        {display:inline-block;opacity:0;animation:rts-nf2 0.9s ease both}
+.rts-slab-word  {display:inline-block;opacity:0;transform-origin:left center;animation:rts-slab 0.5s cubic-bezier(0.77,0,0.18,1) both}
+.rts-thread-ch  {display:inline-block;opacity:0;animation:rts-thread 0.55s cubic-bezier(0.16,1,0.3,1) both}
+
+/* ── Batch 7 — 8 genuinely new mechanics ────────────────────────────────── */
+
+/* glassReveal — backdrop-filter blur evaporates as text solidifies */
+@keyframes rts-glass {
+  0%  { opacity:0; filter:blur(0px); backdrop-filter:blur(20px); transform:scale(1.03) }
+  35% { opacity:0.6; filter:blur(2px) }
+  100%{ opacity:1; filter:blur(0px); backdrop-filter:blur(0px); transform:scale(1) }
+}
+.rts-glass { animation:rts-glass 1.2s cubic-bezier(0.16,1,0.3,1) both }
+
+/* wordPop — per-word springs from 0 at its own center, pure scale */
+@keyframes rts-wpop {
+  0%  { opacity:0; transform:scale(0) }
+  55% { opacity:1; transform:scale(1.08) }
+  75% { transform:scale(0.97) }
+  100%{ transform:scale(1) }
+}
+.rts-wpop-word { display:inline-block; opacity:0; animation:rts-wpop 0.55s cubic-bezier(0.34,1.56,0.64,1) both }
+
+/* charDrop — pure gravity fall, no overshoot, no rotation */
+@keyframes rts-cdrop {
+  0%  { opacity:0; transform:translateY(-48px) }
+  100%{ opacity:1; transform:translateY(0) }
+}
+.rts-cdrop-ch { display:inline-block; opacity:0; animation:rts-cdrop 0.6s cubic-bezier(0.55,0,1,0.45) both }
+
+/* scanline — single-pixel horizontal clip expands to full height */
+@keyframes rts-scan {
+  0%  { clip-path:inset(49% 0 49% 0); opacity:0 }
+  15% { opacity:1 }
+  100%{ clip-path:inset(0% 0 0% 0) }
+}
+.rts-scan { animation:rts-scan 0.9s cubic-bezier(0.77,0,0.18,1) both }
+
+/* chromaShift — RGB channel offsets collapse to zero */
+@keyframes rts-chroma {
+  0%  { opacity:0; text-shadow: -8px 0 0 rgba(255,0,80,0.7), 8px 0 0 rgba(0,200,255,0.7) }
+  40% { opacity:1; text-shadow: -4px 0 0 rgba(255,0,80,0.35), 4px 0 0 rgba(0,200,255,0.35) }
+  100%{ text-shadow:none }
+}
+.rts-chroma { animation:rts-chroma 1s cubic-bezier(0.16,1,0.3,1) both }
+
+/* wordFade — pure cross-dissolve with warmth scale, no Y movement */
+@keyframes rts-wfade {
+  0%  { opacity:0; transform:scale(0.97) }
+  100%{ opacity:1; transform:scale(1) }
+}
+.rts-wfade-word { display:inline-block; opacity:0; animation:rts-wfade 0.9s cubic-bezier(0.4,0,0.2,1) both }
+
+/* rotateIn — full Y-axis card flip per word */
+@keyframes rts-rotatein {
+  0%  { opacity:0; transform:perspective(500px) rotateY(90deg) }
+  55% { opacity:1; transform:perspective(500px) rotateY(-8deg) }
+  100%{ transform:perspective(500px) rotateY(0deg) }
+}
+.rts-rotatein-word { display:inline-block; opacity:0; transform-origin:center; animation:rts-rotatein 0.6s cubic-bezier(0.34,1.4,0.64,1) both }
+
+/* pressIn — presses down to 0.92 then springs outward past 1 */
+@keyframes rts-pressin {
+  0%  { opacity:0; transform:scale(0.5) }
+  30% { opacity:1; transform:scale(0.92) }
+  60% { transform:scale(1.06) }
+  80% { transform:scale(0.98) }
+  100%{ transform:scale(1) }
+}
+.rts-pressin-word { display:inline-block; opacity:0; animation:rts-pressin 0.65s cubic-bezier(0.34,1.56,0.64,1) both }
 `;
 function injectAnimationStyles() {
     if (typeof document === "undefined")
@@ -160,53 +382,48 @@ function injectAnimationStyles() {
     style.textContent = CSS;
     document.head.appendChild(style);
 }
+// ─── Whole-element animation 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",
+    unfurl: "rts-unfurl",
+    billboard: "rts-billboard",
+    // Batch 7 — whole-element
+    glassReveal: "rts-glass",
+    scanline: "rts-scan",
+    chromaShift: "rts-chroma",
+};
 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) {
+function isSplitAnimation(animation) {
+    return !(animation in WHOLE_CLASS_MAP);
+}
+// ─── HTML split builders ──────────────────────────────────────────────────────
+function wrapWords(html, cls, step) {
     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);
+    return tokens.map((tok, i) => {
+        const delay = (i * step).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>`;
-    })
-        .join(" ");
+        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, step) {
     const result = [];
-    let inEm = false;
-    let delay = 0;
-    const step = 0.04;
-    let i = 0;
+    let inEm = false, delay = 0, i = 0;
     while (i < html.length) {
         if (html.startsWith("<em>", i)) {
             inEm = true;
@@ -224,14 +441,131 @@ 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;
         i++;
     }
     return result.join("");
 }
+function wrapGround(html, step) {
+    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 * step).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 wrapTectonic(html) {
+    var _a;
+    const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
+    return tokens.map((tok, i) => {
+        const cls = i % 2 === 0 ? "rts-tec-l" : "rts-tec-r";
+        const delay = (i * 0.09).toFixed(2);
+        if (tok.startsWith("<em>")) {
+            return `<em><span class="${cls}" style="animation-delay:${delay}s">${tok.slice(4, -5)}</span></em>`;
+        }
+        return `<span class="${cls}" style="animation-delay:${delay}s">${tok}</span>`;
+    }).join(" ");
+}
+function wrapNoiseFade(html) {
+    var _a;
+    const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
+    return tokens.map((tok, i) => {
+        const cls = `rts-nf${i % 3}`;
+        const delay = (i * 0.12).toFixed(2);
+        if (tok.startsWith("<em>")) {
+            return `<em><span class="${cls}" style="animation-delay:${delay}s">${tok.slice(4, -5)}</span></em>`;
+        }
+        return `<span class="${cls}" style="animation-delay:${delay}s">${tok}</span>`;
+    }).join(" ");
+}
+function wrapConverge(html) {
+    var _a;
+    const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
+    const mid = Math.ceil(tokens.length / 2);
+    return tokens.map((tok, i) => {
+        const isLeft = i < mid;
+        const dist = isLeft ? mid - 1 - i : i - mid;
+        const delay = (dist * 0.07).toFixed(2);
+        const cls = isLeft ? "rts-conv-l" : "rts-conv-r";
+        const inner = tok.startsWith("<em>") ? `<em>${tok.slice(4, -5)}</em>` : tok;
+        return `<span class="${cls}" style="animation-delay:${delay}s">${inner}</span>`;
+    }).join(" ");
+}
+function wrapRipple(html) {
+    var _a;
+    const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
+    const mid = Math.floor(tokens.length / 2);
+    return tokens.map((tok, i) => {
+        const delay = (Math.abs(i - mid) * 0.1).toFixed(2);
+        if (tok.startsWith("<em>")) {
+            return `<em><span class="rts-ripple-word" style="animation-delay:${delay}s">${tok.slice(4, -5)}</span></em>`;
+        }
+        return `<span class="rts-ripple-word" style="animation-delay:${delay}s">${tok}</span>`;
+    }).join(" ");
+}
+function wrapSplitRise(html) {
+    var _a;
+    const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
+    return tokens.map((tok, i) => {
+        const cls = i % 2 === 0 ? "rts-splitrise-t" : "rts-splitrise-b";
+        const delay = (i * 0.08).toFixed(2);
+        if (tok.startsWith("<em>")) {
+            return `<em><span class="${cls}" style="animation-delay:${delay}s">${tok.slice(4, -5)}</span></em>`;
+        }
+        return `<span class="${cls}" style="animation-delay:${delay}s">${tok}</span>`;
+    }).join(" ");
+}
+/**
+ * Thread: each char gets a sine-wave Y offset injected as a CSS custom
+ * property --ty so the keyframe can read it. Must be post-processed by
+ * Typography after innerHTML is set — see applyThreadOffsets().
+ */
+function wrapThread(html) {
+    return wrapChars(html, "rts-thread-ch", 0.04);
+}
+// ─── Public API ───────────────────────────────────────────────────────────────
+function buildSplitHTML(animation, html) {
+    switch (animation) {
+        // Batch 1
+        case "stagger": return wrapWords(html, "rts-word", 0.07);
+        case "letters": return wrapChars(html, "rts-letter", 0.04);
+        // Batch 2
+        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);
+        case "fold": return wrapWords(html, "rts-fold-word", 0.09);
+        case "shear": return wrapWords(html, "rts-shear-word", 0.08);
+        case "ripple": return wrapRipple(html);
+        case "cinch": return wrapChars(html, "rts-cinch-ch", 0.048);
+        case "tiltrise": return wrapWords(html, "rts-tiltrise-word", 0.09);
+        case "cardFlip": return wrapChars(html, "rts-cardflip-ch", 0.045);
+        case "converge": return wrapConverge(html);
+        case "splitRise": return wrapSplitRise(html);
+        // Batch 3
+        case "tectonic": return wrapTectonic(html);
+        case "stratify": return wrapWords(html, "rts-strat-word", 0.10);
+        case "gravityWell": return wrapChars(html, "rts-gwell-ch", 0.05);
+        case "orbit": return wrapWords(html, "rts-orbit-word", 0.10);
+        case "liquid": return wrapWords(html, "rts-liquid-word", 0.09);
+        case "noiseFade": return wrapNoiseFade(html);
+        case "slab": return wrapWords(html, "rts-slab-word", 0.11);
+        case "thread": return wrapThread(html);
+        // Batch 7 — split
+        case "wordPop": return wrapWords(html, "rts-wpop-word", 0.07);
+        case "charDrop": return wrapChars(html, "rts-cdrop-ch", 0.04);
+        case "wordFade": return wrapWords(html, "rts-wfade-word", 0.09);
+        case "rotateIn": return wrapWords(html, "rts-rotatein-word", 0.08);
+        case "pressIn": return wrapWords(html, "rts-pressin-word", 0.08);
+        default: return html;
+    }
+}
 
 // ─── Defaults ─────────────────────────────────────────────────────────────────
 const DEFAULT_THEME = {
@@ -396,7 +730,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 +744,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 +826,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;