Rive for websites

Interactive motion graphics for the web

Empower designers ⚔️ Slash dev times

Design and build more engaging websites while making it a breeze for designers and developers to work together. Rive makes it easy to add animated graphics, epic hero sections, and interactive product demos to your website.

Design and build more engaging websites while making it a breeze for designers and developers to work together. Rive makes it easy to add animated graphics, epic hero sections, and interactive product demos to your website.

Webdesign news

Segment

2Advanced Studios

2Advanced is back. Their iconic V3 Expansions website was entirely rebuilt with Rive.

2Advanced Studios

2Advanced is back. Their iconic V3 Expansions website was entirely rebuilt with Rive.

2Advanced Studios

2Advanced is back. Their iconic V3 Expansions website was entirely rebuilt with Rive.

Intercom

Transitioning from Lottie to Rive enhanced workflow, performance, and creativity.

Intercom

Transitioning from Lottie to Rive enhanced workflow, performance, and creativity.

Intercom

Transitioning from Lottie to Rive enhanced workflow, performance, and creativity.

Figma

Figma's website uses interactive Rive animations to show how their products work.

Figma

Figma's website uses interactive Rive animations to show how their products work.

Figma

Figma's website uses interactive Rive animations to show how their products work.

Shopify

Shopify used Rive to make their Winter '24 edition and won 2 Webby awards for it.

Shopify

Shopify used Rive to make their Winter '24 edition and won 2 Webby awards for it.

Shopify

Shopify used Rive to make their Winter '24 edition and won 2 Webby awards for it.

Metafy

Metafy uses Rive to bring magic back to the internet.

Metafy

Metafy uses Rive to bring magic back to the internet.

Metafy

Metafy uses Rive to bring magic back to the internet.

Struck x Chia

How Rive helped Struck bring ambitious ideas to life for the Chia.com redesign.

Struck x Chia

How Rive helped Struck bring ambitious ideas to life for the Chia.com redesign.

Struck x Chia

How Rive helped Struck bring ambitious ideas to life for the Chia.com redesign.

Sentry

Sentry's website is full of animated hero sections, characters, and animated graphics.

Sentry

Sentry's website is full of animated hero sections, characters, and animated graphics.

Sentry

Sentry's website is full of animated hero sections, characters, and animated graphics.

Bend Health

Bend Health uses interactive characters to make mental health topics more approachable.

Bend Health

Bend Health uses interactive characters to make mental health topics more approachable.

Bend Health

Bend Health uses interactive characters to make mental health topics more approachable.

Notion

Notion built their assistant entirely in Rive, doubling user engagement of their previous iteration.

Notion

Notion built their assistant entirely in Rive, doubling user engagement of their previous iteration.

Notion

Notion built their assistant entirely in Rive, doubling user engagement of their previous iteration.

Hero section tutorial

Make websites and apps more engaging with interactive illustrations.

Hero section tutorial

Make websites and apps more engaging with interactive illustrations.

Hero section tutorial

Make websites and apps more engaging with interactive illustrations.

Rive vs Lottie

Rive files are smaller, faster, and take less memory.

Rive vs Lottie

Rive files are smaller, faster, and take less memory.

Rive vs Lottie

Rive files are smaller, faster, and take less memory.

Run Rive on the web

Rive runs anywhere with our open-source runtimes.

Web (JS)

An open-source library to run Rive on the web and manipulate your graphics with code.

Web (JS)

An open-source library to run Rive on the web and manipulate your graphics with code.

Web (JS)

An open-source library to run Rive on the web and manipulate your graphics with code.

React

An open-source library to run Rive in React apps and manipulate your graphics with code.

React

An open-source library to run Rive in React apps and manipulate your graphics with code.

React

An open-source library to run Rive in React apps and manipulate your graphics with code.

Framer

A plugin to drag and drop your Rive assets and connect them to Framer’s interactive features.

Framer

A plugin to drag and drop your Rive assets and connect them to Framer’s interactive features.

Framer

