@remotion/motion-blur 3.3.83 → 3.3.86

package/dist/cjs/CameraMotionBlur.js

@@ -3,6 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CameraMotionBlur = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
+/**
+ * If the current frame is 0, then it is rendered with low opacity,
+ * and the trailing elements have frame numbers -1, -2, -3, -4, etc.
+ * To fix this, we instead reduce the number of samples to not go into negative territory.
+ */
+const getNumberOfSamples = ({ shutterFraction, samples, currentFrame, }) => {
+    const maxOffset = shutterFraction * samples;
+    const maxTimeReverse = currentFrame - maxOffset;
+    const factor = Math.min(1, Math.max(0, maxTimeReverse / maxOffset + 1));
+    return Math.max(1, Math.round(Math.min(factor * samples, samples)));
+};
 /**
  * @description Produces natural looking motion blur similar to what would be produced by a film camera.
  * @see [Documentation](https://www.remotion.dev/docs/motion-blur/camera-motion-blur)
@@ -29,12 +40,17 @@ const CameraMotionBlur = ({ children, shutterAngle = 180, samples = 10, }) => {
         throw new TypeError(`"shutterAngle" must be between 0 and 360, but got ${JSON.stringify(shutterAngle)}`);
     }
     const shutterFraction = shutterAngle / 360;
-    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(samples).fill(true).map((_, i) => {
+    const actualSamples = getNumberOfSamples({
+        currentFrame,
+        samples,
+        shutterFraction,
+    });
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(actualSamples).fill(true).map((_, i) => {
             const sample = i + 1;
-            const sampleFrameOffset = shutterFraction * (sample / samples);
+            const sampleFrameOffset = shutterFraction * (sample / actualSamples);
             return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
                     mixBlendMode: 'plus-lighter',
-                    filter: `opacity(${1 / samples})`,
+                    filter: `opacity(${1 / actualSamples})`,
                 }, children: (0, jsx_runtime_1.jsx)(remotion_1.Freeze, { frame: currentFrame - sampleFrameOffset, children: children }) }, `frame-${i.toString()}`));
         }) }));
 };

package/dist/esm/index.mjs

@@ -1,6 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCurrentFrame, AbsoluteFill, Freeze } from 'remotion';
 
+/**
+ * If the current frame is 0, then it is rendered with low opacity,
+ * and the trailing elements have frame numbers -1, -2, -3, -4, etc.
+ * To fix this, we instead reduce the number of samples to not go into negative territory.
+ */
+const getNumberOfSamples = ({ shutterFraction, samples, currentFrame, }) => {
+    const maxOffset = shutterFraction * samples;
+    const maxTimeReverse = currentFrame - maxOffset;
+    const factor = Math.min(1, Math.max(0, maxTimeReverse / maxOffset + 1));
+    return Math.max(1, Math.round(Math.min(factor * samples, samples)));
+};
 /**
  * @description Produces natural looking motion blur similar to what would be produced by a film camera.
  * @see [Documentation](https://www.remotion.dev/docs/motion-blur/camera-motion-blur)
@@ -27,12 +38,17 @@ const CameraMotionBlur = ({ children, shutterAngle = 180, samples = 10, }) => {
         throw new TypeError(`"shutterAngle" must be between 0 and 360, but got ${JSON.stringify(shutterAngle)}`);
     }
     const shutterFraction = shutterAngle / 360;
-    return (jsx(AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(samples).fill(true).map((_, i) => {
+    const actualSamples = getNumberOfSamples({
+        currentFrame,
+        samples,
+        shutterFraction,
+    });
+    return (jsx(AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(actualSamples).fill(true).map((_, i) => {
             const sample = i + 1;
-            const sampleFrameOffset = shutterFraction * (sample / samples);
+            const sampleFrameOffset = shutterFraction * (sample / actualSamples);
             return (jsx(AbsoluteFill, { style: {
                     mixBlendMode: 'plus-lighter',
-                    filter: `opacity(${1 / samples})`,
+                    filter: `opacity(${1 / actualSamples})`,
                 }, children: jsx(Freeze, { frame: currentFrame - sampleFrameOffset, children: children }) }, `frame-${i.toString()}`));
         }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/motion-blur",
-  "version": "3.3.83",
+  "version": "3.3.86",
   "description": "Motion blur effect for Remotion",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -16,7 +16,7 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "3.3.83"
+    "remotion": "3.3.86"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -40,7 +40,7 @@
     "prettier-plugin-organize-imports": "^2.3.4",
     "react": "18.0.0",
     "react-dom": "18.0.0",
-    "remotion": "3.3.83",
+    "remotion": "3.3.86",
     "rollup": "^2.70.1",
     "typescript": "^4.7.0"
   },