Build an Interactive Animated Button

Design and animate an interactive button in Rive with a State Machine.

Introduction

30 Second Summary

Every polished app has buttons that feel alive. They pulse gently, respond to your cursor, and bounce when clicked.

In this project, you will design and animate an interactive button inside the Rive editor. You'll connect its visual states using a State Machine, then bring it to life on a real web page.

What You'll Build

An interactive animated button with idle, hover, and press states, powered by a Rive State Machine and rendered in the browser using the Rive web runtime.

By the end of this project, you'll have:

A Rive file with a designed button, three timeline animations, and a complete State Machine.
A working HTML page that loads and displays an interactive Rive animation using the @rive-app/webgl2 runtime.
A local development server previewing your animation in the browser.
Secret Mission: Add a fourth "Success" celebration state with a bouncy animation that triggers after a click.

Are there any prerequisites?

You need a basic understanding of HTML and JavaScript. You also need a free Rive account, which you can create at rive.app.

Set Up Your Workspace

Before you can design and animate your button, you need two workspaces ready. The first is the Rive editor in your browser, where you'll create shapes, animate them, and wire up interaction logic.

The second is a local project folder on your machine. This is where you'll eventually build the HTML page that loads your Rive animation in a real browser. In this step, you'll open both workspaces and confirm everything is connected.

In this step, get ready to:

Open the Rive editor and create a new file with a 500x500 artboard.
Tour the editor's key modes and panels.
Create a local project folder and verify your development server works.

Open the Rive editor and create a new file

The Rive editor runs entirely in your browser. You don't need to install anything for the design side of this project.

Open your browser and go to rive.app.
Sign in with your Rive account.
Click New File to create a blank Rive file.

Your new file opens with a single artboard. An artboard is the canvas where all your shapes and animations live.

Select the artboard by clicking its name in the Hierarchy panel on the left.
In the Inspector panel on the right, confirm the width is 500 and the height is 500. These are the default dimensions for a new artboard.

What is an artboard?

Think of an artboard as a single frame that holds your entire design. In this project, your 500x500 artboard will contain your animated button.

A Rive file can have multiple artboards, but you only need one for this project.

Don't see the Inspector panel?

Make sure you have the artboard selected (click its name in the Hierarchy panel). The Inspector only shows properties when an element is selected.

If the panel is collapsed, look for a toggle icon on the right edge of the editor to expand it.

help me find the Inspector panel in the Rive editor

Tour the editor's key modes and panels

The Rive editor has two main modes and a separate graph view. Understanding where each lives will save you time as you build your button.

Look at the top of the editor. You should see tabs or toggles for Design and Animate modes.
Click Design. This is where you create and edit shapes, text, and other visual elements.
Click Animate. This switches to Animate Mode, where you create timeline animations with keyframes.

In Animate Mode, notice the Timeline panel at the bottom of the editor. This is where you'll set keyframes to control how properties change over time.

Now locate the State Machine graph. In the bottom-left area where animations are listed, you should see a default State Machine entry. Click it to open the graph view.

What is a State Machine?

A State Machine is a graph that controls which animation plays and when. Instead of playing animations manually, you define states (like Idle, Hover, Pressed) and transitions between them.

The State Machine responds to user input (like pointer events) to switch between states automatically. Every artboard has at least one State Machine by default.

Here's a quick summary of the panels you'll use throughout this project:

Hierarchy panel (left side): shows all objects on your artboard in a tree structure.
Inspector panel (right side): shows properties of the selected object (size, color, position).
Timeline panel (bottom, in Animate Mode): where you place keyframes to animate properties over time.

Switch back to Design mode before continuing. You'll start building your button shape in the next step.

Create your local project folder

Your Rive animation will eventually need a web page to run in. WASM files (which Rive uses under the hood) cannot load from the file:// protocol, so you need a local HTTP server.

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Type Terminal (macOS) or Command Prompt (Windows) and press Enter to open it.

Move to your Desktop by running this command:

cd ~/Desktop

Create your project folder and move into it by running these commands:

mkdir rive-button-project
cd rive-button-project

Create an empty index.html file by running:

touch index.html

Confirm the file exists by running:

ls

You should see index.html listed in the output.

Now verify that your local development server works. The npx serve command starts a zero-config static file server using Node.js.

