animot-presenter 0.5.5 → 0.5.7

package/dist/utils/text-animate.js

@@ -0,0 +1,348 @@
+/**
+ * Svelte action: animates a text element's content via JS RAF.
+ *
+ * Implemented modes:
+ *   • fade-letters — wraps each character in a <span> and fades them in with stagger
+ *   • bounce-in    — same wrapping, scale+translate pop per character
+ *   • handwriting  — re-renders the text inside an <svg><text> with stroke + transparent
+ *                    fill and animates `stroke-dashoffset` so the text appears to be
+ *                    drawn left-to-right (works best with cursive/script fonts)
+ *
+ * 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
+ * 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).
+ */
+export function textAnimate(node, params) {
+    let raf = 0;
+    let originalContent = null;
+    let activeMode = null;
+    function clearAnim() {
+        if (raf)
+            cancelAnimationFrame(raf);
+        raf = 0;
+    }
+    function restore() {
+        clearAnim();
+        // Replace whatever we injected with the original content. Doing this on
+        // every (re)start keeps the DOM clean when the user toggles modes.
+        if (originalContent !== null)
+            node.textContent = originalContent;
+    }
+    function effectiveDuration() {
+        const requested = Math.max(50, params.duration || 800);
+        if (params.slideDuration && params.slideDuration > 0 && params.loop) {
+            return params.slideDuration / Math.max(1, Math.round(params.slideDuration / requested));
+        }
+        return requested;
+    }
+    /** Wraps each character of `text` in a <span class="ta-char">.  Spaces are
+     * also wrapped (with a special class) so the per-letter animation runs
+     * uniformly across word boundaries while still preserving spacing. */
+    function wrapChars(text) {
+        const frag = document.createElement('span');
+        frag.className = 'ta-wrap';
+        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.style.display = 'inline-block';
+            frag.appendChild(s);
+        }
+        return frag;
+    }
+    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);
+        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 = 280;
+        const total = stagger * chars.length + perLetter;
+        const dur = effectiveDuration();
+        const totalEffective = params.loop ? dur : total;
+        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;
+            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;
+                chars[i].style.opacity = String(t);
+            }
+            if (params.loop || !allDone)
+                raf = requestAnimationFrame(step);
+            else
+                raf = 0;
+        }
+        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);
+        node.appendChild(wrap);
+        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;
+        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;
+            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;
+                const translate = (1 - eased) * 0.4;
+                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;
+                }
+                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
+        // hidden <text> first (the only reliable way to get kerning/spacing
+        // matching what the browser would draw) then build per-glyph elements
+        // laid out in absolute SVG coordinates. Each glyph is revealed in turn
+        // with a small overlap so the effect reads like a continuous pen, not
+        // a typewriter.
+        originalContent = params.content ?? '';
+        node.innerHTML = '';
+        if (!originalContent)
+            return;
+        const color = params.color ?? '#ffffff';
+        const fs = params.fontSize ?? 48;
+        const ff = params.fontFamily ?? 'inherit';
+        const fw = params.fontWeight ?? 400;
+        const fst = params.fontStyle ?? 'normal';
+        const align = params.textAlign ?? 'left';
+        const svgNS = 'http://www.w3.org/2000/svg';
+        const svg = document.createElementNS(svgNS, 'svg');
+        svg.setAttribute('width', '100%');
+        svg.setAttribute('height', '100%');
+        const w = Math.max(1, node.clientWidth);
+        const h = Math.max(1, node.clientHeight);
+        svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        svg.style.overflow = 'visible';
+        node.appendChild(svg);
+        // Step 1 — measure char positions from a hidden full-string render.
+        const measure = document.createElementNS(svgNS, 'text');
+        measure.setAttribute('x', '0');
+        measure.setAttribute('y', '50%');
+        measure.setAttribute('dominant-baseline', 'middle');
+        measure.setAttribute('text-anchor', 'start');
+        measure.setAttribute('visibility', 'hidden');
+        measure.style.fontSize = `${fs}px`;
+        measure.style.fontFamily = ff;
+        measure.style.fontWeight = String(fw);
+        measure.style.fontStyle = fst;
+        measure.textContent = originalContent;
+        svg.appendChild(measure);
+        const charPositions = [];
+        const charLengths = [];
+        let totalWidth = 0;
+        try {
+            const t = measure;
+            totalWidth = t.getComputedTextLength();
+            for (let i = 0; i < originalContent.length; i++) {
+                const pt = t.getStartPositionOfChar(i);
+                charPositions.push(pt.x);
+                const nextX = i + 1 < originalContent.length
+                    ? t.getStartPositionOfChar(i + 1).x
+                    : pt.x + (totalWidth - pt.x);
+                charLengths.push(Math.max(1, nextX - pt.x));
+            }
+        }
+        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++) {
+                charPositions.push(i * stepW);
+                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];
+            const t = document.createElementNS(svgNS, 'text');
+            t.setAttribute('x', String(baseX + charPositions[i]));
+            t.setAttribute('y', '50%');
+            t.setAttribute('dominant-baseline', 'middle');
+            t.setAttribute('text-anchor', 'start');
+            t.setAttribute('fill', 'transparent');
+            t.setAttribute('stroke', color);
+            t.setAttribute('stroke-width', '1');
+            t.setAttribute('stroke-linecap', 'round');
+            t.setAttribute('stroke-linejoin', 'round');
+            t.style.fontSize = `${fs}px`;
+            t.style.fontFamily = ff;
+            t.style.fontWeight = String(fw);
+            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}`;
+            t.style.strokeDashoffset = String(len || 1);
+            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;
+            for (let i = 0; i < glyphs.length; i++) {
+                const g = glyphs[i];
+                if (g.len === 0)
+                    continue; // space — already invisible
+                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);
+                    g.el.setAttribute('fill', 'transparent');
+                    g.el.removeAttribute('fill-opacity');
+                }
+                start = now;
+                raf = requestAnimationFrame(step);
+            }
+            else {
+                raf = 0;
+            }
+        }
+        raf = requestAnimationFrame(step);
+    }
+    function run() {
+        restore();
+        activeMode = params.mode;
+        if (!params.enabled)
+            return;
+        switch (params.mode) {
+            case 'fade-letters':
+                runFadeLetters();
+                break;
+            case 'bounce-in':
+                runBounceIn();
+                break;
+            case 'handwriting':
+                runHandwriting();
+                break;
+            default: /* other modes handled elsewhere */ break;
+        }
+    }
+    queueMicrotask(run);
+    if (typeof window !== 'undefined') {
+        const reg = (window.__svgAnimRestart ||= []);
+        reg.push(run);
+        node.__svgAnimRestart = run;
+    }
+    let lastKey = params.key;
+    return {
+        update(p) {
+            const keyChanged = p.key !== lastKey || p.mode !== activeMode;
+            params = p;
+            if (keyChanged) {
+                lastKey = p.key;
+                queueMicrotask(run);
+            }
+        },
+        destroy() {
+            restore();
+            if (typeof window !== 'undefined') {
+                const reg = window.__svgAnimRestart;
+                const fn = node.__svgAnimRestart;
+                if (reg && fn) {
+                    const idx = reg.indexOf(fn);
+                    if (idx >= 0)
+                        reg.splice(idx, 1);
+                }
+            }
+        }
+    };
+}

package/dist/utils/video-embed.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Parse a video URL into an embed descriptor. Supports YouTube and Vimeo.
+ * Returns null for URLs we don't recognize (the caller should treat those as
+ * raw `<video src>` files). Used by VideoElement renderers to switch between
+ * `<video>` and `<iframe>` rendering.
+ *
+ * Important: embed URLs cannot be captured by the server-side export pipeline
+ * (cross-origin iframe content isn't accessible to Puppeteer's `__tick` virtual
+ * clock and YouTube's player ignores any external time signal). We surface
+ * this as a warning in the properties panel.
+ */
+export interface VideoEmbed {
+    provider: 'youtube' | 'vimeo';
+    /** ID of the video on the provider (`dQw4w9WgXcQ` for YouTube, `123456` for Vimeo). */
+    id: string;
+    /** Fully-formed src for an `<iframe>`. */
+    embedSrc: string;
+    /** A poster image we can probe for from the provider. */
+    thumbnail?: string;
+}
+export interface ParseEmbedOptions {
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    startTime?: number;
+    endTime?: number;
+    showControls?: boolean;
+}
+export declare function parseEmbedUrl(url: string, opts?: ParseEmbedOptions): VideoEmbed | null;
+export declare function isEmbedUrl(url: string): boolean;

package/dist/utils/video-embed.js

@@ -0,0 +1,70 @@
+/**
+ * Parse a video URL into an embed descriptor. Supports YouTube and Vimeo.
+ * Returns null for URLs we don't recognize (the caller should treat those as
+ * raw `<video src>` files). Used by VideoElement renderers to switch between
+ * `<video>` and `<iframe>` rendering.
+ *
+ * Important: embed URLs cannot be captured by the server-side export pipeline
+ * (cross-origin iframe content isn't accessible to Puppeteer's `__tick` virtual
+ * clock and YouTube's player ignores any external time signal). We surface
+ * this as a warning in the properties panel.
+ */
+const YOUTUBE_RE = /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([A-Za-z0-9_-]{6,16})/;
+const VIMEO_RE = /vimeo\.com\/(?:video\/)?(\d{6,12})/;
+export function parseEmbedUrl(url, opts = {}) {
+    if (!url)
+        return null;
+    if (url.startsWith('data:'))
+        return null;
+    const ytMatch = url.match(YOUTUBE_RE);
+    if (ytMatch) {
+        const id = ytMatch[1];
+        // YouTube's embed parameters: muted+autoplay = playsinline-on-mobile-friendly,
+        // loop requires both `loop=1` AND `playlist=<same id>` (quirk of YouTube's API).
+        const params = [];
+        if (opts.autoplay)
+            params.push('autoplay=1');
+        if (opts.muted || opts.autoplay)
+            params.push('mute=1'); // browsers block unmuted autoplay
+        if (opts.loop) {
+            params.push('loop=1');
+            params.push(`playlist=${id}`);
+        }
+        if (opts.startTime)
+            params.push(`start=${Math.round(opts.startTime)}`);
+        if (opts.endTime)
+            params.push(`end=${Math.round(opts.endTime)}`);
+        if (!opts.showControls)
+            params.push('controls=0');
+        params.push('rel=0', 'modestbranding=1', 'playsinline=1');
+        return {
+            provider: 'youtube',
+            id,
+            embedSrc: `https://www.youtube.com/embed/${id}?${params.join('&')}`,
+            thumbnail: `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`
+        };
+    }
+    const vimMatch = url.match(VIMEO_RE);
+    if (vimMatch) {
+        const id = vimMatch[1];
+        const params = [];
+        if (opts.autoplay)
+            params.push('autoplay=1');
+        if (opts.muted || opts.autoplay)
+            params.push('muted=1');
+        if (opts.loop)
+            params.push('loop=1');
+        if (!opts.showControls)
+            params.push('controls=0');
+        params.push('byline=0', 'portrait=0', 'title=0');
+        return {
+            provider: 'vimeo',
+            id,
+            embedSrc: `https://player.vimeo.com/video/${id}?${params.join('&')}`
+        };
+    }
+    return null;
+}
+export function isEmbedUrl(url) {
+    return parseEmbedUrl(url) !== null;
+}

