animot-presenter 0.5.7 → 0.5.10

package/dist/types.d.ts

@@ -223,12 +223,14 @@ export interface DecorationsConfig {
         angle?: number;
         speedMs?: number;
         widthPct?: number;
+        randomness?: number;
     };
     gradientShift?: {
         enabled: boolean;
         colors?: string[];
         speedMs?: number;
         angle?: number;
+        direction?: 'forward' | 'reverse' | 'snake' | 'chase';
     };
     rgbSplit?: {
         enabled: boolean;

package/dist/utils/camera.js

@@ -59,8 +59,17 @@ export function parallaxOffset(camera, depth, worldWidth, worldHeight) {
     const cy = camera.y + camera.height / 2;
     const wx = worldWidth / 2;
     const wy = worldHeight / 2;
-    // Tame the multiplier — full ±1 doubling is too much in practice; use 0.4
-    // so depth = +1 means 40% extra parallax, depth = -1 means 40% damped.
-    const factor = depth * 0.4;
+    // Parallax magnitude is `depth × camera-offset-from-world-center × factor`.
+    // The earlier 0.4 factor blew up on large worlds (6000×4000) because the
+    // camera-offset term scales with world size — depth=0.7 gave ±840px shifts,
+    // destroying composition.
+    //
+    // Fix: scale the factor by the CAMERA WIDTH ratio to a 1920-baseline so the
+    // effect feels the same regardless of world size. A 1920-wide camera gets
+    // the original feel; a 3200-wide camera (zoomed out) gets a smaller offset
+    // per unit-of-world-distance so the layout doesn't fly apart.
+    const baseFactor = depth * 0.15;
+    const widthScale = Math.min(1, 1920 / Math.max(1, camera.width));
+    const factor = baseFactor * widthScale;
     return { x: -(cx - wx) * factor, y: -(cy - wy) * factor };
 }

package/dist/utils/decorations.js

@@ -61,19 +61,21 @@ export function decorations(node, params) {
         if (!anyEnabled)
             return;
         saveOriginalStyles();
-        // Shimmer needs a positioned overlay — we inject it as a child. The
-        // element must already be `position: relative` (or non-static) to clip
-        // the overlay correctly; we coerce it here without mutating user state
-        // permanently (restoreOriginalStyles puts back any inline style).
+        // Shimmer: original implementation — a gradient overlay sized 300% of
+        // the host with the stripe at 50%. Animating backgroundPosition slides
+        // the visible window across the gradient. User confirmed this looked
+        // right on the first cycle; the only issue was a perceived gap at the
+        // loop boundary. Fix below is in the tick loop (we time-shift `phase`
+        // so the empty/offscreen portion lands at the wrap, hiding the jump).
         if (cfg.shimmer?.enabled) {
             if (getComputedStyle(node).position === 'static') {
                 node.style.position = 'relative';
             }
-            shimmerEl = document.createElement('div');
-            shimmerEl.className = 'animot-shimmer';
             const angle = cfg.shimmer.angle ?? 110;
             const widthPct = cfg.shimmer.widthPct ?? 25;
             const color = cfg.shimmer.color ?? 'rgba(255, 255, 255, 0.4)';
+            shimmerEl = document.createElement('div');
+            shimmerEl.className = 'animot-shimmer';
             Object.assign(shimmerEl.style, {
                 position: 'absolute',
                 inset: '0',
@@ -82,7 +84,12 @@ export function decorations(node, params) {
                 borderRadius: 'inherit',
                 background: `linear-gradient(${angle}deg, transparent 0%, transparent ${50 - widthPct / 2}%, ${color} 50%, transparent ${50 + widthPct / 2}%, transparent 100%)`,
                 backgroundSize: '300% 300%',
-                backgroundPosition: '-100% -100%'
+                // Default `repeat` would tile the gradient — when the bg slides past
+                // an edge, the next tile's stripe enters from the opposite side
+                // (the "two squares touching corners" artifact). One stripe per cycle.
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: '-100% -100%',
+                willChange: 'background-position'
             });
             node.appendChild(shimmerEl);
         }
@@ -90,8 +97,23 @@ export function decorations(node, params) {
         if (cfg.gradientShift?.enabled) {
             const colors = cfg.gradientShift.colors ?? ['#7c3aed', '#06b6d4', '#ec4899', '#7c3aed'];
             const angle = cfg.gradientShift.angle ?? 135;
-            node.style.backgroundImage = `linear-gradient(${angle}deg, ${colors.join(', ')})`;
-            node.style.backgroundSize = '300% 300%';
+            const direction = cfg.gradientShift.direction ?? 'forward';
+            if (direction === 'chase') {
+                // Conic gradient: each color is a slice of the pie. Repeat the first
+                // color at the end so the seam where it wraps doesn't show. The tick
+                // loop animates the `from` angle every frame.
+                const stops = [...colors, colors[0]].join(', ');
+                node.style.backgroundImage = `conic-gradient(from 0deg at 50% 50%, ${stops})`;
+                node.style.backgroundSize = '100% 100%';
+                node.style.backgroundPosition = '0 0';
+            }
+            else {
+                node.style.backgroundImage = `linear-gradient(${angle}deg, ${colors.join(', ')})`;
+                // Bigger backgroundSize means more "headroom" for the position to
+                // sweep before the gradient repeats. 400% lets snake mode swing back
+                // and forth without ever showing a tile seam, even at 45° angles.
+                node.style.backgroundSize = '400% 400%';
+            }
         }
         const start = performance.now();
         function tick(now) {
@@ -106,20 +128,109 @@ export function decorations(node, params) {
                 const spread = 2 + wave * 8 * intensity;
                 node.style.boxShadow = `0 0 ${blur}px ${spread}px ${cfg.glow.color}`;
             }
-            // SHIMMER — sweep the gradient overlay diagonally across the element.
+            // SHIMMER — sweep the stretched gradient ALONG its own gradient
+            // direction (derived from `angle`) so the stripe glides perpendicular
+            // to itself for any angle.
+            //
+            // Optional `randomness` (0–1) jitters each cycle's duration and
+            // inserts a random pause between sweeps so the effect feels alive
+            // instead of metronomic. Per-cycle state (start time, duration,
+            // pause length) is stashed on the wrapper so we don't burn a closure
+            // rebuild every frame.
             if (cfg.shimmer?.enabled && shimmerEl) {
-                const cycle = effectiveCycle(cfg.shimmer.speedMs ?? 3000, params.slideDuration);
-                const phase = (elapsed % cycle) / cycle;
-                // Sweep -100% → 200% so the highlight enters from the top-left, leaves bottom-right.
-                const pos = -100 + phase * 300;
-                shimmerEl.style.backgroundPosition = `${pos}% ${pos}%`;
+                const baseSpeed = cfg.shimmer.speedMs ?? 3000;
+                const baseCycle = effectiveCycle(baseSpeed, params.slideDuration);
+                const randomness = Math.max(0, Math.min(1, cfg.shimmer.randomness ?? 0));
+                const w = shimmerEl;
+                if (typeof w.__shimCycleStart !== 'number') {
+                    w.__shimCycleStart = elapsed;
+                    w.__shimCycleDur = baseCycle;
+                    w.__shimCyclePause = 0;
+                    w.__shimSeed = 1;
+                }
+                let local = elapsed - w.__shimCycleStart;
+                const total = w.__shimCycleDur + w.__shimCyclePause;
+                if (local >= total) {
+                    // Roll a new cycle. Hash-based pseudo-random keeps the sequence
+                    // deterministic for a given seed — same shimmer plays back the
+                    // same way on /present reload, useful when reviewing.
+                    w.__shimSeed = (w.__shimSeed * 1103515245 + 12345) & 0x7fffffff;
+                    const r1 = (w.__shimSeed % 1000) / 1000;
+                    const r2 = ((w.__shimSeed >> 8) % 1000) / 1000;
+                    // Duration multiplier: at randomness=1 it's 0.5×–2× base; at
+                    // randomness=0 it's exactly base.
+                    const jitter = (r1 * 2 - 1) * randomness; // -randomness..+randomness
+                    const durMul = jitter >= 0 ? 1 + jitter : 1 / (1 - jitter * 0.5);
+                    w.__shimCycleDur = Math.max(300, baseCycle * durMul);
+                    // Pause between sweeps: 0 to randomness × baseCycle.
+                    w.__shimCyclePause = baseCycle * randomness * r2;
+                    w.__shimCycleStart = elapsed;
+                    local = 0;
+                }
+                const angle = cfg.shimmer.angle ?? 110;
+                const rad = angle * Math.PI / 180;
+                const dirX = Math.sin(rad);
+                const dirY = -Math.cos(rad);
+                if (local > w.__shimCycleDur) {
+                    // Pause window — park the stripe far offscreen so nothing renders.
+                    shimmerEl.style.backgroundPosition = `-300% -300%`;
+                }
+                else {
+                    const phase = local / w.__shimCycleDur;
+                    const offset = (phase - 0.5) * 300;
+                    const posX = 50 + offset * dirX;
+                    const posY = 50 + offset * dirY;
+                    shimmerEl.style.backgroundPosition = `${posX}% ${posY}%`;
+                }
             }
-            // GRADIENT SHIFT — animate background-position on the multi-stop gradient.
+            // GRADIENT SHIFT — direction modes:
+            //   • forward — phase ramps 0 → 1, position increases monotonically
+            //   • reverse — phase ramps 1 → 0
+            //   • snake   — phase oscillates via sin so the gradient slithers
+            //               back and forth along its own angle
+            //   • chase   — colors rotate around the element via a conic gradient
+            //               (with 4 colors this is the "each color shifts to the
+            //               next side" pinwheel)
+            // Sweep direction (for non-chase modes) is derived from `angle` so
+            // the gradient flows perpendicular to its own bands.
             if (cfg.gradientShift?.enabled) {
                 const cycle = effectiveCycle(cfg.gradientShift.speedMs ?? 6000, params.slideDuration);
-                const phase = (elapsed % cycle) / cycle;
-                const pos = phase * 300; // 0% → 300% creates a smooth loop with backgroundSize 300%
-                node.style.backgroundPosition = `${pos}% 50%`;
+                const direction = cfg.gradientShift.direction ?? 'forward';
+                if (direction === 'chase') {
+                    // Rebuild the conic gradient each frame with a rotating `from`
+                    // angle. Cheap to render — modern browsers compose conic
+                    // gradients on the GPU. Color list is closed (first color
+                    // repeated at end) so the seam where 360° wraps to 0° is
+                    // invisible.
+                    const colors = cfg.gradientShift.colors ?? ['#7c3aed', '#06b6d4', '#ec4899', '#7c3aed'];
+                    const stops = [...colors, colors[0]].join(', ');
+                    const rotateDeg = ((elapsed % cycle) / cycle) * 360;
+                    node.style.backgroundImage = `conic-gradient(from ${rotateDeg}deg at 50% 50%, ${stops})`;
+                }
+                else {
+                    const angle = cfg.gradientShift.angle ?? 135;
+                    const rad = angle * Math.PI / 180;
+                    const dirX = Math.sin(rad);
+                    const dirY = -Math.cos(rad);
+                    let phase;
+                    if (direction === 'snake') {
+                        phase = (Math.sin((elapsed / cycle) * Math.PI * 2) + 1) / 2;
+                    }
+                    else if (direction === 'reverse') {
+                        phase = 1 - ((elapsed % cycle) / cycle);
+                    }
+                    else {
+                        phase = (elapsed % cycle) / cycle;
+                    }
+                    // Sweep range = 200% of host (centered at 50%). With
+                    // backgroundSize 400%, position values from -50% to 250% all
+                    // keep the gradient fully covering the element across all angles.
+                    const range = 200;
+                    const offset = (phase - 0.5) * range;
+                    const posX = 50 + offset * dirX;
+                    const posY = 50 + offset * dirY;
+                    node.style.backgroundPosition = `${posX}% ${posY}%`;
+                }
             }
             // RGB SPLIT — chromatic aberration via stacked drop-shadows.
             if (cfg.rgbSplit?.enabled) {

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

@@ -0,0 +1,50 @@
+/**
+ * Unified wrapper around YouTube IFrame Player API and Vimeo Player.js so the
+ * rest of the app can drive embedded videos with the same play/pause/seek/
+ * volume calls used for `<video>` elements. The provider libraries are lazy-
+ * loaded on first use so a project with no embeds doesn't pay the network cost.
+ *
+ * What this enables:
+ *   • Auto-pause embeds when the user navigates away from a slide.
+ *   • Reset embed `currentTime` to startTime on slide enter (otherwise YouTube
+ *     persists position across iframe rebuilds).
+ *   • Render OUR own play/pause/scrub controls on top of the iframe (we hide
+ *     YouTube's chrome via `controls=0` in the embed URL).
+ *
+ * What this does NOT enable: server-side export capture. YouTube/Vimeo render
+ * frames inside their player; Puppeteer can't screenshot cross-origin iframe
+ * content, so exports of slides containing embeds still fall back to the
+ * provider-supplied thumbnail (handled in /present's render path).
+ */
+export declare function loadYouTubeAPI(): Promise<typeof window['YT']>;
+export declare function loadVimeoAPI(): Promise<any>;
+export interface UnifiedPlayer {
+    play(): Promise<void> | void;
+    pause(): Promise<void> | void;
+    seekTo(seconds: number): Promise<void> | void;
+    getCurrentTime(): Promise<number>;
+    getDuration(): Promise<number>;
+    setVolume(v: number): void;
+    setMuted(m: boolean): void;
+    setPlaybackRate(r: number): void;
+    destroy(): void;
+    /** Subscribe to playing-state changes. Call returned fn to unsubscribe. */
+    onStateChange(cb: (state: 'playing' | 'paused' | 'ended' | 'buffering' | 'cued' | 'unstarted') => void): () => void;
+}
+interface CreateOptions {
+    provider: 'youtube' | 'vimeo';
+    /** The actual <iframe> element. We attach the player to it. */
+    iframe: HTMLIFrameElement;
+    /** Provider video ID (used for the YouTube ctor; Vimeo binds straight to iframe). */
+    videoId?: string;
+    startTime?: number;
+    muted?: boolean;
+}
+export declare function createEmbedPlayer(opts: CreateOptions): Promise<UnifiedPlayer>;
+declare global {
+    interface Window {
+        YT: any;
+        onYouTubeIframeAPIReady?: () => void;
+    }
+}
+export {};

package/dist/utils/embed-players.js

@@ -0,0 +1,152 @@
+/**
+ * Unified wrapper around YouTube IFrame Player API and Vimeo Player.js so the
+ * rest of the app can drive embedded videos with the same play/pause/seek/
+ * volume calls used for `<video>` elements. The provider libraries are lazy-
+ * loaded on first use so a project with no embeds doesn't pay the network cost.
+ *
+ * What this enables:
+ *   • Auto-pause embeds when the user navigates away from a slide.
+ *   • Reset embed `currentTime` to startTime on slide enter (otherwise YouTube
+ *     persists position across iframe rebuilds).
+ *   • Render OUR own play/pause/scrub controls on top of the iframe (we hide
+ *     YouTube's chrome via `controls=0` in the embed URL).
+ *
+ * What this does NOT enable: server-side export capture. YouTube/Vimeo render
+ * frames inside their player; Puppeteer can't screenshot cross-origin iframe
+ * content, so exports of slides containing embeds still fall back to the
+ * provider-supplied thumbnail (handled in /present's render path).
+ */
+let ytApiPromise = null;
+export function loadYouTubeAPI() {
+    if (typeof window === 'undefined')
+        return Promise.reject(new Error('SSR'));
+    if (window.YT && window.YT.Player)
+        return Promise.resolve(window.YT);
+    if (ytApiPromise)
+        return ytApiPromise;
+    ytApiPromise = new Promise((resolve, reject) => {
+        // The IFrame API expects a global callback. Chain any pre-existing one
+        // so we play nicely with other libraries on the page.
+        const prev = window.onYouTubeIframeAPIReady;
+        window.onYouTubeIframeAPIReady = () => {
+            if (typeof prev === 'function') {
+                try {
+                    prev();
+                }
+                catch { }
+            }
+            resolve(window.YT);
+        };
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        tag.async = true;
+        tag.onerror = () => reject(new Error('Failed to load YouTube IFrame API'));
+        document.head.appendChild(tag);
+    });
+    return ytApiPromise;
+}
+let vimeoApiPromise = null;
+export function loadVimeoAPI() {
+    if (typeof window === 'undefined')
+        return Promise.reject(new Error('SSR'));
+    const w = window;
+    if (w.Vimeo && w.Vimeo.Player)
+        return Promise.resolve(w.Vimeo);
+    if (vimeoApiPromise)
+        return vimeoApiPromise;
+    vimeoApiPromise = new Promise((resolve, reject) => {
+        const tag = document.createElement('script');
+        tag.src = 'https://player.vimeo.com/api/player.js';
+        tag.async = true;
+        tag.onload = () => resolve(window.Vimeo);
+        tag.onerror = () => reject(new Error('Failed to load Vimeo Player API'));
+        document.head.appendChild(tag);
+    });
+    return vimeoApiPromise;
+}
+export async function createEmbedPlayer(opts) {
+    if (opts.provider === 'youtube')
+        return createYouTubePlayer(opts);
+    return createVimeoPlayer(opts);
+}
+async function createYouTubePlayer(opts) {
+    const YT = await loadYouTubeAPI();
+    let stateCbs = [];
+    const player = await new Promise((resolve) => {
+        const p = new YT.Player(opts.iframe, {
+            events: {
+                onReady: () => resolve(p),
+                onStateChange: (e) => {
+                    const map = {
+                        [-1]: 'unstarted',
+                        [0]: 'ended',
+                        [1]: 'playing',
+                        [2]: 'paused',
+                        [3]: 'buffering',
+                        [5]: 'cued'
+                    };
+                    const state = map[e.data] ?? 'unstarted';
+                    for (const cb of stateCbs)
+                        try {
+                            cb(state);
+                        }
+                        catch { }
+                }
+            }
+        });
+    });
+    if (opts.muted)
+        player.mute();
+    if (opts.startTime)
+        try {
+            player.seekTo(opts.startTime, true);
+        }
+        catch { }
+    return {
+        play: () => player.playVideo(),
+        pause: () => player.pauseVideo(),
+        seekTo: (s) => player.seekTo(s, true),
+        getCurrentTime: async () => Number(player.getCurrentTime()) || 0,
+        getDuration: async () => Number(player.getDuration()) || 0,
+        setVolume: (v) => player.setVolume(Math.max(0, Math.min(100, v * 100))),
+        setMuted: (m) => (m ? player.mute() : player.unMute()),
+        setPlaybackRate: (r) => player.setPlaybackRate(r),
+        destroy: () => { try {
+            player.destroy();
+        }
+        catch { } },
+        onStateChange: (cb) => { stateCbs.push(cb); return () => { stateCbs = stateCbs.filter((f) => f !== cb); }; }
+    };
+}
+async function createVimeoPlayer(opts) {
+    const Vimeo = await loadVimeoAPI();
+    const player = new Vimeo.Player(opts.iframe);
+    let stateCbs = [];
+    await player.ready();
+    if (opts.muted)
+        await player.setMuted(true);
+    if (opts.startTime)
+        try {
+            await player.setCurrentTime(opts.startTime);
+        }
+        catch { }
+    player.on('play', () => stateCbs.forEach((cb) => cb('playing')));
+    player.on('pause', () => stateCbs.forEach((cb) => cb('paused')));
+    player.on('ended', () => stateCbs.forEach((cb) => cb('ended')));
+    player.on('bufferstart', () => stateCbs.forEach((cb) => cb('buffering')));
+    return {
+        play: () => player.play(),
+        pause: () => player.pause(),
+        seekTo: (s) => player.setCurrentTime(s),
+        getCurrentTime: () => player.getCurrentTime(),
+        getDuration: () => player.getDuration(),
+        setVolume: (v) => player.setVolume(Math.max(0, Math.min(1, v))),
+        setMuted: (m) => player.setMuted(m),
+        setPlaybackRate: (r) => player.setPlaybackRate(r),
+        destroy: () => { try {
+            player.destroy();
+        }
+        catch { } },
+        onStateChange: (cb) => { stateCbs.push(cb); return () => { stateCbs = stateCbs.filter((f) => f !== cb); }; }
+    };
+}

package/package.json

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