@remotion/gif 4.0.463 → 4.0.465

package/dist/cjs/Gif.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import { type SequenceControls, type SequenceProps } from 'remotion';
+import { type EffectsProp, type SequenceControls, type SequenceProps } from 'remotion';
 import type { RemotionGifProps } from './props';
-export type GifProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout'> & RemotionGifProps & {
+export type GifProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout' | '_remotionInternalEffects'> & RemotionGifProps & {
     readonly durationInFrames?: number;
+    readonly effects?: EffectsProp;
 };
-export declare const Gif: React.ComponentType<Omit<SequenceProps, "children" | "durationInFrames" | "layout"> & RemotionGifProps & {
+export declare const Gif: React.ComponentType<Omit<SequenceProps, "_remotionInternalEffects" | "children" | "durationInFrames" | "layout"> & RemotionGifProps & {
     readonly durationInFrames?: number | undefined;
+    readonly effects?: EffectsProp | undefined;
 } & {
     readonly _experimentalControls?: SequenceControls | undefined;
     readonly ref?: React.Ref<HTMLCanvasElement> | undefined;

package/dist/cjs/Gif.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const GifForDevelopment_1 = require("./GifForDevelopment");
 const GifForRendering_1 = require("./GifForRendering");
+const { addSequenceStackTraces, useMemoizedEffectDefinitions, useMemoizedEffects, wrapInSchema, } = remotion_1.Internals;
 /*
  * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
  * @see [Documentation](https://remotion.dev/docs/gif)
@@ -18,13 +19,19 @@ const gifSchema = {
         default: 1,
         description: 'Playback Rate',
     },
-    ...remotion_1.Internals.sequenceStyleSchema,
+    ...remotion_1.Internals.sequenceVisualStyleSchema,
     hidden: remotion_1.Internals.hiddenField,
 };
-const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, durationInFrames, style, _experimentalControls: controls, ref, ...sequenceProps }) => {
+const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, durationInFrames, style, _experimentalControls: controls, effects = [], ref, ...sequenceProps }) => {
+    var _a;
     const env = (0, remotion_1.useRemotionEnvironment)();
     const { durationInFrames: videoDuration } = (0, remotion_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
+    const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+    const memoizedEffects = useMemoizedEffects({
+        effects,
+        overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+    });
     const gifProps = {
         src,
         width,
@@ -37,10 +44,11 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         id,
         delayRenderTimeoutInMilliseconds,
         style,
+        effects: memoizedEffects,
     };
     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.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<Gif>", _experimentalControls: controls, ...sequenceProps, children: inner }));
+    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<Gif>", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, children: inner }));
 };
-exports.Gif = remotion_1.Internals.wrapInSchema(GifInner, gifSchema);
+exports.Gif = wrapInSchema(GifInner, gifSchema);
 exports.Gif.displayName = 'Gif';
-remotion_1.Internals.addSequenceStackTraces(exports.Gif);
+addSequenceStackTraces(exports.Gif);

package/dist/cjs/GifForDevelopment.d.ts

@@ -1,2 +1,5 @@
+import type { EffectDefinitionAndStack } from 'remotion';
 import type { RemotionGifProps } from './props';
-export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;
+export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & {
+    readonly effects: EffectDefinitionAndStack<unknown>[];
+} & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/GifForDevelopment.js

@@ -10,7 +10,7 @@ const is_cors_error_1 = require("./is-cors-error");
 const react_tools_1 = require("./react-tools");
 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', ...props }, ref) => {
+exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', effects, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
     const [state, update] = (0, react_1.useState)(() => {
         var _a;
@@ -75,5 +75,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, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, ...props, ref: ref }));
 });

package/dist/cjs/GifForRendering.d.ts

@@ -1,2 +1,5 @@
+import type { EffectDefinitionAndStack } from 'remotion';
 import type { RemotionGifProps } from './props';
-export declare const GifForRendering: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;
+export declare const GifForRendering: import("react").ForwardRefExoticComponent<RemotionGifProps & {
+    readonly effects: EffectDefinitionAndStack<unknown>[];
+} & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/GifForRendering.js

@@ -10,7 +10,7 @@ const is_cors_error_1 = require("./is-cors-error");
 const react_tools_1 = require("./react-tools");
 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, ...props }, ref) => {
+exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, effects, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     const [state, update] = (0, react_1.useState)(() => {
@@ -103,5 +103,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, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, ...props, ref: ref }));
 });

package/dist/cjs/canvas.d.ts

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

package/dist/cjs/canvas.js

@@ -4,7 +4,9 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/require-default-props */
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const use_element_size_1 = require("./use-element-size");
+const { runEffectChain, useEffectChainState } = remotion_1.Internals;
 const calcArgs = (fit, frameSize, canvasSize) => {
     switch (fit) {
         case 'fill': {
@@ -63,35 +65,136 @@ const makeCanvas = () => {
     canvas.height = 0;
     return ctx;
 };
-exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style }, ref) => {
+exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const [tempCtx] = (0, react_1.useState)(() => {
         return makeCanvas();
     });
+    const sourceCanvas = (0, react_1.useMemo)(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        return document.createElement('canvas');
+    }, []);
+    const effectOutputCanvas = (0, react_1.useMemo)(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        return document.createElement('canvas');
+    }, []);
+    const chainState = useEffectChainState();
+    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)(() => {
-        var _a;
         if (!size) {
             return;
         }
         const imageData = frames[index];
-        const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (imageData && tempCtx && ctx) {
-            if (tempCtx.canvas.width < imageData.width ||
-                tempCtx.canvas.height < imageData.height) {
-                tempCtx.canvas.width = imageData.width;
-                tempCtx.canvas.height = imageData.height;
-            }
-            if (size.width > 0 && size.height > 0) {
-                ctx.clearRect(0, 0, size.width, size.height);
-                tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
-            }
-            tempCtx.putImageData(imageData, 0, 0);
-            ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
+        const outputCanvas = canvasRef.current;
+        const outputCtx = outputCanvas === null || outputCanvas === void 0 ? void 0 : outputCanvas.getContext('2d');
+        if (!imageData || !tempCtx || !outputCtx || !outputCanvas) {
+            return;
+        }
+        if (tempCtx.canvas.width < imageData.width ||
+            tempCtx.canvas.height < imageData.height) {
+            tempCtx.canvas.width = imageData.width;
+            tempCtx.canvas.height = imageData.height;
+        }
+        const layoutWidth = width !== null && width !== void 0 ? width : size.width;
+        const layoutHeight = height !== null && height !== void 0 ? height : size.height;
+        if (layoutWidth <= 0 || layoutHeight <= 0) {
+            return;
+        }
+        if (size.width > 0 && size.height > 0) {
+            outputCtx.clearRect(0, 0, size.width, size.height);
+            tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
         }
-    }, [index, frames, fit, tempCtx, size]);
+        tempCtx.putImageData(imageData, 0, 0);
+        const frameSize = {
+            width: imageData.width,
+            height: imageData.height,
+        };
+        const layoutSize = {
+            width: layoutWidth,
+            height: layoutHeight,
+        };
+        if (effects.length === 0) {
+            outputCtx.drawImage(tempCtx.canvas, ...calcArgs(fit, frameSize, layoutSize));
+            return;
+        }
+        if (!sourceCanvas || !effectOutputCanvas) {
+            return;
+        }
+        // Effects run at the GIF's intrinsic pixel dimensions; fit is applied
+        // when compositing onto the layout-sized output canvas.
+        if (sourceCanvas.width !== frameSize.width ||
+            sourceCanvas.height !== frameSize.height) {
+            sourceCanvas.width = frameSize.width;
+            sourceCanvas.height = frameSize.height;
+        }
+        if (effectOutputCanvas.width !== frameSize.width ||
+            effectOutputCanvas.height !== frameSize.height) {
+            effectOutputCanvas.width = frameSize.width;
+            effectOutputCanvas.height = frameSize.height;
+        }
+        const sourceCtx = sourceCanvas.getContext('2d');
+        if (!sourceCtx) {
+            return;
+        }
+        sourceCtx.clearRect(0, 0, frameSize.width, frameSize.height);
+        sourceCtx.putImageData(imageData, 0, 0);
+        const state = chainState.get(frameSize.width, frameSize.height);
+        if (!state) {
+            return;
+        }
+        if (outputCanvas.width !== layoutWidth ||
+            outputCanvas.height !== layoutHeight) {
+            outputCanvas.width = layoutWidth;
+            outputCanvas.height = layoutHeight;
+        }
+        const effectChainHandle = delayRender('Rendering <Gif/> effect chain');
+        let cancelled = false;
+        runEffectChain({
+            state,
+            source: sourceCanvas,
+            effects,
+            output: effectOutputCanvas,
+            width: frameSize.width,
+            height: frameSize.height,
+        })
+            .then((completed) => {
+            if (cancelled || !completed) {
+                return;
+            }
+            outputCtx.clearRect(0, 0, layoutWidth, layoutHeight);
+            outputCtx.drawImage(effectOutputCanvas, ...calcArgs(fit, frameSize, layoutSize));
+            continueRender(effectChainHandle);
+        })
+            .catch((err) => {
+            cancelRender(err);
+        });
+        return () => {
+            cancelled = true;
+            continueRender(effectChainHandle);
+        };
+    }, [
+        index,
+        frames,
+        fit,
+        tempCtx,
+        size,
+        width,
+        height,
+        effects,
+        sourceCanvas,
+        effectOutputCanvas,
+        chainState,
+        delayRender,
+        continueRender,
+        cancelRender,
+    ]);
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style, width: width !== null && width !== void 0 ? width : size === null || size === void 0 ? void 0 : size.width, height: height !== null && height !== void 0 ? height : size === null || size === void 0 ? void 0 : size.height }));
 });