Start the local server by running:

npx serve .

What does this command do?

npx serve . starts a local HTTP server that serves files from the current folder. It runs on port 3000 by default.

If this is your first time running it, npx may ask permission to install the serve package. Type y and press Enter to allow it.

Open your browser and go to http://localhost:3000.

You should see a directory listing page showing your index.html file. This confirms the server is running and serving files from your project folder.

Go back to your terminal and press Ctrl+C to stop the server. You'll start it again later when you need it.

Server not starting?

Make sure Node.js is installed by running node --version in your terminal. You should see a version number like v20.x.x or higher.

If port 3000 is already in use, the server will suggest an alternative port in its output. Use that URL instead.

help me troubleshoot npx serve not working

Why do I need a local server?

The Rive web runtime uses WebAssembly (WASM) to render animations. Browsers block WASM files from loading via the file:// protocol for security reasons. A local HTTP server solves this by serving your files over http:// instead.

Your workspace is ready. You have the Rive editor open for designing and animating, plus a local project folder for building your web page. Next up, you'll design the button itself inside the Rive editor.

Design the Button in Rive

Your workspace is set up and you know your way around the Rive editor. Now it's time to build the actual button that you'll animate later.

Every animation starts with a design. In this step, you'll create the visual elements of your button in Design Mode and organize them so they're easy to animate as a single unit.

In this step, get ready to:

Create a rounded rectangle shape for the button background.
Add a text label inside the button.
Group the elements and name them in the Hierarchy panel.

Create the button shape

The button's background is a rounded rectangle. You'll draw it on the artboard and then style it with specific dimensions and a fill color.

Make sure you're in Design Mode (the pencil icon in the top-left toolbar).
Select the Rectangle tool from the shape tools in the left toolbar.
Click and drag anywhere on the artboard to draw a rectangle.
With the rectangle selected, go to the Inspector panel on the right.
Set the Width to 200 and the Height to 60.
Set the Corner Radius to 12 to give the rectangle rounded corners.
Under the Fill section in the Inspector, click the color swatch and enter #4F46E5 for a vibrant blue.
Center the rectangle on the artboard by selecting it and clicking the Align Horizontal Center and Align Vertical Center buttons in the Inspector.

You should see a blue rounded rectangle sitting in the center of your artboard.

Rectangle not appearing?

Make sure you're in Design Mode, not Animate Mode. The pencil icon in the top-left should be active.

If the rectangle appears but has no color, check that a Fill is added in the Inspector (not just a Stroke).

help me find the rectangle tool in the Rive editor

Add the button text

A button needs a label so users know what it does. You'll add a text element on top of the rectangle and center it.

