Developer handoff checklist

A short pre-launch checklist. Run through it before pushing the integration live.

Use this when

• You finished integrating a Lupian .riv and are about to ship.
• You want to sanity-check that nothing is missing.

What you need

• The .riv file in production.
• The page where it is embedded, on staging or production.
• DevTools.

File & hosting

• [ ] The .riv file is hosted somewhere stable (your CDN, app bundle, or static origin).
• [ ] The URL returns HTTP 200.
• [ ] If the origin differs from the page, Access-Control-Allow-Origin is set correctly.
• [ ] Cache-Control is set — long-cache + filename versioning, or a ?v=... query.
• [ ] The fallback image (PNG/SVG) is hosted next to the .riv.

Code

• [ ] Using @rive-app/webgl2 (or its React / -single variant) unless handoff.md says otherwise.
• [ ] stateMachines value matches handoff.md exactly (case-sensitive).
• [ ] artboard is set if the file has multiple artboards.
• [ ] resizeDrawingSurfaceToCanvas() is called inside onLoad.
• [ ] A window.addEventListener("resize", ...) (or useRive/wrapper equivalent) calls it again.
• [ ] No <canvas width="..." height="..."> attributes anywhere.
• [ ] cleanup() is called on unmount / route change / beforeunload (handled automatically by useRive and the prebuilt Framer component).
• [ ] onLoadError logs to console (or surfaces a fallback).

Layout

• [ ] The canvas wrapper has an explicit size (e.g. aspect-ratio + width: 100%).
• [ ] fit and alignment match handoff.md (default: Fit.Contain, Alignment.Center).
• [ ] The animation reads sharp on Retina / 4K — no blur.
• [ ] Mobile: touch-action: none on the canvas.

Interactions

• [ ] Every input listed in handoff.md is wired (if relevant to your integration).
• [ ] Every event listed in handoff.md is handled (if you need it).
• [ ] onRiveEventReceived (or the React equivalent) is registered when events are used.

Performance & memory

• [ ] If more than one Rive animation is on a page → useOffscreenRenderer: true on every instance.
• [ ] Off-screen animations are lazy-loaded (IntersectionObserver) if the page is long.
• [ ] No console warnings on SPA navigation; memory does not climb after several route changes.

Browser & device matrix

• [ ] Tested in Chrome (latest), Safari (latest + iOS), Firefox (latest), Edge.
• [ ] Tested on at least one real mobile device.
• [ ] Tested on a Retina/4K display.
• [ ] If CSP is enabled on the site, 'wasm-unsafe-eval' is in script-src.

SSR (Next.js / Nuxt / Astro / Remix)

• [ ] The Rive component is client-only ("use client", dynamic(..., { ssr: false }), or framework equivalent).
• [ ] No SSR errors in the build log.

Versioning

• [ ] When Lupian sends an updated .riv, the filename or ?v= query changes.
• [ ] The handoff.md matches the version of the .riv currently in production.

When you are done

• Animation matches preview.mp4 (or the demo at demo.lupian.studio).
• Console is clean.
• Network tab shows .riv cached on second load.

If something fails

• Symptom-first: Troubleshooting.
• Then: Ask Lupian for help.

Related

• QA checklist
• Ask Lupian for help