skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

rive-interactive

Enable interactive vector animations with Rive state machines and ViewModel bindings.

Updated May 24, 2026
Search Tags:#ui#interactive#animation#state-machine#rive#viewmodel
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill rive-interactive-yonetim258852
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rive-interactive
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/rive-interactive
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill rive-interactive-yonetim258852

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Rive Interactive enables designers and developers to create interactive vector animations driven by state machines, with runtime interactivity and seamless web integration. This approach adds inputs, two-way data binding, and event-driven behavior to traditional timeline animations, unlocking richer, responsive UI experiences.

Core Features & Use Cases

  • State machine-based animation for complex UI interactions
  • ViewModel data binding for two-way communication between code and animation
  • Input handling (boolean, number, trigger) for runtime control
  • Cross-platform support for web, React, iOS, Android, and Flutter
  • Use cases include interactive buttons, dashboards, and dynamic UI components responding to user input

Quick Start

Create an interactive button with hover and click states driven by a Rive state machine.

Frequently Asked Questions about rive-interactive

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

FAQPage Schema
How do I add interactive state machine animations to web and mobile UI components?▼

State machine animations enable runtime control by mapping boolean, number, and trigger inputs to animation states, allowing real-time user interaction within web and mobile UI components.

How does two-way data binding work with Rive ViewModel properties?▼

ViewModel data binding synchronizes properties between your code and the animation, allowing two-way communication where state changes in the UI instantly reflect in the vector animation.

Do I need a specific file format to trigger runtime inputs in interactive vector animations?▼

Yes, you need a .riv file with a defined state machine, configured inputs (boolean, number, trigger), and optional ViewModel bindings to enable runtime control and two-way property synchronization.

Can I use interactive vector animations with React, iOS, Android, and Flutter dashboards?▼

Yes, interactive vector animations driven by state machines support cross-platform deployment across web, React, iOS, Android, and Flutter for dynamic dashboards and UI components requiring runtime input.

What is the difference between timeline animations and state machine-based vector animations?▼

Unlike traditional timeline animations, state machine-based vector animations support runtime inputs, two-way ViewModel data binding, and event-driven behavior, enabling responsive UI interactions rather than linear playback.

Why are my interactive UI animations not responding to runtime user input?▼

Interactive animations may not respond if the .riv file lacks a defined state machine, proper inputs (boolean, number, trigger), or ViewModel bindings required for runtime control and two-way data synchronization.

Related Skills

Explore More Design & Creative Skills→
hii-saikrishnahii-saikrishna

rive-interactive

Generate interactive vector animations with Rive state machines and ViewModel data binding.

Community
Advanced
Gekkos-techGekkos-tech
4

lottie-animations

Convert After Effects animations to JSON and integrate them into web and React applications.

Official
Intermediate
TumeloRamaphosaTumeloRamaphosa

rive-interactive

Wire Rive state machine inputs and ViewModel properties to React components.

Community
Intermediate
Gekkos-techGekkos-tech
4

rive-interactive

Create interactive vector animations with state machines and two-way data binding.

Official
Advanced