Chapter 896: <RemotionRiveCanvas>

Core Idea

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

Key Concepts

• Example
• Props
• src
• effects?<AvailableFrom v="4.0.464" />
• fit?
• alignment?
• artboard?
• animation?

Code Examples

function App() {
  return <RemotionRiveCanvas src="https://example.com/myAnimation.riv" />;
}

• What it demonstrates: Usage pattern for <RemotionRiveCanvas> from the official docs.

Key Takeaways

1. Understand example when working with <RemotionRiveCanvas>.
2. Understand props when working with <RemotionRiveCanvas>.
3. Understand src when working with <RemotionRiveCanvas>.
4. Understand effects?<availablefrom v="4.0.464" /> when working with <RemotionRiveCanvas>.
5. Understand fit? when working with <RemotionRiveCanvas>.

Connects To

• Rive (@remotion/rive): part of the Rive (@remotion/rive) section of the Remotion docs.