@rive-app/canvas

Rive

High-level Rive API using CanvasRenderingContext2D. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details.

Canvas

npm install @rive-app/canvas

An easy-to-use high-level Rive API using a backing CanvasRenderingContext2D renderer. This lets Rive use the browser's native high-level vector graphics renderer. Some benefits of this package:

• Extremely small download size
• Great for displaying many animated canvases concurrently on the screen. This is ideal for when you want to render lists or grids of Rive animations on the screen, as there is no context limit by the browser (as opposed to WebGL)
• Support for simple vector graphics animations, raster, and mesh deformations
• Requests the Web Assembly (WASM) backing dependency for you

Getting Started

Similar packages

Other packages similar to @rive-app/canvas

lottie-web

Lottie-web is a library for rendering Adobe After Effects animations exported as JSON with Bodymovin. It provides similar functionality to @rive-app/canvas in terms of rendering and controlling animations, but it uses a different animation format and toolset.

three.js

Three.js is a JavaScript library that allows you to create and display animated 3D graphics in a web browser using WebGL. While it is more focused on 3D graphics and scenes, it can also be used to create complex animations and interactive experiences similar to those created with Rive.

pixi.js

Pixi.js is a 2D rendering engine that allows you to create interactive graphics and animations. It is highly performant and can be used to create similar interactive animations as @rive-app/canvas, but it requires more manual setup and coding.