@remotion/gif 4.0.534 → 4.0.536

package/dist/cjs/Gif.js

@@ -30,7 +30,7 @@ exports.gifSchema = {
     ...remotion_1.Interactive.borderRadiusSchema,
     ...remotion_1.Interactive.cropSchema,
 };
-const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, requestInit, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, cropLeft, cropRight, cropTop, cropBottom, controls, effects = [], ref, ...sequenceProps }) => {
+const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, requestInit, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, style, cropLeft, cropRight, cropTop, cropBottom, controls, effects = [], effectsOutputSize, ref, ...sequenceProps }) => {
     var _a, _b;
     const env = (0, remotion_1.useRemotionEnvironment)();
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = remotion_1.Internals.usePremounting({
@@ -74,6 +74,7 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         requestInit,
         style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
         effects: memoizedEffects,
+        effectsOutputSize,
     };
     const inner = env.isRendering ? (jsx_runtime_1.jsx(GifForRendering_1.GifForRendering, { ...gifProps, ref: ref })) : (jsx_runtime_1.jsx(GifForDevelopment_1.GifForDevelopment, { ...gifProps, ref: ref }));
     return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<Gif>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: inner }) }));
@@ -86,17 +87,21 @@ const GifWithIntrinsicDuration = (props) => {
     onErrorRef.current = props.onError;
     const requestInitRef = (0, react_2.useRef)(requestInit);
     requestInitRef.current = requestInit;
-    const [handle] = (0, react_2.useState)(() => delayRender(`Finding duration of <Gif src="${src}" />`, {
-        timeoutInMilliseconds: props.delayRenderTimeoutInMilliseconds,
-    }));
-    const [durationInFrames, setDurationInFrames] = (0, react_2.useState)(null);
-    const [failed, setFailed] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
+    const [duration, setDuration] = (0, react_2.useState)(null);
+    const [failedHandle, setFailedHandle] = (0, react_2.useState)(null);
+    const { delayRenderTimeoutInMilliseconds } = props;
+    (0, react_2.useLayoutEffect)(() => {
+        const handle = delayRender(`Finding duration of <Gif src="${src}" />`, {
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+        });
         let cancelled = false;
         (0, get_gif_duration_in_seconds_1.getGifDurationInSeconds)(src, { requestInit: requestInitRef.current })
-            .then((duration) => {
+            .then((durationInSeconds) => {
             if (!cancelled) {
-                setDurationInFrames(Math.ceil(duration * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0));
+                setDuration({
+                    durationInFrames: Math.ceil(durationInSeconds * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0),
+                    handle,
+                });
             }
         })
             .catch((error) => {
@@ -105,7 +110,7 @@ const GifWithIntrinsicDuration = (props) => {
             }
             if (onErrorRef.current) {
                 onErrorRef.current(error);
-                setFailed(true);
+                setFailedHandle(handle);
             }
             else {
                 cancelRender(error);
@@ -115,16 +120,27 @@ const GifWithIntrinsicDuration = (props) => {
             cancelled = true;
             continueRender(handle);
         };
-    }, [cancelRender, continueRender, fps, handle, src, trimBefore]);
-    (0, react_2.useEffect)(() => {
-        if (durationInFrames !== null || failed) {
-            continueRender(handle);
+    }, [
+        cancelRender,
+        continueRender,
+        delayRender,
+        delayRenderTimeoutInMilliseconds,
+        fps,
+        src,
+        trimBefore,
+    ]);
+    (0, react_2.useLayoutEffect)(() => {
+        if (duration !== null) {
+            continueRender(duration.handle);
+        }
+        if (failedHandle !== null) {
+            continueRender(failedHandle);
         }
-    }, [continueRender, durationInFrames, failed, handle]);
-    if (durationInFrames === null || failed) {
+    }, [continueRender, duration, failedHandle]);
+    if (duration === null || failedHandle !== null) {
         return null;
     }
-    return jsx_runtime_1.jsx(GifInner, { ...props, durationInFrames: durationInFrames });
+    return jsx_runtime_1.jsx(GifInner, { ...props, durationInFrames: duration.durationInFrames });
 };
 const GifComponent = (props) => {
     var _a;

package/dist/cjs/GifForDevelopment.js

@@ -11,7 +11,7 @@ const react_tools_1 = require("./react-tools");
 const request_init_1 = require("./request-init");
 const resolve_gif_source_1 = require("./resolve-gif-source");
 const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
-exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', requestInit, effects, ...props }, ref) => {
+exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', requestInit, effects, effectsOutputSize = null, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
     const requestInitRef = (0, react_1.useRef)(requestInit);
     requestInitRef.current = requestInit;
@@ -91,5 +91,5 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
     if (index === -1) {
         return null;
     }
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize, ...props, ref: ref }));
 });

package/dist/cjs/GifForRendering.js

@@ -11,7 +11,7 @@ const react_tools_1 = require("./react-tools");
 const request_init_1 = require("./request-init");
 const resolve_gif_source_1 = require("./resolve-gif-source");
 const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
-exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, requestInit, effects, ...props }, ref) => {
+exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, requestInit, effects, effectsOutputSize = null, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
     const requestInitRef = (0, react_1.useRef)(requestInit);
     requestInitRef.current = requestInit;
@@ -25,20 +25,13 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
                 frames: [],
                 width: 0,
                 height: 0,
+                handle: null,
             };
         }
