animot-presenter 0.5.9 → 0.5.11

package/dist/types.d.ts

@@ -231,6 +231,7 @@ export interface DecorationsConfig {
         speedMs?: number;
         angle?: number;
         direction?: 'forward' | 'reverse' | 'snake' | 'chase';
+        borderWidth?: number;
     };
     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.d.ts

@@ -16,6 +16,14 @@ export interface DecorationsParams {
     /** Slide loop duration; when present, each effect's cycle is rounded so an
      * integer number fits in slide_duration — guarantees seamless GIF loop. */
     slideDuration?: number;
+    /** Optional shape info — if present, shimmer and gradientShift overlays
+     * get clipped to this silhouette. Without it both effects render against
+     * the rectangular wrapper bounds (which looks wrong on circles/hexagons/
+     * stars). Pass `{ type: 'circle' }` etc. from the host for shape elements. */
+    shape?: {
+        type: 'rectangle' | 'circle' | 'ellipse' | 'triangle' | 'hexagon' | 'star';
+        borderRadius?: number;
+    };
     /** Bumped by the host when ANY decoration prop changes. Without it the
      * action would silently keep running with stale params. */
     key?: unknown;

package/dist/utils/decorations.js

@@ -10,6 +10,55 @@
  *   • gradientShift — animates background-position on a multi-color gradient
  *   • rgbSplit     — chromatic-aberration-style R/B channel offset (drop-shadow)
  */
+/** Build a CSS clip-path that matches a shape silhouette. Returns null for
+ * rectangles with no border-radius (no clipping needed). */
+function shapeClipPath(shape) {
+    switch (shape.type) {
+        case 'circle': return 'circle(50% at 50% 50%)';
+        case 'ellipse': return 'ellipse(50% 50% at 50% 50%)';
+        case 'triangle': return 'polygon(50% 0%, 0% 100%, 100% 100%)';
+        case 'hexagon': return 'polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%)';
+        case 'star': return 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)';
+        case 'rectangle':
+            return shape.borderRadius && shape.borderRadius > 0
+                ? `inset(0 round ${shape.borderRadius}px)`
+                : null;
+    }
+}
+// SVG mask for the gradient border ring. We stroke the shape silhouette in a
+// 100×100 viewBox with `preserveAspectRatio=none` so it stretches to the
+// element's box, and `vector-effect=non-scaling-stroke` so the stroke stays a
+// constant pixel width regardless of element size or aspect ratio. The stroke
+// is centered on the path, so half of it falls outside the silhouette — the
+// caller's clip-path trims that outer half away, leaving an inner ring of
+// `borderWidth` px against the silhouette edge. We therefore set stroke-width
+// to `borderWidth * 2`.
+function silhouetteMaskUrl(shapeType, borderWidth) {
+    const sw = borderWidth * 2;
+    const common = `vector-effect="non-scaling-stroke" fill="none" stroke="#fff" stroke-width="${sw}"`;
+    let inner = '';
+    switch (shapeType) {
+        case 'circle':
+            inner = `<circle cx="50" cy="50" r="50" ${common}/>`;
+            break;
+        case 'ellipse':
+            inner = `<ellipse cx="50" cy="50" rx="50" ry="50" ${common}/>`;
+            break;
+        case 'triangle':
+            inner = `<polygon points="50,0 0,100 100,100" ${common}/>`;
+            break;
+        case 'hexagon':
+            inner = `<polygon points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25" ${common}/>`;
+            break;
+        case 'star':
+            inner = `<polygon points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35" ${common}/>`;
+            break;
+        default:
+            inner = `<rect x="0" y="0" width="100" height="100" ${common}/>`;
+    }
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">${inner}</svg>`;
+    return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+}
 function effectiveCycle(requested, slideDuration) {
     if (slideDuration && slideDuration > 0) {
         return slideDuration / Math.max(1, Math.round(slideDuration / requested));
@@ -19,32 +68,34 @@ function effectiveCycle(requested, slideDuration) {
 export function decorations(node, params) {
     let raf = 0;
     let shimmerEl = null;
+    // Dedicated child overlay for the animated gradient background. We CANNOT
+    // put the gradient on the wrapper itself if a shape clip is needed —
+    // `clip-path` on the wrapper would also clip the wrapper's `filter:
+    // drop-shadow` (the glow halo), so the glow can never extend past the
+    // silhouette. By putting the gradient on a clipped child, the wrapper
+    // stays unclipped and the glow halo renders correctly outside the shape.
+    let gradientEl = null;
     let originalBoxShadow = '';
     let originalFilter = '';
-    let originalBackgroundImage = '';
-    let originalBackgroundSize = '';
-    let originalBackgroundPosition = '';
     let savedOriginal = false;
     function saveOriginalStyles() {
         if (savedOriginal)
             return;
         originalBoxShadow = node.style.boxShadow;
         originalFilter = node.style.filter;
-        originalBackgroundImage = node.style.backgroundImage;
-        originalBackgroundSize = node.style.backgroundSize;
-        originalBackgroundPosition = node.style.backgroundPosition;
         savedOriginal = true;
     }
     function restoreOriginalStyles() {
         node.style.boxShadow = originalBoxShadow;
         node.style.filter = originalFilter;
-        node.style.backgroundImage = originalBackgroundImage;
-        node.style.backgroundSize = originalBackgroundSize;
-        node.style.backgroundPosition = originalBackgroundPosition;
         if (shimmerEl) {
             shimmerEl.remove();
             shimmerEl = null;
         }
+        if (gradientEl) {
+            gradientEl.remove();
+            gradientEl = null;
+        }
     }
     function reset() {
         if (raf)
@@ -61,12 +112,13 @@ export function decorations(node, params) {
         if (!anyEnabled)
             return;
         saveOriginalStyles();
-        // 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).
+        // Compute the shape clip-path once — applied to shimmer + gradient
+        // children individually (NOT the wrapper) so the wrapper's glow filter
+        // halo can render outside the silhouette without being clipped.
+        const shapeClip = params.shape ? shapeClipPath(params.shape) : null;
+        // Shimmer: a child overlay with the diagonal stripe gradient. Clipped
+        // to the shape silhouette individually so circle/hexagon/etc. shapes
+        // don't get rectangular shimmer.
         if (cfg.shimmer?.enabled) {
             if (getComputedStyle(node).position === 'static') {
                 node.style.position = 'relative';
@@ -84,49 +136,100 @@ 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%',
-                // 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'
+                willChange: 'background-position',
+                ...(shapeClip ? { clipPath: shapeClip } : {})
             });
             node.appendChild(shimmerEl);
         }
-        // Initial styles for the static parts of each effect.
+        // Animated gradient: border-only ring along the element's silhouette.
+        // The user's fillColor stays visible inside; only the perimeter receives
+        // the animated gradient. Two strategies:
+        //  • Polygon / curved shapes (circle, ellipse, triangle, hexagon, star):
+        //    SVG mask of a stroked silhouette (vector-effect=non-scaling-stroke)
+        //    combined with the shape clip-path that trims the outer half of the
+        //    stroke — the inner half (= borderWidth px) forms the visible ring.
+        //  • Rectangles / non-shape elements (text, code, image, icon):
+        //    classic CSS gradient-border trick — transparent border + two-layer
+        //    mask with `mask-composite: exclude` so only the border ring shows.
+        //    Respects border-radius via `borderRadius: inherit`.
         if (cfg.gradientShift?.enabled) {
+            if (getComputedStyle(node).position === 'static') {
+                node.style.position = 'relative';
+            }
             const colors = cfg.gradientShift.colors ?? ['#7c3aed', '#06b6d4', '#ec4899', '#7c3aed'];
             const angle = cfg.gradientShift.angle ?? 135;
             const direction = cfg.gradientShift.direction ?? 'forward';
+            const borderWidth = cfg.gradientShift.borderWidth ?? 3;
+            gradientEl = document.createElement('div');
+            gradientEl.className = 'animot-gradient-shift';
+            Object.assign(gradientEl.style, {
+                position: 'absolute',
+                inset: '0',
+                pointerEvents: 'none',
+                zIndex: '0'
+            });
+            const useSilhouetteMask = params.shape && params.shape.type !== 'rectangle';
+            if (useSilhouetteMask) {
+                const svgMask = silhouetteMaskUrl(params.shape.type, borderWidth);
+                gradientEl.style.webkitMaskImage = svgMask;
+                gradientEl.style.maskImage = svgMask;
+                gradientEl.style.webkitMaskRepeat = 'no-repeat';
+                gradientEl.style.maskRepeat = 'no-repeat';
+                gradientEl.style.webkitMaskSize = '100% 100%';
+                gradientEl.style.maskSize = '100% 100%';
+                // Trim the outer half of the stroke so the visible ring sits
+                // flush with the silhouette edge instead of bleeding outside.
+                if (shapeClip)
+                    gradientEl.style.clipPath = shapeClip;
+            }
+            else {
+                gradientEl.style.boxSizing = 'border-box';
+                gradientEl.style.border = `${borderWidth}px solid transparent`;
+                gradientEl.style.borderRadius = 'inherit';
+                const m = 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)';
+                gradientEl.style.webkitMask = m;
+                gradientEl.style.mask = m;
+                gradientEl.style.webkitMaskComposite = 'xor';
+                gradientEl.style.maskComposite = 'exclude';
+            }
             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';
+                gradientEl.style.backgroundImage = `conic-gradient(from 0deg at 50% 50%, ${stops})`;
+                gradientEl.style.backgroundSize = '100% 100%';
+                gradientEl.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%';
+                gradientEl.style.backgroundImage = `linear-gradient(${angle}deg, ${colors.join(', ')})`;
+                gradientEl.style.backgroundSize = '400% 400%';
             }
+            // Insert as the FIRST child so it sits behind the actual element
+            // content (text, code block, etc.) instead of covering it.
+            node.insertBefore(gradientEl, node.firstChild);
         }
         const start = performance.now();
         function tick(now) {
+            // Re-alias cfg as non-null inside the tick closure — TS loses the
+            // `if (!cfg) return` narrowing across the function boundary,
+            // otherwise every cfg.* access flags as "possibly undefined".
+            const c = cfg;
             const elapsed = now - start;
-            // GLOW — pulsing box-shadow.
-            if (cfg.glow?.enabled) {
-                const cycle = effectiveCycle(cfg.glow.speedMs ?? 2400, params.slideDuration);
-                const phase = (elapsed % cycle) / cycle; // 0–1
-                const wave = (Math.sin(phase * Math.PI * 2) + 1) / 2; // 0–1
-                const intensity = cfg.glow.intensity ?? 0.6;
-                const blur = 12 + wave * 36 * intensity;
-                const spread = 2 + wave * 8 * intensity;
-                node.style.boxShadow = `0 0 ${blur}px ${spread}px ${cfg.glow.color}`;
+            // GLOW — pulsing halo. Uses `filter: drop-shadow` (not box-shadow)
+            // so the halo follows the element's actual ALPHA MASK — SVG shapes,
+            // icons, and PNGs with transparency get a halo around the visible
+            // silhouette, not around their rectangular bounding box. Composed
+            // with rgbSplit below into a single filter string.
+            let glowFilter = '';
+            if (c.glow?.enabled) {
+                const cycle = effectiveCycle(c.glow.speedMs ?? 2400, params.slideDuration);
+                const phase = (elapsed % cycle) / cycle;
+                const wave = (Math.sin(phase * Math.PI * 2) + 1) / 2;
+                const intensity = c.glow.intensity ?? 0.6;
+                const blur = 6 + wave * 24 * intensity;
+                // Two stacked drop-shadows give a denser halo than a single one
+                // (drop-shadow has no `spread` parameter, so we layer them).
+                glowFilter = `drop-shadow(0 0 ${blur}px ${c.glow.color}) drop-shadow(0 0 ${blur * 0.4}px ${c.glow.color})`;
             }
             // SHIMMER — sweep the stretched gradient ALONG its own gradient
             // direction (derived from `angle`) so the stripe glides perpendicular
@@ -137,10 +240,10 @@ export function decorations(node, params) {
             // 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 baseSpeed = cfg.shimmer.speedMs ?? 3000;
+            if (c.shimmer?.enabled && shimmerEl) {
+                const baseSpeed = c.shimmer.speedMs ?? 3000;
                 const baseCycle = effectiveCycle(baseSpeed, params.slideDuration);
-                const randomness = Math.max(0, Math.min(1, cfg.shimmer.randomness ?? 0));
+                const randomness = Math.max(0, Math.min(1, c.shimmer.randomness ?? 0));
                 const w = shimmerEl;
                 if (typeof w.__shimCycleStart !== 'number') {
                     w.__shimCycleStart = elapsed;
@@ -167,7 +270,7 @@ export function decorations(node, params) {
                     w.__shimCycleStart = elapsed;
                     local = 0;
                 }
-                const angle = cfg.shimmer.angle ?? 110;
+                const angle = c.shimmer.angle ?? 110;
                 const rad = angle * Math.PI / 180;
                 const dirX = Math.sin(rad);
                 const dirY = -Math.cos(rad);
@@ -193,22 +296,21 @@ export function decorations(node, params) {
             //               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 direction = cfg.gradientShift.direction ?? 'forward';
+            if (c.gradientShift?.enabled) {
+                const cycle = effectiveCycle(c.gradientShift.speedMs ?? 6000, params.slideDuration);
+                const direction = c.gradientShift.direction ?? 'forward';
+                // Write to the gradient child element instead of the wrapper —
+                // the wrapper carries the glow filter, which would be clipped
+                // if the wrapper itself had clip-path.
+                const target = gradientEl ?? node;
                 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 colors = c.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})`;
+                    target.style.backgroundImage = `conic-gradient(from ${rotateDeg}deg at 50% 50%, ${stops})`;
                 }
                 else {
-                    const angle = cfg.gradientShift.angle ?? 135;
+                    const angle = c.gradientShift.angle ?? 135;
                     const rad = angle * Math.PI / 180;
                     const dirX = Math.sin(rad);
                     const dirY = -Math.cos(rad);
@@ -222,27 +324,31 @@ export function decorations(node, params) {
                     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}%`;
+                    target.style.backgroundPosition = `${posX}% ${posY}%`;
                 }
             }
             // RGB SPLIT — chromatic aberration via stacked drop-shadows.
-            if (cfg.rgbSplit?.enabled) {
-                const offset = cfg.rgbSplit.offset ?? 3;
+            let rgbSplitFilter = '';
+            if (c.rgbSplit?.enabled) {
+                const offset = c.rgbSplit.offset ?? 3;
                 let dx = offset;
-                if ((cfg.rgbSplit.speedMs ?? 0) > 0) {
-                    const cycle = effectiveCycle(cfg.rgbSplit.speedMs, params.slideDuration);
+                if ((c.rgbSplit.speedMs ?? 0) > 0) {
+                    const cycle = effectiveCycle(c.rgbSplit.speedMs, params.slideDuration);
                     const phase = (elapsed % cycle) / cycle;
                     dx = offset * Math.sin(phase * Math.PI * 2);
                 }
-                node.style.filter = `${originalFilter} drop-shadow(${dx}px 0 0 rgba(255, 0, 64, 0.7)) drop-shadow(${-dx}px 0 0 rgba(0, 200, 255, 0.7))`;
+                rgbSplitFilter = `drop-shadow(${dx}px 0 0 rgba(255, 0, 64, 0.7)) drop-shadow(${-dx}px 0 0 rgba(0, 200, 255, 0.7))`;
             }
+            // Compose the user's original filter + glow + rgbSplit into a single
+            // `filter` value. Writing each effect to node.style.filter
+            // independently would clobber the others, since CSS filter is one
+            // string property — not a multi-value list.
+            const composed = [originalFilter, glowFilter, rgbSplitFilter].filter(Boolean).join(' ');
+            node.style.filter = composed;
             raf = requestAnimationFrame(tick);
         }
         raf = requestAnimationFrame(tick);

package/package.json

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