Rive Interactive

freshtechbro/claudedesignskills/plugins/individual/rive-interactive/skills/rive-interactive

作者 freshtechbro1da73febff0c3e1dfefc07f8a5ef8f7d1dfdb6cd無授權條款1K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫10 個月前更新

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.

包含腳本Design & CreativeSoftware Development
AI 產生的概覽

指導在 React 中以狀態機、輸入、ViewModel 和事件打造可互動的 Rive 向量動畫。

功能
說明 Rive 的狀態機、輸入、ViewModel 與自訂事件，並提供 React 實作模式：嵌入動畫、控制狀態機輸入、綁定 ViewModel 屬性，以及處理動畫發出的事件。內容也涵蓋預先載入、透過 ref 控制、效能調校、常見問題，以及與 Framer Motion 和 GSAP ScrollTrigger 的整合。另附兩支 Python 指令碼，用於產生 React 元件樣板與 ViewModel 屬性綁定。
適用情境
適合使用 Rive 建立可互動向量動畫或狀態驅動 UI 元件，尤其是在 React 中。也適合把執行期資料綁定到動畫視覺、處理動畫事件，或加入純時間軸工具無法提供的互動能力。
執行需求
執行文件中的 React 模式需要 Node.js 與 rive-react 套件；執行隨附的 component_generator.py 與 viewmodel_builder.py 指令碼需要 Python；另需在 Rive 編輯器中製作的 .riv 動畫檔案。

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:

bash
# Installationnpm install rive-react
jsx
import Rive from 'rive-react';
export default function SimpleAnimation() {  return (    <Rive      src="animation.riv"      artboard="Main"      animations="idle"      layout={{ fit: "contain", alignment: "center" }}      style={{ width: '400px', height: '400px' }}    />  );}

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:

