Skip to main content

<RemotionRiveCanvas>v3.3.75

This component can render a Rive animation so it synchronizes with Remotion's time.

Example​

tsx
import {RemotionRiveCanvas} from '@remotion/rive';
 
function App() {
  return <RemotionRiveCanvas src="https://example.com/myAnimation.riv" />;
}
tsx
import {RemotionRiveCanvas} from '@remotion/rive';
 
function App() {
  return <RemotionRiveCanvas src="https://example.com/myAnimation.riv" />;
}

Props​

src​

a valid URL of the rive file to load. Can be a local file loaded using staticFile() or a remote URL like "https://cdn.rive.app/animations/vehicles.riv".

fit?​

One of: "contain" | "cover" | "fill" | "fit-height" | "none" | "scale-down" | "fit-width". Default is "contain".

alignment?​

One of: "center" | "bottom-center" | "bottom-left" | "bottom-right" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right". Default is "center".

artboard?​

Either a string specifying the artboard name, a number specifying the artboard index, otherwise the default artboard is being used.

animation?​

Either a string specifying the animation name, a number specifying the animation index, otherwise the default animation is being used.

onLoad?v4.0.58​

A callback function that will be executed when the Rive Runtime is loaded. The argument callback is an object of type Rive File

enableRiveAssetCdn?v4.0.181​

Whether to enable the Rive Asset CDN. Default is true.

assetLoader?v4.0.181​

A custom asset loader. See here for more information.

note

Memoize the assetLoader function using useCallback.
You can type the function using FileAssetLoader from @remotion/rive (re-exported from @rive-app/canvas-advanced).

Refv4.0.180​

You can attach a ref to the component to access the Rive Canvas instance.

MyComp.tsx
tsx
import {RemotionRiveCanvas, RiveCanvasRef} from '@remotion/rive';
import {useEffect} from 'react';
 
const MyComp: React.FC = () => {
  const canvasRef = React.useRef<RiveCanvasRef>(null);
 
  useEffect(() => {
    if (!canvasRef.current) {
      return;
    }
 
    canvasRef.current.getAnimationInstance(); // import("@rive-app/canvas-advanced").LinearAnimationInstance
    canvasRef.current.getArtboard(); // import("@rive-app/canvas-advanced").Artboard
    canvasRef.current.getRenderer(); // import("@rive-app/canvas-advanced").CanvasRenderer
    canvasRef.current.getCanvas(); // import("@rive-app/canvas-advanced").RiveCanvas
  }, [canvasRef]);
 
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      ref={canvasRef}
    />
  );
};
MyComp.tsx
tsx
import {RemotionRiveCanvas, RiveCanvasRef} from '@remotion/rive';
import {useEffect} from 'react';
 
const MyComp: React.FC = () => {
  const canvasRef = React.useRef<RiveCanvasRef>(null);
 
  useEffect(() => {
    if (!canvasRef.current) {
      return;
    }
 
    canvasRef.current.getAnimationInstance(); // import("@rive-app/canvas-advanced").LinearAnimationInstance
    canvasRef.current.getArtboard(); // import("@rive-app/canvas-advanced").Artboard
    canvasRef.current.getRenderer(); // import("@rive-app/canvas-advanced").CanvasRenderer
    canvasRef.current.getCanvas(); // import("@rive-app/canvas-advanced").RiveCanvas
  }, [canvasRef]);
 
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      ref={canvasRef}
    />
  );
};

The ref exposes the following methods:

getAnimationInstance()​

Returns a LinearAnimationInstance from the Rive Runtime.

getArtboard()​

Returns a Artboard from the Rive Runtime.

getRenderer()​

Returns a CanvasRenderer from the Rive Runtime.

getCanvas()​

Returns a RiveCanvas from the Rive Runtime.

Set Text Run at Runtime Example​

This example assumes that your Rive animation has a text run named "city". See here for more information about Text Runs on Rive.

tsx
import {RemotionRiveCanvas} from '@remotion/rive';
import {File} from '@rive-app/canvas-advanced';
import {useCallback} from 'react';
 
// Make sure to wrap your onLoad handler on `useCallback` to avoid re-rendering this component every single time
const onLoadHandler = useCallback((file: File) => {
  const artboard = file.defaultArtboard();
  const textRun = artboard.textRun('city');
  textRun.text = 'Tokyo';
}, []);
 
function App() {
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      onLoad={onLoadHandler}
    />
  );
}
tsx
import {RemotionRiveCanvas} from '@remotion/rive';
import {File} from '@rive-app/canvas-advanced';
import {useCallback} from 'react';
 
// Make sure to wrap your onLoad handler on `useCallback` to avoid re-rendering this component every single time
const onLoadHandler = useCallback((file: File) => {
  const artboard = file.defaultArtboard();
  const textRun = artboard.textRun('city');
  textRun.text = 'Tokyo';
}, []);
 
function App() {
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      onLoad={onLoadHandler}
    />
  );
}

See also​