@remotion/transitions 4.0.460 → 4.0.462

package/dist/esm/index.mjs

@@ -527,7 +527,11 @@ var useTransitionProgress = () => {
 };
 // src/html-in-canvas-presentation.tsx
 import { useLayoutEffect, useMemo as useMemo4, useRef as useRef2, useState, useCallback as useCallback2 } from "react";
-import { HtmlInCanvas, useDelayRender } from "remotion";
+import {
+  HtmlInCanvas,
+  HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  useDelayRender
+} from "remotion";
 import { AbsoluteFill as AbsoluteFill2, Internals as Internals2, useCurrentFrame as useCurrentFrame2 } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
@@ -542,7 +546,7 @@ var HtmlInCanvasPresentation = ({
   bothEnteringAndExiting
 }) => {
   if (!HtmlInCanvas.isSupported()) {
-    throw new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.");
+    throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef2(null);
   const canvasSubtreeStyle = useMemo4(() => {
@@ -562,8 +566,12 @@ var HtmlInCanvasPresentation = ({
   const frame = useCurrentFrame2();
   const frameRef = useRef2(frame);
   frameRef.current = frame;
-  const effectsRef = useRef2(_experimentalEffects);
-  effectsRef.current = _experimentalEffects;
+  const memoizedEffects = Internals2.useMemoizedEffects({
+    effects: _experimentalEffects ?? [],
+    overrideId: null
+  });
+  const effectsRef = useRef2(memoizedEffects);
+  effectsRef.current = memoizedEffects;
   const [instance] = useState(() => shader(offscreenCanvas));
   useLayoutEffect(() => {
     return () => {
@@ -642,7 +650,7 @@ var HtmlInCanvasPresentation = ({
       throw new Error("Canvas not found");
     }
     canvas.requestPaint?.();
-  }, [presentationProgress, passThrough]);
+  }, [presentationProgress, passThrough, memoizedEffects]);
   useLayoutEffect(() => {
     if (passThrough) {
       return;

package/dist/esm/zoom-blur.mjs

@@ -1,6 +1,10 @@
 // src/html-in-canvas-presentation.tsx
 import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
-import { HtmlInCanvas, useDelayRender } from "remotion";
+import {
+  HtmlInCanvas,
+  HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  useDelayRender
+} from "remotion";
 import { AbsoluteFill, Internals, useCurrentFrame } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
@@ -15,7 +19,7 @@ var HtmlInCanvasPresentation = ({
   bothEnteringAndExiting
 }) => {
   if (!HtmlInCanvas.isSupported()) {
-    throw new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.");
+    throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo(() => {
@@ -35,8 +39,12 @@ var HtmlInCanvasPresentation = ({
   const frame = useCurrentFrame();
   const frameRef = useRef(frame);
   frameRef.current = frame;
-  const effectsRef = useRef(_experimentalEffects);
-  effectsRef.current = _experimentalEffects;
+  const memoizedEffects = Internals.useMemoizedEffects({
+    effects: _experimentalEffects ?? [],
+    overrideId: null
+  });
+  const effectsRef = useRef(memoizedEffects);
+  effectsRef.current = memoizedEffects;
   const [instance] = useState(() => shader(offscreenCanvas));
   useLayoutEffect(() => {
     return () => {
@@ -115,7 +123,7 @@ var HtmlInCanvasPresentation = ({
       throw new Error("Canvas not found");
     }
     canvas.requestPaint?.();
-  }, [presentationProgress, passThrough]);
+  }, [presentationProgress, passThrough, memoizedEffects]);
   useLayoutEffect(() => {
     if (passThrough) {
       return;

package/dist/esm/zoom-in-out.mjs

@@ -1,6 +1,10 @@
 // src/html-in-canvas-presentation.tsx
 import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
-import { HtmlInCanvas, useDelayRender } from "remotion";
+import {
+  HtmlInCanvas,
+  HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  useDelayRender
+} from "remotion";
 import { AbsoluteFill, Internals, useCurrentFrame } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
@@ -15,7 +19,7 @@ var HtmlInCanvasPresentation = ({
   bothEnteringAndExiting
 }) => {
   if (!HtmlInCanvas.isSupported()) {
-    throw new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.");
+    throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo(() => {
@@ -35,8 +39,12 @@ var HtmlInCanvasPresentation = ({
   const frame = useCurrentFrame();
   const frameRef = useRef(frame);
   frameRef.current = frame;
-  const effectsRef = useRef(_experimentalEffects);
-  effectsRef.current = _experimentalEffects;
+  const memoizedEffects = Internals.useMemoizedEffects({
+    effects: _experimentalEffects ?? [],
+    overrideId: null
+  });
+  const effectsRef = useRef(memoizedEffects);
+  effectsRef.current = memoizedEffects;
   const [instance] = useState(() => shader(offscreenCanvas));
   useLayoutEffect(() => {
     return () => {
@@ -115,7 +123,7 @@ var HtmlInCanvasPresentation = ({
       throw new Error("Canvas not found");
     }
     canvas.requestPaint?.();
-  }, [presentationProgress, passThrough]);
+  }, [presentationProgress, passThrough, memoizedEffects]);
   useLayoutEffect(() => {
     if (passThrough) {
       return;

package/dist/html-in-canvas-presentation.js

@@ -7,7 +7,7 @@ const remotion_1 = require("remotion");
 const remotion_2 = require("remotion");
 const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, presentationProgress, presentationDirection, shader, _experimentalEffects, passedProps, bothEnteringAndExiting, }) => {
     if (!remotion_1.HtmlInCanvas.isSupported()) {
-        throw new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.');
+        throw new Error(remotion_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
     }
     const canvasRef = (0, react_1.useRef)(null);
     const canvasSubtreeStyle = (0, react_1.useMemo)(() => {
@@ -27,8 +27,12 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
     const frame = (0, remotion_2.useCurrentFrame)();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
-    const effectsRef = (0, react_1.useRef)(_experimentalEffects);
-    effectsRef.current = _experimentalEffects;
+    const memoizedEffects = remotion_2.Internals.useMemoizedEffects({
+        effects: _experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : [],
+        overrideId: null,
+    });
+    const effectsRef = (0, react_1.useRef)(memoizedEffects);
+    effectsRef.current = memoizedEffects;
     const [instance] = (0, react_1.useState)(() => shader(offscreenCanvas));
     (0, react_1.useLayoutEffect)(() => {
         return () => {
@@ -109,7 +113,7 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
             throw new Error('Canvas not found');
         }
         (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
-    }, [presentationProgress, passThrough]);
+    }, [presentationProgress, passThrough, memoizedEffects]);
     (0, react_1.useLayoutEffect)(() => {
         if (passThrough) {
             return;

package/package.json

@@ -3,9 +3,8 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.460",
+	"version": "4.0.462",
 	"description": "Library for creating transitions in Remotion",
-	"sideEffects": false,
 	"main": "dist/esm/index.mjs",
 	"module": "dist/esm/index.js",
 	"types": "dist/index.d.ts",
@@ -23,18 +22,18 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.460",
-		"@remotion/shapes": "4.0.460",
-		"@remotion/paths": "4.0.460"
+		"remotion": "4.0.462",
+		"@remotion/shapes": "4.0.462",
+		"@remotion/paths": "4.0.462"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.460",
+		"remotion": "4.0.462",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.460",
-		"@remotion/player": "4.0.460",
-		"@remotion/eslint-config-internal": "4.0.460",
+		"@remotion/test-utils": "4.0.462",
+		"@remotion/player": "4.0.462",
+		"@remotion/eslint-config-internal": "4.0.462",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},