Rive Web Runtime Skill | Agent Skills

Rive Web Runtime

Embed and control Rive animations on the web with JavaScript/TypeScript.

Installation

# Canvas renderer (smaller, good for most cases)
npm install @rive-app/canvas

# WebGL renderer (better for complex animations)
npm install @rive-app/webgl

Quick Start

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

const rive = new Rive({
  src: 'animation.riv',
  canvas: document.getElementById('canvas') as HTMLCanvasElement,
  autoplay: true,
  onLoad: () => {
    console.log('Animation loaded');
  },
});

Key Concepts

| Concept | Description | |---------|-------------| | Rive Instance | Main controller for the animation | | State Machine | Interactive logic built in Rive editor | | Inputs | Variables to control state machine (Boolean, Number, Trigger) | | Events | Signals fired by the state machine | | Artboard | Container for animation content |

Common Patterns

Loading Animation

const rive = new Rive({
  src: 'animation.riv',           // URL or path
  canvas: canvasElement,
  stateMachines: 'State Machine', // Name from Rive editor
  autoplay: true,
  onLoad: () => {
    // Animation ready
  },
  onStateChange: (event) => {
    // State changed
  },
});

Controlling Inputs

// Get inputs
const inputs = rive.stateMachineInputs('State Machine');

// Set boolean
const toggle = inputs.find(i => i.name === 'isActive');
toggle.value = true;

// Set number
const progress = inputs.find(i => i.name === 'progress');
progress.value = 0.75;

// Fire trigger
const click = inputs.find(i => i.name === 'onClick');
click.fire();

Handling Events

rive.on('riveevent', (event) => {
  console.log('Event:', event.data.name);
  // Access custom properties
  const data = event.data.properties;
});

Cleanup

// Always cleanup when done
rive.cleanup();

Rules

@file rules/loading.md @file rules/state-machines.md @file rules/inputs.md

Agent Skills: Rive Web Runtime

Install this agent skill to your local

Skill Files