Rive is the engine, your mascot is the product
Rive combines artwork, animation and real-time behavior in an export that can run in the browser using the official web runtime. It lets a character respond to pointer coordinates and application events without requiring a separate video for every possible combination.
The runtime does not invent behavior. Idle, blinking, tracking and reactions must exist in the exported rig. The website loads that file and sends the inputs the rig expects. A reliable handoff makes this boundary explicit.
Agree the input contract
A state machine organizes transitions between behaviors. Your developer needs the exact artboard and state-machine names, plus the input type and range for each control. The names below describe this site’s intended integration; your delivered rig may use different names.
| Input | Type | Expected behavior |
|---|---|---|
| lookX | Number, 0–100 | Left to right gaze; 50 is neutral |
| lookY | Number, 0–100 | Top to bottom gaze; 50 is neutral |
| click | Trigger | Greeting with automatic return to idle |
| hover | Boolean | Pointer is within the interactive region |
| reset | Trigger | Return to the neutral state |
Check missing inputs explicitly. A file can load successfully and still use a different state-machine name. Treat that mismatch as an integration error and retain the fallback rather than presenting a broken canvas.
Load the file and reserve its space
Keep the canvas inside a container with a stable aspect ratio. The CSS size and its drawing surface are different: resize the surface after the file loads and when the container changes. A contained layout should preserve the character’s proportions rather than stretch it.
Use the official runtime, pin a tested version and deploy the matching WebAssembly asset. Load the runtime only when a real animation is enabled. For a below-the-fold character, an IntersectionObserver can delay initialization until it approaches the viewport.
const mascot = new rive.Rive({
src: "/assets/rive/mascot.riv",
canvas: document.querySelector("canvas"),
stateMachines: "Website Mascot",
autoplay: true,
onLoad() {
mascot.resizeDrawingSurfaceToCanvas();
}
});This minimal example assumes the official runtime has loaded and the export contains that state machine. Production code also needs error handling, motion preferences, resize observation and cleanup.
Treat performance and accessibility as integration work
Pause playback when the character is offscreen or the document is hidden. Avoid creating a canvas for every small decorative card. A static image can represent examples until someone deliberately opens a live preview. Measure runtime loading as part of the full page budget.
Respect prefers-reduced-motion and offer a pause control for persistent movement. Use visible HTML for important status text instead of relying on an expression alone. The canvas should not trap focus or intercept unrelated controls.
What the integration kit should answer
The kit should tell your developer which export to use, which inputs exist, how to size it and what a successful implementation looks like. JavaScript and framework examples are useful when they reflect the same tested contract. Integration ownership, source files and any additional platform assistance are confirmed in the proposal.
For runtime API details, consult the official Rive web documentation. For project planning, start with the Rive mascot guide and the platform pages below.
Questions, answered.
Can you provide a Rive file without editing our site?
Yes. Animation delivery and production website integration are separate responsibilities, confirmed in the scope.
Do we need a developer?
Someone must connect the runtime, file and any product events. Simple builder embeds may need little code, while advanced states require application integration.