Rive Interactive
State machine-based vector animation with runtime interactivity and web integration.
Install
npx skills add freshtechbro/claudedesignskills --skill rive-interactive -g -a claude-code -y- Repository
- freshtechbro/claudedesignskills1.2k
- Category
- Design
- Updated
- 12mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.
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
