animot-presenter 0.5.25 → 0.6.0

package/dist/utils/text-animate.js

@@ -143,6 +143,347 @@ export function textAnimate(node, params) {
         }
         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 = '';
+        const wrap = wrapChars(originalContent);
+        node.appendChild(wrap);
+        const chars = Array.from(wrap.querySelectorAll('.ta-char'));
+        const finalText = Array.from(originalContent);
+        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;
+            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];
+            }
+            if (params.loop || !allDone)
+                raf = requestAnimationFrame(step);
+            else
+                raf = 0;
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runSlotMachine() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const wrap = wrapChars(originalContent);
+        node.appendChild(wrap);
+        const chars = Array.from(wrap.querySelectorAll('.ta-char'));
+        const finalText = Array.from(originalContent);
+        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;
+            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) {
+                    chars[i].textContent = finalText[i];
+                    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)
+                raf = requestAnimationFrame(step);
+            else
+                raf = 0;
+        }
+        for (const c of chars)
+            c.style.transform = 'translateY(-0.3em)';
+        raf = requestAnimationFrame(step);
+    }
+    function runDrop() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const wrap = wrapChars(originalContent);
+        node.appendChild(wrap);
+        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;
+        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;
+            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;
+                else
+                    b = 1 - Math.pow(-2 * t + 2, 3) / 2;
+                const overshoot = t > 0.7 ? Math.sin((t - 0.7) * Math.PI / 0.3) * 0.08 : 0;
+                const translate = (1 - b) * -1.2 + overshoot;
+                chars[i].style.opacity = String(Math.min(1, t * 2));
+                chars[i].style.transform = `translateY(${translate}em)`;
+            }
+            if (!allDone)
+                raf = requestAnimationFrame(step);
+            else
+                raf = 0;
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runGlitch() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const wrap = wrapChars(originalContent);
+        node.appendChild(wrap);
+        const chars = Array.from(wrap.querySelectorAll('.ta-char'));
+        const dur = 1100;
+        for (const c of chars) {
+            c.style.opacity = '0';
+        }
+        const start = performance.now();
+        function step(now) {
+            const elapsed = now - start;
+            let allDone = true;
+            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;
+                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)`
+                    : 'none';
+                chars[i].style.opacity = String(t);
+                chars[i].style.transform = `translate(${jitter}em, ${jitter}em)`;
+                chars[i].style.filter = filter;
+            }
+            if (!allDone)
+                raf = requestAnimationFrame(step);
+            else {
+                for (const c of chars) {
+                    c.style.filter = 'none';
+                    c.style.transform = 'none';
+                }
+                raf = 0;
+            }
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runMarquee() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const wrap = document.createElement('span');
+        wrap.className = 'ta-wrap';
+        wrap.style.display = 'inline-block';
+        wrap.style.whiteSpace = 'nowrap';
+        wrap.textContent = originalContent + '   ' + originalContent;
+        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;
+            wrap.style.transform = `translateX(${-50 * pct}%)`;
+            raf = requestAnimationFrame(step);
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runBlurIn() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const wrap = wrapChars(originalContent);
+        node.appendChild(wrap);
+        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;
+        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;
+            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)
+                raf = requestAnimationFrame(step);
+            else {
+                for (const c of chars)
+                    c.style.filter = 'none';
+                raf = 0;
+            }
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runStretch() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const wrap = wrapChars(originalContent);
+        node.appendChild(wrap);
+        const chars = Array.from(wrap.querySelectorAll('.ta-char'));
+        const stagger = params.stagger ?? 50;
+        const perLetter = 450;
+        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;
+            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)
+                raf = requestAnimationFrame(step);
+            else
+                raf = 0;
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runSlideWords() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const { wrap, words } = wrapWords(originalContent);
+        node.appendChild(wrap);
+        const stagger = params.stagger ?? 100;
+        const perWord = 500;
+        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;
+            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)
+                raf = requestAnimationFrame(step);
+            else
+                raf = 0;
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runWave() {
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        const wrap = wrapChars(originalContent);
+        node.appendChild(wrap);
+        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;
+            for (let i = 0; i < chars.length; i++) {
+                const phase = elapsed * Math.PI * 2 + (i / Math.max(1, chars.length)) * Math.PI * 1.4;
+                chars[i].style.transform = `translateY(${Math.sin(phase) * amp}em)`;
+            }
+            raf = requestAnimationFrame(step);
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function runTypewriterErase() {
+        originalContent = params.content ?? '';
+        const chars = Array.from(originalContent);
+        const speed = 50;
+        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;
+            let shown;
+            if (t < chars.length * charMs)
+                shown = Math.floor(t / charMs);
+            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
+                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;
+        }
+        raf = requestAnimationFrame(step);
+    }
     function runHandwriting() {
         // Real per-character handwriting: each glyph is its own <text> element
         // with its own stroke-dasharray. We measure char positions from a single
@@ -313,6 +654,36 @@ export function textAnimate(node, params) {
             case 'handwriting':
                 runHandwriting();
                 break;
+            case 'scramble-in':
+                runScrambleIn();
+                break;
+            case 'slot-machine':
+                runSlotMachine();
+                break;
+            case 'drop':
+                runDrop();
+                break;
+            case 'glitch':
+                runGlitch();
+                break;
+            case 'marquee':
+                runMarquee();
+                break;
+            case 'blur-in':
+                runBlurIn();
+                break;
+            case 'stretch':
+                runStretch();
+                break;
+            case 'slide-words':
+                runSlideWords();
+                break;
+            case 'wave':
+                runWave();
+                break;
+            case 'typewriter-erase':
+                runTypewriterErase();
+                break;
             default: /* other modes handled elsewhere */ break;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.5.25",
+	"version": "0.6.0",
 	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
 	"type": "module",
 	"svelte": "./dist/index.js",