Playground

Animation Playground

Drop a .loom / .riv / .json scene file, drive its playback, and grab the integration snippet for your stack.

Preview

ready

0,01024×768

Drop a Loom file here

.loom · .riv · .json

Controls

Speed1×

Mix weight1

Appearance

Background

Mood tint

Scale1.00×

0.5×1.5×

Layout

Fit

Alignment

Aspect

Code Snippets

character.tsx

import { useRive } from '@rive-app/react-canvas';

export function character() {
  const { RiveComponent } = useRive({
    src: 'character.riv',
    animations: ['Idle Loop'],
    autoplay: true,
  });

  return <RiveComponent className="w-full h-full" />;
}