@remotion/motion-blur 4.0.0-alpha.185 → 4.0.0-alpha4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/CameraMotionBlur.js +19 -3
  2. package/dist/cjs/index.d.ts +1 -0
  3. package/dist/cjs/index.js +3 -1
  4. package/dist/esm/index.d.ts +1 -0
  5. package/dist/esm/index.mjs +32 -4
  6. package/package.json +59 -60
package/dist/cjs/CameraMotionBlur.js CHANGED
@@ -3,6 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.CameraMotionBlur = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const remotion_1 = require("remotion");
6
+ /**
7
+ * If the current frame is 0, then it is rendered with low opacity,
8
+ * and the trailing elements have frame numbers -1, -2, -3, -4, etc.
9
+ * To fix this, we instead reduce the number of samples to not go into negative territory.
10
+ */
11
+ const getNumberOfSamples = ({ shutterFraction, samples, currentFrame, }) => {
12
+ const maxOffset = shutterFraction * samples;
13
+ const maxTimeReverse = currentFrame - maxOffset;
14
+ const factor = Math.min(1, Math.max(0, maxTimeReverse / maxOffset + 1));
15
+ return Math.max(1, Math.round(Math.min(factor * samples, samples)));
16
+ };
6
17
  /**
7
18
  * @description Produces natural looking motion blur similar to what would be produced by a film camera.
8
19
  * @see [Documentation](https://www.remotion.dev/docs/motion-blur/camera-motion-blur)
@@ -29,12 +40,17 @@ const CameraMotionBlur = ({ children, shutterAngle = 180, samples = 10, }) => {
29
40
  throw new TypeError(`"shutterAngle" must be between 0 and 360, but got ${JSON.stringify(shutterAngle)}`);
30
41
  }
31
42
  const shutterFraction = shutterAngle / 360;
32
- return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(samples).fill(true).map((_, i) => {
43
+ const actualSamples = getNumberOfSamples({
44
+ currentFrame,
45
+ samples,
46
+ shutterFraction,
47
+ });
48
+ return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(actualSamples).fill(true).map((_, i) => {
33
49
  const sample = i + 1;
34
- const sampleFrameOffset = shutterFraction * (sample / samples);
50
+ const sampleFrameOffset = shutterFraction * (sample / actualSamples);
35
51
  return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
36
52
  mixBlendMode: 'plus-lighter',
37
- filter: `opacity(${1 / samples})`,
53
+ filter: `opacity(${1 / actualSamples})`,
38
54
  }, children: (0, jsx_runtime_1.jsx)(remotion_1.Freeze, { frame: currentFrame - sampleFrameOffset, children: children }) }, `frame-${i.toString()}`));
39
55
  }) }));
40
56
  };
package/dist/cjs/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { CameraMotionBlur, CameraMotionBlurProps } from './CameraMotionBlur';
2
+ export { MotionBlur, MotionBlurProps } from './MotionBlur';
2
3
  export { Trail, TrailProps } from './Trail';
package/dist/cjs/index.js CHANGED
@@ -1,7 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Trail = exports.CameraMotionBlur = void 0;
3
+ exports.Trail = exports.MotionBlur = exports.CameraMotionBlur = void 0;
4
4
  var CameraMotionBlur_1 = require("./CameraMotionBlur");
5
5
  Object.defineProperty(exports, "CameraMotionBlur", { enumerable: true, get: function () { return CameraMotionBlur_1.CameraMotionBlur; } });
6
+ var MotionBlur_1 = require("./MotionBlur");
7
+ Object.defineProperty(exports, "MotionBlur", { enumerable: true, get: function () { return MotionBlur_1.MotionBlur; } });
6
8
  var Trail_1 = require("./Trail");
7
9
  Object.defineProperty(exports, "Trail", { enumerable: true, get: function () { return Trail_1.Trail; } });
package/dist/esm/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { CameraMotionBlur, CameraMotionBlurProps } from './CameraMotionBlur';
2
+ export { MotionBlur, MotionBlurProps } from './MotionBlur';
2
3
  export { Trail, TrailProps } from './Trail';
package/dist/esm/index.mjs CHANGED
@@ -1,6 +1,17 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useCurrentFrame, AbsoluteFill, Freeze } from 'remotion';
3
3
 
4
+ /**
5
+ * If the current frame is 0, then it is rendered with low opacity,
6
+ * and the trailing elements have frame numbers -1, -2, -3, -4, etc.
7
+ * To fix this, we instead reduce the number of samples to not go into negative territory.
8
+ */
9
+ const getNumberOfSamples = ({ shutterFraction, samples, currentFrame, }) => {
10
+ const maxOffset = shutterFraction * samples;
11
+ const maxTimeReverse = currentFrame - maxOffset;
12
+ const factor = Math.min(1, Math.max(0, maxTimeReverse / maxOffset + 1));
13
+ return Math.max(1, Math.round(Math.min(factor * samples, samples)));
14
+ };
4
15
  /**
5
16
  * @description Produces natural looking motion blur similar to what would be produced by a film camera.
6
17
  * @see [Documentation](https://www.remotion.dev/docs/motion-blur/camera-motion-blur)
@@ -27,12 +38,17 @@ const CameraMotionBlur = ({ children, shutterAngle = 180, samples = 10, }) => {
27
38
  throw new TypeError(`"shutterAngle" must be between 0 and 360, but got ${JSON.stringify(shutterAngle)}`);
28
39
  }
29
40
  const shutterFraction = shutterAngle / 360;
30
- return (jsx(AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(samples).fill(true).map((_, i) => {
41
+ const actualSamples = getNumberOfSamples({
42
+ currentFrame,
43
+ samples,
44
+ shutterFraction,
45
+ });
46
+ return (jsx(AbsoluteFill, { style: { isolation: 'isolate' }, children: new Array(actualSamples).fill(true).map((_, i) => {
31
47
  const sample = i + 1;
32
- const sampleFrameOffset = shutterFraction * (sample / samples);
48
+ const sampleFrameOffset = shutterFraction * (sample / actualSamples);
33
49
  return (jsx(AbsoluteFill, { style: {
34
50
  mixBlendMode: 'plus-lighter',
35
- filter: `opacity(${1 / samples})`,
51
+ filter: `opacity(${1 / actualSamples})`,
36
52
  }, children: jsx(Freeze, { frame: currentFrame - sampleFrameOffset, children: children }) }, `frame-${i.toString()}`));
37
53
  }) }));
38
54
  };
@@ -71,4 +87,16 @@ const Trail = ({ children, layers, lagInFrames, trailOpacity, }) => {
71
87
  }), children] }));
72
88
  };
73
89
 
74
- export { CameraMotionBlur, Trail };
90
+ /**
91
+ * @deprecated The component has been renamed "Trail" instead: https://remotion.dev/docs/motion-blur/trail
92
+ */
93
+ const MotionBlur = ({ blurOpacity, ...rest }) => {
94
+ if (typeof blurOpacity !== 'number' ||
95
+ Number.isNaN(blurOpacity) ||
96
+ !Number.isFinite(blurOpacity)) {
97
+ throw new TypeError(`"blurOpacity" must be a number, but got ${JSON.stringify(blurOpacity)}`);
98
+ }
99
+ return jsx(Trail, { ...rest, trailOpacity: blurOpacity });
100
+ };
101
+
102
+ export { CameraMotionBlur, MotionBlur, Trail };
package/package.json CHANGED
@@ -1,61 +1,60 @@
1
1
  {
2
- "name": "@remotion/motion-blur",
3
- "version": "4.0.0-alpha.185+1b8f0e746",
4
- "description": "Motion blur effect for Remotion",
5
- "main": "dist/cjs/index.js",
6
- "types": "dist/cjs/index.d.ts",
7
- "module": "dist/esm/index.mjs",
8
- "sideEffects": false,
9
- "scripts": {
10
- "lint": "eslint src --ext ts,tsx",
11
- "watch": "tsc -w",
12
- "build": "rollup --config rollup.config.js && tsc -d"
13
- },
14
- "author": "Matt McGillivray, Ilija Boshkov <ilija@codechem.com>, Jonny Burger <jonny@remotion.dev>",
15
- "contributors": [],
16
- "license": "MIT",
17
- "repository": {
18
- "url": "https://github.com/remotion-dev/remotion"
19
- },
20
- "bugs": {
21
- "url": "https://github.com/remotion-dev/remotion/issues"
22
- },
23
- "dependencies": {
24
- "remotion": "4.0.0-alpha.185+1b8f0e746"
25
- },
26
- "peerDependencies": {
27
- "react": ">=16.8.0",
28
- "react-dom": ">=16.8.0"
29
- },
30
- "exports": {
31
- "./package.json": "./package.json",
32
- ".": {
33
- "types": "./dist/cjs/index.d.ts",
34
- "module": "./dist/esm/index.mjs",
35
- "import": "./dist/esm/index.mjs",
36
- "require": "./dist/cjs/index.js"
37
- }
38
- },
39
- "devDependencies": {
40
- "@jonny/eslint-config": "3.0.266",
41
- "@rollup/plugin-typescript": "^8.2.0",
42
- "@types/react": "18.0.26",
43
- "eslint": "8.25.0",
44
- "prettier": "^2.7.1",
45
- "prettier-plugin-organize-imports": "^2.3.4",
46
- "react": "18.0.0",
47
- "react-dom": "18.0.0",
48
- "remotion": "workspace:*",
49
- "rollup": "^2.70.1",
50
- "typescript": "^4.7.0"
51
- },
52
- "keywords": [
53
- "remotion",
54
- "motion",
55
- "blur"
56
- ],
57
- "publishConfig": {
58
- "access": "public"
59
- },
60
- "gitHead": "1b8f0e746ea4aa1153c4ecc7bc1063752c405f25"
61
- }
2
+ "name": "@remotion/motion-blur",
3
+ "version": "4.0.0-alpha4",
4
+ "description": "Motion blur effect for Remotion",
5
+ "main": "dist/cjs/index.js",
6
+ "types": "dist/cjs/index.d.ts",
7
+ "module": "dist/esm/index.mjs",
8
+ "sideEffects": false,
9
+ "author": "Matt McGillivray, Ilija Boshkov <ilija@codechem.com>, Jonny Burger <jonny@remotion.dev>",
10
+ "contributors": [],
11
+ "license": "MIT",
12
+ "repository": {
13
+ "url": "https://github.com/remotion-dev/remotion"
14
+ },
15
+ "bugs": {
16
+ "url": "https://github.com/remotion-dev/remotion/issues"
17
+ },
18
+ "dependencies": {
19
+ "remotion": "4.0.0-alpha4"
20
+ },
21
+ "peerDependencies": {
22
+ "react": ">=16.8.0",
23
+ "react-dom": ">=16.8.0"
24
+ },
25
+ "exports": {
26
+ "./package.json": "./package.json",
27
+ ".": {
28
+ "types": "./dist/cjs/index.d.ts",
29
+ "module": "./dist/esm/index.mjs",
30
+ "import": "./dist/esm/index.mjs",
31
+ "require": "./dist/cjs/index.js"
32
+ }
33
+ },
34
+ "devDependencies": {
35
+ "@jonny/eslint-config": "3.0.266",
36
+ "@rollup/plugin-typescript": "^8.2.0",
37
+ "@types/react": "18.0.26",
38
+ "eslint": "8.25.0",
39
+ "prettier": "^2.7.1",
40
+ "prettier-plugin-organize-imports": "^2.3.4",
41
+ "react": "18.0.0",
42
+ "react-dom": "18.0.0",
43
+ "remotion": "4.0.0-alpha4",
44
+ "rollup": "^2.70.1",
45
+ "typescript": "^4.7.0"
46
+ },
47
+ "keywords": [
48
+ "remotion",
49
+ "motion",
50
+ "blur"
51
+ ],
52
+ "publishConfig": {
53
+ "access": "public"
54
+ },
55
+ "scripts": {
56
+ "lint": "eslint src --ext ts,tsx",
57
+ "watch": "tsc -w",
58
+ "build": "rollup --config rollup.config.js && tsc -d"
59
+ }
60
+ }