Select the Text tool from the left toolbar (the T icon).
Click on top of the rectangle to place a text element.
Type Click Me as the text content.
In the Inspector panel, set the font size to 20.
Change the text Fill color to white (#FFFFFF).
With the text selected, use the Align Horizontal Center and Align Vertical Center buttons to center it within the rectangle.

Your artboard should now show a blue rounded rectangle with white "Click Me" text centered inside it.

Align relative to the rectangle

If the alignment centers the text to the artboard instead of the rectangle, select both elements first (hold Shift and click each one), then use the alignment tools. The text will align relative to the rectangle's bounds.

Text not visible?

If the text fill is still black (the default), it will blend into the artboard background. Make sure you changed the fill to #FFFFFF (white).

Also check the Hierarchy panel to make sure the text is layered above the rectangle, not behind it.

help me fix my text element in Rive

Group and name the button elements

When you animate the button later, you want the rectangle and text to move together as one unit. Grouping them makes this possible.

Select both the rectangle and the text element. Hold Shift and click each one in the Hierarchy panel on the left.
Press Cmd+G (macOS) or Ctrl+G (Windows) to group them.
In the Hierarchy panel, double-click the new group's name and rename it to Button.

Your Hierarchy panel should now show a group called "Button" with the rectangle and text nested inside it.

Why name the group?

Naming groups makes your file easier to work with as it grows. When you build the State Machine later, you'll attach Listeners directly to this "Button" group. A clear name means you can find it instantly instead of guessing which "Group 1" is which.

Your button design is complete. Next up, you'll bring it to life by creating timeline animations for idle, hover, and pressed states.

Create Timeline Animations

Your button looks polished, but it sits completely still on the artboard. Animations are what transform a static shape into something that feels alive and responsive.

In this step, you will create three timeline animations using keyframes. Each animation defines a different visual state for your button: a gentle idle pulse, a scale-up on hover, and a press-down on click.

In this step, get ready to:

Create a looping "Idle" animation with a subtle breathing pulse.
Create a one-shot "Hover" animation that snaps the button to a larger scale.
Create a one-shot "Pressed" animation that squishes the button down and back up.

Create the Idle animation

The Idle animation is what plays when nobody is interacting with the button. A subtle scale pulse makes the button feel alive without being distracting.

Switch from Design Mode to Animate Mode by clicking the Animate tab at the top of the editor.
In the Animations List panel, click the + icon to create a new timeline animation.
Double-click the animation name and rename it to Idle.
Set the timeline duration to 60 frames (1 second at 60fps).
Select the Button group in the Hierarchy panel.
At frame 0, click the diamond icon next to Scale in the Inspector to set a keyframe at 1.0.
Move the playhead to frame 30.
Change the Scale value to 1.03 and set another keyframe.
Move the playhead to frame 60.
Change the Scale value back to 1.0 and set a final keyframe.
In the Inspector, set the animation's playback mode to Loop.

What are keyframes?

A keyframe marks a specific property value at a specific point in time. Rive automatically calculates all the in-between frames for you.

By setting scale to 1.0, then 1.03, then 1.0 again, you create a smooth ramp up and back down. The result is a gentle breathing effect.

Press the play button in the timeline panel to preview your Idle animation. You should see the button gently pulsing in and out.

Button not moving?

Make sure you selected the Button group (not just the rectangle) before setting keyframes. Keyframes only apply to the currently selected object.

Check that you clicked the diamond icon to actually set the keyframe, not just changed the value. A keyframe appears as a diamond on the timeline.

help me debug why my Idle animation isn't playing in Rive

Create the Hover animation

The Hover animation plays when a user moves their pointer over the button. It snaps the button to a slightly larger scale and shifts the color to a lighter shade.

In the Animations List panel, click the + icon to create a new timeline animation.
Rename it to Hover.
Set the timeline duration to about 10 frames.
Select the Button group in the Hierarchy panel.
At frame 0, set a Scale keyframe at 1.0.
Move the playhead to frame 10.
Change the Scale value to 1.08 and set a keyframe.
Now select the rectangle shape inside the Button group in the Hierarchy panel.
At frame 0, set a keyframe on the fill color (it should already be #4F46E5).
Move the playhead to frame 10.
Change the fill color to #6366F1 and set a keyframe.
In the Inspector, set the animation's playback mode to One-Shot (also called Ping-Pong off, Loop off).

Why one-shot instead of looping?

A one-shot animation plays once and stops at the last frame. This is exactly what you want for hover. The button scales up and stays scaled up while the pointer remains over it.

If it looped, the button would keep snapping back and forth. Only the Idle animation should loop.

Press play to preview. You should see the button quickly scale up to 1.08 and shift to a lighter purple, then hold at that larger size.

Color not changing?

Make sure you selected the rectangle shape specifically (not the Button group) when keying the fill color. The group itself does not have a fill property.

Also check that you set keyframes at both frame 0 and frame 10 for the fill. Without a starting keyframe, Rive does not know what to animate from.

help me fix my Hover animation color keyframes in Rive

Create the Pressed animation

The Pressed animation fires when the user clicks the button. It squishes the button down to simulate physical pressure, then bounces back to normal size.

In the Animations List panel, click the + icon to create a new timeline animation.
Rename it to Pressed.
Set the timeline duration to about 12 frames.
Select the Button group in the Hierarchy panel.
At frame 0, set a Scale keyframe at 1.08 (matching where the Hover animation left off).
Move the playhead to frame 6.
Change the Scale value to 0.95 and set a keyframe.
Move the playhead to frame 12.
Change the Scale value to 1.0 and set a keyframe.
Now select the rectangle shape inside the Button group.
At frame 0, set a keyframe on the fill color.
Move the playhead to frame 6.
Change the fill color to #3730A3 (a darker indigo) and set a keyframe.
In the Inspector, set the animation's playback mode to One-Shot.

Why does Pressed start at scale 1.08?

In the final interactive flow, the Pressed animation plays immediately after Hover. Since Hover ends at 1.08, Pressed starts there and squishes down. This creates a seamless visual transition between states.

Press play to preview. You should see the button shrink down to 0.95, darken to a deep indigo, then spring back to its original size.

Animation looks jumpy or instant?

Check that your keyframes are spread across the correct frames (0, 6, and 12). If they are all on the same frame, the animation has no time to interpolate between values.

Also verify the timeline duration is set to at least 12 frames. A shorter timeline clips the animation.

help me troubleshoot my Pressed animation timing in Rive

You now have three distinct animations that define how the button looks at rest, on hover, and on click. Next up, you will wire these animations together with a State Machine so they play at the right moments.

Build the State Machine

You have three polished animations ready to go. But right now, they just sit in a list with no logic connecting them.

A State Machine is the brain that decides which animation plays and when. It watches for pointer events and fires the right transition automatically. In this step, you will wire your three animations into a State Machine that responds to hover and click.

In this step, get ready to:

Add your three animations as States on the State Machine graph.
Create Transitions that define the paths between states.
Add Listeners that trigger transitions based on pointer events.

Add animation states to the graph

Every artboard in Rive already has a default State Machine. You need to open it and populate it with your three animations as individual states.

In the Animations List panel (bottom-left area), locate the default State Machine entry. It may be called State Machine 1.
Double-click the State Machine to open its graph view.
You should see a blank graph with an Entry node and an Exit node.

Now you need to add your animations as states on this graph.

From the Animations List panel, drag the Idle animation onto the State Machine graph.
Drag the Hover animation onto the graph.
Drag the Pressed animation onto the graph.
Click on the Entry node, then drag a connection line from it to the Idle state.

You should now see three Animation State boxes on the graph with an arrow from Entry pointing to Idle. This tells the State Machine to start playing the Idle animation when the scene loads.

What is an Animation State?

When you drag a timeline animation onto the State Machine graph, it becomes an Animation State. Think of it as a box that plays one specific animation.

The Entry node is special. It fires once when the State Machine starts, and whatever you connect it to becomes the first animation the viewer sees.

Don't see your animations in the list?

Make sure you are looking at the Animations List panel, not the Hierarchy panel. Your three timeline animations (Idle, Hover, Pressed) should appear alongside the State Machine entry.

Help me find my animations in the Rive editor

Create transitions between states

States alone don't do anything. Transitions are the arrows between states that define the allowed paths. Without them, the animation would get stuck on Idle forever.

Hover over the Idle state and look for a small connection handle (usually a circle or arrow icon on the edge of the state box).
Drag from the Idle state to the Hover state to create a transition.
Drag from the Hover state to the Pressed state.
Drag from the Pressed state to the Idle state.
Drag from the Hover state back to the Idle state.

Your graph should now have four transition arrows: Idle to Hover, Hover to Pressed, Pressed to Idle, and Hover to Idle.

Why do you need Hover back to Idle?

The Hover-to-Idle transition handles the case where the user moves their cursor away without clicking. Without it, the button would stay in the Hover state forever once the pointer enters.

Add listeners and test the State Machine

Transitions exist, but nothing triggers them yet. Listeners watch for pointer events on a specific element and fire the matching transition when that event happens.

In the State Machine graph, look for a Listener section or a + Listener button in the panel.
Click + Listener to add a new Listener.
Set the Listener's target to the Button group in the Inspector panel.

Now configure the three pointer events that will drive your button's behavior.

Add a Pointer Enter event to the Listener. Set its action to trigger the transition from Idle to Hover.
Add a Pointer Exit event. Set its action to trigger the transition from Hover to Idle.
Add a Pointer Down event. Set its action to trigger the transition from Hover to Pressed.

One last piece of logic: the Pressed state should automatically return to Idle when its animation finishes playing.

Click on the transition arrow from Pressed to Idle to select it.
In the Inspector panel, look for a condition or exit-time setting. Set it to fire when the Pressed animation reaches the end (100% or last frame).
This means the transition triggers automatically. No Listener is needed for this one.

Why does Pressed auto-transition?

The Pressed animation is a one-shot that only lasts 12 frames. You want it to play fully and then snap back to Idle without the user doing anything. Setting the transition to fire on animation end handles this automatically.

Time to test your work.

Click the Play button at the top of the State Machine graph to enter preview mode.
Move your cursor over the button on the artboard. You should see it scale up and change to the lighter purple (#6366F1).
Move your cursor away. The button should return to its idle pulse.
Hover over the button again, then click it. You should see the press-down effect (scale to 0.95, darker fill) followed by an automatic return to the idle state.

Button not responding to hover or click?

Make sure your Listener targets the Button group, not the individual rectangle or text element. The group is what the user interacts with.

Double-check that each pointer event is wired to the correct transition. Pointer Enter should trigger Idle-to-Hover, not Idle-to-Pressed.

If the button gets stuck on the Pressed state, verify that the Pressed-to-Idle transition has the animation-end condition set.

Help me debug my Rive State Machine transitions

Your button now has a fully working State Machine driving all three visual states. Next up, you will bring a Rive animation to life on a real web page using the official runtime.

Embed a Rive Animation on a Web Page

You've built a complete interactive button in the Rive editor with a State Machine driving transitions between hover, press, and idle states. Now it's time to see a Rive animation running in a real web page.

Rive's open-source web runtime lets you load .riv files directly into an HTML canvas element. In this step, you'll set up a simple HTML page that loads and plays an interactive Rive animation in the browser.

In this step, get ready to:

Set up an HTML page with a canvas element and the Rive runtime script.
Create a Rive instance that loads and plays an animated scene.
Start a local server and verify the animation responds to pointer interaction.

Set up the HTML structure and Rive runtime

The Rive web runtime renders animations on an HTML canvas element. You need two things: a <canvas> to draw on, and the runtime library loaded via a script tag.

Open index.html in VS Code.
Paste the following HTML into the file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rive Animation Demo</title>
    <!-- Styles to center the canvas on a dark background -->
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        background-color: #1a1a2e;
      }
      canvas {
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <!-- The drawing surface for Rive -->
    <canvas id="canvas" width="500" height="500"></canvas>

    <!-- Load the Rive WebGL2 runtime -->
    <script src="https://unpkg.com/@rive-app/webgl2@2.37.5"></script>
  </body>
</html>

What does this code do?

The <style> block uses Flexbox to center the canvas vertically and horizontally on a dark background (#1a1a2e).
The <canvas> element gives Rive a 500x500 pixel drawing surface to render onto.
The <script src="..."> tag loads the @rive-app/webgl2 runtime from a CDN so we can create Rive instances in JavaScript.

Save index.html.

Why WebGL2 over Canvas2D?

Rive offers two web rendering packages. The WebGL2 package renders with higher fidelity and matches what you see in the Rive editor more closely. The Canvas2D alternative is better when you need many concurrent animations, but for a single interactive element, WebGL2 is the right choice.

Create the Rive animation instance

The runtime exposes a Rive class that takes a source file, a canvas reference, and configuration for which State Machine to activate.

Why are we using a sample file?

Exporting your own .riv file for runtime use requires a paid Rive plan (starting at $9/mo on the Cadet tier). The free tier lets you design, animate, and build State Machines in the editor, but cannot export the file.

We'll load a public sample file from Rive's CDN instead. The runtime concepts are identical regardless of which file you load.

In index.html, find the closing </body> tag.
Add a new <script> block between the runtime script tag and </body> by pasting this code:

    <script>
      // Create a Rive instance that loads and plays the animation
      const r = new rive.Rive({
        src: "https://cdn.rive.app/animations/vehicles.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true,
        stateMachines: "bumpy",
        onLoad: () => {
          // Match internal resolution to canvas size for crisp rendering
          r.resizeDrawingSurfaceToCanvas();
        },
      });
    </script>

What does this code do?

src points to the .riv file to load. This sample file contains an animated vehicles scene.
canvas links to the HTML canvas element by its ID.
autoplay: true starts playback as soon as the file loads.
stateMachines: "bumpy" activates the State Machine named "bumpy" in this particular file.
onLoad fires once the file is ready. resizeDrawingSurfaceToCanvas() ensures the internal drawing resolution matches the canvas dimensions for crisp output.

Save index.html.

Start the local server and add resize handling

Rive uses WASM internally, which browsers refuse to load from the file:// protocol. You need a local HTTP server to serve your page.

In your terminal, make sure you're inside the rive-button-project folder.
Start the local server by running this command:

npx serve .

Open http://localhost:3000 in your browser.

You should see the animated vehicles scene playing on a dark background. Try hovering and clicking on the scene to see the State Machine respond to your pointer.

The animation looks crisp now, but resizing the browser window can make it blurry. Let's fix that with a resize listener.

In index.html, find the closing }); of the Rive instance (after the onLoad callback).
Add this code below it, still inside the same <script> block:

      // Recalculate resolution when the window resizes
      window.addEventListener("resize", () => {
        r.resizeDrawingSurfaceToCanvas();
      });

What does this do?

When the browser window resizes, this recalculates the internal drawing resolution to match the new canvas size. Without it, the animation could appear blurry on high-DPI displays or after resizing.

Save index.html.
Resize your browser window while watching the animation. It should stay crisp without any pixelation.

Animation not loading?

Make sure your local server is running. Open your browser console with F12. If you see CORS or file:// errors, you opened the file directly instead of via the server.
Check that the script tag URL matches https://unpkg.com/@rive-app/webgl2@2.37.5 exactly. A typo in the version number will load nothing.
Verify your canvas has id="canvas" matching the getElementById("canvas") call in your script.

Help me debug why my Rive animation isn't appearing on the page.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file and that the animation is responding to your pointer interactions.

ⓧ I'd like to double check the full code

Here's the complete index.html file for comparison:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rive Animation Demo</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        background-color: #1a1a2e;
      }
      canvas {
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script src="https://unpkg.com/@rive-app/webgl2@2.37.5"></script>
    <script>
      const r = new rive.Rive({
        src: "https://cdn.rive.app/animations/vehicles.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true,
        stateMachines: "bumpy",
        onLoad: () => {
          r.resizeDrawingSurfaceToCanvas();
        },
      });

      window.addEventListener("resize", () => {
        r.resizeDrawingSurfaceToCanvas();
      });
    </script>
  </body>
</html>

Your Rive animation is running live in the browser and stays crisp at any window size. Next up, tackle the Secret Mission and add a celebratory "Success" state to your button.

Secret mission

Add a "Success" Celebration State

Your button has three states, but real buttons often give feedback after a successful click. Can you add a fourth state that celebrates the interaction with a bouncy green animation?

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely locally with a free Rive account, so there are no ongoing costs.

Resources you used:

Rive Editor file (browser-based, stored in your Rive account).
Local project folder rive-button-project with index.html.
Local server process via npx serve.
Free Rive account.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep experimenting with your Rive file and HTML page.

Your Rive file stays in your account and is accessible any time at rive.app.
Your local project folder remains on your Desktop ready for editing.
Stop the local server when you are done testing by pressing Ctrl+C in your terminal.

Pause - I'll come back to this later

Shut down running processes to free up your terminal. Your files stay intact for later.

Stop the local server by pressing Ctrl+C in the terminal window where it is running.
Your rive-button-project folder and index.html file remain on your Desktop.
Your Rive file remains saved in your Rive account. Sign back in at rive.app to continue editing.

Delete - I don't want to use this again

Remove all project resources and start fresh.

Stop the local server by pressing Ctrl+C in the terminal.
Delete the rive-button-project folder from your Desktop.
In the Rive Editor, open your file list and delete the project file you created.
If you no longer need your Rive account, you can delete it from your account settings at rive.app.

That's a Wrap!

Nice work! You've gone from a blank artboard to a fully interactive animated button with a State Machine driving the logic, then shipped it to the browser with the Rive web runtime.

You've learned how to:

Designed and animated a button in the Rive editor using keyframes to control scale and color across three timeline animations.
Built a State Machine with States, Transitions, and Listeners that respond to pointer events for hover and click interactions.
Integrated the @rive-app/webgl2 runtime into an HTML page to render and interact with a Rive animation in the browser.
Secret Mission: Added a fourth "Success" state with bouncy cubic interpolation for a celebratory effect.

Ready to quiz yourself?