Your drawing, alive on your website

What you get

A small file with the behaviour built in

Rive files carry the drawing, the animation and the logic together. The page only loads it; the character already knows what to do.

• .riv fileThe character, its animations and its state machine. The bird is 130 KB, the wizard 195 KB with sound.
• Named inputsSwitches like hover or spell that your code can read and set, like the buttons above.
• Embed snippetCanvas plus a few lines of JavaScript, or the component for React, Flutter, iOS and Android.
• SoundShort effects tied to moves, played on click.
• Editable sourceOn request, the project in your Rive account so you can open it in the Rive editor.

// load the character into a canvas
const wizard = new rive.Rive({
  src: "wizard.riv",
  canvas: document.querySelector("#wizard"),
  stateMachine: "Wizard",
  autoplay: true,
  autoBind: true,
  onLoad: () => wizard.resizeDrawingSurfaceToCanvas(),
});

// cast a spell from your own code
const spell = wizard.viewModelInstance.boolean("spell");
spell.value = !spell.value;

// or listen to what the visitor does
wizard.viewModelInstance.boolean("hover")
  .on(e => console.log("hovering:", e.data));

The same code runs the demo above.