@remotion/motion-blur 4.0.529 → 4.0.531

package/README.md

@@ -15,4 +15,4 @@ Remove the `^` character from the version number to use the exact version.
 
 ## Usage
 
-See the [documentation](https://www.remotion.dev/docs/motion-blur) for more information.
+See the [documentation](https://www.remotion.dev/docs/motion-blur/api) for more information.

package/dist/cjs/HtmlInCanvasMotionBlur.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { type HtmlInCanvasProps } from 'remotion';
-export type HtmlInCanvasMotionBlurProps = Pick<HtmlInCanvasProps, 'from' | 'durationInFrames' | 'trimBefore' | 'playbackRate'> & {
+import { type InteractiveBaseProps, type InteractivePremountProps } from 'remotion';
+export type HtmlInCanvasMotionBlurProps = InteractiveBaseProps & InteractivePremountProps & {
     readonly children: React.ReactNode;
     readonly width: number;
     readonly height: number;
     readonly shutterAngle?: number;
     readonly samples?: number;
+    readonly disabled?: boolean;
 };
 /**
  * Experimental motion blur that averages separately captured HTML-in-canvas
@@ -13,4 +14,4 @@ export type HtmlInCanvasMotionBlurProps = Pick<HtmlInCanvasProps, 'from' | 'dura
  * the experimental HTML-in-canvas flag enabled. Nested HtmlInCanvas components
  * are currently unsupported.
  */
-export declare const HtmlInCanvasMotionBlur: React.FC<HtmlInCanvasMotionBlurProps>;
+export declare const HtmlInCanvasMotionBlur: React.ComponentType<HtmlInCanvasMotionBlurProps>;

package/dist/cjs/HtmlInCanvasMotionBlur.js

@@ -4,25 +4,50 @@ exports.HtmlInCanvasMotionBlur = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const htmlInCanvasMotionBlurSchema = {
+    ...remotion_1.Interactive.baseSchema,
+    ...remotion_1.Interactive.premountSchema,
+    shutterAngle: {
+        type: 'number',
+        min: 0,
+        max: 360,
+        step: 1,
+        default: 180,
+        description: 'Shutter angle',
+        hiddenFromList: false,
+    },
+    samples: {
+        type: 'number',
+        min: 1,
+        max: 64,
+        step: 1,
+        integer: true,
+        default: 8,
+        description: 'Samples',
+        hiddenFromList: false,
+        keyframable: false,
+    },
+    disabled: {
+        type: 'boolean',
+        default: false,
+        description: 'Disabled',
+    },
+};
 const MotionBlurSample = ({ children, width, height, index, count, shutterInFrames, firstFrame, lastFrame, }) => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const sampleFrame = Math.max(firstFrame, Math.min(lastFrame, frame + ((index + 0.5) / count - 0.5) * shutterInFrames));
-    return (jsx_runtime_1.jsx("div", { "aria-hidden": index !== Math.floor(count / 2), drawable: '', style: {
+    const content = jsx_runtime_1.jsx(remotion_1.Freeze, { frame: sampleFrame, children: children });
+    const isRepresentativeSample = index === Math.floor(count / 2);
+    return (jsx_runtime_1.jsx("div", { "aria-hidden": !isRepresentativeSample, ...(index === 0 ? {} : { drawable: '' }), style: {
             position: 'absolute',
             inset: 0,
             width,
             height,
             isolation: 'isolate',
-            pointerEvents: index === Math.floor(count / 2) ? 'auto' : 'none',
-        }, children: jsx_runtime_1.jsx(remotion_1.Freeze, { frame: sampleFrame, children: children }) }));
+            pointerEvents: isRepresentativeSample ? 'auto' : 'none',
+        }, children: isRepresentativeSample ? (content) : (jsx_runtime_1.jsx(remotion_1.Internals.DisableSequenceRegistrationProvider, { children: content })) }));
 };
-/**
- * Experimental motion blur that averages separately captured HTML-in-canvas
- * snapshots of the children at fractional frames. Preview requires Chrome with
- * the experimental HTML-in-canvas flag enabled. Nested HtmlInCanvas components
- * are currently unsupported.
- */
-const HtmlInCanvasMotionBlur = ({ children, width, height, shutterAngle = 180, samples = 8, from, durationInFrames, trimBefore, playbackRate, }) => {
+const HtmlInCanvasMotionBlurInner = ({ children, width, height, shutterAngle = 180, samples = 8, disabled = false, from, durationInFrames, trimBefore, playbackRate, loop, freeze, hidden, name, premountFor, postmountFor, showInTimeline, styleWhilePremounted, styleWhilePostmounted, controls, }) => {
     const { durationInFrames: compositionDurationInFrames } = (0, remotion_1.useVideoConfig)();
     if (!Number.isInteger(samples) || samples < 1 || samples > 64) {
         throw new TypeError(`"samples" must be an integer between 1 and 64, but got ${String(samples)}`);
@@ -33,10 +58,15 @@ const HtmlInCanvasMotionBlur = ({ children, width, height, shutterAngle = 180, s
         shutterAngle > 360) {
         throw new TypeError(`"shutterAngle" must be between 0 and 360, but got ${String(shutterAngle)}`);
     }
-    const actualSamples = shutterAngle === 0 ? 1 : samples;
+    // Keep the first sample mounted when blur is disabled so the canvas stays visible.
+    const actualSamples = disabled || shutterAngle === 0 ? 1 : samples;
     const shutterInFrames = (shutterAngle / 360) * (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1);
     const firstFrame = trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0;
-    const visibleDuration = Math.max(0, Math.min(durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, compositionDurationInFrames - (from !== null && from !== void 0 ? from : 0)));
+    const visibleDuration = Math.max(0, Math.min(remotion_1.Internals.resolveSequenceDuration({
+        durationInFrames,
+        playbackRate,
+        loop,
+    }), compositionDurationInFrames - (from !== null && from !== void 0 ? from : 0)));
     const lastFrame = firstFrame + Math.max(0, visibleDuration - 1) * (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1);
     const onPaint = (0, react_1.useCallback)(({ canvas, element, elementImage }) => {
         const context = canvas.getContext('2d');
@@ -60,11 +90,7 @@ const HtmlInCanvasMotionBlur = ({ children, width, height, shutterAngle = 180, s
                 ? elementImage
                 : layoutCanvas.captureElementImage(sampleElement);
             try {
-                const sampleTransform = context.drawElementImage(image, 0, 0);
-                if (index === Math.floor(actualSamples / 2)) {
-                    sampleElement.style.transform =
-                        sampleTransform.toString();
-                }
+                context.drawElementImage(image, 0, 0);
             }
             finally {
                 if (index !== 0) {
@@ -77,6 +103,20 @@ const HtmlInCanvasMotionBlur = ({ children, width, height, shutterAngle = 180, s
         return (jsx_runtime_1.jsx(MotionBlurSample, { width: width, height: height, index: index, count: actualSamples, shutterInFrames: shutterInFrames, firstFrame: firstFrame, lastFrame: lastFrame, children: children }, index));
     });
     // The root wrapper holds the first sample. The rest must be canvas children.
-    return (jsx_runtime_1.jsx(remotion_1.HtmlInCanvas, { width: width, height: height, from: from, durationInFrames: durationInFrames, trimBefore: trimBefore, playbackRate: playbackRate, name: "<HtmlInCanvasMotionBlur>", onPaint: onPaint, _remotionInternalCanvasSiblings: sampleElements.slice(1), children: sampleElements[0] }));
+    // Reuse HtmlInCanvas's Sequence for the motion blur controls.
+    return (jsx_runtime_1.jsx(remotion_1.HtmlInCanvas, { width: width, height: height, from: from, durationInFrames: durationInFrames, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<HtmlInCanvasMotionBlur>', premountFor: premountFor, postmountFor: postmountFor, showInTimeline: showInTimeline, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls, onPaint: onPaint, _remotionInternalCanvasSiblings: sampleElements.slice(1), children: sampleElements[0] }));
 };
-exports.HtmlInCanvasMotionBlur = HtmlInCanvasMotionBlur;
+/**
+ * Experimental motion blur that averages separately captured HTML-in-canvas
+ * snapshots of the children at fractional frames. Preview requires Chrome with
+ * the experimental HTML-in-canvas flag enabled. Nested HtmlInCanvas components
+ * are currently unsupported.
+ */
+exports.HtmlInCanvasMotionBlur = remotion_1.Interactive.withSchema({
+    Component: HtmlInCanvasMotionBlurInner,
+    componentName: '<HtmlInCanvasMotionBlur>',
+    componentIdentity: 'dev.remotion.motionBlur.HtmlInCanvasMotionBlur',
+    schema: htmlInCanvasMotionBlurSchema,
+    supportsEffects: false,
+});
+exports.HtmlInCanvasMotionBlur.displayName = 'HtmlInCanvasMotionBlur';

package/dist/esm/index.mjs

@@ -61,10 +61,41 @@ import { useCallback } from "react";
 import {
   Freeze as Freeze2,
   HtmlInCanvas,
+  Interactive,
+  Internals,
   useCurrentFrame as useCurrentFrame2,
   useVideoConfig
 } from "remotion";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var htmlInCanvasMotionBlurSchema = {
+  ...Interactive.baseSchema,
+  ...Interactive.premountSchema,
+  shutterAngle: {
+    type: "number",
+    min: 0,
+    max: 360,
+    step: 1,
+    default: 180,
+    description: "Shutter angle",
+    hiddenFromList: false
+  },
+  samples: {
+    type: "number",
+    min: 1,
+    max: 64,
+    step: 1,
+    integer: true,
+    default: 8,
+    description: "Samples",
+    hiddenFromList: false,
+    keyframable: false
+  },
+  disabled: {
+    type: "boolean",
+    default: false,
+    description: "Disabled"
+  }
+};
 var MotionBlurSample = ({
   children,
   width,
@@ -77,33 +108,48 @@ var MotionBlurSample = ({
 }) => {
   const frame = useCurrentFrame2();
   const sampleFrame = Math.max(firstFrame, Math.min(lastFrame, frame + ((index + 0.5) / count - 0.5) * shutterInFrames));
+  const content = /* @__PURE__ */ jsx2(Freeze2, {
+    frame: sampleFrame,
+    children
+  });
+  const isRepresentativeSample = index === Math.floor(count / 2);
   return /* @__PURE__ */ jsx2("div", {
-    "aria-hidden": index !== Math.floor(count / 2),
-    ...{ drawable: "" },
+    "aria-hidden": !isRepresentativeSample,
+    ...index === 0 ? {} : { drawable: "" },
     style: {
       position: "absolute",
       inset: 0,
       width,
       height,
       isolation: "isolate",
-      pointerEvents: index === Math.floor(count / 2) ? "auto" : "none"
+      pointerEvents: isRepresentativeSample ? "auto" : "none"
     },
-    children: /* @__PURE__ */ jsx2(Freeze2, {
-      frame: sampleFrame,
-      children
+    children: isRepresentativeSample ? content : /* @__PURE__ */ jsx2(Internals.DisableSequenceRegistrationProvider, {
+      children: content
     })
   });
 };
-var HtmlInCanvasMotionBlur = ({
+var HtmlInCanvasMotionBlurInner = ({
   children,
   width,
   height,
   shutterAngle = 180,
   samples = 8,
+  disabled = false,
   from,
   durationInFrames,
   trimBefore,
-  playbackRate
+  playbackRate,
+  loop,
+  freeze,
+  hidden,
+  name,
+  premountFor,
+  postmountFor,
+  showInTimeline,
+  styleWhilePremounted,
+  styleWhilePostmounted,
+  controls
 }) => {
   const { durationInFrames: compositionDurationInFrames } = useVideoConfig();
   if (!Number.isInteger(samples) || samples < 1 || samples > 64) {
@@ -112,10 +158,14 @@ var HtmlInCanvasMotionBlur = ({
   if (typeof shutterAngle !== "number" || !Number.isFinite(shutterAngle) || shutterAngle < 0 || shutterAngle > 360) {
     throw new TypeError(`"shutterAngle" must be between 0 and 360, but got ${String(shutterAngle)}`);
   }
-  const actualSamples = shutterAngle === 0 ? 1 : samples;
+  const actualSamples = disabled || shutterAngle === 0 ? 1 : samples;
   const shutterInFrames = shutterAngle / 360 * (playbackRate ?? 1);
   const firstFrame = trimBefore ?? 0;
-  const visibleDuration = Math.max(0, Math.min(durationInFrames ?? Infinity, compositionDurationInFrames - (from ?? 0)));
+  const visibleDuration = Math.max(0, Math.min(Internals.resolveSequenceDuration({
+    durationInFrames,
+    playbackRate,
+    loop
+  }), compositionDurationInFrames - (from ?? 0)));
   const lastFrame = firstFrame + Math.max(0, visibleDuration - 1) * (playbackRate ?? 1);
   const onPaint = useCallback(({ canvas, element, elementImage }) => {
     const context = canvas.getContext("2d");
@@ -136,10 +186,7 @@ var HtmlInCanvasMotionBlur = ({
     for (const [index, sampleElement] of captureElements.entries()) {
       const image = index === 0 ? elementImage : layoutCanvas.captureElementImage(sampleElement);
       try {
-        const sampleTransform = context.drawElementImage(image, 0, 0);
-        if (index === Math.floor(actualSamples / 2)) {
-          sampleElement.style.transform = sampleTransform.toString();
-        }
+        context.drawElementImage(image, 0, 0);
       } finally {
         if (index !== 0) {
           image.close();
@@ -166,12 +213,29 @@ var HtmlInCanvasMotionBlur = ({
     durationInFrames,
     trimBefore,
     playbackRate,
-    name: "<HtmlInCanvasMotionBlur>",
+    loop,
+    freeze,
+    hidden,
+    name: name ?? "<HtmlInCanvasMotionBlur>",
+    premountFor,
+    postmountFor,
+    showInTimeline,
+    styleWhilePremounted,
+    styleWhilePostmounted,
+    ...{ controls },
     onPaint,
     _remotionInternalCanvasSiblings: sampleElements.slice(1),
     children: sampleElements[0]
   });
 };
+var HtmlInCanvasMotionBlur = Interactive.withSchema({
+  Component: HtmlInCanvasMotionBlurInner,
+  componentName: "<HtmlInCanvasMotionBlur>",
+  componentIdentity: "dev.remotion.motionBlur.HtmlInCanvasMotionBlur",
+  schema: htmlInCanvasMotionBlurSchema,
+  supportsEffects: false
+});
+HtmlInCanvasMotionBlur.displayName = "HtmlInCanvasMotionBlur";
 // src/Trail.tsx
 import { AbsoluteFill as AbsoluteFill2, Freeze as Freeze3, useCurrentFrame as useCurrentFrame3 } from "remotion";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/motion-blur"
 	},
 	"name": "@remotion/motion-blur",
-	"version": "4.0.529",
+	"version": "4.0.531",
 	"description": "Motion blur effect for Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -21,7 +21,7 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.529"
+		"remotion": "4.0.531"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -39,8 +39,8 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"remotion": "4.0.529",
-		"@remotion/eslint-config-internal": "4.0.529",
+		"remotion": "4.0.531",
+		"@remotion/eslint-config-internal": "4.0.531",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -52,5 +52,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"homepage": "https://www.remotion.dev/docs/motion-blur"
+	"homepage": "https://www.remotion.dev/docs/motion-blur/api"
 }