jsx
import { useRive, useStateMachineInput } from 'rive-react';
export default function InteractiveButton() {  const { rive, RiveComponent } = useRive({    src: 'button.riv',    stateMachines: 'Button State Machine',    autoplay: true,  });
  // Get state machine inputs  const hoverInput = useStateMachineInput(    rive,    'Button State Machine',    'isHovered',    false  );
  const clickInput = useStateMachineInput(    rive,    'Button State Machine',    'isClicked',    false  );
  return (    <div      onMouseEnter={() => hoverInput && (hoverInput.value = true)}      onMouseLeave={() => hoverInput && (hoverInput.value = false)}      onClick={() => clickInput && clickInput.fire()} // Trigger input      style={{ cursor: 'pointer' }}    >      <RiveComponent style={{ width: '200px', height: '100px' }} />    </div>  );}

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:

jsx
import { useRive, useViewModel, useViewModelInstance,         useViewModelInstanceString, useViewModelInstanceNumber } from 'rive-react';import { useEffect, useState } from 'react';
export default function Dashboard() {  const [stockPrice, setStockPrice] = useState(150.0);
  const { rive, RiveComponent } = useRive({    src: 'dashboard.riv',    autoplay: true,    autoBind: false, // Manual binding for ViewModels  });
  // Get ViewModel and instance  const viewModel = useViewModel(rive, { name: 'Dashboard' });  const viewModelInstance = useViewModelInstance(viewModel, { rive });
  // Bind properties  const { setValue: setTitle } = useViewModelInstanceString(    'title',    viewModelInstance  );
  const { setValue: setPrice } = useViewModelInstanceNumber(    'stockPrice',    viewModelInstance  );
  useEffect(() => {    if (setTitle) setTitle('Stock Dashboard');  }, [setTitle]);
  useEffect(() => {    if (setPrice) setPrice(stockPrice);  }, [setPrice, stockPrice]);
  // Simulate real-time updates  useEffect(() => {    const interval = setInterval(() => {      setStockPrice((prev) => prev + (Math.random() - 0.5) * 10);    }, 1000);
    return () => clearInterval(interval);  }, []);
  return <RiveComponent style={{ width: '800px', height: '600px' }} />;}

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:

jsx
import { useRive, EventType, RiveEventType } from 'rive-react';import { useEffect } from 'react';
export default function InteractiveRating() {  const { rive, RiveComponent } = useRive({    src: 'rating.riv',    stateMachines: 'State Machine 1',    autoplay: true,    automaticallyHandleEvents: true,  });
  useEffect(() => {    if (!rive) return;
    const onRiveEvent = (event) => {      const eventData = event.data;
      if (eventData.type === RiveEventType.General) {        console.log('Event:', eventData.name);
        // Access event properties        const rating = eventData.properties.rating;        const message = eventData.properties.message;
        if (rating >= 4) {          alert(`Thanks for ${rating} stars: ${message}`);        }      }    };
    rive.on(EventType.RiveEvent, onRiveEvent);
    return () => {      rive.off(EventType.RiveEvent, onRiveEvent);    };  }, [rive]);
  return <RiveComponent style={{ width: '400px', height: '300px' }} />;}

Pattern 5: Preloading Rive Files

Use Case: Optimize load times by preloading animations

Implementation:

jsx
import { useRiveFile, useRive } from 'rive-react';
export default function PreloadedAnimation() {  const { riveFile, status } = useRiveFile({    src: 'large-animation.riv',  });
  const { RiveComponent } = useRive({    riveFile: riveFile,    artboard: 'Main',    autoplay: true,  });
  if (status === 'loading') {    return <div>Loading animation...</div>;  }
  if (status === 'failed') {    return <div>Failed to load animation</div>;  }
  return <RiveComponent style={{ width: '600px', height: '400px' }} />;}

Pattern 6: Controlled Animation with Refs

Use Case: Control animation from parent component

Implementation:

jsx
import { useRive, useViewModel, useViewModelInstance,         useViewModelInstanceTrigger } from 'rive-react';import { useImperativeHandle, forwardRef } from 'react';
const AnimatedComponent = forwardRef((props, ref) => {  const { rive, RiveComponent } = useRive({    src: 'logo.riv',    autoplay: true,    autoBind: false,  });
  const viewModel = useViewModel(rive, { useDefault: true });  const viewModelInstance = useViewModelInstance(viewModel, { rive });
  const { trigger: spinTrigger } = useViewModelInstanceTrigger(    'triggerSpin',    viewModelInstance  );
  // Expose methods to parent  useImperativeHandle(ref, () => ({    spin: () => spinTrigger && spinTrigger(),    pause: () => rive && rive.pause(),    play: () => rive && rive.play(),  }));
  return <RiveComponent style={{ width: '200px', height: '200px' }} />;});
export default function App() {  const animationRef = useRef();
  return (    <div>      <AnimatedComponent ref={animationRef} />      <button onClick={() => animationRef.current?.spin()}>Spin</button>      <button onClick={() => animationRef.current?.pause()}>Pause</button>    </div>  );}

Pattern 7: Multi-Property ViewModel Updates

Use Case: Update multiple animation properties from complex data

Implementation:

jsx
import { useRive, useViewModel, useViewModelInstance,         useViewModelInstanceString, useViewModelInstanceNumber,         useViewModelInstanceColor } from 'rive-react';import { useEffect } from 'react';
export default function UserProfile({ user }) {  const { rive, RiveComponent } = useRive({    src: 'profile.riv',    autoplay: true,    autoBind: false,  });
  const viewModel = useViewModel(rive, { useDefault: true });  const viewModelInstance = useViewModelInstance(viewModel, { rive });
  // Bind all properties  const { setValue: setName } = useViewModelInstanceString('name', viewModelInstance);  const { setValue: setScore } = useViewModelInstanceNumber('score', viewModelInstance);  const { setValue: setColor } = useViewModelInstanceColor('avatarColor', viewModelInstance);
  useEffect(() => {    if (user && setName && setScore && setColor) {      setName(user.name);      setScore(user.score);      setColor(parseInt(user.color.substring(1), 16)); // Convert hex to number    }  }, [user, setName, setScore, setColor]);
  return <RiveComponent style={{ width: '300px', height: '300px' }} />;}

Integration Patterns

With Framer Motion (motion-framer)

Animate container while Rive handles interactive content:

jsx
import { motion } from 'framer-motion';import Rive from 'rive-react';
export default function AnimatedCard() {  return (    <motion.div      initial={{ opacity: 0, y: 20 }}      animate={{ opacity: 1, y: 0 }}      whileHover={{ scale: 1.05 }}    >      <Rive        src="card.riv"        stateMachines="Card State Machine"        style={{ width: '300px', height: '400px' }}      />    </motion.div>  );}

With GSAP ScrollTrigger (gsap-scrolltrigger)

Trigger Rive animations on scroll:

jsx
import { useRive, useStateMachineInput } from 'rive-react';import { useEffect, useRef } from 'react';import gsap from 'gsap';import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export default function ScrollRive() {  const containerRef = useRef();  const { rive, RiveComponent } = useRive({    src: 'scroll-animation.riv',    stateMachines: 'State Machine 1',    autoplay: true,  });
  const trigger = useStateMachineInput(rive, 'State Machine 1', 'trigger');
  useEffect(() => {    if (!trigger) return;
    ScrollTrigger.create({      trigger: containerRef.current,      start: 'top center',      onEnter: () => trigger.fire(),    });  }, [trigger]);
  return (    <div ref={containerRef}>      <RiveComponent style={{ width: '100%', height: '600px' }} />    </div>  );}

Performance Optimization

1. Use Off-Screen Renderer

jsx
<Rive  src="animation.riv"  useOffscreenRenderer={true} // Better performance/>

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

jsx
const { riveFile } = useRiveFile({ src: 'critical.riv' });// Preload during app initialization

4. Disable Automatic Event Handling

jsx
<Rive  src="animation.riv"  automaticallyHandleEvents={false} // Manual control/>

Common Pitfalls and Solutions

Pitfall 1: State Machine Input Not Found

Problem: useStateMachineInput returns null

Solution:

jsx
// ❌ Wrong: Incorrect input nameconst input = useStateMachineInput(rive, 'State Machine', 'wrongName');
// ✅ Correct: Match exact name from Rive editorconst input = useStateMachineInput(rive, 'State Machine', 'isHovered');
// Always check if input exists before usingif (input) {  input.value = true;}

Pitfall 2: ViewModel Property Not Updating

Problem: ViewModel property doesn't update animation

Solution:

jsx
// ❌ Wrong: autoBind enabledconst { rive } = useRive({  src: 'dashboard.riv',  autoplay: true,  // autoBind: true (default)});
// ✅ Correct: Disable autoBind for ViewModelsconst { rive } = useRive({  src: 'dashboard.riv',  autoplay: true,  autoBind: false, // Required for manual ViewModel control});

Pitfall 3: Event Listener Not Firing

Problem: Rive events not triggering callback

Solution:

jsx
// ❌ Wrong: Missing automaticallyHandleEventsconst { rive } = useRive({  src: 'rating.riv',  stateMachines: 'State Machine 1',  autoplay: true,});
// ✅ Correct: Enable event handlingconst { rive } = useRive({  src: 'rating.riv',  stateMachines: 'State Machine 1',  autoplay: true,  automaticallyHandleEvents: true, // Required for events});

Resources

Official Documentation

Rive Editor

Learning Resources

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:

bash
./scripts/component_generator.py./scripts/viewmodel_builder.py

Assets

Starter templates and examples:

  • starter_rive/ - Complete React + Rive template
  • examples/ - Real-world integration patterns

來源與署名

來源：freshtechbro/claudedesignskills位於plugins/individual/rive-interactive/skills/rive-interactive提交1da73fe

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 freshtechbro/claudedesignskills 的技能

Web3d Integration Patterns

freshtechbro

在 3D 網頁應用中整合 Three.js、GSAP、React Three Fiber、Motion 與 React Spring 的架構模式。

Software Development1K10 個月前更新

Threejs Webgl

freshtechbro

指導 Three.js WebGL/WebGPU 開發，用於打造互動式 3D 網頁場景，並提供參考文件與起始場景。

包含腳本
Software Development1K10 個月前更新

Substance 3d Texturing

freshtechbro

指導在 Substance 3D Painter 中建立並匯出面向網頁與即時引擎的 PBR 貼圖，並提供 Python 批次自動化。

包含腳本
Design & Creative1K10 個月前更新

Scroll Reveal Libraries

freshtechbro

指導使用 AOS 函式庫為網頁加入簡單的捲動觸發顯現動畫。

包含腳本
Software Development1K10 個月前更新

Pixijs 2d

freshtechbro

指導使用 PixiJS WebGL/WebGPU 引擎打造高效能 2D 圖形、粒子效果與互動式畫布。

包含腳本
Software Development1K10 個月前更新

Motion Framer

freshtechbro

指導使用 Motion（Framer Motion）為 React 介面製作動畫，涵蓋手勢、變體、版面與退場動畫。

包含腳本
Software Development1K10 個月前更新

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative180K今天更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative180K今天更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative180K今天更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新