package/package.json

@@ -1,84 +1,84 @@
-{
-	"name": "animot-presenter",
-	"version": "0.5.5",
-	"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",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"svelte": "./dist/index.js",
-			"types": "./dist/index.d.ts",
-			"default": "./dist/index.js"
-		},
-		"./element": {
-			"import": "./dist/cdn/animot-presenter.esm.js",
-			"require": "./dist/cdn/animot-presenter.min.js"
-		},
-		"./cdn": {
-			"import": "./dist/cdn/animot-presenter.esm.js",
-			"require": "./dist/cdn/animot-presenter.min.js"
-		},
-		"./styles": "./dist/styles/presenter.css"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "npm run build:svelte && npm run build:element",
-		"build:svelte": "svelte-kit sync && svelte-package -o dist",
-		"build:element": "vite build --config vite.element.config.ts",
-		"package": "npm run build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"prepublishOnly": "npm run build"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"peerDependenciesMeta": {
-		"svelte": {
-			"optional": true
-		}
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"@types/canvas-confetti": "^1.9.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.0"
-	},
-	"dependencies": {
-		"@animotion/motion": "^2.0.1",
-		"canvas-confetti": "^1.9.4",
-		"shiki": "^1.0.0"
-	},
-	"keywords": [
-		"svelte",
-		"react",
-		"vue",
-		"angular",
-		"web-component",
-		"animation",
-		"presentation",
-		"slides",
-		"morphing",
-		"animot",
-		"code-animation",
-		"typewriter",
-		"charts",
-		"particles"
-	],
-	"license": "BUSL-1.1",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/beeblock/animot-presenter"
-	}
-}
+{
+	"name": "animot-presenter",
+	"version": "0.5.7",
+	"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",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"svelte": "./dist/index.js",
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./element": {
+			"import": "./dist/cdn/animot-presenter.esm.js",
+			"require": "./dist/cdn/animot-presenter.min.js"
+		},
+		"./cdn": {
+			"import": "./dist/cdn/animot-presenter.esm.js",
+			"require": "./dist/cdn/animot-presenter.min.js"
+		},
+		"./styles": "./dist/styles/presenter.css"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "npm run build:svelte && npm run build:element",
+		"build:svelte": "svelte-kit sync && svelte-package -o dist",
+		"build:element": "vite build --config vite.element.config.ts",
+		"package": "npm run build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"peerDependenciesMeta": {
+		"svelte": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/canvas-confetti": "^1.9.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.0"
+	},
+	"dependencies": {
+		"@animotion/motion": "^2.0.1",
+		"canvas-confetti": "^1.9.4",
+		"shiki": "^1.0.0"
+	},
+	"keywords": [
+		"svelte",
+		"react",
+		"vue",
+		"angular",
+		"web-component",
+		"animation",
+		"presentation",
+		"slides",
+		"morphing",
+		"animot",
+		"code-animation",
+		"typewriter",
+		"charts",
+		"particles"
+	],
+	"license": "BUSL-1.1",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/beeblock/animot-presenter"
+	}
+}