QA checklist

Visual, behavioural, and performance checks for someone testing the integration (not necessarily the developer who built it).

Use this when

You are doing pre-launch QA on a page that includes a Lupian Rive animation.
A bug report came in and you need a structured way to reproduce.

What you need

The staging or production URL.
The preview.mp4 or demo.lupian.studio reference for what it should look like.
Browser DevTools.

Visual

[ ] Animation appears at the intended size and aspect ratio.
[ ] No letterbox bars or cropping where the design did not expect them.
[ ] Edges are sharp on Retina / 4K (no blur).
[ ] Colours match preview.mp4.
[ ] No flicker or "pop" on first load (consider a fade-in from the fallback image).
[ ] Fallback image is hidden once the animation is ready.

Playback

[ ] Animation autoplays as expected (or stays idle if handoff.md says so).
[ ] Loops and transitions look correct against preview.mp4.
[ ] No frame hitches or stalls.

Interactivity

For every input/event listed in handoff.md:

[ ] Hover, click, drag (where relevant) produce the expected state change.
[ ] Triggers fire exactly once per action.
[ ] Number-driven inputs (e.g. scroll-driven progress) behave smoothly across the full range.
[ ] Events listed in handoff.md are received by the surrounding page when they should be.
[ ] Edge cases: rapid clicks, holding hover, dragging out of the canvas — no stuck states.

Responsive

[ ] Resize the browser window — animation re-fits, stays sharp.
[ ] Mobile width (≤ 480px): no cropping/overlap with surrounding UI.
[ ] Tablet width (~ 768–1024px): no cropping/overlap.
[ ] Real mobile device touch input works (no scroll-jacking, no missed taps).

Browser matrix

[ ] Chrome (latest desktop).
[ ] Safari (latest desktop).
[ ] Firefox (latest desktop).
[ ] Edge (latest desktop).
[ ] Safari on iOS (real device).
[ ] Chrome on Android (real device).

Performance

[ ] FPS holds at ~60 on target devices while the animation plays.
[ ] CPU/GPU does not spike to 100% while idle.
[ ] Page Lighthouse / Web Vitals are within expected range.
[ ] On a page with several animations: late entries still render (no black canvases — see Multiple animations).

Memory

[ ] Navigate to the page and away, repeatedly. Memory returns to baseline (DevTools → Memory → take heap snapshots).
[ ] No console warning about WebGL context lost.

Console & network

[ ] No errors in the console.
[ ] No 404 or CORS warnings on the .riv request.
[ ] On second page load, the .riv is served from cache (size says "(disk cache)" / "(memory cache)").

Accessibility

[ ] If the animation is decorative, the canvas has aria-hidden="true" or no announced role.
[ ] If the animation conveys meaningful content, surrounding HTML provides the same info to assistive tech (text near the canvas, alt text on the fallback).
[ ] Animation can be paused or does not violate the user's prefers-reduced-motion setting (where required by the design).

If something fails

Symptom-first: Troubleshooting.
Sending the bug to Lupian: Ask Lupian for help.