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

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 (5) hide show
  1. package/dist/cjs/CameraMotionBlur.js +20 -4
  2. package/dist/esm/index.mjs +20 -4
  3. package/package.json +60 -60
  4. package/tsconfig-esm.json +0 -1
  5. package/dist/esm/MotionBlur.d.ts +0 -9
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,13 +40,18 @@ 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})`,
38
- }, children: (0, jsx_runtime_1.jsx)(remotion_1.Freeze, { frame: currentFrame - sampleFrameOffset, children: children }) }, `frame-${i.toString()}`));
53
+ filter: `opacity(${1 / actualSamples})`,
54
+ }, children: (0, jsx_runtime_1.jsx)(remotion_1.Freeze, { frame: currentFrame - sampleFrameOffset + 1, children: children }) }, `frame-${i.toString()}`));
39
55
  }) }));
40
56
  };
41
57
  exports.CameraMotionBlur = CameraMotionBlur;
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,13 +38,18 @@ 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})`,
36
- }, children: jsx(Freeze, { frame: currentFrame - sampleFrameOffset, children: children }) }, `frame-${i.toString()}`));
51
+ filter: `opacity(${1 / actualSamples})`,
52
+ }, children: jsx(Freeze, { frame: currentFrame - sampleFrameOffset + 1, children: children }) }, `frame-${i.toString()}`));
37
53
  }) }));
38
54
  };
39
55
 
package/package.json CHANGED
@@ -1,61 +1,61 @@
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-alpha10",
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-alpha10"
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
+ "rollup": "^2.70.1",
44
+ "typescript": "^4.7.0",
45
+ "remotion": "4.0.0-alpha10"
46
+ },
47
+ "keywords": [
48
+ "remotion",
49
+ "motion",
50
+ "blur"
51
+ ],
52
+ "publishConfig": {
53
+ "access": "public"
54
+ },
55
+ "scripts": {
56
+ "formatting": "prettier src --check",
57
+ "lint": "eslint src --ext ts,tsx",
58
+ "watch": "tsc -w",
59
+ "build": "rollup --config rollup.config.js && tsc -d"
60
+ }
61
+ }
package/tsconfig-esm.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "extends": "../tsconfig-esm.settings.json",
3
3
  "compilerOptions": {
4
- "composite": true,
5
4
  "rootDir": "./src",
6
5
  "outDir": "./dist/esm",
7
6
  "skipLibCheck": true,
package/dist/esm/MotionBlur.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import type { TrailProps } from './Trail';
3
- export declare type MotionBlurProps = Omit<TrailProps, 'trailOpacity'> & {
4
- blurOpacity: number;
5
- };
6
- /**
7
- * @deprecated The component has been renamed "Trail" instead: https://remotion.dev/docs/motion-blur/trail
8
- */
9
- export declare const MotionBlur: React.FC<MotionBlurProps>;