The four parts of the system
The artwork provides the character’s visual parts. The rig gives those parts controlled movement. Animations define expressions and gestures. A state machine connects them so the character can respond to inputs instead of only playing a fixed sequence.
The website is a separate layer. It loads the export and supplies information such as a normalized pointer position or a confirmed task outcome. The exported file does not automatically know which page element is the important CTA.
Use the right kind of input
A number can represent a continuous quantity such as horizontal gaze. A boolean represents an on/off condition such as pointer presence. A trigger requests a momentary action such as a greeting. These controls should match the rig’s design.
Document exact names and expected ranges. Do not assume a number is measured in pixels or that a trigger can interrupt any state. The input reference should explain neutral values, priorities and what happens when events arrive repeatedly.
Choose a runtime for the file’s features
Rive provides official web runtimes with different rendering tradeoffs. Confirm that the chosen runtime supports the features used by the export. Pin a tested release and keep its associated assets in sync.
The official Rive getting-started guide is the reference for loading and lifecycle APIs. This site’s integration adapter demonstrates the surrounding fallback, visibility and input-mapping architecture; it still requires the real rig before activation.
Make lifecycle behavior explicit
Create the instance only after the canvas exists. Resize the drawing surface when the container changes, and preserve the character’s proportions. Pause when offscreen or hidden, and release resources when the instance is removed.
A failed load should leave the static character visible. Reduced-motion visitors should receive an intentional alternative rather than an empty hole. Keep essential messages in HTML and provide a way to pause ongoing motion.
Review the handoff as a contract
Ask for the export, exact state-machine name, input types and ranges, browser preview and integration guidance. Clarify whether editable rig sources, custom code and production installation are included. A runtime export is not the same thing as the entire editable project.
Test the character at its actual website size, with repeated interactions, touch input and missing assets. The integration kit should remove ambiguity between the animation designer and the developer who connects it to the product.