Rive Tutorial: Build Responsive, Interactive Web Animations (With AI Prompts & 10 Pro Tricks)

What is Rive?

Rive is a real-time animation platform made of two parts: a collaborative editor where designers build vector animations, and lightweight runtimes that play the exported .riv file in websites, apps, and games. Unlike video or GIF, the output is vector (sharp at any size) and interactive. Runtimes exist for web, iOS, Android, Flutter, React Native, Unity, and more. The runtimes and file format are open source, while the editor is a commercial product with a free plan for learning.

Rive vs Lottie vs SVG: which should you use?

How Rive state machines work

A state machine is a set of states and the transitions between them. A mascot might be idle, hovered, or success, and inputs decide when it switches. There are three input types:

• Boolean: a persistent on/off value, e.g. Hover
• Number: a continuous value, e.g. scroll progress
• Trigger: a one-off event, e.g. a click

The big win is separation of concerns: a designer can change animation logic without touching your site’s code.

Running Rive in WordPress, step by step

1. Allow the file type

WordPress blocks .riv uploads by default. Add this to functions.php or a snippets plugin:

add_filter('upload_mimes', function($m){
  $m['riv'] = 'application/octet-stream';
  return $m;
});

2. Add the canvas and runtime

<canvas id="hero" style="width:100%;aspect-ratio:1/1"></canvas>
<script src="https://unpkg.com/@rive-app/canvas"></script>
<script>
const canvas = document.getElementById("hero");
const r = new rive.Rive({
  src: "/wp-content/uploads/hero.riv",
  canvas,
  autoplay: true,
  stateMachines: "State Machine 1",
  layout: new rive.Layout({
    fit: rive.Fit.Contain,
    alignment: rive.Alignment.Center
  }),
  onLoad: () => r.resizeDrawingSurfaceToCanvas()
});
</script>

3. Wire up hover and click

const inputs = r.stateMachineInputs("State Machine 1");
const hover = inputs.find(i => i.name === "Hover");
const click = inputs.find(i => i.name === "Click");

canvas.addEventListener("mouseenter", () => hover.value = true);
canvas.addEventListener("mouseleave", () => hover.value = false);
canvas.addEventListener("click", () => click.fire());

On React, the @rive-app/react-canvas package provides useRive and useStateMachineInput. The input is null until the runtime finishes loading, so always guard it. Rive’s docs also strongly recommend naming the state machine explicitly.

Making Rive animations responsive

1. Size the canvas with CSS: use a percentage width plus aspect-ratio to avoid layout shift (CLS).
2. Choose Fit and Alignment: Contain shows the whole graphic, Cover fills the space, and the Layout fit lets the artboard resize with the canvas.
3. Resize the drawing surface: call resizeDrawingSurfaceToCanvas() when the viewport changes so the result stays crisp.

window.addEventListener("resize", () => r.resizeDrawingSurfaceToCanvas());

Animated SVG icons: light, fast, zero dependencies

You don’t always need Rive. Inline SVG with CSS or SMIL needs no library, is crawlable, and weighs a few hundred bytes. Live examples:

The “draw the checkmark” trick uses stroke-dasharray: hide the path with a dash equal to its length, then animate stroke-dashoffset to zero.

