Tutorials
Rive allows you to build rich, interactive experiences, like this website hero animation. These tutorials will show you how to create the animation in the Rive Editor using concepts like animation mixing, constraints, and state machines. Then we'll show you how to implement the hero animation on a website using our React runtime.
1. Intro
A quick overview of the hero animation we'll be building in these videos.
2. Space effect
A look at how the 3D space scene is created with constraints to create depth.
3. Arms
A look at how the astronaut's arms are designed and rigged using Rive's constraints.
4. Reflection effect
How the light effect and the character's reflection work in the helmet's glass.
5. State machine
Learn how the state machine works and how to make the scene follow the cursor.
6. React implementation
Learn how to implement a Rive hero animation using React in a Next.js application.
Additional resources
The tutorials above use various design, animation, and rigging concepts. Learn more about these powerful features with the links below.
Follow mouse
Learn how to make your Rive graphics respond to mouse cursor movements.
Head tracking
Prepare artwork and apply translation constraints to create a 2.5d head tracking rig.
Join our newsletter
Get all the latest Rive news delivered to your inbox.