@remotion/motion-blur 4.0.0-retry.9 → 4.1.0-alpha2

package/LICENSE.md

@@ -7,7 +7,7 @@ Depending on the type of your legal entity, you are granted permission to use Re
 
 ## Free license
 
-Copyright © 2022 [Remotion](https://www.remotion.dev/)
+Copyright © 2023 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 

package/dist/cjs/CameraMotionBlur.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type CameraMotionBlurProps = {
+    children: React.ReactNode;
+    shutterAngle?: number;
+    samples?: number;
+};
+/**
+ * @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)
+ */
+export declare const CameraMotionBlur: React.FC<CameraMotionBlurProps>;

package/dist/{CameraMotionBlur.js → cjs/CameraMotionBlur.js}

@@ -3,6 +3,21 @@ 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)
+ */
 const CameraMotionBlur = ({ children, shutterAngle = 180, samples = 10, }) => {
     const currentFrame = (0, remotion_1.useCurrentFrame)();
     if (typeof samples !== 'number' ||
@@ -25,13 +40,18 @@ 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})`,
-                }, children: (0, jsx_runtime_1.jsx)(remotion_1.Freeze, { frame: currentFrame - sampleFrameOffset, children: children }) }, `frame-${i.toString()}`));
+                    filter: `opacity(${1 / actualSamples})`,
+                }, children: (0, jsx_runtime_1.jsx)(remotion_1.Freeze, { frame: currentFrame - sampleFrameOffset + 1, children: children }) }, `frame-${i.toString()}`));
         }) }));
 };
 exports.CameraMotionBlur = CameraMotionBlur;

package/dist/cjs/Trail.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type TrailProps = {
+    children: React.ReactNode;
+    layers: number;
+    lagInFrames: number;
+    trailOpacity: number;
+};
+/**
+ * @description The <Trail> component duplicates it's children and adds a time offset to each layer in order to create a trail effect.
+ * @see [Documentation](https://www.remotion.dev/docs/motion-blur/trail)
+ */
+export declare const Trail: React.FC<TrailProps>;

package/dist/{Trail.js → cjs/Trail.js}

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Trail = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
+/**
+ * @description The <Trail> component duplicates it's children and adds a time offset to each layer in order to create a trail effect.
+ * @see [Documentation](https://www.remotion.dev/docs/motion-blur/trail)
+ */
 const Trail = ({ children, layers, lagInFrames, trailOpacity, }) => {
     const frame = (0, remotion_1.useCurrentFrame)();
     if (typeof layers !== 'number' ||

package/dist/{index.d.ts → cjs/index.d.ts}

@@ -1,3 +1,2 @@
 export { CameraMotionBlur, CameraMotionBlurProps } from './CameraMotionBlur';
-export { MotionBlur, MotionBlurProps } from './MotionBlur';
 export { Trail, TrailProps } from './Trail';

package/dist/{index.js → cjs/index.js}

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Trail = exports.MotionBlur = exports.CameraMotionBlur = void 0;
+exports.Trail = exports.CameraMotionBlur = void 0;
 var CameraMotionBlur_1 = require("./CameraMotionBlur");
 Object.defineProperty(exports, "CameraMotionBlur", { enumerable: true, get: function () { return CameraMotionBlur_1.CameraMotionBlur; } });
-var MotionBlur_1 = require("./MotionBlur");
-Object.defineProperty(exports, "MotionBlur", { enumerable: true, get: function () { return MotionBlur_1.MotionBlur; } });
 var Trail_1 = require("./Trail");
 Object.defineProperty(exports, "Trail", { enumerable: true, get: function () { return Trail_1.Trail; } });

package/dist/esm/CameraMotionBlur.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type CameraMotionBlurProps = {
+    children: React.ReactNode;
+    shutterAngle?: number;
+    samples?: number;
+};
+/**
+ * @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)
+ */
+export declare const CameraMotionBlur: React.FC<CameraMotionBlurProps>;

package/dist/esm/Trail.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type TrailProps = {
+    children: React.ReactNode;
+    layers: number;
+    lagInFrames: number;
+    trailOpacity: number;
+};
+/**
+ * @description The <Trail> component duplicates it's children and adds a time offset to each layer in order to create a trail effect.
+ * @see [Documentation](https://www.remotion.dev/docs/motion-blur/trail)
+ */
+export declare const Trail: React.FC<TrailProps>;

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { CameraMotionBlur, CameraMotionBlurProps } from './CameraMotionBlur';
+export { Trail, TrailProps } from './Trail';

package/dist/esm/index.mjs

@@ -0,0 +1,90 @@
+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)
+ */
+const CameraMotionBlur = ({ children, shutterAngle = 180, samples = 10, }) => {
+    const currentFrame = useCurrentFrame();
+    if (typeof samples !== 'number' ||
+        Number.isNaN(samples) ||
+        !Number.isFinite(samples)) {
+        throw new TypeError(`"samples" must be a number, but got ${JSON.stringify(samples)}`);
+    }
+    if (samples % 1 !== 0) {
+        throw new TypeError(`"samples" must be an integer, but got ${JSON.stringify(samples)}`);
+    }
+    if (samples < 0) {
+        throw new TypeError(`"samples" must be non-negative, but got ${JSON.stringify(samples)}`);
+    }
+    if (typeof shutterAngle !== 'number' ||
+        Number.isNaN(shutterAngle) ||
+        !Number.isFinite(shutterAngle)) {
+        throw new TypeError(`"shutterAngle" must be a number, but got ${JSON.stringify(shutterAngle)}`);
+    }
+    if (shutterAngle < 0 || shutterAngle > 360) {
+        throw new TypeError(`"shutterAngle" must be between 0 and 360, but got ${JSON.stringify(shutterAngle)}`);
+    }
+    const shutterFraction = shutterAngle / 360;
+    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 / actualSamples);
+            return (jsx(AbsoluteFill, { style: {
+                    mixBlendMode: 'plus-lighter',
+                    filter: `opacity(${1 / actualSamples})`,
+                }, children: jsx(Freeze, { frame: currentFrame - sampleFrameOffset + 1, children: children }) }, `frame-${i.toString()}`));
+        }) }));
+};
+
+/**
+ * @description The <Trail> component duplicates it's children and adds a time offset to each layer in order to create a trail effect.
+ * @see [Documentation](https://www.remotion.dev/docs/motion-blur/trail)
+ */
+const Trail = ({ children, layers, lagInFrames, trailOpacity, }) => {
+    const frame = useCurrentFrame();
+    if (typeof layers !== 'number' ||
+        Number.isNaN(layers) ||
+        !Number.isFinite(layers)) {
+        throw new TypeError(`"layers" must be a number, but got ${JSON.stringify(layers)}`);
+    }
+    if (layers % 1 !== 0) {
+        throw new TypeError(`"layers" must be an integer, but got ${JSON.stringify(layers)}`);
+    }
+    if (layers < 0) {
+        throw new TypeError(`"layers" must be non-negative, but got ${JSON.stringify(layers)}`);
+    }
+    if (typeof trailOpacity !== 'number' ||
+        Number.isNaN(trailOpacity) ||
+        !Number.isFinite(trailOpacity)) {
+        throw new TypeError(`"trailOpacity" must be a number, but got ${JSON.stringify(trailOpacity)}`);
+    }
+    if (typeof lagInFrames !== 'number' ||
+        Number.isNaN(lagInFrames) ||
+        !Number.isFinite(lagInFrames)) {
+        throw new TypeError(`"lagInFrames" must be a number, but got ${JSON.stringify(lagInFrames)}`);
+    }
+    return (jsxs(AbsoluteFill, { children: [new Array(layers).fill(true).map((_, i) => {
+                return (jsx(AbsoluteFill, { style: {
+                        opacity: trailOpacity - ((layers - i) / layers) * trailOpacity,
+                    }, children: jsx(Freeze, { frame: frame - lagInFrames * (layers - i), children: children }) }, `frame-${i.toString()}`));
+            }), children] }));
+};
+
+export { CameraMotionBlur, Trail };

package/package.json

@@ -1,49 +1,61 @@
 {
-	"name": "@remotion/motion-blur",
-	"version": "4.0.0-retry.9+5c2247718",
-	"description": "Motion blur effect for Remotion",
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"sideEffects": false,
-	"scripts": {
-		"lint": "eslint src --ext ts,tsx",
-		"watch": "tsc -w",
-		"build": "tsc -d"
-	},
-	"author": "Matt McGillivray, Ilija Boshkov <ilija@codechem.com>, Jonny Burger <jonny@remotion.dev>",
-	"contributors": [],
-	"license": "MIT",
-	"repository": {
-		"url": "https://github.com/remotion-dev/remotion"
-	},
-	"bugs": {
-		"url": "https://github.com/remotion-dev/remotion/issues"
-	},
-	"dependencies": {
-		"remotion": "4.0.0-retry.9+5c2247718"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"devDependencies": {
-		"@jonny/eslint-config": "3.0.266",
-		"@types/react": "18.0.23",
-		"eslint": "8.25.0",
-		"prettier": "^2.7.1",
-		"prettier-plugin-organize-imports": "^2.3.4",
-		"react": "18.0.0",
-		"react-dom": "18.0.0",
-		"remotion": "3.2.39",
-		"typescript": "^4.7.0"
-	},
-	"keywords": [
-		"remotion",
-		"motion",
-		"blur"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"gitHead": "5c22477180ffb35d5e437524df156da722cda837"
-}
+  "name": "@remotion/motion-blur",
+  "version": "4.1.0-alpha2",
+  "description": "Motion blur effect for Remotion",
+  "main": "dist/cjs/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "module": "dist/esm/index.mjs",
+  "sideEffects": false,
+  "author": "Matt McGillivray, Ilija Boshkov <ilija@codechem.com>, Jonny Burger <jonny@remotion.dev>",
+  "contributors": [],
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "dependencies": {
+    "remotion": "4.1.0-alpha2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/cjs/index.d.ts",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.266",
+    "@rollup/plugin-typescript": "^8.2.0",
+    "@types/react": "18.0.26",
+    "eslint": "8.42.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "rollup": "^2.70.1",
+    "typescript": "4.9.5",
+    "remotion": "4.1.0-alpha2"
+  },
+  "keywords": [
+    "remotion",
+    "motion",
+    "blur"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "formatting": "prettier src --check",
+    "lint": "eslint src --ext ts,tsx",
+    "watch": "tsc -w",
+    "build": "rollup --config rollup.config.js && tsc -d"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,23 @@
+// rollup.config.js
+import typescript from '@rollup/plugin-typescript';
+
+export default [
+	{
+		input: 'src/index.ts',
+		output: [
+			{
+				file: 'dist/esm/index.mjs',
+				format: 'es',
+				sourcemap: false,
+			},
+		],
+		external: ['react', 'remotion', 'react/jsx-runtime'],
+		plugins: [
+			typescript({
+				tsconfig: 'tsconfig-esm.json',
+				sourceMap: false,
+				outputToFilesystem: true,
+			}),
+		],
+	},
+];

package/tsconfig-esm.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../tsconfig-esm.settings.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist/esm",
+		"skipLibCheck": true,
+		"jsx": "react-jsx",
+		"moduleResolution": "node"
+	},
+	"references": [{"path": "../core"}],
+	"include": ["./src"]
+}

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/dist/CameraMotionBlur.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare type CameraMotionBlurProps = {
-    children: React.ReactNode;
-    shutterAngle?: number;
-    samples?: number;
-};
-export declare const CameraMotionBlur: React.FC<CameraMotionBlurProps>;

package/dist/MotionBlur.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { TrailProps } from './Trail';
-export declare type MotionBlurProps = Omit<TrailProps, 'trailOpacity'> & {
-    blurOpacity: number;
-};
-/**
- * @deprecated The component has been renamed "Trail" instead: https://remotion.dev/docs/motion-blur/trail
- */
-export declare const MotionBlur: React.FC<MotionBlurProps>;

package/dist/MotionBlur.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MotionBlur = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Trail_1 = require("./Trail");
-/**
- * @deprecated The component has been renamed "Trail" instead: https://remotion.dev/docs/motion-blur/trail
- */
-const MotionBlur = ({ blurOpacity, ...rest }) => {
-    if (typeof blurOpacity !== 'number' ||
-        Number.isNaN(blurOpacity) ||
-        !Number.isFinite(blurOpacity)) {
-        throw new TypeError(`"blurOpacity" must be a number, but got ${JSON.stringify(blurOpacity)}`);
-    }
-    return (0, jsx_runtime_1.jsx)(Trail_1.Trail, { ...rest, trailOpacity: blurOpacity });
-};
-exports.MotionBlur = MotionBlur;

package/dist/Trail.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare type TrailProps = {
-    children: React.ReactNode;
-    layers: number;
-    lagInFrames: number;
-    trailOpacity: number;
-};
-export declare const Trail: React.FC<TrailProps>;

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-	"extends": "../tsconfig.settings.json",
-	"compilerOptions": {
-		"composite": true,
-		"rootDir": "src",
-		"outDir": "dist",
-		"skipLibCheck": true
-	},
-	"include": ["src"],
-	"references": [
-		{
-			"path": "../core"
-		}
-	]
-}