animot-presenter 0.5.5 → 0.5.6

package/dist/engine/utils.d.ts

@@ -15,13 +15,22 @@ export declare function computeFloatSpeed(cfg: {
     speed: number;
     speedRandomness?: number;
 }, seed: string): number;
-export declare function getBackgroundStyle(bg: {
+interface GradientStop {
+    color: string;
+    position: number;
+}
+interface BgInput {
     type: string;
     color?: string;
     gradient?: {
         type: string;
         angle?: number;
         colors: string[];
+        stops?: GradientStop[];
+        radialShape?: 'circle' | 'ellipse';
+        radialPosition?: string;
     };
     image?: string;
-}): string;
+}
+export declare function getBackgroundStyle(bg: BgInput): string;
+export {};

package/dist/engine/utils.js

@@ -73,16 +73,28 @@ export function computeFloatSpeed(cfg, seed) {
         return cfg.speed;
     return cfg.speed * (1 - r + r * hashFraction(seed, 2));
 }
+function buildStops(colors, stops) {
+    if (stops && stops.length > 0) {
+        const sorted = [...stops].sort((a, b) => a.position - b.position);
+        return sorted.map((s) => `${s.color} ${s.position}%`).join(', ');
+    }
+    if (colors.length <= 1)
+        return colors[0] ?? '#000';
+    return colors.map((c, i) => `${c} ${(i / (colors.length - 1)) * 100}%`).join(', ');
+}
 export function getBackgroundStyle(bg) {
     if (bg.type === 'transparent')
         return 'background: transparent';
     if (bg.type === 'solid')
         return `background-color: ${bg.color ?? 'transparent'}`;
     if (bg.type === 'gradient' && bg.gradient) {
-        const { type, angle = 135, colors } = bg.gradient;
-        if (type === 'linear')
-            return `background: linear-gradient(${angle}deg, ${colors.join(', ')})`;
-        return `background: radial-gradient(circle, ${colors.join(', ')})`;
+        const { type, angle = 135, colors, stops, radialShape = 'circle', radialPosition = 'center' } = bg.gradient;
+        const stopList = buildStops(colors, stops);
+        if (type === 'conic')
+            return `background: conic-gradient(from ${angle}deg at ${radialPosition}, ${stopList})`;
+        if (type === 'radial')
+            return `background: radial-gradient(${radialShape} at ${radialPosition}, ${stopList})`;
+        return `background: linear-gradient(${angle}deg, ${stopList})`;
     }
     if (bg.type === 'image' && bg.image)
         return `background-image: url(${bg.image}); background-size: cover; background-position: center`;

package/dist/types.d.ts

@@ -107,10 +107,13 @@ export interface CodeElement extends BaseElement {
     headerRadius?: number;
     tabRadius?: number;
 }
-export type TextAnimationMode = 'instant' | 'typewriter' | 'fade-words';
+export type TextAnimationMode = 'instant' | 'typewriter' | 'fade-words' | 'fade-letters' | 'handwriting' | 'bounce-in';
 export interface TextAnimationConfig {
     mode: TextAnimationMode;
     typewriterSpeed: number;
+    duration?: number;
+    stagger?: number;
+    loop?: boolean;
 }
 export interface TextElement extends BaseElement {
     type: 'text';
@@ -316,13 +319,20 @@ export interface ConfettiConfig {
     startVelocity: number;
     scalar: number;
 }
+export interface GradientStop {
+    color: string;
+    position: number;
+}
 export interface CanvasBackground {
     type: 'solid' | 'gradient' | 'image' | 'transparent';
     color?: string;
     gradient?: {
-        type: 'linear' | 'radial';
+        type: 'linear' | 'radial' | 'conic';
         angle?: number;
         colors: string[];
+        stops?: GradientStop[];
+        radialShape?: 'circle' | 'ellipse';
+        radialPosition?: string;
     };
     image?: string;
     particles?: ParticlesConfig;

package/dist/utils/text-animate.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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 type TextAnimateMode = 'instant' | 'typewriter' | 'fade-words' | 'fade-letters' | 'handwriting' | 'bounce-in';
+export interface TextAnimateParams {
+    enabled: boolean;
+    mode: TextAnimateMode;
+    content: string;
+    /** Total duration in ms for handwriting; for stagger modes it's the per-letter
+     * delay budget — actual total = stagger * letterCount + perLetterDuration. */
+    duration: number;
+    stagger?: number;
+    loop?: boolean;
+    /** Cosmetic: applied to the inner SVG text in handwriting mode. */
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: number | string;
+    fontStyle?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    /** Slide loop duration; when present the effective duration aligns to a
+     * cycle that fits an integer number of times into slide_duration so GIF
+     * loops are seamless in Flow mode. */
+    slideDuration?: number;
+    /** Bumped by the host component when ANY meaningful prop changes — without
+     * this the action would silently keep running with stale values. */
+    key?: unknown;
+}
+export declare function textAnimate(node: HTMLElement, params: TextAnimateParams): {
+    update(p: TextAnimateParams): void;
+    destroy(): void;
+};

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.5.5",
+	"version": "0.5.6",
 	"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",