Rive for Game UI

Use Cases

Hero animations

Make websites and apps more engaging with interactive illustrations.

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.

1. Intro

A quick overview of the hero animation we'll be building in these videos.

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.

2. Space effect

A look at how the 3D space scene is created with constraints to create depth.

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.

3. Arms

A look at how the astronaut's arms are designed and rigged using Rive's constraints.

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.

4. Reflection effect

How the light effect and the character's reflection work in the helmet's glass.

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.

5. State machine

Learn how the state machine works and how to make the scene follow the cursor.

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.

6. React implementation

Learn how to implement a Rive hero animation using React in a Next.js application.

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.

Follow mouse

Learn how to make your Rive graphics respond to mouse cursor movements.

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.

Head tracking

Prepare artwork and apply translation constraints to create a 2.5d head tracking rig.

Head tracking

Prepare artwork and apply translation constraints to create a 2.5d head tracking rig.

Community examples

Get inspiration from Rive Community. Open these files in the Rive Editor to see how they work, or remix them into your own creation.

Start building beautiful interactive graphics

Get Started

Join our newsletter

Get all the latest Rive news delivered to your inbox.