bowtiedswan/rive-skills
Overview
This skill is a complete guide to the Rive animation platform, focused on scripting with Luau, runtime integration for React/Next.js, state machines, data binding, and the drawing API. It helps you author interactive animations, control them at runtime, and integrate Rive assets into modern web apps. Use it to implement scroll-driven effects, pointer interactions, or custom rendering and path effects.
How this skill works
The skill explains Rive scripting protocols (Node, Layout, Converter, PathEffect) and shows Luau templates for init, advance, update, draw, and input handling. It covers the React runtimes, useRive hook, playback and state-machine input control, event handling, and scroll progress wiring. The drawing API section describes Path, Paint, Renderer operations and how to instantiate artboards, bind view models, and listen to input changes.
When to use it
- Creating Luau scripts for custom drawing, layout, converters, or path effects
- Integrating .riv files into React/Next.js with @rive-app/react-canvas
- Controlling animations via state machines and runtime inputs
- Implementing scroll-based, parallax, or pointer-driven interactions
- Building dynamic scenes with runtime artboard instantiation and view model data binding
Best practices
- Expose only necessary inputs so the Editor surface stays clean and maintainable
- Prefer state-machine inputs for runtime control rather than manual animation time manipulation
- Throttle scroll handlers and map progress into the state machine on a 0–100 or 0–1 range
- Use late() for inputs assigned in the Editor and validate ViewModel accesses in init(context)
- Keep Node advance() lightweight; offload heavy calculations or caching to init() and update()
Example use cases
- Create a scroll-driven hero that maps page progress to a state-machine number input
- Write a PathEffect Luau script to animate wave geometry on a path
- Embed a Rive animation in Next.js and toggle features via boolean or trigger inputs
- Instantiate enemy artboards at runtime for a simple game scene and advance/draw them each frame
- Connect a ViewModel score to UI elements in the Rive artboard and react to changes
FAQ
Yes. useRive returns a rive instance; use rive.stateMachineInputs(name) to find inputs, set numeric/boolean values, or fire triggers.
When should I use a Luau Node vs PathEffect?
Use Node for custom drawing, layout or interactive components. Use PathEffect when you need to transform or animate existing path geometry produced by artboard shapes.
