Animation Engine
Rive
Real, interactive Rive animations — vector graphics that react to hover, click, scroll or view at 60fps in a tiny file. Upload a .riv from rive.app, pick a State Machine for interactivity, and choose how it plays. Rendered on a canvas (no WebGL required); reduced-motion & no-runtime safe (falls back to a poster / the first frame). Loads only on pages that use it.
Live demo
See it in action
State Machine
A live State Machine
Click the car — it fires its “bumpy” State Machine trigger and bounces. State Machines carry inputs (triggers, booleans, numbers) you wire to clicks, hovers or scroll — real interactivity, all designed in the Rive editor, no code.
Trigger
Play on hover
Set Plays → On hover and the timeline runs only while the pointer is over it, pausing when it leaves — great for cards and icons. This one plays the windshield_wipers animation.
Trigger
Play when it scrolls in
Plays → When it scrolls into view — the animation waits, then runs as it enters the viewport (and pauses off-screen to save the battery). Click-to-play and scroll-scrub (drive a State Machine number input by scroll) are options too.
Events → your page reacts
A Rive event, handled by your page
Click the button. It fires a Rive Open URL event; with Emit a JS event on, the element re-broadcasts it to the page as a fwRiveEvent and the readout updates live — wire it to analytics, a modal, anything. Flip on Follow “Open URL” events instead and the same click would open the link on its own.
fwRiveEvent… click the button ↑Data binding
One file — figures from your data
This dashboard is a single .riv. Its title, the three tickers and their numbers aren’t baked in — each is set from the element’s Data bindings (a View-Model property; nested ones use /, e.g. nova/change). Feed them from your CMS, a REST call or a spreadsheet and the same file re-renders — the up/down colour follows the sign on its own. That’s the point: one designed file, any data.
Live JS control API
Push new data from your page
The button below is plain HTML — it calls window.fwRive.get(el).setBinding(…) to write fresh figures into the dashboard, which animates to them. That’s the hook for a live feed, a WebSocket or a REST poll. The same API also does play/pause, fireTrigger(), setInput() and getBinding(), with a fwRiveReady event when an instance is drivable.
Live inputs (pointer / scroll)
A gauge that tracks your scroll — no code
Here NOVA’s figure is wired, in the builder, to Scroll (mapped −40 → 200). Scroll the page and its bar tracks your position, like a live gauge — no JavaScript. Point a number input at the pointer instead and you get a character that follows the cursor.
Asset swaps
Its images are your images
A Rive can reference images — an avatar, a product photo, a logo — instead of baking them in. This file references three, and each is swapped here (in the builder) with a different photo from a URL. Nothing below lives in the .riv; point them at a Media Library upload, a URL or your data.
Responsive layout
Fit → Responsive layout
The same layout-designed .riv, two ways. On the left, Contain scales the whole artboard to fit — it just shrinks. On the right, Responsive layout uses the file’s Rive Layout to reflow to the element’s width — the bar stretches, the content keeps its natural size, like real responsive UI. Resize your window to watch the right one adapt.
Fit: Contain
Scales to fit
Fit: Responsive layout
Reflows to fit
How to set it up
Add it in under a minute
- Add a Rive element (builder palette → Animation Engine).
- On the Animation tab, upload your
.riv(or paste a URL). For interactivity, enter the State Machine name exactly as it appears in the Rive editor. - Choose how it Plays — Autoplay, On view, On hover, On click, or Scroll-scrub (writes the scroll % into a State Machine number input).
- On Style set the Fit, height and background; on Advanced add a fallback poster for reduced-motion / no-runtime visitors.