rive runtime gallery

seven .riv files on one page, each showing a different runtime mechanism: two built from code (build.py by raw bytes, scene.rml with the official rive CLI) and five community files from the Rive Marketplace, pulled from Rive's runtime repos. every card lists the file's contents on load and wires its controls to the real names. runtime: @rive-app/canvas@2.43.1.

orb: built from code

hand-builttrigger

625 bytes from build.py, no editor. idle loop + trigger -> one-shot pop -> exit-time back to idle.

battery: built with the official rive CLI

rive clirmlview modelsno inputsin-file listener

written as RML and compiled by the official rive CLI 1.2.0. five view model properties: number, string, color, boolean, trigger. click the card art to fire boost from inside the file.

rewards: data binding

marketplaceview modelsnested pathsenumtrigger listener

no inputs at all. everything is driven through the bound View Model instance with nested paths.

skills: number + boolean inputs

marketplacenumber inputboolean input

legacy inputs: two booleans pick the character's skill tier. the file also ships two more machines driven by a Level number.

electrified: pointer listeners

marketplacelistenershover

hover the art: listeners inside the state machine handle the pointer, with no app code. the button forces the same input from code.

skins: trigger + number

marketplacetriggernumber input

a trigger cycles the character's skin and a number drives the motion.

vehicles: artboard switching

marketplacemulti-artboardtriggerboolean

one file, two artboards, a different state machine on each. switching artboards means a new instance (cleanup the old one).

marketplace -> product: the pipeline this page follows

find a file on rive.app/marketplace. check its license (community files are usually CC BY: credit the author) and whether it has a state machine and a View Model. a file without them is a canned animation you can only play.
remix it into your Rive workspace. rename artboards, state machines, inputs, and View Model properties to your product's words. those names are your api.
export the .riv into the app's static folder (public/) and load it with an explicit artboard + stateMachines.
inspect before wiring: dump r.contents and the View Models on load (every card below does this) and code against what's printed, not what you expect.
drive it: View Model paths (vmi.number("Coin/Item_Value").value = n) for data, input.fire() / input.value for legacy inputs, and trigger.on(fn) or onStateChange to listen back.
combine several files on one page, as here: one canvas + one Rive instance per file; call cleanup() when a card leaves the page.

sources: vehicles.riv, skills.riv from cdn.rive.app/animations; rewards.riv, electrified_button_simple.riv from rive-flutter/test/assets; skins_demo.riv from rive-flutter-legacy/test/assets. all are Rive marketplace or example files, redistributed with the runtimes.