@remotion/rive 4.0.463 → 4.0.464

package/dist/cjs/RemotionRiveCanvas.d.ts

@@ -1,9 +1,11 @@
 import type { Artboard, CanvasRenderer, File, FileAsset, LinearAnimationInstance, RiveCanvas } from '@rive-app/canvas-advanced';
 import React from 'react';
+import type { EffectsProp, SequenceProps } from 'remotion';
 import type { RemotionRiveCanvasAlignment, RemotionRiveCanvasFit } from './map-enums.js';
 type assetLoadCallback = (asset: FileAsset, bytes: Uint8Array) => boolean;
 type onLoadCallback = (file: File) => void;
-interface RiveProps {
+type RiveSequenceInheritedProps = Pick<SequenceProps, 'durationInFrames' | 'name' | 'from' | 'showInTimeline' | 'hidden'>;
+type RemotionRiveCanvasOwnProps = {
     readonly src: string;
     readonly fit?: RemotionRiveCanvasFit;
     readonly alignment?: RemotionRiveCanvasAlignment;
@@ -12,12 +14,16 @@ interface RiveProps {
     readonly onLoad?: onLoadCallback | null;
     readonly enableRiveAssetCdn?: boolean;
     readonly assetLoader?: assetLoadCallback;
-}
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly _experimentalEffects?: EffectsProp;
+};
+export type RemotionRiveCanvasProps = RemotionRiveCanvasOwnProps & RiveSequenceInheritedProps;
 export type RiveCanvasRef = {
     getAnimationInstance: () => LinearAnimationInstance | null;
     getArtboard: () => Artboard | null;
     getRenderer: () => CanvasRenderer | null;
     getCanvas: () => RiveCanvas | null;
 };
-export declare const RemotionRiveCanvas: React.ForwardRefExoticComponent<RiveProps & React.RefAttributes<RiveCanvasRef>>;
+export declare const RemotionRiveCanvas: React.ForwardRefExoticComponent<RemotionRiveCanvasOwnProps & RiveSequenceInheritedProps & React.RefAttributes<RiveCanvasRef>>;
 export {};

package/dist/cjs/RemotionRiveCanvas.js

@@ -42,7 +42,45 @@ const canvas_advanced_1 = __importDefault(require("@rive-app/canvas-advanced"));
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const map_enums_js_1 = require("./map-enums.js");
-const RemotionRiveCanvasForwardRefFunction = ({ src, fit = 'contain', alignment = 'center', artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn = true, }, ref) => {
+const { addSequenceStackTraces, hiddenField, runEffectChain, sequenceVisualStyleSchema, useEffectChainState, useMemoizedEffectDefinitions, useMemoizedEffects, wrapInSchema, } = remotion_1.Internals;
+const riveFitVariants = {
+    contain: {},
+    cover: {},
+    fill: {},
+    'fit-height': {},
+    'fit-width': {},
+    none: {},
+    'scale-down': {},
+};
+const riveAlignmentVariants = {
+    center: {},
+    'bottom-center': {},
+    'bottom-left': {},
+    'bottom-right': {},
+    'center-left': {},
+    'center-right': {},
+    'top-center': {},
+    'top-left': {},
+    'top-right': {},
+};
+const riveCanvasSchema = {
+    fit: {
+        type: 'enum',
+        default: 'contain',
+        description: 'Fit',
+        variants: riveFitVariants,
+    },
+    alignment: {
+        type: 'enum',
+        default: 'center',
+        description: 'Alignment',
+        variants: riveAlignmentVariants,
+    },
+    ...sequenceVisualStyleSchema,
+    hidden: hiddenField,
+};
+const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn, className, style, effects, controls, }, ref) => {
+    var _a;
     const { width, fps, height } = (0, remotion_1.useVideoConfig)();
     const frame = (0, remotion_1.useCurrentFrame)();
     const canvas = (0, react_1.useRef)(null);
@@ -51,6 +89,19 @@ const RemotionRiveCanvasForwardRefFunction = ({ src, fit = 'contain', alignment
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     const [handle] = (0, react_1.useState)(() => delayRender());
     const lastFrame = (0, react_1.useRef)(0);
+    // Rive draws to this offscreen-style canvas; the effect chain then
+    // composites from here onto the visible output canvas.
+    const sourceCanvas = (0, react_1.useMemo)(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        return document.createElement('canvas');
+    }, []);
+    const chainState = useEffectChainState();
+    const memoizedEffects = useMemoizedEffects({
+        effects,
+        overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+    });
     if (err) {
         throw err;
     }
@@ -87,10 +138,12 @@ const RemotionRiveCanvasForwardRefFunction = ({ src, fit = 'contain', alignment
         });
     }, [handle, continueRender]);
     (0, react_1.useEffect)(() => {
-        if (!riveCanvasInstance) {
+        if (!riveCanvasInstance || !sourceCanvas) {
             return;
         }
-        const renderer = riveCanvasInstance.makeRenderer(canvas.current);
+        sourceCanvas.width = width;
+        sourceCanvas.height = height;
+        const renderer = riveCanvasInstance.makeRenderer(sourceCanvas);
         fetch(new Request(src))
             .then((f) => f.arrayBuffer())
             .then((b) => {
@@ -130,6 +183,9 @@ const RemotionRiveCanvasForwardRefFunction = ({ src, fit = 'contain', alignment
         onLoad,
         assetLoader,
         enableRiveAssetCdn,
+        sourceCanvas,
+        width,
+        height,
     ]);
     (0, react_1.useEffect)(() => {
         if (onLoad && rive) {
@@ -137,36 +193,105 @@ const RemotionRiveCanvasForwardRefFunction = ({ src, fit = 'contain', alignment
         }
     }, [onLoad, rive]);
     react_1.default.useEffect(() => {
-        if (!riveCanvasInstance) {
+        if (!riveCanvasInstance || !rive) {
             return;
         }
-        riveCanvasInstance.requestAnimationFrame(() => {
-            if (!rive || !canvas.current) {
-                return;
-            }
-            const diff = frame - lastFrame.current;
-            rive.renderer.clear();
-            if (rive.animation) {
-                rive.animation.advance(diff / fps);
-                rive.animation.apply(1);
+        const outputCanvas = canvas.current;
+        if (!outputCanvas || !sourceCanvas) {
+            return;
+        }
+        // Keep source/output dimensions in sync with the video config.
+        if (sourceCanvas.width !== width || sourceCanvas.height !== height) {
+            sourceCanvas.width = width;
+            sourceCanvas.height = height;
+        }
+        if (outputCanvas.width !== width || outputCanvas.height !== height) {
+            outputCanvas.width = width;
+            outputCanvas.height = height;
+        }
+        const diff = frame - lastFrame.current;
+        rive.renderer.clear();
+        if (rive.animation) {
+            rive.animation.advance(diff / fps);
+            rive.animation.apply(1);
+        }
+        rive.artboard.advance(diff / fps);
+        rive.renderer.save();
+        rive.renderer.align((0, map_enums_js_1.mapToFit)(fit, riveCanvasInstance), (0, map_enums_js_1.mapToAlignment)(alignment, riveCanvasInstance.Alignment), {
+            minX: 0,
+            minY: 0,
+            maxX: sourceCanvas.width,
+            maxY: sourceCanvas.height,
+        }, rive.artboard.bounds);
+        rive.artboard.draw(rive.renderer);
+        rive.renderer.restore();
+        // Flush the renderer's queued draw calls so `sourceCanvas` actually
+        // contains the pixels we just drew before `runEffectChain` reads from
+        // it. We don't use `riveCanvasInstance.requestAnimationFrame` (which
+        // would flush implicitly at the end of its own callback) because the
+        // effect chain needs the flushed pixels synchronously, and waiting
+        // for a Rive-scheduled frame would mean the very first paint after
+        // mount (and after every prop change) would composite an empty /
+        // stale source canvas to the output.
+        riveCanvasInstance.resolveAnimationFrame();
+        lastFrame.current = frame;
+        const state = chainState.get(width, height);
+        if (!state) {
+            return;
+        }
+        const effectChainHandle = delayRender(`Rendering frame at ${frame} of <RemotionRiveCanvas src="${src}"/>`);
+        let cancelled = false;
+        runEffectChain({
+            state,
+            source: sourceCanvas,
+            effects: memoizedEffects,
+            output: outputCanvas,
+            width,
+            height,
+        })
+            .then(() => {
+            if (!cancelled) {
+                continueRender(effectChainHandle);
             }
-            rive.artboard.advance(diff / fps);
-            rive.renderer.save();
-            rive.renderer.align((0, map_enums_js_1.mapToFit)(fit, riveCanvasInstance), (0, map_enums_js_1.mapToAlignment)(alignment, riveCanvasInstance.Alignment), {
-                minX: 0,
-                minY: 0,
-                maxX: canvas.current.width,
-                maxY: canvas.current.height,
-            }, rive.artboard.bounds);
-            rive.artboard.draw(rive.renderer);
-            rive.renderer.restore();
-            lastFrame.current = frame;
+        })
+            .catch((newErr) => {
+            setError(newErr);
         });
-    }, [frame, fps, rive, riveCanvasInstance, fit, alignment]);
-    const style = (0, react_1.useMemo)(() => ({
+        return () => {
+            cancelled = true;
+            continueRender(effectChainHandle);
+        };
+    }, [
+        frame,
+        fps,
+        rive,
+        riveCanvasInstance,
+        fit,
+        alignment,
+        width,
+        height,
+        sourceCanvas,
+        memoizedEffects,
+        chainState,
+        delayRender,
+        continueRender,
+        src,
+    ]);
+    const canvasStyle = (0, react_1.useMemo)(() => ({
         height,
         width,
-    }), [height, width]);
-    return jsx_runtime_1.jsx("canvas", { ref: canvas, width: width, height: height, style: style });
+        ...style,
+    }), [height, style, width]);
+    return (jsx_runtime_1.jsx("canvas", { ref: canvas, width: width, height: height, className: className, style: canvasStyle }));
+};
+const RemotionRiveCanvasContent = (0, react_1.forwardRef)(RemotionRiveCanvasContentForwardRefFunction);
+const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', alignment = 'center', artboard, animation, onLoad = null, assetLoader, enableRiveAssetCdn = true, className, style, _experimentalEffects: effects = [], _experimentalControls: controls, durationInFrames, name, from, showInTimeline, hidden, ...props }, ref) => {
+    props;
+    const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, name: name !== null && name !== void 0 ? name : '<RemotionRiveCanvas>', durationInFrames: durationInFrames, _experimentalControls: controls, _experimentalEffects: memoizedEffectDefinitions, ...props, children: jsx_runtime_1.jsx(RemotionRiveCanvasContent, { ref: ref, src: src, fit: fit, alignment: alignment, artboard: artboard, animation: animation, onLoad: onLoad, assetLoader: assetLoader, enableRiveAssetCdn: enableRiveAssetCdn, className: className, style: style, effects: effects, controls: controls }) }));
 };
-exports.RemotionRiveCanvas = (0, react_1.forwardRef)(RemotionRiveCanvasForwardRefFunction);
+const RemotionRiveCanvasInner = (0, react_1.forwardRef)(RemotionRiveCanvasInnerForwardRefFunction);
+exports.RemotionRiveCanvas = wrapInSchema(RemotionRiveCanvasInner, riveCanvasSchema);
+addSequenceStackTraces(exports.RemotionRiveCanvas);
+exports.RemotionRiveCanvas.displayName =
+    'RemotionRiveCanvas';

package/dist/cjs/index.d.ts

@@ -1 +1 @@
-export { RemotionRiveCanvas, RiveCanvasRef } from './RemotionRiveCanvas.js';
+export { RemotionRiveCanvas, RemotionRiveCanvasProps, RiveCanvasRef, } from './RemotionRiveCanvas.js';

package/dist/esm/index.mjs

@@ -8,7 +8,13 @@ import React, {
   useRef,
   useState
 } from "react";
-import { useCurrentFrame, useDelayRender, useVideoConfig } from "remotion";
+import {
+  Internals,
+  Sequence,
+  useCurrentFrame,
+  useDelayRender,
+  useVideoConfig
+} from "remotion";
 
 // src/map-enums.ts
 var mapToFit = (fit, canvas) => {
@@ -68,15 +74,65 @@ var mapToAlignment = (alignment, factory) => {
 
 // src/RemotionRiveCanvas.tsx
 import { jsx } from "react/jsx-runtime";
-var RemotionRiveCanvasForwardRefFunction = ({
+var {
+  addSequenceStackTraces,
+  hiddenField,
+  runEffectChain,
+  sequenceVisualStyleSchema,
+  useEffectChainState,
+  useMemoizedEffectDefinitions,
+  useMemoizedEffects,
+  wrapInSchema
+} = Internals;
+var riveFitVariants = {
+  contain: {},
+  cover: {},
+  fill: {},
+  "fit-height": {},
+  "fit-width": {},
+  none: {},
+  "scale-down": {}
+};
+var riveAlignmentVariants = {
+  center: {},
+  "bottom-center": {},
+  "bottom-left": {},
+  "bottom-right": {},
+  "center-left": {},
+  "center-right": {},
+  "top-center": {},
+  "top-left": {},
+  "top-right": {}
+};
+var riveCanvasSchema = {
+  fit: {
+    type: "enum",
+    default: "contain",
+    description: "Fit",
+    variants: riveFitVariants
+  },
+  alignment: {
+    type: "enum",
+    default: "center",
+    description: "Alignment",
+    variants: riveAlignmentVariants
+  },
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var RemotionRiveCanvasContentForwardRefFunction = ({
   src,
-  fit = "contain",
-  alignment = "center",
+  fit,
+  alignment,
   artboard: artboardName,
   animation: animationIndex,
   onLoad = null,
   assetLoader,
-  enableRiveAssetCdn = true
+  enableRiveAssetCdn,
+  className,
+  style,
+  effects,
+  controls
 }, ref) => {
   const { width, fps, height } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -86,6 +142,17 @@ var RemotionRiveCanvasForwardRefFunction = ({
   const { delayRender, continueRender } = useDelayRender();
   const [handle] = useState(() => delayRender());
   const lastFrame = useRef(0);
+  const sourceCanvas = useMemo(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    return document.createElement("canvas");
+  }, []);
+  const chainState = useEffectChainState();
+  const memoizedEffects = useMemoizedEffects({
+    effects,
+    overrideId: controls?.overrideId ?? null
+  });
   if (err) {
     throw err;
   }
@@ -117,10 +184,12 @@ var RemotionRiveCanvasForwardRefFunction = ({
     });
   }, [handle, continueRender]);
   useEffect(() => {
-    if (!riveCanvasInstance) {
+    if (!riveCanvasInstance || !sourceCanvas) {
       return;
     }
-    const renderer = riveCanvasInstance.makeRenderer(canvas.current);
+    sourceCanvas.width = width;
+    sourceCanvas.height = height;
+    const renderer = riveCanvasInstance.makeRenderer(sourceCanvas);
     fetch(new Request(src)).then((f) => f.arrayBuffer()).then((b) => {
       riveCanvasInstance.load(new Uint8Array(b), assetLoader ? new riveCanvasInstance.CustomFileAssetLoader({
         loadContents: assetLoader
@@ -144,7 +213,10 @@ var RemotionRiveCanvasForwardRefFunction = ({
     src,
     onLoad,
     assetLoader,
-    enableRiveAssetCdn
+    enableRiveAssetCdn,
+    sourceCanvas,
+    width,
+    height
   ]);
   useEffect(() => {
     if (onLoad && rive) {
@@ -152,44 +224,145 @@ var RemotionRiveCanvasForwardRefFunction = ({
     }
   }, [onLoad, rive]);
   React.useEffect(() => {
-    if (!riveCanvasInstance) {
+    if (!riveCanvasInstance || !rive) {
       return;
     }
-    riveCanvasInstance.requestAnimationFrame(() => {
-      if (!rive || !canvas.current) {
-        return;
-      }
-      const diff = frame - lastFrame.current;
-      rive.renderer.clear();
-      if (rive.animation) {
-        rive.animation.advance(diff / fps);
-        rive.animation.apply(1);
+    const outputCanvas = canvas.current;
+    if (!outputCanvas || !sourceCanvas) {
+      return;
+    }
+    if (sourceCanvas.width !== width || sourceCanvas.height !== height) {
+      sourceCanvas.width = width;
+      sourceCanvas.height = height;
+    }
+    if (outputCanvas.width !== width || outputCanvas.height !== height) {
+      outputCanvas.width = width;
+      outputCanvas.height = height;
+    }
+    const diff = frame - lastFrame.current;
+    rive.renderer.clear();
+    if (rive.animation) {
+      rive.animation.advance(diff / fps);
+      rive.animation.apply(1);
+    }
+    rive.artboard.advance(diff / fps);
+    rive.renderer.save();
+    rive.renderer.align(mapToFit(fit, riveCanvasInstance), mapToAlignment(alignment, riveCanvasInstance.Alignment), {
+      minX: 0,
+      minY: 0,
+      maxX: sourceCanvas.width,
+      maxY: sourceCanvas.height
+    }, rive.artboard.bounds);
+    rive.artboard.draw(rive.renderer);
+    rive.renderer.restore();
+    riveCanvasInstance.resolveAnimationFrame();
+    lastFrame.current = frame;
+    const state = chainState.get(width, height);
+    if (!state) {
+      return;
+    }
+    const effectChainHandle = delayRender(`Rendering frame at ${frame} of <RemotionRiveCanvas src="${src}"/>`);
+    let cancelled = false;
+    runEffectChain({
+      state,
+      source: sourceCanvas,
+      effects: memoizedEffects,
+      output: outputCanvas,
+      width,
+      height
+    }).then(() => {
+      if (!cancelled) {
+        continueRender(effectChainHandle);
       }
-      rive.artboard.advance(diff / fps);
-      rive.renderer.save();
-      rive.renderer.align(mapToFit(fit, riveCanvasInstance), mapToAlignment(alignment, riveCanvasInstance.Alignment), {
-        minX: 0,
-        minY: 0,
-        maxX: canvas.current.width,
-        maxY: canvas.current.height
-      }, rive.artboard.bounds);
-      rive.artboard.draw(rive.renderer);
-      rive.renderer.restore();
-      lastFrame.current = frame;
+    }).catch((newErr) => {
+      setError(newErr);
     });
-  }, [frame, fps, rive, riveCanvasInstance, fit, alignment]);
-  const style = useMemo(() => ({
+    return () => {
+      cancelled = true;
+      continueRender(effectChainHandle);
+    };
+  }, [
+    frame,
+    fps,
+    rive,
+    riveCanvasInstance,
+    fit,
+    alignment,
+    width,
+    height,
+    sourceCanvas,
+    memoizedEffects,
+    chainState,
+    delayRender,
+    continueRender,
+    src
+  ]);
+  const canvasStyle = useMemo(() => ({
     height,
-    width
-  }), [height, width]);
+    width,
+    ...style
+  }), [height, style, width]);
   return /* @__PURE__ */ jsx("canvas", {
     ref: canvas,
     width,
     height,
-    style
+    className,
+    style: canvasStyle
+  });
+};
+var RemotionRiveCanvasContent = forwardRef(RemotionRiveCanvasContentForwardRefFunction);
+var RemotionRiveCanvasInnerForwardRefFunction = ({
+  src,
+  fit = "contain",
+  alignment = "center",
+  artboard,
+  animation,
+  onLoad = null,
+  assetLoader,
+  enableRiveAssetCdn = true,
+  className,
+  style,
+  _experimentalEffects: effects = [],
+  _experimentalControls: controls,
+  durationInFrames,
+  name,
+  from,
+  showInTimeline,
+  hidden,
+  ...props
+}, ref) => {
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  return /* @__PURE__ */ jsx(Sequence, {
+    layout: "none",
+    from,
+    hidden,
+    showInTimeline,
+    name: name ?? "<RemotionRiveCanvas>",
+    durationInFrames,
+    _experimentalControls: controls,
+    _experimentalEffects: memoizedEffectDefinitions,
+    ...props,
+    children: /* @__PURE__ */ jsx(RemotionRiveCanvasContent, {
+      ref,
+      src,
+      fit,
+      alignment,
+      artboard,
+      animation,
+      onLoad,
+      assetLoader,
+      enableRiveAssetCdn,
+      className,
+      style,
+      effects,
+      controls
+    })
   });
 };
-var RemotionRiveCanvas = forwardRef(RemotionRiveCanvasForwardRefFunction);
+var RemotionRiveCanvasInner = forwardRef(RemotionRiveCanvasInnerForwardRefFunction);
+var RemotionRiveCanvas = wrapInSchema(RemotionRiveCanvasInner, riveCanvasSchema);
+addSequenceStackTraces(RemotionRiveCanvas);
+RemotionRiveCanvas.displayName = "RemotionRiveCanvas";
 export {
   RemotionRiveCanvas
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rive"
 	},
 	"name": "@remotion/rive",
-	"version": "4.0.463",
+	"version": "4.0.464",
 	"description": "Embed Rive animations in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -22,7 +22,7 @@
 	"license": "See LICENSE.md",
 	"dependencies": {
 		"@rive-app/canvas-advanced": "2.31.5",
-		"remotion": "4.0.463"
+		"remotion": "4.0.464"
 	},
 	"peerDependencies": {
 		"react": ">=18.2.0",
@@ -31,7 +31,7 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/eslint-config-internal": "4.0.463",
+		"@remotion/eslint-config-internal": "4.0.464",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},