@remotion/motion-blur 4.0.528 → 4.0.530

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

@@ -0,0 +1,17 @@
+import React from 'react';
+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
+ * snapshots of the children at fractional frames. Preview requires Chrome with
+ * the experimental HTML-in-canvas flag enabled. Nested HtmlInCanvas components
+ * are currently unsupported.
+ */
+export declare const HtmlInCanvasMotionBlur: React.ComponentType<HtmlInCanvasMotionBlurProps>;

package/dist/cjs/HtmlInCanvasMotionBlur.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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));
+    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, drawable: '', style: {
+            position: 'absolute',
+            inset: 0,
+            width,
+            height,
+            isolation: 'isolate',
+            pointerEvents: isRepresentativeSample ? 'auto' : 'none',
+        }, children: isRepresentativeSample ? (content) : (jsx_runtime_1.jsx(remotion_1.Internals.DisableSequenceRegistrationProvider, { children: content })) }));
+};
+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)}`);
+    }
+    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)}`);
+    }
+    // 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(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');
+        if (!context) {
+            throw new Error('Failed to acquire 2D context for motion blur');
+        }
+        const layoutCanvas = element.parentElement;
+        if (!(layoutCanvas instanceof HTMLCanvasElement)) {
+            throw new Error('Failed to find the HTML-in-canvas layout canvas');
+        }
+        const captureElements = Array.from(layoutCanvas.children);
+        if (captureElements.length !== actualSamples ||
+            captureElements[0] !== element) {
+            throw new Error('Motion blur samples are not ready to paint');
+        }
+        context.reset();
+        context.globalCompositeOperation = 'lighter';
+        context.globalAlpha = 1 / actualSamples;
+        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();
+                }
+            }
+            finally {
+                if (index !== 0) {
+                    image.close();
+                }
+            }
+        }
+    }, [actualSamples]);
+    const sampleElements = Array.from({ length: actualSamples }, (_, index) => {
+        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.
+    // 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] }));
+};
+/**
+ * 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/cjs/index.d.ts

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

package/dist/cjs/index.js

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

package/dist/esm/index.mjs

@@ -56,16 +56,199 @@ var CameraMotionBlur = ({
     })
   });
 };
+// src/HtmlInCanvasMotionBlur.tsx
+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,
+  height,
+  index,
+  count,
+  shutterInFrames,
+  firstFrame,
+  lastFrame
+}) => {
+  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": !isRepresentativeSample,
+    ...{ drawable: "" },
+    style: {
+      position: "absolute",
+      inset: 0,
+      width,
+      height,
+      isolation: "isolate",
+      pointerEvents: isRepresentativeSample ? "auto" : "none"
+    },
+    children: isRepresentativeSample ? content : /* @__PURE__ */ jsx2(Internals.DisableSequenceRegistrationProvider, {
+      children: content
+    })
+  });
+};
+var 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 } = 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)}`);
+  }
+  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 = disabled || shutterAngle === 0 ? 1 : samples;
+  const shutterInFrames = shutterAngle / 360 * (playbackRate ?? 1);
+  const firstFrame = trimBefore ?? 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");
+    if (!context) {
+      throw new Error("Failed to acquire 2D context for motion blur");
+    }
+    const layoutCanvas = element.parentElement;
+    if (!(layoutCanvas instanceof HTMLCanvasElement)) {
+      throw new Error("Failed to find the HTML-in-canvas layout canvas");
+    }
+    const captureElements = Array.from(layoutCanvas.children);
+    if (captureElements.length !== actualSamples || captureElements[0] !== element) {
+      throw new Error("Motion blur samples are not ready to paint");
+    }
+    context.reset();
+    context.globalCompositeOperation = "lighter";
+    context.globalAlpha = 1 / actualSamples;
+    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();
+        }
+      } finally {
+        if (index !== 0) {
+          image.close();
+        }
+      }
+    }
+  }, [actualSamples]);
+  const sampleElements = Array.from({ length: actualSamples }, (_, index) => {
+    return /* @__PURE__ */ jsx2(MotionBlurSample, {
+      width,
+      height,
+      index,
+      count: actualSamples,
+      shutterInFrames,
+      firstFrame,
+      lastFrame,
+      children
+    }, index);
+  });
+  return /* @__PURE__ */ jsx2(HtmlInCanvas, {
+    width,
+    height,
+    from,
+    durationInFrames,
+    trimBefore,
+    playbackRate,
+    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 Freeze2, useCurrentFrame as useCurrentFrame2 } from "remotion";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { AbsoluteFill as AbsoluteFill2, Freeze as Freeze3, useCurrentFrame as useCurrentFrame3 } from "remotion";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Trail = ({
   children,
   layers,
   lagInFrames,
   trailOpacity
 }) => {
-  const frame = useCurrentFrame2();
+  const frame = useCurrentFrame3();
   if (typeof layers !== "number" || Number.isNaN(layers) || !Number.isFinite(layers)) {
     throw new TypeError(`"layers" must be a number, but got ${JSON.stringify(layers)}`);
   }
@@ -84,11 +267,11 @@ var Trail = ({
   return /* @__PURE__ */ jsxs(AbsoluteFill2, {
     children: [
       new Array(layers).fill(true).map((_, i) => {
-        return /* @__PURE__ */ jsx2(AbsoluteFill2, {
+        return /* @__PURE__ */ jsx3(AbsoluteFill2, {
           style: {
             opacity: trailOpacity - (layers - i) / layers * trailOpacity
           },
-          children: /* @__PURE__ */ jsx2(Freeze2, {
+          children: /* @__PURE__ */ jsx3(Freeze3, {
             frame: frame - lagInFrames * (layers - i),
             children
           })
@@ -100,5 +283,6 @@ var Trail = ({
 };
 export {
   Trail,
+  HtmlInCanvasMotionBlur,
   CameraMotionBlur
 };

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.528",
+	"version": "4.0.530",
 	"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.528"
+		"remotion": "4.0.530"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -39,8 +39,8 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"remotion": "4.0.528",
-		"@remotion/eslint-config-internal": "4.0.528",
+		"remotion": "4.0.530",
+		"@remotion/eslint-config-internal": "4.0.530",
 		"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"
 }