State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactiv

Rive Interactive State Machine Based Vector Animation Overview Rive is a state machine based animation platform that enables designers to create interactive vector animations with complex logic and runtime interactivity. Unlike timeline only animation tools (like Lottie), Rive supports state machines, input handling, and two way data binding between application code and animations. Key Features : State machine system for complex interactive logic ViewModel API for two way data binding Input handling (boolean, number, trigger inputs) Custom events for animation to code communication Runtime property control (colors, strings, numbers, enums) Cross platform support (Web, React, React Native, iOS, Android, Flutter) Small file sizes with vector graphics When to Use This Skill : Creating UI animations with complex state transitions Building interactive animated components (buttons, toggles, loaders) Implementing game like UI with state driven animations Binding real time data to animated visualizations Creating animations that respond to user input Working with designer created animations requiring runtime control Alternatives : Lottie (lottie animations): For simpler timeline based animations without state machines Framer Motion (motion framer): For code first React animations with spring physics GSAP (gsap scrolltrigger): For timeline based web animations with precise control Core Concepts 1. State Machines State machines define animation behavior with states and transitions: States : Different animation states (e.g., idle, hover, pressed) Inputs : Variables that control transitions (boolean, number, trigger) Transitions : Rules for moving between states Listeners : React hooks to respond to state changes 2. Inputs Three input types control state machine behavior: Boolean : On/off states (e.g., isHovered, isActive) Number : Numeric values (e.g., progress, volume) Trigger : One time events (e.g., click, submit) 3. ViewModels Data binding system for dynamic properties: String Properties : Text content (e.g., username, title) Number Properties : Numeric data (e.g., stock price, score) Color Properties : Dynamic colors (hex values) Enum Properties : Selection from predefined options Trigger Properties : Animation events 4. Events Custom events emitted from animations: General Events : Custom named events Event Properties : Data attached to events Event Listeners : React hooks to handle events Common Patterns Pattern 1: Basic Rive Animation Use Case : Display a simple Rive animation in React Implementation : Key Points : src : Path to .riv file artboard : Which artboard to display animations : Which animation timeline to play layout : How animation fits in container Pattern 2: State Machine Control with Inputs Use Case : Control animation states based on user interaction Implementation : Input Types : Boolean: input.value = true/false Number: input.value = 50 Trigger: input.fire() Pattern 3: ViewModel Data Binding Use Case : Bind application data to animation properties Implementation : ViewModel Property Hooks : useViewModelInstanceString Text properties useViewModelInstanceNumber Numeric properties useViewModelInstanceColor Color properties (hex) useViewModelInstanceEnum Enum selection useViewModelInstanceTrigger Animation triggers Pattern 4: Handling Rive Events Use Case : React to events emitted from Rive animation Implementation : Pattern 5: Preloading Rive Files Use Case : Optimize load times by preloading animations Implementation : Pattern 6: Controlled Animation with Refs Use Case : Control animation from parent component Implementation : Pattern 7: Multi Property ViewModel Updates Use Case : Update multiple animation properties from complex data Implementation : Integration Patterns With Framer Motion (motion framer) Animate container while Rive handles interactive content: With GSAP ScrollTrigger (gsap scrolltrigger) Trigger Rive animations on scroll: Performance Optimization 1. Use Off Screen Renderer 2. Optimize Rive Files In Rive Editor : Keep artboards under 2MB Use vector graphics (avoid raster images when possible) Minimize number of bones in skeletal animations Reduce complexity of state machines 3. Preload Critical Animations 4. Disable Automatic Event Handling Common Pitfalls and Solutions Pitfall 1: State Machine Input Not Found Problem : useStateMachineInput returns null Solution : Pitfall 2: ViewModel Property Not Updating Problem : ViewModel property doesn't update animation Solution : Pitfall 3: Event Listener Not Firing Problem : Rive events not triggering callback Solution : Resources Official Documentation Rive Docs : https://rive.app/docs React Rive GitHub : https://github.com/rive app/rive react Rive Community : https://rive.app/community Rive Editor Web Editor : https://rive.app/community Desktop App : Available for macOS, Windows Learning Resources Tutorials : https://rive.app/learn Examples : https://rive.app/community/files State Machine Guide : https://rive.app/docs/state machine Related Skills lottie animations : For simpler timeline based animations without state machines motion framer : For code first React animations with gestures gsap scrolltrigger : For scroll driven animations spline interactive : For 3D interactive animations Scripts This skill includes utility scripts: component generator.py Generate Rive React component boilerplate viewmodel builder.py Build ViewModel property bindings Run scripts from the skill directory: Assets Starter templates and examples: starter rive/ Complete React + Rive template examples/ Real world integration patterns

rive-interactive