.check{stroke-dasharray:60;stroke-dashoffset:60;animation:draw 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

Can AI create Rive animations?

Yes, partly. Rive’s editor includes an AI Agent. You open the Agent panel from the left sidebar, describe what you want, and it can generate scripts, responsive layouts, data models, and animation. It replies with a summary of what it changed, any new scripts (saved in the Assets panel), and tips for customizing them. Rive’s own docs warn that it can produce incorrect or suboptimal code, so test and review the result. It is billed with AI credits that come with paid plans, so check Rive’s pricing page for current limits.

Outside the editor, general coding assistants (Claude, Cursor, Codex and others) are good at the integration side: loading .riv files, wiring inputs, lazy loading, and accessibility. They don’t replace designing the animation itself. Rive is a visual tool, so the best results come from AI plus human art direction.

How to write good Rive prompts

• Name the inputs (booleans, numbers, triggers) you want exposed.
• Describe behavior in order: “when X happens, do Y”.
• Give numbers: durations, colors, scale values, padding.
• Start with a tiny prototype, then iterate in small steps.
• Ask the AI to explain the script so you can verify it.

Sample prompts (starting points)

1. Rive Agent: an interactive button script

Create a script that draws a pill-shaped button. Inputs: width, height, fill color, and a boolean "hover". When hover is true, ease the scale to 1.06 over 0.2 seconds, and ease it back when false. Add a trigger "press" that plays a quick squash-and-stretch. Explain how each input works.

2. Rive Agent: a responsive layout

Build a responsive notification card: icon on the left, title and description stacked in the middle, close button on the right. The card should stretch to the artboard width with 16 px padding, and the description should wrap to a maximum of two lines.

3. Rive Agent: a data model for onboarding

Create a view model "Onboarding" with a number "step" (0 to 3), a boolean "isDone", and a trigger "next". Bind the progress dots to "step" so the active dot is highlighted, and play a celebration animation when isDone becomes true.

4. Rive Agent: a click effect (start simple, then refine)

Let's start with a very simple prototype in a Rive Node Script. When the user clicks the artboard, draw a straight line from the top edge to the click position. Inputs: speed, thickness, color. After it works, I'll ask you to add a jagged, glowing look.

5. Coding assistant: WordPress integration

Write vanilla JavaScript for a WordPress page that lazy-loads @rive-app/canvas when a canvas with id "hero" enters the viewport. Play the state machine "State Machine 1", map the boolean "Hover" to mouseenter/mouseleave, pause when off-screen, respect prefers-reduced-motion, and call resizeDrawingSurfaceToCanvas on window resize.

6. Any AI: an animated SVG icon

Create a 48x48 inline SVG checkmark that draws itself using stroke-dasharray and stroke-dashoffset in 1 second. Use the color #f78fa3, no JavaScript, and disable the animation under prefers-reduced-motion.

10 pro tricks for Rive and SVG animation

1. Always name the state machine instead of relying on defaults.
2. Pause off-screen animations with IntersectionObserver and resume on entry.
3. Lazy-load the runtime so Core Web Vitals don’t suffer.
4. Respect prefers-reduced-motion by pausing or simplifying.
5. Show a poster image (a light SVG or WebP) until Rive loads.
6. Reserve space with aspect-ratio to keep CLS near zero.
7. Drive scroll effects with a Number input fed by scroll percentage.
8. Keep important text in HTML, not inside the canvas, and add an aria-label.
9. Clean up with r.cleanup() when removing the element in single-page apps.
10. Use SVG for simple icons; save Rive for real interaction.

const io = new IntersectionObserver(([e]) => {
  e.isIntersecting ? r.play() : r.pause();
});
io.observe(canvas);

if (matchMedia("(prefers-reduced-motion: reduce)").matches) r.pause();

What’s new in Rive

Based on Rive’s docs and public release notes at the time of writing, these are the notable recent developments. Always confirm on rive.app/blog and the GitHub release pages.

• AI Agent in the editor: prompt-based help for scripts, layouts, data models, and animation, billed through AI credits.
• Scripting with Luau: code, design, and animation in one editor. It entered early access in late 2025, and runtime scripting support has since reached several runtimes, including Flutter.
• Richer data binding: view models now cover lists, images, fonts, artboards, and even data-bound keyframes, so your app data can drive the animation directly.
• Renderer and runtime upgrades: recent releases mention masking support, inner and outer strokes in the Rive Renderer, grid layout binding fixes, and several performance improvements.
• Wide platform support: web, iOS, Android, Flutter, React Native, Unity, and Unreal runtimes keep shipping updates.

Rive FAQ

Is Rive free?

The editor has a free plan for learning and testing state machines, and the runtimes are open source. Paid plans add features such as AI credits. Check rive.app for current pricing.

Can AI generate a Rive animation from one prompt?

Rive’s built-in AI Agent can generate scripts, layouts, data models, and animation from prompts, but results need review and iteration. For complex characters, expect to combine AI help with manual design.

Rive vs Lottie: what’s the difference?

Lottie typically plays a fixed timeline, while Rive uses state machines that react to user input and data.

Does Rive work in WordPress?

Yes. Allow the .riv file type, upload your file, and embed the canvas and script in a Custom HTML block.

Will Rive hurt my SEO or page speed?

Not if you lazy-load the runtime, pause off-screen animations, reserve space with CSS, and keep your main text in HTML.

Conclusion

Use Rive for animations that need to feel alive and respond to people, and use animated SVG for lightweight icons. Add AI to speed up scripting and integration, but keep a human eye on design and testing. Together they give you a fast, interactive, SEO-friendly site.