Skill Detail

Rive Runtime Animation Controller

Controls Rive (.riv) interactive animations at runtime using @rive-app/canvas-advanced, manages state machine inputs, and synchronizes animation states with application data via the Rive WASM runtime.

Image & Creative AutomationChatGPT Agents
Image & Creative Automation ChatGPT Agents Security Reviewed
Tool match: react โญ 1.1k GitHub stars โฌ‡ 19.7k/wk npm
INSTALL WITH ANY AGENT
npx skills add agentskillexchange/skills --skill rive-runtime-animation-controller Copy
Works best when you want a reusable capability, not another fragile one-off prompt.
At a glance
Author
rive-app
Last updated
Mar 24, 2026
Quick brief

The Rive Runtime Animation Controller manages interactive vector animations using the @rive-app/canvas-advanced package and Rive’s WASM runtime. It loads .riv files exported from the Rive editor, instantiates artboards, and drives state machine transitions by programmatically setting boolean, number, and trigger inputs via StateMachineInput objects. The agent handles multiple artboards within a single .riv file, synchronizes animation playback with application state (scroll position, user input, data changes), and manages the requestAnimationFrame render loop with proper cleanup. It supports Rive’s text runs for dynamic text content, mesh deformations for character animation, and Rive events (RiveEvent) for bidirectional communication between animation and host application. For React integration, it generates components using @rive-app/react-canvas with useRive and useStateMachineInput hooks. Performance optimization includes offscreen canvas rendering with transferToImageBitmap and Web Worker-based animation updates. Handles fallback to Lottie export for browsers without WASM support.