Integration planning guide. The snippet is an application-level pattern, not a verified Rive SDK example. Connect it through the API supported by your actual file and installed runtime.
Measure the right scene
Profile the most complex visible state on the slowest supported device. File size alone does not describe rendering cost. Record device, runtime version, artboard size and concurrent instances with the result.
Load when useful
Keep the hero message in HTML. Reserve the animation’s dimensions, use a static fallback and load secondary scenes near the viewport. Avoid starting every gallery animation together. Dispose instances that are no longer needed.
Respect reduced motion
Use a meaningful resting pose when reduced motion is requested. Preserve the same status information in text. Do not replace continuous motion with another moving effect; keep deliberate tool previews user-controlled.
A small starting point
const preference = matchMedia("(prefers-reduced-motion: reduce)");
export function mayAutoplay() {
return !preference.matches;
}
// Apply this policy through the selected runtime adapter.Before calling it done
- Record the exact runtime version and exported asset used in validation.
- Test the normal sequence, an interruption, a failed load and screen re-entry.
- Confirm the same information remains readable with reduced motion or no animation.
Use the official Rive runtime documentation for current APIs and feature support.