Avatar Creator

Learn to use Rive's State Machine to build an interactive Avatar Creator.

Tutorials

Rive allows you to build rich, interactive experiences, like this Avatar Maker. These tutorials show you how to create the animation in the Rive Editor using concepts like rigging, constraints, and state machines. Then we'll show you how toput this all together 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. Creating the avatar

A look at how the avatar design, animations, rig, and state machine are built.

2. Creating the avatar

A look at how the avatar design, animations, rig, and state machine are built.

2. Creating the avatar

A look at how the avatar design, animations, rig, and state machine are built.

3. Creating the icons

How we built the icons and their states for for the Avatar Maker's options.

3. Creating the icons

How we built the icons and their states for for the Avatar Maker's options.

3. Creating the icons

How we built the icons and their states for for the Avatar Maker's options.

4. Creating the buttons

How we built and set up the buttons in Rive's State Machine.

4. Creating the buttons

How we built and set up the buttons in Rive's State Machine.

4. Creating the buttons

How we built and set up the buttons in Rive's State Machine.

5. React implementation

Learn how to put the Avatar Maker and all its components together with React.

5. React implementation

Learn how to put the Avatar Maker and all its components together with React.

5. React implementation

Learn how to put the Avatar Maker and all its components together with React.

Start building beautiful interactive graphics

Get Started

Join our newsletter

Get all the latest Rive news delivered to your inbox.