skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

rive-interactive

Implements state machine-based Rive vector animations with runtime interactivity in React applications.

Updated Jun 30, 2026
Search Tags:#React#interactive#animation#state machine#rive#viewmodel#vector graphics
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill rive-interactive-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rive-interactive
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/rive-interactive
Command: npx skills add https://github.com/ayofemiade/cleva --skill rive-interactive-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires rive-react, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building animations that respond to user input and application data requires more than timeline playback. This Skill provides patterns for integrating Rive state machines, ViewModel data binding, and event handling into React apps so animations react to hovers, clicks, and live data. ## Core Features & Use Cases - State Machine Control: Drive animation states with boolean, number, and trigger inputs using useRive and useStateMachineInput hooks. - ViewModel Data Binding: Bind strings, numbers, colors, and enums from application state to animation properties in real time. - Event Handling & Integration: Listen to custom Rive events and combine with Framer Motion or GSAP ScrollTrigger for scroll-driven experiences. - Use Case: Build an interactive dashboard where a designer-created Rive animation displays a live-updating stock price, changes color based on performance, and fires events back to React when users rate content. ## Quick Start Ask the AI to create a React component that loads a Rive animation file and controls its state machine with hover and click inputs.

Frequently Asked Questions about rive-interactive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I control a Rive state machine in React?▼

Use the useRive hook to load the .riv file with a state machine name, then call useStateMachineInput to get input references. Set boolean or number inputs via input.value, and fire trigger inputs with input.fire().

Rive vs Lottie: which should I use for animations?▼

Rive supports state machines, input handling, and two-way data binding, making it suited for interactive animations. Lottie plays timeline-based animations without runtime logic, which works better for simple decorative playback.

How do I bind React data to Rive animation properties?▼

Set autoBind to false in useRive, then use useViewModel and useViewModelInstance to get an instance. Bind properties with hooks like useViewModelInstanceString or useViewModelInstanceNumber and call setValue when data changes.

Why is my Rive state machine input null?▼

useStateMachineInput returns null when the input name does not exactly match the name defined in the Rive editor. Verify the state machine and input names, and always check that the input exists before setting its value.

Why are Rive events not firing in my React component?▼

Rive events require automaticallyHandleEvents set to true in the useRive options. Then attach a listener with rive.on(EventType.RiveEvent, callback) and remove it in the effect cleanup.

How can I improve Rive animation performance on the web?▼

Enable useOffscreenRenderer, preload files with useRiveFile, and keep artboards under 2MB with vector graphics. Disabling automatic event handling and canvas auto-resize also reduces runtime overhead.

Related Skills

Explore More Software Engineering Skills→
ayofemiadeayofemiade

rive-interactive

Implements state machine-based Rive vector animations with runtime interactivity in React applications.

Community
Intermediate
Vortex4047Vortex4047

frontend-developer

Build and repair React and Next.js frontend features for web applications.

Community
Advanced
hubeiqiaohubeiqiao

playwright-whileinview-screenshots

Automates Playwright screenshots by scrolling to trigger animations before capture.

Community
Intermediate
TumeloRamaphosaTumeloRamaphosa

spline-interactive

Generate React integrations for Spline scenes with state-driven event handlers.

Community
Intermediate