Rive Animations

Why Rive ?

For projects requiring 3D visuals or immersive experiences, Three.js is unmatched. Its flexibility and feature set make it ideal for creating complex, visually stunning applications. But If you’re creating a project that needs sleek, interactive 2D animations for a UI or a game with minimal effort, Rive is a clear winner. Its online editor, state machines, and cross-platform capabilities make it perfect for building polished, responsive designs.

A simple interactive demo showcasing animations powered by Rive.

Feature	Three.js	Rive
Type	3D Rendering and Interactive Graphics	2D Animation and Interactive Motion
Use Case	Ideal for creating 3D games, visualizations, and VR/AR applications	Best for 2D animations and UI components
Ease of Use	Requires deeper knowledge of WebGL and 3D math	User-friendly with an online animation editor
Customizability	Full control over shaders, lighting, and rendering pipelines	Animation logic controlled via state machines
Performance	Optimized for GPU rendering, but needs optimization for large-scale scenes	Lightweight animations with optimized performance for both mobile and desktop
Cross-Platform	Requires more configuration for cross-platform rendering	Rive files are cross-platform and compatible with web, mobile, and desktop
Learning Curve	Steeper due to 3D complexity	Easier due to focus on 2D animations and state machines

This format makes it easier to compare both libraries side by side, highlighting their key strengths and differences.

Canvas

With using @rive-app/canvas package install from npm or yarn. After create an account rive.app. For commercial usage Studio package is recommended. Also, rive-react package is usefull also Rive Developer team recommendation is React app.

A-Frame (WebGL)

With using aframe, aframe-particle-system-component, aframe-react package install from npm or yarn. There is no online IDE to create or edit. Also, [aframe-react]

Built with modern web technologies
Lightweight and flexible
Perfect for learning or showcasing Rive animations

Install

git clone https://github.com/yagiz-aydin/rive-demo
cd rive-demo
npm install

Usage

Running the Demo

Start the development server:

npm run dev

Open your browser and navigate to the displayed URL (typically http://localhost:3000).

Customizing Animations

The rive-demo project comes pre-configured with sample Rive animations. You can customize the animations or add your own:

Replace the .riv files in the public/animations directory with your own Rive files.
Update the animation references in the src folder.

For example, in src/components/AnimationPlayer.tsx:

import { Rive } from "@rive-app/web";
 
// Example configuration
const riveConfig = {
  src: "/animations/my-custom-animation.riv",
  autoplay: true,
  stateMachines: "State Machine 1",
};
 
// Load and render the animation
const rive = new Rive(riveConfig);

Building for Production

To build the project for production:

npm run build

The output will be in the dist directory, ready for deployment.