Rive integration
Rive is an interactive animation tool: a .riv file holds artboards and state machines that react to input. Webflow has a native Rive element, Framer has Rive’s own plugin, and on Astro or Next.js we use Rive’s official web and React runtimes. We design the states with you and wire them to real interactions.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | 1 to 2 days per animation |
| What we do | We design the Rive file and its state machine, then wire inputs to real interactions on the site. |
| Category | Animation |
Setup by platform
How we set up Rive
Framer
- Native
Rive’s official Framer plugin lets us drop in a .riv file and map state machine inputs to Framer component variants, so hover and click states need no code.
Webflow
- Native
Webflow’s native Rive element takes a .riv file from the Assets panel, with artboard, state machine, fit and autoplay settings. Interactions with GSAP can drive Rive through data binding.
Astro
- API
We load the @rive-app/webgl2 runtime in a client script, or a React island with client:visible, and give the canvas a fixed size so nothing shifts on load.
Next.js
- API
@rive-app/react-webgl2 and its useRive hook load the file, pick the state machine and expose inputs to React, for example to react to a form step or a pricing toggle.
Use cases
What teams use it for
Interactive UI moments
Buttons, toggles and hover states that respond to the cursor instead of playing on a loop.
Product explainers
A hero that shows how the product works and reacts as the visitor scrolls or picks an option.
Data-driven animation
Charts, counters or characters that change with live values through Rive’s data binding.
Before you add it
What to watch out for
Performance
Pick the right runtime
Rive recommends @rive-app/webgl2 for full editor fidelity. @rive-app/canvas-lite is the smallest package when you don’t need text, layout, audio or scripting.
Performance
Load it near the viewport
The runtime is a WASM module. We lazy-load it, reuse one loaded file across instances, and self-host the WASM where it helps.
Consent and GDPR
CDN requests
The script-tag install loads from a public CDN. Bundling or self-hosting keeps every request on your own domain.
FAQ
Questions about Rive
Can Webflow or Framer play Rive without code?
Yes. Webflow has a native Rive element and Framer has Rive’s official plugin. Both support state machines, so interactive states work without custom code.
Which Rive web package should we use?
@rive-app/webgl2 for most sites, because it uses the same renderer as the Rive editor. canvas-lite when the bundle has to be as small as possible.
Do you design the Rive file too?
Yes. Our motion team designs and builds the animation, sets up the state machine, and hands over the .riv file with the source.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call