frontend-rive

What problem does it solve?

This Skill enables developers to integrate Rive's interactive, state-driven animations into React UI, allowing animations to respond to user input and data changes.

Core Features & Use Cases

• Reactive UI components with hover, click, and data-driven transitions.
• Easy integration with @rive-app/react-canvas using named state machines.
• Prebuilt patterns for common UI elements like animated buttons, toggles, progress indicators, and characters.

Quick Start

• Install the runtime: npm install @rive-app/react-canvas
• Import and initialize: const { rive, RiveComponent } = useRive({ src: '/animations/button.riv', stateMachines: 'Button', autoplay: true });
• Access inputs: const hover = useStateMachineInput(rive, 'Button', 'hover'); const press = useStateMachineInput(rive, 'Button', 'pressed');
• Bind events: onMouseEnter={() => hover && (hover.value = true)} onMouseLeave={() => hover && (hover.value = false)} onMouseDown={() => press && (press.value = true)} onMouseUp={() => press && (press.value = false)}