Figma
Figma’s homepage uses interactive Rive animations to show how its products work.
Shopify Editions
Shopify built its Winter ’24 Edition with Rive and won two Webby Awards for it.
Intercom
Intercom uses Rive for the product animations across its website, from hero sections to feature demos.
Rive for websites
Rive builds interactive hero sections, animated illustrations, and product demos that respond to your visitors. Your agent builds them with the Rive CLI, designers refine them in the Rive Editor, and the same file runs in React, plain JavaScript, Framer, Webflow, and Wix Studio.
Reacts to your visitors
State machines respond to hover and clicks, and your code can drive the file from scroll or any other value.
Sharp on every screen
Vector graphics stay crisp at any size, from a phone to a 5K display.
Works with your stack
React, plain JavaScript, and any framework that runs it, plus plugins for Framer, Webflow, and Wix Studio.
How to get started
Your agent builds it. You test it in the CLI preview window and keep directing it until it’s right.
01 Paste the prompt
Paste it into Claude Code, Codex, Cursor, or any coding agent. The agent installs the Rive CLI for you.
02 Describe the graphic
Ask for a hero section, an animated illustration, or a product demo. Your agent writes the Rive file and shows it in the CLI preview window.
03 Add it to your site
Your agent adds the Rive web runtime to your React or JavaScript project. On Framer, Webflow, or Wix Studio, drop the file in with the Rive plugin.
04 Keep designing in the Editor
Push the file to your Rive account and open it in the Rive Editor. Refine layout, motion, and states with professional design and animation tools. Needs a free Rive account.
FAQ
Common questions about adding Rive to your site.
Which website tools does Rive work with?
React, plain JavaScript, and any framework that runs JavaScript, plus plugins for Framer, Webflow, and Wix Studio.
How does Rive compare to HTML and CSS animation?
Rive draws with its own renderer, so complex, interactive animation stays smooth across devices. See Rive vs HTML for the details.
What can I build with Rive on my website?
Interactive hero sections, animated illustrations and characters, product demos, scroll-driven stories, animated icons, and whole interactive sites.
Can I start from my Figma designs?
Yes. Point your coding agent at your Figma file and it rebuilds your designs in Rive as interactive graphics, with reusable components, data binding, and animated transitions. See Figma to Rive for the full workflow.
Can it react to scroll and hover?
Yes. State machines respond to hover and clicks, and your code can drive the file from the scroll position or any other value through data binding.
Do I need a Rive account?
You can build and preview without one. Sign in to publish or export a file, open it in the Rive Editor, or go past the free usage limits.
Join our newsletter
Get all the latest Rive news delivered to your inbox.