animot-presenter 0.5.9 → 0.5.10

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

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