Rive Animations

You can use our <Rive/> component to integrate animations built with Rive  inside your videos:

import {Rive, makeScene2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';
 
export default makeScene2D('scene', function* (view) {
  yield view.add(
    <Rive
      src={'https://revideo-example-assets.s3.amazonaws.com/emoji.riv'}
      animationId={1}
      size={[600, 600]}
    />,
  );
 
  yield* waitFor(5);
});

The <Rive/> component is a child of <Rect/>. Additionally, it has the following props:

src

string

Points towards your .riv file

animationId?

string | number

The identifier of your animation, either as a string or an index. Will use default animation if not selected

artboardId?

string | number

The identifier of your artboard, either as a string or an index. Will use default artboard if not selected