package/dist/esm/index.mjs

@@ -820,7 +820,7 @@ var getGifDurationInSeconds = async (src2) => {
 };
 // src/Gif.tsx
 import {
-  Internals as Internals2,
+  Internals as Internals3,
   Sequence,
   useRemotionEnvironment,
   useVideoConfig as useVideoConfig2
@@ -834,9 +834,11 @@ import {
   forwardRef,
   useEffect as useEffect2,
   useImperativeHandle,
+  useMemo as useMemo2,
   useRef,
   useState as useState2
 } from "react";
+import { Internals, useDelayRender } from "remotion";
 
 // src/use-element-size.ts
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -903,6 +905,7 @@ var useElementSize = (ref) => {
 
 // src/canvas.tsx
 import { jsx } from "react/jsx-runtime";
+var { runEffectChain, useEffectChainState } = Internals;
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -961,11 +964,25 @@ var makeCanvas = () => {
   canvas.height = 0;
   return ctx;
 };
-var Canvas = forwardRef(({ index, frames, width, height, fit, className, style }, ref) => {
+var Canvas = forwardRef(({ index, frames, width, height, fit, className, style, effects }, ref) => {
   const canvasRef = useRef(null);
   const [tempCtx] = useState2(() => {
     return makeCanvas();
   });
+  const sourceCanvas = useMemo2(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    return document.createElement("canvas");
+  }, []);
+  const effectOutputCanvas = useMemo2(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    return document.createElement("canvas");
+  }, []);
+  const chainState = useEffectChainState();
+  const { delayRender, continueRender, cancelRender } = useDelayRender();
   const size = useElementSize(canvasRef);
   useImperativeHandle(ref, () => {
     return canvasRef.current;
@@ -975,20 +992,101 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style }
       return;
     }
     const imageData = frames[index];
-    const ctx = canvasRef.current?.getContext("2d");
-    if (imageData && tempCtx && ctx) {
-      if (tempCtx.canvas.width < imageData.width || tempCtx.canvas.height < imageData.height) {
-        tempCtx.canvas.width = imageData.width;
-        tempCtx.canvas.height = imageData.height;
-      }
-      if (size.width > 0 && size.height > 0) {
-        ctx.clearRect(0, 0, size.width, size.height);
-        tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
-      }
-      tempCtx.putImageData(imageData, 0, 0);
-      ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
+    const outputCanvas = canvasRef.current;
+    const outputCtx = outputCanvas?.getContext("2d");
+    if (!imageData || !tempCtx || !outputCtx || !outputCanvas) {
+      return;
+    }
+    if (tempCtx.canvas.width < imageData.width || tempCtx.canvas.height < imageData.height) {
+      tempCtx.canvas.width = imageData.width;
+      tempCtx.canvas.height = imageData.height;
+    }
+    const layoutWidth = width ?? size.width;
+    const layoutHeight = height ?? size.height;
+    if (layoutWidth <= 0 || layoutHeight <= 0) {
+      return;
+    }
+    if (size.width > 0 && size.height > 0) {
+      outputCtx.clearRect(0, 0, size.width, size.height);
+      tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
+    }
+    tempCtx.putImageData(imageData, 0, 0);
+    const frameSize = {
+      width: imageData.width,
+      height: imageData.height
+    };
+    const layoutSize = {
+      width: layoutWidth,
+      height: layoutHeight
+    };
+    if (effects.length === 0) {
+      outputCtx.drawImage(tempCtx.canvas, ...calcArgs(fit, frameSize, layoutSize));
+      return;
+    }
+    if (!sourceCanvas || !effectOutputCanvas) {
+      return;
+    }
+    if (sourceCanvas.width !== frameSize.width || sourceCanvas.height !== frameSize.height) {
+      sourceCanvas.width = frameSize.width;
+      sourceCanvas.height = frameSize.height;
+    }
+    if (effectOutputCanvas.width !== frameSize.width || effectOutputCanvas.height !== frameSize.height) {
+      effectOutputCanvas.width = frameSize.width;
+      effectOutputCanvas.height = frameSize.height;
     }
-  }, [index, frames, fit, tempCtx, size]);
+    const sourceCtx = sourceCanvas.getContext("2d");
+    if (!sourceCtx) {
+      return;
+    }
+    sourceCtx.clearRect(0, 0, frameSize.width, frameSize.height);
+    sourceCtx.putImageData(imageData, 0, 0);
+    const state = chainState.get(frameSize.width, frameSize.height);
+    if (!state) {
+      return;
+    }
+    if (outputCanvas.width !== layoutWidth || outputCanvas.height !== layoutHeight) {
+      outputCanvas.width = layoutWidth;
+      outputCanvas.height = layoutHeight;
+    }
+    const effectChainHandle = delayRender("Rendering <Gif/> effect chain");
+    let cancelled = false;
+    runEffectChain({
+      state,
+      source: sourceCanvas,
+      effects,
+      output: effectOutputCanvas,
+      width: frameSize.width,
+      height: frameSize.height
+    }).then((completed) => {
+      if (cancelled || !completed) {
+        return;
+      }
+      outputCtx.clearRect(0, 0, layoutWidth, layoutHeight);
+      outputCtx.drawImage(effectOutputCanvas, ...calcArgs(fit, frameSize, layoutSize));
+      continueRender(effectChainHandle);
+    }).catch((err) => {
+      cancelRender(err);
+    });
+    return () => {
+      cancelled = true;
+      continueRender(effectChainHandle);
+    };
+  }, [
+    index,
+    frames,
+    fit,
+    tempCtx,
+    size,
+    width,
+    height,
+    effects,
+    sourceCanvas,
+    effectOutputCanvas,
+    chainState,
+    delayRender,
+    continueRender,
+    cancelRender
+  ]);
   return /* @__PURE__ */ jsx("canvas", {
     ref: canvasRef,
     className,
@@ -1004,7 +1102,7 @@ var isCorsError = (error) => {
 };
 
 // src/useCurrentGifIndex.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { useCurrentFrame, useVideoConfig } from "remotion";
 function useCurrentGifIndex({
   delays,
@@ -1013,7 +1111,7 @@ function useCurrentGifIndex({
 }) {
   const currentFrame = useCurrentFrame();
   const videoConfig = useVideoConfig();
-  const duration = useMemo2(() => {
+  const duration = useMemo3(() => {
     if (delays.length !== 0) {
       return delays.reduce((sum, delay) => sum + (delay ?? 0), 0);
     }
@@ -1052,6 +1150,7 @@ var GifForDevelopment = forwardRef2(({
   playbackRate = 1,
   onLoad,
   fit = "fill",
+  effects,
   ...props
 }, ref) => {
   const resolvedSrc = resolveGifSource(src2);
@@ -1119,6 +1218,7 @@ var GifForDevelopment = forwardRef2(({
     frames: state.frames,
     width,
     height,
+    effects,
     ...props,
     ref
   });
@@ -1126,7 +1226,7 @@ var GifForDevelopment = forwardRef2(({
 
 // src/GifForRendering.tsx
 import { forwardRef as forwardRef3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
-import { Internals, useDelayRender } from "remotion";
+import { Internals as Internals2, useDelayRender as useDelayRender2 } from "remotion";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var GifForRendering = forwardRef3(({
   src: src2,
@@ -1138,10 +1238,11 @@ var GifForRendering = forwardRef3(({
   playbackRate = 1,
   fit = "fill",
   delayRenderTimeoutInMilliseconds,
+  effects,
   ...props
 }, ref) => {
   const resolvedSrc = resolveGifSource(src2);
-  const { delayRender, continueRender } = useDelayRender();
+  const { delayRender, continueRender } = useDelayRender2();
   const [state, update] = useState4(() => {
     const parsedGif = volatileGifCache.get(resolvedSrc);
     if (parsedGif === undefined) {
@@ -1158,7 +1259,7 @@ var GifForRendering = forwardRef3(({
   const [renderHandle] = useState4(() => delayRender(`Rendering <Gif/> with src="${resolvedSrc}"`, {
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds
   }));
-  const logLevel = Internals.useLogLevel();
+  const logLevel = Internals2.useLogLevel();
   useEffect4(() => {
     return () => {
       continueRender(renderHandle);
@@ -1180,10 +1281,10 @@ var GifForRendering = forwardRef3(({
     const newHandle = delayRender("Loading <Gif /> with src=" + resolvedSrc, {
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds
     });
-    Internals.Log.verbose({ logLevel, tag: null }, "Loading GIF with source", resolvedSrc);
+    Internals2.Log.verbose({ logLevel, tag: null }, "Loading GIF with source", resolvedSrc);
     const time = Date.now();
     parseGif({ controller, src: resolvedSrc }).then((parsed) => {
-      Internals.Log.verbose({ logLevel, tag: null }, "Parsed GIF in", Date.now() - time, "ms");
+      Internals2.Log.verbose({ logLevel, tag: null }, "Parsed GIF in", Date.now() - time, "ms");
       currentOnLoad.current?.(parsed);
       update(parsed);
       volatileGifCache.set(resolvedSrc, parsed);
@@ -1195,7 +1296,7 @@ var GifForRendering = forwardRef3(({
         continueRender(newHandle);
         return;
       }
-      Internals.Log.error({ logLevel, tag: null }, "Failed to load GIF", err);
+      Internals2.Log.error({ logLevel, tag: null }, "Failed to load GIF", err);
       if (currentOnError.current) {
         currentOnError.current(err);
       } else {
@@ -1219,7 +1320,7 @@ var GifForRendering = forwardRef3(({
     delayRenderTimeoutInMilliseconds
   ]);
   if (error) {
-    Internals.Log.error({ logLevel, tag: null }, error.stack);
+    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.`);
     }
@@ -1234,6 +1335,7 @@ var GifForRendering = forwardRef3(({
     frames: state.frames,
     width,
     height,
+    effects,
     ...props,
     ref
   });
@@ -1241,6 +1343,12 @@ var GifForRendering = forwardRef3(({
 
 // src/Gif.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+var {
+  addSequenceStackTraces,
+  useMemoizedEffectDefinitions,
+  useMemoizedEffects,
+  wrapInSchema
+} = Internals3;
 var gifSchema = {
   playbackRate: {
     type: "number",
@@ -1250,8 +1358,8 @@ var gifSchema = {
     default: 1,
     description: "Playback Rate"
   },
-  ...Internals2.sequenceStyleSchema,
-  hidden: Internals2.hiddenField
+  ...Internals3.sequenceVisualStyleSchema,
+  hidden: Internals3.hiddenField
 };
 var GifInner = ({
   src: src2,
@@ -1267,12 +1375,18 @@ var GifInner = ({
   durationInFrames,
   style,
   _experimentalControls: controls,
+  effects = [],
   ref,
   ...sequenceProps
 }) => {
   const env = useRemotionEnvironment();
   const { durationInFrames: videoDuration } = useVideoConfig2();
   const resolvedDuration = durationInFrames ?? videoDuration;
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const memoizedEffects = useMemoizedEffects({
+    effects,
+    overrideId: controls?.overrideId ?? null
+  });
   const gifProps = {
     src: src2,
     width,
@@ -1284,7 +1398,8 @@ var GifInner = ({
     loopBehavior,
     id,
     delayRenderTimeoutInMilliseconds,
-    style
+    style,
+    effects: memoizedEffects
   };
   const inner = env.isRendering ? /* @__PURE__ */ jsx4(GifForRendering, {
     ...gifProps,
@@ -1298,13 +1413,14 @@ var GifInner = ({
     durationInFrames: resolvedDuration,
     name: "<Gif>",
     _experimentalControls: controls,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
     children: inner
   });
 };
-var Gif = Internals2.wrapInSchema(GifInner, gifSchema);
+var Gif = wrapInSchema(GifInner, gifSchema);
 Gif.displayName = "Gif";
-Internals2.addSequenceStackTraces(Gif);
+addSequenceStackTraces(Gif);
 // src/preload-gif.ts
 var preloadGif = (src2) => {
   const resolvedSrc = resolveGifSource(src2);

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
 	},
 	"name": "@remotion/gif",
-	"version": "4.0.463",
+	"version": "4.0.465",
 	"description": "Embed GIFs in a Remotion video",
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
@@ -29,14 +29,14 @@
 		}
 	},
 	"dependencies": {
-		"remotion": "4.0.463"
+		"remotion": "4.0.465"
 	},
 	"devDependencies": {
 		"esbuild": "0.28.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
-		"@remotion/eslint-config-internal": "4.0.463",
+		"@remotion/eslint-config-internal": "4.0.465",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},