-        return parsedGif;
+        return { ...parsedGif, handle: null };
     });
     const [error, setError] = (0, react_1.useState)(null);
-    const [renderHandle] = (0, react_1.useState)(() => delayRender(`Rendering <Gif/> with src="${resolvedSrc}"`, {
-        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-    }));
     const logLevel = remotion_1.Internals.useLogLevel();
-    (0, react_1.useEffect)(() => {
-        return () => {
-            continueRender(renderHandle);
-        };
-    }, [renderHandle, continueRender]);
     const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)({
         delays: state.delays,
         loopBehavior,
@@ -48,7 +41,7 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
     const currentOnError = (0, react_1.useRef)(onError);
     currentOnLoad.current = onLoad;
     currentOnError.current = onError;
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const controller = new AbortController();
         let done = false;
         let aborted = false;
@@ -64,13 +57,14 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         })
             .then((parsed) => {
             var _a;
+            if (aborted) {
+                return;
+            }
             remotion_1.Internals.Log.verbose({ logLevel, tag: null }, 'Parsed GIF in', Date.now() - time, 'ms');
             (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
-            update(parsed);
+            update({ ...parsed, handle: newHandle });
             gif_cache_1.volatileGifCache.set(cacheKey, parsed);
             done = true;
-            continueRender(newHandle);
-            continueRender(renderHandle);
         })
             .catch((err) => {
             if (aborted) {
@@ -91,10 +85,8 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
                 controller.abort();
             }
             continueRender(newHandle);
-            continueRender(renderHandle);
         };
     }, [
-        renderHandle,
         logLevel,
         cacheKey,
         resolvedSrc,
@@ -102,6 +94,11 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         continueRender,
         delayRenderTimeoutInMilliseconds,
     ]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (state.handle !== null) {
+            continueRender(state.handle);
+        }
+    }, [state, continueRender]);
     if (error) {
         remotion_1.Internals.Log.error({ logLevel, tag: null }, error.stack);
         if ((0, is_cors_error_1.isCorsError)(error)) {
@@ -112,5 +109,5 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
     if (index === -1) {
         return null;
     }
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize, ...props, ref: ref }));
 });

package/dist/cjs/canvas.d.ts

@@ -1,4 +1,4 @@
-import type { EffectDefinitionAndStack } from 'remotion';
+import type { EffectDefinitionAndStack, EffectsOutputSize } from 'remotion';
 import type { GifFillMode } from './props';
 type Props = {
     readonly index: number;
@@ -9,6 +9,7 @@ type Props = {
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly effectsOutputSize: EffectsOutputSize | null;
 };
 export declare const Canvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export {};

package/dist/cjs/canvas.js

@@ -65,7 +65,7 @@ const makeCanvas = () => {
     canvas.height = 0;
     return ctx;
 };
-exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects }, ref) => {
+exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects, effectsOutputSize, }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const [tempCtx] = (0, react_1.useState)(() => {
         return makeCanvas();
@@ -82,13 +82,13 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
         }
         return document.createElement('canvas');
     }, []);
