Toy
Interactive graphics, live in the Rive runtime. Every canvas below is one .riv file; the page only feeds inputs and listens.
@rive-app/canvas 2.39 / 8 files / 647 KB of graphics / wasm self-hosted
01 - original - Rive MCP
An endless walk through Lapland
Painted layers, a four-frame character cycle and a looping foreground track live together in one state-machine-driven file.
02
Bump the truck
Pointer input feeds a state machine; the reaction lives in the asset, not in page code.
03 · data binding
Game HUD on live data
Then press the button inside the canvas. The press comes back to the page as a view-model trigger.
View models bind page state to the graphic both ways: numbers, colors and strings go in, presses come back.
04
Liquid download button
One number input, 0 to 100. The goo, the morph and the completion state are all inside the file.
05
Star rating as one graphic
The whole widget is a single animation scrubbed by a number. No sprite rows, no five DOM nodes.
06
Runtime skin swap
One running character carries every costume; a trigger switches them without reloading anything.
07
The graphic talks back
The file emits a URL event when pressed. The page intercepts it and decides what it means.
08
An icon set from one file
Animated icons ship as artboards of a single 41 KB file; hover flips a boolean each.
rive → js
0 linesState-machine transitions, view-model triggers and file events, streamed from every canvas on this page.
Notes
Rive is an editor and runtime for interactive vector graphics: animations, state machines and data bindings are authored once, then driven at runtime on web, mobile and games. Everything above runs in @rive-app/canvas with the wasm and all assets served from this origin.
The Lapland scene is original Nante Studio artwork authored as a layered animation through Rive MCP. The other graphics are Rive's MIT-licensed sample files from the rive-app/rive-flutter examples. Their artboard, state-machine and input names were read out of the files at runtime, which is also how this page wires them. License notice.
Rive's editor now has an AI side, including an MCP server that lets agents author view models and state machines like the ones on this page. That half is early access and desktop only; the runtime half shown here is the stable one.