A plugin to drag and drop your Rive assets and connect them to Framer’s interactive features.

Webflow

A plugin to drag and drop your Rive assets and connect them to Webflow’s interactive features.

Webflow

A plugin to drag and drop your Rive assets and connect them to Webflow’s interactive features.

Webflow

A plugin to drag and drop your Rive assets and connect them to Webflow’s interactive features.

Community web design files

Get inspiration from Rive Community. Open these files in the Rive Editor to see how they work, or remix them into your own creation.

Interactive hero

Design and animate interactive hero sections for your website.

Interactive hero

Design and animate interactive hero sections for your website.

Interactive hero

Design and animate interactive hero sections for your website.

Interactive Web Card

Make it easy to learn complex topics with educational graphics.

Interactive Web Card

Make it easy to learn complex topics with educational graphics.

Interactive Web Card

Make it easy to learn complex topics with educational graphics.

Product Preview

Demonstrate your products with animation and interactivity.

Product Preview

Demonstrate your products with animation and interactivity.

Product Preview

Demonstrate your products with animation and interactivity.

Interactive components

Design functional components that are ready to ship.

Interactive components

Design functional components that are ready to ship.

Interactive components

Design functional components that are ready to ship.

Animated emojis

Animated emojis help us convey our human emotions across our digital channels.

Animated emojis

Animated emojis help us convey our human emotions across our digital channels.

Animated emojis

Animated emojis help us convey our human emotions across our digital channels.

Animated buttons

Design animated buttons that are ready to ship.

Animated buttons

Design animated buttons that are ready to ship.

Animated buttons

Design animated buttons that are ready to ship.

Animated icons

Create animated icons that respond to interactions.

Animated icons

Create animated icons that respond to interactions.

Animated icons

Create animated icons that respond to interactions.

Celebratory moments

Reward users when they successfully complete a task.

Celebratory moments

Reward users when they successfully complete a task.

Celebratory moments

Reward users when they successfully complete a task.

Empty states

Add delight to empty states of your app or error pages.

Empty states

Add delight to empty states of your app or error pages.

Empty states

Add delight to empty states of your app or error pages.

Animated logos

Make your brand stand out with motion.

Animated logos

Make your brand stand out with motion.

Animated logos

Make your brand stand out with motion.

Animated mascots

Bring brands to life with interactive characters.

Animated mascots

Bring brands to life with interactive characters.

Animated mascots

Bring brands to life with interactive characters.

Characters

Add light-weight interactive characters to your websites.

Characters

Add light-weight interactive characters to your websites.

Characters

Add light-weight interactive characters to your websites.

Toggle buttons

Easily build unique animated design components.

Toggle buttons

Easily build unique animated design components.

Toggle buttons

Easily build unique animated design components.

Star rating

Build rating systems that stand out from basic defaults.

Star rating

Build rating systems that stand out from basic defaults.

Star rating

Build rating systems that stand out from basic defaults.

Loaders

Motion makes loading moments informative.

Loaders

Motion makes loading moments informative.

Loaders

Motion makes loading moments informative.

Animated avatars

Use animation to make avatars feel alive.

Animated avatars

Use animation to make avatars feel alive.

Animated avatars

Use animation to make avatars feel alive.

Data visualization

Improve storytelling with animated charts and graphs.

Data visualization

Improve storytelling with animated charts and graphs.

Data visualization

Improve storytelling with animated charts and graphs.

Animated stickers

Create animated sticker packs for popular apps like Telegram.

Animated stickers

Create animated sticker packs for popular apps like Telegram.

Animated stickers

Create animated sticker packs for popular apps like Telegram.

Micro-interactions

Add delight to products with micro-interactions.

Micro-interactions

Add delight to products with micro-interactions.

Micro-interactions

Add delight to products with micro-interactions.

Start building
production-ready graphics

Get Started

Start building
production-ready graphics

Get Started

Start building
production-ready graphics

Get Started

Join our newsletter

Get all the latest Rive news delivered to your inbox.