-    const chainState = useEffectChainState();
+    const chainState = useEffectChainState(effectsOutputSize);
     const { delayRender, continueRender, cancelRender } = (0, remotion_1.useDelayRender)();
     const size = (0, use_element_size_1.useElementSize)(canvasRef);
     (0, react_1.useImperativeHandle)(ref, () => {
         return canvasRef.current;
     }, []);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (!size) {
             return;
         }

package/dist/cjs/props.d.ts

@@ -1,5 +1,7 @@
+import type { EffectsOutputSize } from 'remotion';
 export type GifLoopBehavior = 'loop' | 'pause-after-finish' | 'unmount-after-finish';
 export type RemotionGifProps = {
+    effectsOutputSize?: EffectsOutputSize;
     src: string;
     width?: number;
     height?: number;

package/dist/cjs/use-element-size.js

@@ -51,7 +51,7 @@ const useElementSize = (ref) => {
             height: rect[0].height,
         });
     }, [ref]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (!observer) {
             return;
         }

package/dist/esm/index.mjs

@@ -785,15 +785,15 @@ var makeWorker = () => {
 
 // src/react-tools.ts
 var parseGif = async ({
-  src: src2,
+  src,
   controller,
   requestInit
 }) => {
-  const raw = await parse2(src2, { signal: controller.signal, requestInit });
+  const raw = await parse2(src, { signal: controller.signal, requestInit });
   return generate(raw);
 };
 var parseWithWorker = ({
-  src: src2,
+  src,
   cacheKey,
   requestInit
 }) => {
@@ -815,7 +815,7 @@ var parseWithWorker = ({
     };
     worker.addEventListener("message", handler);
     worker.postMessage({
-      src: src2,
+      src,
       cacheKey,
       requestInit: workerRequestInit,
       type: "parse"
@@ -832,19 +832,19 @@ var parseWithWorker = ({
 };
 
 // src/resolve-gif-source.ts
-var resolveGifSource = (src2) => {
+var resolveGifSource = (src) => {
   if (typeof window === "undefined") {
-    return src2;
+    return src;
   }
-  return new URL(src2, document.baseURI).href;
+  return new URL(src, document.baseURI).href;
 };
 
 // src/get-gif-duration-in-seconds.ts
 var calcDuration = (parsed) => {
   return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
 };
-var getGifDurationInSeconds = async (src2, options) => {
-  const resolvedSrc = resolveGifSource(src2);
+var getGifDurationInSeconds = async (src, options) => {
+  const resolvedSrc = resolveGifSource(src);
   const cacheKey = getGifCacheKey({
     resolvedSrc,
     requestInit: options?.requestInit
@@ -872,7 +872,7 @@ var getGifDurationInSeconds = async (src2, options) => {
   return calcDuration(parsed);
 };
 // src/Gif.tsx
-import React, { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+import React, { useLayoutEffect as useLayoutEffect4, useRef as useRef4, useState as useState5 } from "react";
 import {
   Freeze,
   Internals as Internals3,
@@ -884,12 +884,12 @@ import {
 } from "remotion";
 
 // src/GifForDevelopment.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/canvas.tsx
 import {
   forwardRef,
-  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect2,
   useImperativeHandle,
   useMemo as useMemo2,
   useRef,
@@ -898,7 +898,13 @@ import {
 import { Internals, useDelayRender } from "remotion";
 
 // src/use-element-size.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from "react";
 var elementSizeHooks = [];
 var useElementSize = (ref) => {
   const [size, setSize] = useState(null);
@@ -936,7 +942,7 @@ var useElementSize = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!observer) {
       return;
     }
@@ -1021,7 +1027,17 @@ var makeCanvas = () => {
   canvas.height = 0;
   return ctx;
 };
-var Canvas = forwardRef(({ index, frames, width, height, fit, className, style, effects }, ref) => {
+var Canvas = forwardRef(({
+  index,
+  frames,
+  width,
+  height,
+  fit,
+  className,
+  style,
+  effects,
+  effectsOutputSize
+}, ref) => {
   const canvasRef = useRef(null);
   const [tempCtx] = useState2(() => {
     return makeCanvas();
@@ -1038,13 +1054,13 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style,
     }
     return document.createElement("canvas");
   }, []);
-  const chainState = useEffectChainState();
+  const chainState = useEffectChainState(effectsOutputSize);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const size = useElementSize(canvasRef);
   useImperativeHandle(ref, () => {
     return canvasRef.current;
   }, []);
-  useEffect2(() => {
+  useLayoutEffect2(() => {
     if (!size) {
       return;
     }
@@ -1199,7 +1215,7 @@ function useCurrentGifIndex({
 // src/GifForDevelopment.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var GifForDevelopment = forwardRef2(({
-  src: src2,
+  src,
   width,
   height,
   onError,
@@ -1209,9 +1225,10 @@ var GifForDevelopment = forwardRef2(({
   fit = "fill",
   requestInit,
   effects,
+  effectsOutputSize = null,
   ...props
 }, ref) => {
-  const resolvedSrc = resolveGifSource(src2);
+  const resolvedSrc = resolveGifSource(src);
   const requestInitRef = useRef2(requestInit);
   requestInitRef.current = requestInit;
   const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
@@ -1232,7 +1249,7 @@ var GifForDevelopment = forwardRef2(({
   const currentOnError = useRef2(onError);
   currentOnLoad.current = onLoad;
   currentOnError.current = onError;
-  useEffect3(() => {
+  useEffect2(() => {
     const parsedGif = volatileGifCache.get(cacheKey) ?? manuallyManagedGifCache.get(cacheKey);
     if (parsedGif !== undefined) {
       update(parsedGif);
@@ -1271,9 +1288,9 @@ var GifForDevelopment = forwardRef2(({
   if (error) {
     console.error(error.stack);
     if (isCorsError(error)) {
-      throw new Error(`Failed to render GIF with source ${src2}: "${error.message}". You must enable CORS for this URL. Open the Developer Tools to see exactly why this fetch failed.`);
+      throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL. Open the Developer Tools to see exactly why this fetch failed.`);
     }
-    throw new Error(`Failed to render GIF with source ${src2}: "${error.message}".`);
+    throw new Error(`Failed to render GIF with source ${src}: "${error.message}".`);
   }
   const index = useCurrentGifIndex({
     delays: state.delays,
@@ -1290,17 +1307,18 @@ var GifForDevelopment = forwardRef2(({
     width,
     height,
     effects,
+    effectsOutputSize,
     ...props,
     ref
   });
 });
 
 // src/GifForRendering.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { forwardRef as forwardRef3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { Internals as Internals2, useDelayRender as useDelayRender2 } from "remotion";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var GifForRendering = forwardRef3(({
-  src: src2,
+  src,
   width,
   height,
   onLoad,
@@ -1311,9 +1329,10 @@ var GifForRendering = forwardRef3(({
   delayRenderTimeoutInMilliseconds,
   requestInit,
   effects,
+  effectsOutputSize = null,
   ...props
 }, ref) => {
-  const resolvedSrc = resolveGifSource(src2);
+  const resolvedSrc = resolveGifSource(src);
   const requestInitRef = useRef3(requestInit);
   requestInitRef.current = requestInit;
   const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
@@ -1325,21 +1344,14 @@ var GifForRendering = forwardRef3(({
         delays: [],
         frames: [],
         width: 0,
-        height: 0
+        height: 0,
+        handle: null
       };
     }
-    return parsedGif;
+    return { ...parsedGif, handle: null };
   });
   const [error, setError] = useState4(null);
-  const [renderHandle] = useState4(() => delayRender(`Rendering <Gif/> with src="${resolvedSrc}"`, {
-    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds
-  }));
   const logLevel = Internals2.useLogLevel();
-  useEffect4(() => {
-    return () => {
-      continueRender(renderHandle);
-    };
-  }, [renderHandle, continueRender]);
   const index = useCurrentGifIndex({
     delays: state.delays,
     loopBehavior,
@@ -1349,7 +1361,7 @@ var GifForRendering = forwardRef3(({
   const currentOnError = useRef3(onError);
   currentOnLoad.current = onLoad;
   currentOnError.current = onError;
-  useEffect4(() => {
+  useLayoutEffect3(() => {
     const controller = new AbortController;
     let done = false;
     let aborted = false;
@@ -1363,13 +1375,14 @@ var GifForRendering = forwardRef3(({
       src: resolvedSrc,
       requestInit: requestInitRef.current
     }).then((parsed) => {
+      if (aborted) {
+        return;
+      }
       Internals2.Log.verbose({ logLevel, tag: null }, "Parsed GIF in", Date.now() - time, "ms");
       currentOnLoad.current?.(parsed);
-      update(parsed);
+      update({ ...parsed, handle: newHandle });
       volatileGifCache.set(cacheKey, parsed);
       done = true;
-      continueRender(newHandle);
-      continueRender(renderHandle);
     }).catch((err) => {
       if (aborted) {
         continueRender(newHandle);
@@ -1388,10 +1401,8 @@ var GifForRendering = forwardRef3(({
         controller.abort();
       }
       continueRender(newHandle);
-      continueRender(renderHandle);
     };
   }, [
-    renderHandle,
     logLevel,
     cacheKey,
     resolvedSrc,
@@ -1399,12 +1410,17 @@ var GifForRendering = forwardRef3(({
     continueRender,
     delayRenderTimeoutInMilliseconds
   ]);
+  useLayoutEffect3(() => {
+    if (state.handle !== null) {
+      continueRender(state.handle);
+    }
+  }, [state, continueRender]);
   if (error) {
     Internals2.Log.error({ logLevel, tag: null }, error.stack);
     if (isCorsError(error)) {
-      throw new Error(`Failed to render GIF with source ${src2}: "${error.message}". You must enable CORS for this URL.`);
+      throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL.`);
     }
-    throw new Error(`Failed to render GIF with source ${src2}: "${error.message}". Render with --log=verbose to see the full stack.`);
+    throw new Error(`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`);
   }
   if (index === -1) {
     return null;
@@ -1416,6 +1432,7 @@ var GifForRendering = forwardRef3(({
     width,
     height,
     effects,
+    effectsOutputSize,
     ...props,
     ref
   });
@@ -1441,7 +1458,7 @@ var gifSchema = {
   ...Interactive.cropSchema
 };
 var GifInner = ({
-  src: src2,
+  src,
   width,
   height,
   onLoad,
@@ -1465,6 +1482,7 @@ var GifInner = ({
   cropBottom,
   controls,
   effects = [],
+  effectsOutputSize,
   ref,
   ...sequenceProps
 }) => {
@@ -1506,7 +1524,7 @@ var GifInner = ({
     videoConfigValues: controls?.videoConfigValues ?? null
   });
   const gifProps = {
-    src: src2,
+    src,
     width,
     height,
     onLoad,
@@ -1517,7 +1535,8 @@ var GifInner = ({
     delayRenderTimeoutInMilliseconds,
     requestInit,
     style: croppedStyle ?? undefined,
-    effects: memoizedEffects
+    effects: memoizedEffects,
+    effectsOutputSize
   };
   const inner = env.isRendering ? /* @__PURE__ */ jsx4(GifForRendering, {
     ...gifProps,
@@ -1550,21 +1569,25 @@ var GifInner = ({
 var GifWithIntrinsicDuration = (props) => {
   const { fps } = useVideoConfig2();
   const { delayRender, continueRender, cancelRender } = useDelayRender3();
-  const { src: src2, requestInit, trimBefore } = props;
+  const { src, requestInit, trimBefore } = props;
   const onErrorRef = useRef4(props.onError);
   onErrorRef.current = props.onError;
   const requestInitRef = useRef4(requestInit);
   requestInitRef.current = requestInit;
-  const [handle] = useState5(() => delayRender(`Finding duration of <Gif src="${src2}" />`, {
-    timeoutInMilliseconds: props.delayRenderTimeoutInMilliseconds
-  }));
-  const [durationInFrames, setDurationInFrames] = useState5(null);
-  const [failed, setFailed] = useState5(false);
-  useEffect5(() => {
+  const [duration, setDuration] = useState5(null);
+  const [failedHandle, setFailedHandle] = useState5(null);
+  const { delayRenderTimeoutInMilliseconds } = props;
+  useLayoutEffect4(() => {
+    const handle = delayRender(`Finding duration of <Gif src="${src}" />`, {
+      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds
+    });
     let cancelled = false;
-    getGifDurationInSeconds(src2, { requestInit: requestInitRef.current }).then((duration) => {
+    getGifDurationInSeconds(src, { requestInit: requestInitRef.current }).then((durationInSeconds) => {
       if (!cancelled) {
-        setDurationInFrames(Math.ceil(duration * fps) - (trimBefore ?? 0));
+        setDuration({
+          durationInFrames: Math.ceil(durationInSeconds * fps) - (trimBefore ?? 0),
+          handle
+        });
       }
     }).catch((error) => {
       if (cancelled) {
@@ -1572,7 +1595,7 @@ var GifWithIntrinsicDuration = (props) => {
       }
       if (onErrorRef.current) {
         onErrorRef.current(error);
-        setFailed(true);
+        setFailedHandle(handle);
       } else {
         cancelRender(error);
       }
@@ -1581,18 +1604,29 @@ var GifWithIntrinsicDuration = (props) => {
       cancelled = true;
       continueRender(handle);
     };
-  }, [cancelRender, continueRender, fps, handle, src2, trimBefore]);
-  useEffect5(() => {
-    if (durationInFrames !== null || failed) {
-      continueRender(handle);
+  }, [
+    cancelRender,
+    continueRender,
+    delayRender,
+    delayRenderTimeoutInMilliseconds,
+    fps,
+    src,
+    trimBefore
+  ]);
+  useLayoutEffect4(() => {
+    if (duration !== null) {
+      continueRender(duration.handle);
+    }
+    if (failedHandle !== null) {
+      continueRender(failedHandle);
     }
-  }, [continueRender, durationInFrames, failed, handle]);
-  if (durationInFrames === null || failed) {
+  }, [continueRender, duration, failedHandle]);
+  if (duration === null || failedHandle !== null) {
     return null;
   }
   return /* @__PURE__ */ jsx4(GifInner, {
     ...props,
-    durationInFrames
+    durationInFrames: duration.durationInFrames
   });
 };
 var GifComponent = (props) => {
@@ -1620,8 +1654,8 @@ var Gif = Interactive.withSchema({
 });
 Gif.displayName = "Gif";
 // src/preload-gif.ts
-var preloadGif = (src2, options) => {
-  const resolvedSrc = resolveGifSource(src2);
+var preloadGif = (src, options) => {
+  const resolvedSrc = resolveGifSource(src);
   const cacheKey = getGifCacheKey({
     resolvedSrc,
     requestInit: options?.requestInit
@@ -1661,7 +1695,7 @@ var preloadGif = (src2, options) => {
   };
 };
 export {
-  preloadGif,
+  Gif,
   getGifDurationInSeconds,
-  Gif
+  preloadGif
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
 	},
 	"name": "@remotion/gif",
-	"version": "4.0.534",
+	"version": "4.0.536",
 	"description": "Embed GIFs in a Remotion video",
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
@@ -30,7 +30,7 @@
 		}
 	},
 	"dependencies": {
-		"remotion": "4.0.534"
+		"remotion": "4.0.536"
 	},
 	"devDependencies": {
 		"@testing-library/react": "16.1.0",
@@ -38,7 +38,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
-		"@remotion/eslint-config-internal": "4.0.534",
+		"@remotion/eslint-config-internal": "4.0.536",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},