animot-presenter 0.6.0 → 0.6.2

package/dist/utils/text-animate.js

@@ -11,19 +11,45 @@
  * Other modes (instant, typewriter, fade-words) are handled elsewhere by the
  * /present render path — this action no-ops for those.
  *
- * The action registers a restart fn into `window.__svgAnimRestart` so the
+ * Each runner builds a `currentSeek(elapsedMs)` closure that snapshots the
+ * setup state and computes the visual at any virtual time. The live RAF loop
+ * calls it with real elapsed; the MP4/GIF export pipeline calls it via
+ * `window.__seekAllTextAnims(virtualMs)` for frame-perfect captures.
+ *
+ * The action also registers a restart fn into `window.__svgAnimRestart` so the
  * server-side video export pipeline can reset all animations under the
  * virtual clock at the start of the slide hold (same pattern as FlowMarkers
  * and arrowClipDraw).
  */
+/** Cheap deterministic hash → [0, 1). Used in scramble/glitch so virtual-time
+ * seek (export) produces the same intermediate chars / jitter as live RAF.
+ * Without determinism, MP4/GIF would scramble different letters every frame. */
+function detRand(seed) {
+    const x = Math.sin(seed) * 43758.5453;
+    return x - Math.floor(x);
+}
 export function textAnimate(node, params) {
     let raf = 0;
     let originalContent = null;
     let activeMode = null;
+    // Each runner stores a per-frame `seek(elapsed)` function here so external
+    // drivers (the MP4/GIF export pipeline's virtual clock) can position the
+    // animation at any time without depending on real-time RAF. Cleared on
+    // restart/destroy. Real-time playback's RAF loop also calls this seek.
+    let currentSeek = null;
+    // Stable wrapper registered with the global seek registry. Used by the
+    // export pipeline (`__seekAllTextAnims`) to drive all active animations
+    // at the same virtual time as the rest of the frame capture.
+    const seekWrapper = (elapsedMs) => { if (currentSeek)
+        currentSeek(elapsedMs); };
+    if (typeof window !== 'undefined') {
+        (window.__textAnimSeek ||= []).push(seekWrapper);
+    }
     function clearAnim() {
         if (raf)
             cancelAnimationFrame(raf);
         raf = 0;
+        currentSeek = null;
     }
     function restore() {
         clearAnim();
@@ -48,17 +74,52 @@ export function textAnimate(node, params) {
         for (const ch of text) {
             const s = document.createElement('span');
             s.className = ch === ' ' ? 'ta-char ta-space' : 'ta-char';
-            s.textContent = ch === ' ' ? ' ' : ch; // nbsp so spaces render as fixed-width in inline-block
+            s.textContent = ch === ' ' ? ' ' : ch; // nbsp so spaces render as fixed-width in inline-block
             s.style.display = 'inline-block';
+            // Inherit gradient background + clip so per-char wrapping doesn't
+            // break gradient text. Parent text-element uses `background-clip:
+            // text` + `color: transparent`; without these inherits, char spans
+            // would only inherit transparent color and render invisible.
+            s.style.backgroundImage = 'inherit';
+            s.style.backgroundClip = 'inherit';
+            s.style.webkitBackgroundClip = 'inherit';
             frag.appendChild(s);
         }
         return frag;
     }
+    function wrapWords(text) {
+        const wrap = document.createElement('span');
+        wrap.className = 'ta-wrap';
+        const words = [];
+        const parts = text.split(/(\s+)/); // keep separators
+        for (const p of parts) {
+            if (/^\s+$/.test(p)) {
+                wrap.appendChild(document.createTextNode(p));
+            }
+            else if (p.length > 0) {
+                const w = document.createElement('span');
+                w.className = 'ta-word';
+                w.style.display = 'inline-block';
+                w.style.backgroundImage = 'inherit';
+                w.style.backgroundClip = 'inherit';
+                w.style.webkitBackgroundClip = 'inherit';
+                w.textContent = p;
+                wrap.appendChild(w);
+                words.push(w);
+            }
+        }
+        return { wrap, words };
+    }
+    // ─── Standardized runner pattern ────────────────────────────────────
+    //
+    // Each runner: (1) sets up state (chars list, durations, etc.), (2) builds
+    // `currentSeek(rawElapsed)` — the per-frame applier parameterized by ms,
+    // (3) primes initial DOM state, (4) starts a real-time RAF loop that just
+    // delegates to currentSeek with `performance.now() - start`.
+    //
+    // Loop modes wrap `rawElapsed` against the full cycle duration so seek
+    // works correctly at any timestamp. One-shot modes use elapsed directly.
     function runFadeLetters() {
-        // Source the text from params.content, not node.textContent — the host
-        // template intentionally renders nothing when an action mode is active
-        // (so we don't get a flash of unstyled text), which means the DOM is
-        // empty when this runs. Reading textContent here would yield ''.
         originalContent = params.content ?? '';
         node.innerHTML = '';
         const wrap = wrapChars(originalContent);
@@ -67,22 +128,21 @@ export function textAnimate(node, params) {
         const stagger = params.stagger ?? Math.max(20, Math.min(60, 600 / Math.max(1, chars.length)));
         const perLetter = 280;
         const total = stagger * chars.length + perLetter;
-        const dur = effectiveDuration();
-        const totalEffective = params.loop ? dur : total;
+        const cycle = Math.max(total, effectiveDuration());
         for (const c of chars)
             c.style.opacity = '0';
-        const start = performance.now();
-        function step(now) {
-            const elapsed = (now - start) % (params.loop ? totalEffective : Number.POSITIVE_INFINITY);
-            let allDone = true;
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
-                const localStart = i * stagger;
-                const t = Math.min(1, Math.max(0, (elapsed - localStart) / perLetter));
-                if (t < 1)
-                    allDone = false;
+                const t = Math.min(1, Math.max(0, (elapsed - i * stagger) / perLetter));
                 chars[i].style.opacity = String(t);
             }
-            if (params.loop || !allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
             else
                 raf = 0;
@@ -90,10 +150,6 @@ export function textAnimate(node, params) {
         raf = requestAnimationFrame(step);
     }
     function runBounceIn() {
-        // Source the text from params.content, not node.textContent — the host
-        // template intentionally renders nothing when an action mode is active
-        // (so we don't get a flash of unstyled text), which means the DOM is
-        // empty when this runs. Reading textContent here would yield ''.
         originalContent = params.content ?? '';
         node.innerHTML = '';
         const wrap = wrapChars(originalContent);
@@ -101,21 +157,17 @@ export function textAnimate(node, params) {
         const chars = Array.from(wrap.querySelectorAll('.ta-char'));
         const stagger = params.stagger ?? Math.max(30, Math.min(80, 800 / Math.max(1, chars.length)));
         const perLetter = 380;
+        const total = stagger * chars.length + perLetter;
+        const cycle = Math.max(total, effectiveDuration());
         for (const c of chars) {
             c.style.opacity = '0';
             c.style.transform = 'translateY(0.4em) scale(0.6)';
             c.style.transformOrigin = '50% 80%';
         }
-        // `let` because the loop branch resets `start = now` to begin a new cycle.
-        let start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
                 const t = Math.min(1, Math.max(0, (elapsed - i * stagger) / perLetter));
-                if (t < 1)
-                    allDone = false;
-                // Spring-ish easing — overshoots slightly then settles.
                 const eased = 1 - Math.pow(1 - t, 3);
                 const overshoot = Math.sin(t * Math.PI) * 0.1;
                 const scale = 0.6 + (1 - 0.6) * eased + overshoot;
@@ -123,46 +175,18 @@ export function textAnimate(node, params) {
                 chars[i].style.opacity = String(eased);
                 chars[i].style.transform = `translateY(${translate}em) scale(${scale})`;
             }
-            if (!allDone)
-                raf = requestAnimationFrame(step);
-            else if (params.loop) {
-                // Reset and loop — a small pause at the end keeps it readable.
-                const totalCycle = effectiveDuration();
-                if (now - start >= totalCycle) {
-                    for (const c of chars) {
-                        c.style.opacity = '0';
-                        c.style.transform = 'translateY(0.4em) scale(0.6)';
-                    }
-                    start = now;
-                }
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
-            }
-            else {
+            else
                 raf = 0;
-            }
         }
         raf = requestAnimationFrame(step);
     }
-    // ─── Phase 3 runners (mirrored from animot app) ───────────────────
-    function wrapWords(text) {
-        const wrap = document.createElement('span');
-        wrap.className = 'ta-wrap';
-        const words = [];
-        const parts = text.split(/(\s+)/);
-        for (const p of parts) {
-            if (/^\s+$/.test(p))
-                wrap.appendChild(document.createTextNode(p));
-            else if (p.length > 0) {
-                const w = document.createElement('span');
-                w.className = 'ta-word';
-                w.style.display = 'inline-block';
-                w.textContent = p;
-                wrap.appendChild(w);
-                words.push(w);
-            }
-        }
-        return { wrap, words };
-    }
     function runScrambleIn() {
         originalContent = params.content ?? '';
         node.innerHTML = '';
@@ -173,26 +197,32 @@ export function textAnimate(node, params) {
         const stagger = params.stagger ?? Math.max(30, Math.min(80, 800 / Math.max(1, chars.length)));
         const settleMs = 500;
         const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*';
-        const start = performance.now();
-        const dur = effectiveDuration();
-        function step(now) {
-            const elapsed = (now - start) % (params.loop ? Math.max(stagger * chars.length + settleMs, dur) : Number.POSITIVE_INFINITY);
-            let allDone = true;
+        const total = stagger * chars.length + settleMs;
+        const cycle = Math.max(total, effectiveDuration());
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
                 const local = elapsed - i * stagger;
                 if (local < 0) {
                     chars[i].textContent = ' ';
-                    allDone = false;
                     continue;
                 }
                 if (local >= settleMs) {
                     chars[i].textContent = finalText[i];
                     continue;
                 }
-                allDone = false;
-                chars[i].textContent = finalText[i] === ' ' ? ' ' : alphabet[(Math.random() * alphabet.length) | 0];
+                // Deterministic seed = char index + 60ms bucket → same char on
+                // every frame at the same virtual time. Replaces Math.random.
+                const bucket = Math.floor(local / 60);
+                const idx = Math.floor(detRand(i * 7919 + bucket * 31) * alphabet.length);
+                chars[i].textContent = finalText[i] === ' ' ? ' ' : alphabet[idx];
             }
-            if (params.loop || !allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
             else
                 raf = 0;
@@ -209,15 +239,16 @@ export function textAnimate(node, params) {
         const stagger = params.stagger ?? 60;
         const spinMs = 600;
         const reel = '0123456789!@#$%ABCDEFGH';
-        const start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        const total = stagger * chars.length + spinMs;
+        const cycle = Math.max(total, effectiveDuration());
+        for (const c of chars)
+            c.style.transform = 'translateY(-0.3em)';
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
                 const local = elapsed - i * stagger;
                 if (local < 0) {
                     chars[i].textContent = ' ';
-                    allDone = false;
                     continue;
                 }
                 if (local >= spinMs) {
@@ -225,19 +256,21 @@ export function textAnimate(node, params) {
                     chars[i].style.transform = 'translateY(0)';
                     continue;
                 }
-                allDone = false;
                 const t = local / spinMs;
                 const offsetY = (1 - t) * -0.3;
                 chars[i].textContent = finalText[i] === ' ' ? ' ' : reel[((local / 60) | 0) % reel.length];
                 chars[i].style.transform = `translateY(${offsetY}em)`;
             }
-            if (params.loop || !allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
             else
                 raf = 0;
         }
-        for (const c of chars)
-            c.style.transform = 'translateY(-0.3em)';
         raf = requestAnimationFrame(step);
     }
     function runDrop() {
@@ -248,18 +281,16 @@ export function textAnimate(node, params) {
         const chars = Array.from(wrap.querySelectorAll('.ta-char'));
         const stagger = params.stagger ?? Math.max(30, Math.min(90, 700 / Math.max(1, chars.length)));
         const perLetter = 520;
+        const total = stagger * chars.length + perLetter;
+        const cycle = Math.max(total, effectiveDuration());
         for (const c of chars) {
             c.style.opacity = '0';
             c.style.transform = 'translateY(-1.2em)';
         }
-        const start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
                 const t = Math.min(1, Math.max(0, (elapsed - i * stagger) / perLetter));
-                if (t < 1)
-                    allDone = false;
                 let b;
                 if (t < 0.5)
                     b = 4 * t * t * t;
@@ -270,7 +301,12 @@ export function textAnimate(node, params) {
                 chars[i].style.opacity = String(Math.min(1, t * 2));
                 chars[i].style.transform = `translateY(${translate}em)`;
             }
-            if (!allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
             else
                 raf = 0;
@@ -284,27 +320,33 @@ export function textAnimate(node, params) {
         node.appendChild(wrap);
         const chars = Array.from(wrap.querySelectorAll('.ta-char'));
         const dur = 1100;
+        const cycle = Math.max(dur, effectiveDuration());
         for (const c of chars) {
             c.style.opacity = '0';
         }
-        const start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
                 const localStart = (i / Math.max(1, chars.length)) * (dur * 0.4);
                 const t = Math.min(1, Math.max(0, (elapsed - localStart) / (dur - localStart)));
-                if (t < 1)
-                    allDone = false;
-                const jitter = t < 0.85 ? (Math.random() - 0.5) * 0.08 * (1 - t) : 0;
+                // Deterministic jitter — same per-frame seed reproduces in export.
+                const bucket = Math.floor(elapsed / 33);
+                const j = (detRand(i * 1009 + bucket * 17) - 0.5) * 0.08 * (1 - t);
+                const r1 = (detRand(i * 1031 + bucket * 23) - 0.5) * 4;
+                const r2 = (detRand(i * 1049 + bucket * 29) - 0.5) * 4;
                 const filter = t < 0.7
-                    ? `drop-shadow(${(Math.random() - 0.5) * 4}px 0 0 #06b6d4) drop-shadow(${(Math.random() - 0.5) * 4}px 0 0 #ec4899)`
+                    ? `drop-shadow(${r1}px 0 0 #06b6d4) drop-shadow(${r2}px 0 0 #ec4899)`
                     : 'none';
                 chars[i].style.opacity = String(t);
-                chars[i].style.transform = `translate(${jitter}em, ${jitter}em)`;
+                chars[i].style.transform = t < 0.85 ? `translate(${j}em, ${j}em)` : 'none';
                 chars[i].style.filter = filter;
             }
-            if (!allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < dur)
                 raf = requestAnimationFrame(step);
             else {
                 for (const c of chars) {
@@ -317,6 +359,9 @@ export function textAnimate(node, params) {
         raf = requestAnimationFrame(step);
     }
     function runMarquee() {
+        // Continuous horizontal scroll. Element overflow must be hidden via
+        // the outer .text-element container styles — we just translate the
+        // inner wrap leftwards by its own width then snap.
         originalContent = params.content ?? '';
         node.innerHTML = '';
         const wrap = document.createElement('span');
@@ -327,12 +372,14 @@ export function textAnimate(node, params) {
         node.style.overflow = 'hidden';
         node.style.whiteSpace = 'nowrap';
         node.appendChild(wrap);
-        const start = performance.now();
         const cycle = effectiveDuration() || 6000;
-        function step(now) {
-            const elapsed = (now - start) % cycle;
-            const pct = elapsed / cycle;
+        currentSeek = (raw) => {
+            const pct = (raw % cycle) / cycle;
             wrap.style.transform = `translateX(${-50 * pct}%)`;
+        };
+        const start = performance.now();
+        function step(now) {
+            currentSeek?.(now - start);
             raf = requestAnimationFrame(step);
         }
         raf = requestAnimationFrame(step);
@@ -345,23 +392,26 @@ export function textAnimate(node, params) {
         const chars = Array.from(wrap.querySelectorAll('.ta-char'));
         const stagger = params.stagger ?? Math.max(20, Math.min(60, 600 / Math.max(1, chars.length)));
         const perLetter = 600;
+        const total = stagger * chars.length + perLetter;
+        const cycle = Math.max(total, effectiveDuration());
         for (const c of chars) {
             c.style.opacity = '0';
             c.style.filter = 'blur(12px)';
         }
-        const start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
                 const t = Math.min(1, Math.max(0, (elapsed - i * stagger) / perLetter));
-                if (t < 1)
-                    allDone = false;
                 const eased = 1 - Math.pow(1 - t, 2);
                 chars[i].style.opacity = String(eased);
                 chars[i].style.filter = `blur(${(1 - eased) * 12}px)`;
             }
-            if (!allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
             else {
                 for (const c of chars)
@@ -379,26 +429,29 @@ export function textAnimate(node, params) {
         const chars = Array.from(wrap.querySelectorAll('.ta-char'));
         const stagger = params.stagger ?? 50;
         const perLetter = 450;
+        const total = stagger * chars.length + perLetter;
+        const cycle = Math.max(total, effectiveDuration());
         for (const c of chars) {
             c.style.opacity = '0';
             c.style.transform = 'scaleY(0.1)';
             c.style.transformOrigin = '50% 100%';
         }
-        const start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < chars.length; i++) {
                 const t = Math.min(1, Math.max(0, (elapsed - i * stagger) / perLetter));
-                if (t < 1)
-                    allDone = false;
                 const eased = 1 - Math.pow(1 - t, 4);
                 const overshoot = t > 0.8 ? Math.sin((t - 0.8) * Math.PI / 0.2) * 0.15 : 0;
                 const sy = 0.1 + (1 - 0.1) * eased + overshoot;
                 chars[i].style.opacity = String(Math.min(1, t * 1.5));
                 chars[i].style.transform = `scaleY(${sy})`;
             }
-            if (!allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
             else
                 raf = 0;
@@ -412,23 +465,26 @@ export function textAnimate(node, params) {
         node.appendChild(wrap);
         const stagger = params.stagger ?? 100;
         const perWord = 500;
+        const total = stagger * words.length + perWord;
+        const cycle = Math.max(total, effectiveDuration());
         for (const w of words) {
             w.style.opacity = '0';
             w.style.transform = 'translateY(0.6em)';
         }
-        const start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < words.length; i++) {
                 const t = Math.min(1, Math.max(0, (elapsed - i * stagger) / perWord));
-                if (t < 1)
-                    allDone = false;
                 const eased = 1 - Math.pow(1 - t, 3);
                 words[i].style.opacity = String(eased);
                 words[i].style.transform = `translateY(${(1 - eased) * 0.6}em)`;
             }
-            if (!allDone)
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
                 raf = requestAnimationFrame(step);
             else
                 raf = 0;
@@ -436,6 +492,8 @@ export function textAnimate(node, params) {
         raf = requestAnimationFrame(step);
     }
     function runWave() {
+        // Continuous wave bob across letters. Each character oscillates with
+        // a sine offset; phase is letter-index based so the wave rolls.
         originalContent = params.content ?? '';
         node.innerHTML = '';
         const wrap = wrapChars(originalContent);
@@ -443,13 +501,16 @@ export function textAnimate(node, params) {
         const chars = Array.from(wrap.querySelectorAll('.ta-char'));
         const cycle = effectiveDuration() || 1800;
         const amp = 0.18;
-        const start = performance.now();
-        function step(now) {
-            const elapsed = (now - start) / cycle;
+        currentSeek = (raw) => {
+            const t = raw / cycle;
             for (let i = 0; i < chars.length; i++) {
-                const phase = elapsed * Math.PI * 2 + (i / Math.max(1, chars.length)) * Math.PI * 1.4;
+                const phase = t * Math.PI * 2 + (i / Math.max(1, chars.length)) * Math.PI * 1.4;
                 chars[i].style.transform = `translateY(${Math.sin(phase) * amp}em)`;
             }
+        };
+        const start = performance.now();
+        function step(now) {
+            currentSeek?.(now - start);
             raf = requestAnimationFrame(step);
         }
         raf = requestAnimationFrame(step);
@@ -457,30 +518,35 @@ export function textAnimate(node, params) {
     function runTypewriterErase() {
         originalContent = params.content ?? '';
         const chars = Array.from(originalContent);
-        const speed = 50;
+        const speed = 50; // chars per second
         const charMs = 1000 / speed;
         const holdMs = 1200;
         const eraseMs = chars.length * charMs * 0.6;
         const cycle = chars.length * charMs + holdMs + eraseMs + 400;
-        const start = performance.now();
-        function step(now) {
-            const t = (now - start) % cycle;
+        currentSeek = (raw) => {
+            const t = raw % cycle;
             let shown;
-            if (t < chars.length * charMs)
+            if (t < chars.length * charMs) {
                 shown = Math.floor(t / charMs);
-            else if (t < chars.length * charMs + holdMs)
+            }
+            else if (t < chars.length * charMs + holdMs) {
                 shown = chars.length;
+            }
             else if (t < chars.length * charMs + holdMs + eraseMs) {
                 const eraseProgress = (t - chars.length * charMs - holdMs) / eraseMs;
                 shown = Math.max(0, chars.length - Math.floor(eraseProgress * chars.length));
             }
-            else
+            else {
                 shown = 0;
-            node.textContent = chars.slice(0, shown).join('') + (Math.floor(now / 500) % 2 === 0 ? '|' : '');
-            if (params.loop || t < cycle)
-                raf = requestAnimationFrame(step);
-            else
-                raf = 0;
+            }
+            // Deterministic cursor blink — same on/off at the same virtual time.
+            const cursor = Math.floor(raw / 500) % 2 === 0 ? '|' : '';
+            node.textContent = chars.slice(0, shown).join('') + cursor;
+        };
+        const start = performance.now();
+        function step(now) {
+            currentSeek?.(now - start);
+            raf = requestAnimationFrame(step);
         }
         raf = requestAnimationFrame(step);
     }
@@ -541,7 +607,6 @@ export function textAnimate(node, params) {
             }
         }
         catch {
-            // Fallback: even spacing across host width.
             totalWidth = w * 0.9;
             const stepW = totalWidth / Math.max(1, originalContent.length);
             for (let i = 0; i < originalContent.length; i++) {
@@ -549,12 +614,10 @@ export function textAnimate(node, params) {
                 charLengths.push(stepW);
             }
         }
-        // Honor textAlign by shifting the whole row in absolute coordinates.
         const baseX = align === 'center' ? (w - totalWidth) / 2
             : align === 'right' ? (w - totalWidth)
                 : 0;
         svg.removeChild(measure);
-        // Step 2 — build per-character <text> elements.
         const glyphs = [];
         for (let i = 0; i < originalContent.length; i++) {
             const ch = originalContent[i];
@@ -574,14 +637,6 @@ export function textAnimate(node, params) {
             t.style.fontStyle = fst;
             t.textContent = ch;
             svg.appendChild(t);
-            // Spaces have no visible stroke — skip dashoffset math, they reveal
-            // instantly. For everything else, we don't know the exact outline
-            // length per glyph, so we pick a generous upper bound that comfortably
-            // exceeds any realistic glyph contour at this font size, then use an
-            // explicit *huge* gap so the dash pattern can't repeat. Without the
-            // huge gap, complex letters (g, B, &, ampersand-heavy scripts) whose
-            // outline is longer than our `len` estimate would show a second dash
-            // cycle peeking through before the animation reaches them.
             const len = ch === ' ' ? 0 : Math.max(40, fs * 4 + charLengths[i] * 2.5);
             const gap = len * 4;
             t.style.strokeDasharray = `${len || 1} ${gap || 1}`;
@@ -589,53 +644,41 @@ export function textAnimate(node, params) {
             glyphs.push({ el: t, len });
         }
         const dur = effectiveDuration();
-        // Per-char duration with overlap. overlap=0.6 means each char starts after
-        // the previous is 60% drawn — looks like a continuous pen rather than a
-        // typewriter (overlap=1) or strict per-letter sequence (overlap=0).
         const n = originalContent.length;
         const overlap = 0.6;
-        // Solve: stagger * (n - 1) + perChar = dur, where stagger = perChar * overlap.
-        // → perChar * (overlap * (n - 1) + 1) = dur.
         const perChar = dur / Math.max(1, overlap * (n - 1) + 1);
         const stagger = perChar * overlap;
-        let start = performance.now();
-        function step(now) {
-            const elapsed = now - start;
-            let allDone = true;
+        const total = stagger * (n - 1) + perChar;
+        const cycle = Math.max(total, dur);
+        currentSeek = (raw) => {
+            const elapsed = params.loop ? (raw % cycle) : raw;
             for (let i = 0; i < glyphs.length; i++) {
                 const g = glyphs[i];
                 if (g.len === 0)
-                    continue; // space — already invisible
+                    continue;
                 const localStart = i * stagger;
                 const t = Math.min(1, Math.max(0, (elapsed - localStart) / perChar));
-                if (t < 1)
-                    allDone = false;
                 const eased = 1 - Math.pow(1 - t, 3);
                 g.el.style.strokeDashoffset = String(g.len * (1 - eased));
-                // Cross-fade fill in over the last 30% of the glyph's draw so the
-                // finished letter reads cleanly. Otherwise thin script fonts look
-                // hollow and don't match the rest of the slide's text.
                 if (t > 0.7) {
                     const fillT = (t - 0.7) / 0.3;
                     g.el.setAttribute('fill', color);
                     g.el.setAttribute('fill-opacity', String(fillT));
                 }
-            }
-            if (!allDone) {
-                raf = requestAnimationFrame(step);
-            }
-            else if (params.loop) {
-                for (const g of glyphs) {
-                    g.el.style.strokeDashoffset = String(g.len || 1);
+                else {
                     g.el.setAttribute('fill', 'transparent');
                     g.el.removeAttribute('fill-opacity');
                 }
-                start = now;
-                raf = requestAnimationFrame(step);
             }
-            else {
+        };
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            currentSeek?.(elapsed);
+            if (params.loop || elapsed < total)
+                raf = requestAnimationFrame(step);
+            else
                 raf = 0;
-            }
         }
         raf = requestAnimationFrame(step);
     }
@@ -706,6 +749,8 @@ export function textAnimate(node, params) {
         destroy() {
             restore();
             if (typeof window !== 'undefined') {
+                // Drop both registries (restart + seek) so a destroyed action's
+                // closure can be GC'd cleanly.
                 const reg = window.__svgAnimRestart;
                 const fn = node.__svgAnimRestart;
                 if (reg && fn) {
@@ -713,6 +758,12 @@ export function textAnimate(node, params) {
                     if (idx >= 0)
                         reg.splice(idx, 1);
                 }
+                const seekReg = window.__textAnimSeek;
+                if (seekReg) {
+                    const idx = seekReg.indexOf(seekWrapper);
+                    if (idx >= 0)
+                        seekReg.splice(idx, 1);
+                }
             }
         }
     };