animot-presenter 0.2.9 → 0.5.4

package/dist/renderers/IconRenderer.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { IconElement } from '../types';
+	import { traceSvgPaths } from '../utils/trace-svg-paths';
+
 	interface Props { element: IconElement; }
 	let { element }: Props = $props();
 
@@ -8,9 +10,25 @@
 		const stroke = element.fillMode === 'stroke' || element.fillMode === 'both' ? element.color : 'none';
 		return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${fill}" stroke="${stroke}" stroke-width="${element.strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${element.svgContent}</svg>`;
 	});
+
+	const animMode = $derived(element.animation?.mode ?? 'none');
+	const animDur = $derived(element.animation?.duration ?? 800);
+	const animLoop = $derived(element.animation?.loop ?? false);
+	const animReverse = $derived(element.animation?.direction === 'reverse');
+	const animKey = $derived(`${element.iconName}-${element.iconLibrary}-${animMode}-${animDur}-${animLoop}-${animReverse}`);
 </script>
 
-<div class="icon-element">{@html svgMarkup()}</div>
+<div
+	class="icon-element"
+	use:traceSvgPaths={{
+		enabled: animMode !== 'none',
+		mode: animMode as 'none' | 'draw' | 'undraw' | 'draw-undraw' | 'flow',
+		duration: animDur,
+		loop: animLoop,
+		reverse: animReverse,
+		key: animKey
+	}}
+>{@html svgMarkup()}</div>
 
 <style>
 	.icon-element { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

package/dist/styles/presenter.css

@@ -46,3 +46,56 @@
 	83%  { translate: calc(-0.2 * var(--float-amp, 10px)) calc(0.8 * var(--float-amp, 10px)); }
 	100% { translate: 0 0; }
 }
+
+/* SVG path-trace animations (Icon + Svg elements) */
+.animot-svg-element.icon-anim-draw path,
+.animot-svg-element.icon-anim-draw circle,
+.animot-svg-element.icon-anim-draw rect,
+.animot-svg-element.icon-anim-draw line,
+.animot-svg-element.icon-anim-draw polyline,
+.animot-svg-element.icon-anim-draw polygon,
+.animot-svg-element.icon-anim-draw ellipse {
+	stroke-dashoffset: var(--path-len, 1000);
+	animation: animot-svg-draw var(--icon-anim-duration, 800ms) ease-out forwards;
+}
+.animot-svg-element.icon-anim-undraw path,
+.animot-svg-element.icon-anim-undraw circle,
+.animot-svg-element.icon-anim-undraw rect,
+.animot-svg-element.icon-anim-undraw line,
+.animot-svg-element.icon-anim-undraw polyline,
+.animot-svg-element.icon-anim-undraw polygon,
+.animot-svg-element.icon-anim-undraw ellipse {
+	stroke-dashoffset: 0;
+	animation: animot-svg-undraw var(--icon-anim-duration, 800ms) ease-out forwards;
+}
+.animot-svg-element.icon-anim-draw-undraw path,
+.animot-svg-element.icon-anim-draw-undraw circle,
+.animot-svg-element.icon-anim-draw-undraw rect,
+.animot-svg-element.icon-anim-draw-undraw line,
+.animot-svg-element.icon-anim-draw-undraw polyline,
+.animot-svg-element.icon-anim-draw-undraw polygon,
+.animot-svg-element.icon-anim-draw-undraw ellipse {
+	stroke-dashoffset: var(--path-len, 1000);
+	animation: animot-svg-draw-undraw var(--icon-anim-duration, 800ms) ease-out forwards;
+}
+.animot-svg-element.icon-anim-loop path,
+.animot-svg-element.icon-anim-loop circle,
+.animot-svg-element.icon-anim-loop rect,
+.animot-svg-element.icon-anim-loop line,
+.animot-svg-element.icon-anim-loop polyline,
+.animot-svg-element.icon-anim-loop polygon,
+.animot-svg-element.icon-anim-loop ellipse { animation-iteration-count: infinite !important; }
+.animot-svg-element.icon-anim-reverse path,
+.animot-svg-element.icon-anim-reverse circle,
+.animot-svg-element.icon-anim-reverse rect,
+.animot-svg-element.icon-anim-reverse line,
+.animot-svg-element.icon-anim-reverse polyline,
+.animot-svg-element.icon-anim-reverse polygon,
+.animot-svg-element.icon-anim-reverse ellipse { animation-direction: reverse !important; }
+@keyframes animot-svg-draw { to { stroke-dashoffset: 0; } }
+@keyframes animot-svg-undraw { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--path-len, 1000); } }
+@keyframes animot-svg-draw-undraw {
+	0% { stroke-dashoffset: var(--path-len, 1000); }
+	50% { stroke-dashoffset: 0; }
+	100% { stroke-dashoffset: var(--path-len, 1000); }
+}

package/dist/types.d.ts

@@ -145,10 +145,30 @@ export interface TextElement extends BaseElement {
     backgroundPositionY?: number;
     backgroundScale?: number;
 }
-export type ArrowAnimationMode = 'none' | 'grow' | 'draw' | 'undraw' | 'draw-undraw';
+export type ArrowAnimationMode = 'none' | 'grow' | 'draw' | 'undraw' | 'draw-undraw' | 'flow';
 export interface ArrowAnimationConfig {
     mode: ArrowAnimationMode;
     duration: number;
+    loop?: boolean;
+    direction?: 'forward' | 'reverse';
+}
+export type SvgPathAnimationMode = 'none' | 'draw' | 'undraw' | 'draw-undraw' | 'flow';
+export interface SvgPathAnimationConfig {
+    mode: SvgPathAnimationMode;
+    duration: number;
+    loop?: boolean;
+    direction?: 'forward' | 'reverse';
+}
+export interface FlowMarkerConfig {
+    enabled: boolean;
+    count: number;
+    size: number;
+    color: string;
+    speedMs: number;
+    direction: 'forward' | 'reverse' | 'bidirectional';
+    pattern: 'loop' | 'once' | 'bounce';
+    shape: 'dot' | 'square' | 'pulse';
+    easing: 'linear' | 'ease-in-out';
 }
 export interface ArrowElement extends BaseElement {
     type: 'arrow';
@@ -162,6 +182,7 @@ export interface ArrowElement extends BaseElement {
     showHead: boolean;
     opacity: number;
     animation?: ArrowAnimationConfig;
+    flowMarkers?: FlowMarkerConfig;
 }
 export interface ImageElement extends BaseElement {
     type: 'image';
@@ -248,6 +269,7 @@ export interface IconElement extends BaseElement {
     color: string;
     strokeWidth: number;
     fillMode: 'stroke' | 'fill' | 'both';
+    animation?: SvgPathAnimationConfig;
 }
 export interface SvgElement extends BaseElement {
     type: 'svg';
@@ -256,6 +278,7 @@ export interface SvgElement extends BaseElement {
     opacity: number;
     preserveAspectRatio: string;
     viewBox?: string;
+    animation?: SvgPathAnimationConfig;
 }
 export interface MotionPathElement extends BaseElement {
     type: 'motionPath';

package/dist/utils/arrow-clip-draw.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Svelte action for arrow animations. Two strategies depending on mode:
+ *
+ *  • 'draw' / 'undraw' / 'draw-undraw' — clip-path inset on the host <svg>.
+ *    Doesn't touch stroke-dasharray, so dashed/dotted patterns are preserved
+ *    while the path is progressively revealed/hidden from one side.
+ *
+ *  • 'flow' — marching ants. Continuously shifts stroke-dashoffset on the
+ *    inner .arrow-path, so the dash pattern appears to flow along the path
+ *    like a current. Forward/reverse controls flow direction. Inherently
+ *    looping; the loop flag is ignored.
+ */
+export interface ArrowClipDrawParams {
+    enabled: boolean;
+    mode: 'draw' | 'undraw' | 'draw-undraw' | 'flow' | 'none' | string;
+    duration: number;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    loop?: boolean;
+    reverse?: boolean;
+    key?: unknown;
+}
+export declare function arrowClipDraw(node: SVGSVGElement, params: ArrowClipDrawParams): {
+    update(p: ArrowClipDrawParams): void;
+    destroy(): void;
+};

package/dist/utils/arrow-clip-draw.js

@@ -0,0 +1,177 @@
+/**
+ * Svelte action for arrow animations. Two strategies depending on mode:
+ *
+ *  • 'draw' / 'undraw' / 'draw-undraw' — clip-path inset on the host <svg>.
+ *    Doesn't touch stroke-dasharray, so dashed/dotted patterns are preserved
+ *    while the path is progressively revealed/hidden from one side.
+ *
+ *  • 'flow' — marching ants. Continuously shifts stroke-dashoffset on the
+ *    inner .arrow-path, so the dash pattern appears to flow along the path
+ *    like a current. Forward/reverse controls flow direction. Inherently
+ *    looping; the loop flag is ignored.
+ */
+export function arrowClipDraw(node, params) {
+    let raf = 0;
+    let pathEl = null;
+    let baseDash = '';
+    let baseOffset = '';
+    function clearArrowPath() {
+        if (!pathEl)
+            return;
+        pathEl.style.strokeDasharray = baseDash;
+        pathEl.style.strokeDashoffset = baseOffset;
+    }
+    function reset() {
+        if (raf)
+            cancelAnimationFrame(raf);
+        raf = 0;
+        node.style.clipPath = '';
+        clearArrowPath();
+    }
+    function run() {
+        reset();
+        if (!params.enabled || params.mode === 'none')
+            return;
+        // Capture the inner arrow path (used by 'flow' mode).
+        pathEl = node.querySelector('.arrow-path');
+        if (pathEl) {
+            baseDash = pathEl.style.strokeDasharray || '';
+            baseOffset = pathEl.style.strokeDashoffset || '';
+        }
+        // Pick the dominant axis so vertical arrows reveal top↔bottom and horizontal
+        // arrows reveal left↔right. clip-path inset(top right bottom left).
+        const dx = params.endX - params.startX;
+        const dy = params.endY - params.startY;
+        const horizontal = Math.abs(dx) >= Math.abs(dy);
+        const positive = horizontal ? dx >= 0 : dy >= 0;
+        const goesPositive = params.reverse ? !positive : positive;
+        // Build the clip-path string for a given progress (0 = fully hidden,
+        // 100 = fully visible) on the dominant axis.
+        function clip(insetPct) {
+            if (horizontal) {
+                return goesPositive
+                    ? `inset(0 ${insetPct}% 0 0)` // hide from right edge
+                    : `inset(0 0 0 ${insetPct}%)`; // hide from left edge
+            }
+            return goesPositive
+                ? `inset(0 0 ${insetPct}% 0)` // hide from bottom
+                : `inset(${insetPct}% 0 0 0)`; // hide from top
+        }
+        const clipFull = clip(100); // fully hidden (100% inset on hide side)
+        const clipNone = clip(0);
+        const dur = Math.max(50, params.duration);
+        const start = performance.now();
+        const m = params.mode;
+        // FLOW: marching ants — animate dashoffset continuously, keep base pattern.
+        if (m === 'flow') {
+            if (!pathEl)
+                return;
+            // If the arrow has no inline dasharray (i.e. it's solid), give it one
+            // so dashes are visible to flow. Otherwise keep the user's pattern.
+            const dashAttr = pathEl.getAttribute('stroke-dasharray');
+            if (!dashAttr || dashAttr === 'none') {
+                pathEl.style.strokeDasharray = '8 5';
+            }
+            // One pixel of dashoffset shift per ms feels like a steady current; use
+            // `duration` as the ms per cycle of 24px (one base dash repeat-ish).
+            const cycle = 24;
+            const dir = params.reverse ? 1 : -1;
+            function flowStep(now) {
+                const elapsed = now - start;
+                const offset = (dir * (elapsed / dur) * cycle) % (cycle * 1000); // huge mod just to keep it bounded
+                if (pathEl)
+                    pathEl.style.strokeDashoffset = String(offset);
+                raf = requestAnimationFrame(flowStep);
+            }
+            raf = requestAnimationFrame(flowStep);
+            return;
+        }
+        // Initial clip-path state for draw modes.
+        if (m === 'draw' || m === 'draw-undraw') {
+            node.style.clipPath = clipFull;
+        }
+        else if (m === 'undraw') {
+            node.style.clipPath = clipNone;
+        }
+        function step(now) {
+            const elapsed = now - start;
+            if (m === 'draw') {
+                const t = Math.min(elapsed / dur, 1);
+                const eased = 1 - Math.pow(1 - t, 3);
+                node.style.clipPath = clip(100 * (1 - eased));
+                if (t < 1)
+                    raf = requestAnimationFrame(step);
+                else if (params.loop)
+                    run();
+                else {
+                    node.style.clipPath = clipNone;
+                    raf = 0;
+                }
+            }
+            else if (m === 'undraw') {
+                const t = Math.min(elapsed / dur, 1);
+                const eased = 1 - Math.pow(1 - t, 3);
+                node.style.clipPath = clip(100 * eased);
+                if (t < 1)
+                    raf = requestAnimationFrame(step);
+                else if (params.loop)
+                    run();
+                else {
+                    node.style.clipPath = clipFull;
+                    raf = 0;
+                }
+            }
+            else if (m === 'draw-undraw') {
+                const half = dur / 2;
+                if (elapsed < half) {
+                    const t = Math.min(elapsed / half, 1);
+                    const eased = 1 - Math.pow(1 - t, 3);
+                    node.style.clipPath = clip(100 * (1 - eased));
+                    raf = requestAnimationFrame(step);
+                }
+                else {
+                    const t = Math.min((elapsed - half) / half, 1);
+                    const eased = 1 - Math.pow(1 - t, 3);
+                    node.style.clipPath = clip(100 * eased);
+                    if (t < 1)
+                        raf = requestAnimationFrame(step);
+                    else if (params.loop)
+                        run();
+                    else {
+                        node.style.clipPath = clipFull;
+                        raf = 0;
+                    }
+                }
+            }
+        }
+        raf = requestAnimationFrame(step);
+    }
+    // Defer to next tick so the inner <path class="arrow-path"> is already
+    // rendered when we query it.
+    queueMicrotask(run);
+    // Register so the video-export pipeline can restart this animation after
+    // activating the virtual clock (see initFirstSlideAnimations).
+    if (typeof window !== 'undefined') {
+        const reg = (window.__svgAnimRestart ||= []);
+        reg.push(run);
+        node.__svgAnimRestart = run;
+    }
+    return {
+        update(p) {
+            params = p;
+            queueMicrotask(run);
+        },
+        destroy() {
+            reset();
+            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/arrow-path.d.ts

@@ -0,0 +1,15 @@
+export interface PathPoint {
+    x: number;
+    y: number;
+    angle: number;
+}
+interface Vec {
+    x: number;
+    y: number;
+}
+/**
+ * Sample a single point along an arrow's path at parameter t in [0, 1].
+ * Returns x, y and the tangent angle in radians (useful for orienting markers).
+ */
+export declare function arrowPointAt(start: Vec, end: Vec, control: Vec[], t: number): PathPoint;
+export {};

package/dist/utils/arrow-path.js

@@ -0,0 +1,73 @@
+// Pure helpers to compute a point (and its tangent direction) along an arrow's
+// path at parameter t in [0, 1]. Mirrors the path-construction rules used by
+// Arrow.svelte (linear, quadratic, cubic, Catmull-Rom for 3+ control points).
+//
+// Used by FlowMarkers and any other consumer that needs to follow the curve.
+function lerp(a, b, t) {
+    return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+}
+function quadratic(p0, p1, p2, t) {
+    const a = lerp(p0, p1, t);
+    const b = lerp(p1, p2, t);
+    return lerp(a, b, t);
+}
+function quadraticTangent(p0, p1, p2, t) {
+    // derivative of quadratic Bezier
+    return {
+        x: 2 * (1 - t) * (p1.x - p0.x) + 2 * t * (p2.x - p1.x),
+        y: 2 * (1 - t) * (p1.y - p0.y) + 2 * t * (p2.y - p1.y)
+    };
+}
+function cubic(p0, p1, p2, p3, t) {
+    const a = lerp(p0, p1, t);
+    const b = lerp(p1, p2, t);
+    const c = lerp(p2, p3, t);
+    const d = lerp(a, b, t);
+    const e = lerp(b, c, t);
+    return lerp(d, e, t);
+}
+function cubicTangent(p0, p1, p2, p3, t) {
+    const u = 1 - t;
+    return {
+        x: 3 * u * u * (p1.x - p0.x) + 6 * u * t * (p2.x - p1.x) + 3 * t * t * (p3.x - p2.x),
+        y: 3 * u * u * (p1.y - p0.y) + 6 * u * t * (p2.y - p1.y) + 3 * t * t * (p3.y - p2.y)
+    };
+}
+/**
+ * Sample a single point along an arrow's path at parameter t in [0, 1].
+ * Returns x, y and the tangent angle in radians (useful for orienting markers).
+ */
+export function arrowPointAt(start, end, control, t) {
+    t = Math.max(0, Math.min(1, t));
+    if (control.length === 0) {
+        // straight line
+        const p = lerp(start, end, t);
+        return { x: p.x, y: p.y, angle: Math.atan2(end.y - start.y, end.x - start.x) };
+    }
+    if (control.length === 1) {
+        const p = quadratic(start, control[0], end, t);
+        const tan = quadraticTangent(start, control[0], end, t);
+        return { x: p.x, y: p.y, angle: Math.atan2(tan.y, tan.x) };
+    }
+    if (control.length === 2) {
+        const p = cubic(start, control[0], control[1], end, t);
+        const tan = cubicTangent(start, control[0], control[1], end, t);
+        return { x: p.x, y: p.y, angle: Math.atan2(tan.y, tan.x) };
+    }
+    // 3+ control points: Catmull-Rom approximated as cubic Bezier segments
+    // (matches Arrow.svelte's pathD rendering).
+    const pts = [start, ...control, end];
+    const segCount = pts.length - 1;
+    const segLen = 1 / segCount;
+    const segIndex = Math.min(segCount - 1, Math.floor(t / segLen));
+    const localT = (t - segIndex * segLen) / segLen;
+    const p0 = pts[segIndex === 0 ? 0 : segIndex - 1];
+    const p1 = pts[segIndex];
+    const p2 = pts[segIndex + 1];
+    const p3 = pts[segIndex + 2 < pts.length ? segIndex + 2 : pts.length - 1];
+    const c1 = { x: p1.x + (p2.x - p0.x) / 6, y: p1.y + (p2.y - p0.y) / 6 };
+    const c2 = { x: p2.x - (p3.x - p1.x) / 6, y: p2.y - (p3.y - p1.y) / 6 };
+    const p = cubic(p1, c1, c2, p2, localT);
+    const tan = cubicTangent(p1, c1, c2, p2, localT);
+    return { x: p.x, y: p.y, angle: Math.atan2(tan.y, tan.x) };
+}

package/dist/utils/trace-svg-paths.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Svelte action: animates SVG paths inside the host node using a JS RAF loop.
+ *
+ * Why JS instead of CSS animations: CSS animations had timing issues — by the
+ * time the action finished computing each path's actual length via
+ * getTotalLength(), the CSS animation had already started using a fallback
+ * value (1000) which doesn't match the path's real length, causing the path
+ * to either flicker or stay fully visible. Doing everything in JS is reliable.
+ *
+ * Modes:
+ *   • draw         — strokes appear from 0 → length (handle reverse to flip)
+ *   • undraw       — strokes disappear from length → 0
+ *   • draw-undraw  — appear then disappear, repeats if loop=true
+ *   • flow         — marching ants. Keeps base dasharray, shifts offset.
+ *   • none         — no animation; restore original attributes.
+ */
+export interface SvgPathDrawParams {
+    enabled: boolean;
+    mode: 'none' | 'draw' | 'undraw' | 'draw-undraw' | 'flow';
+    duration: number;
+    loop?: boolean;
+    reverse?: boolean;
+    key?: unknown;
+}
+export declare function traceSvgPaths(node: HTMLElement | SVGElement, params: SvgPathDrawParams): {
+    update(p: SvgPathDrawParams): void;
+    destroy(): void;
+};