Visual Verify

Visual Verify

Motion pieces: judge from ordered stills, not a recording

• Don't record video to judge a movie; capture 6–8 stills at fixed film-clock times (read the scene's data-film-time, not wall time) and tile them with ffmpeg concat listing files explicitly. A glob sorts t12 before t1_2 and the critique reads the timeline backwards.
• For beat-synced effects, multiply every effect by a hit envelope (pow(1-phase, 4)) so frames between beats are clean; sustained shear/split/feedback reads as mush, not rhythm. Gate the whole pass with an intensity curve that is 0 at the opener and 0 at the landing.

Never report a visual, layout, or theme change as done based on the diff or a passing test. Look at the running surface.

Steps

1. Run the actual surface (dev server, app, TUI/GUI, Storybook — whatever shows this UI). Don't start one the user already has running.
2. Capture what it looks like — screenshot it, or tell the user exactly how to see it.
3. Compare against the reference: the design (Figma/mock), the sibling surface it should match, or the before state. Name the specific things you checked (color values, spacing, border, active state, contrast). For Figma/screenshot matching, follow Screenshot overlays using the bundled utility or an existing harness with the same capture contract.
4. If it doesn't match, keep the debug logging and iterate. Only say "done" once it visibly matches.
5. Share the clean render and comparison evidence, with the viewport/state, measured deltas, approved deviations and unverified states. Keep visual parity, functional QA and the user's approval separate.

Dense 3D inventory labels

• Compare projected label rectangles against one another and the fixed UI dock at desktop and mobile sizes. A rendered canvas or correct structure count does not prove labels are readable.
• Gate labels on projected cell width, not viewport width alone, so zoom can reveal names without overlap. Keep search and tolerant picking available when labels are hidden.
• Exercise resize without reloading an already-exploded scene. Invalidate both camera fitting and mesh transforms when the packing changes; updating only destination coordinates leaves objects in the previous grid.
• Measure inspector layout bounds independently of entry animations when reserving 3D camera space; transformed bounding rectangles can briefly report the wrong available viewport.
• Verify switch position with computed translate as well as transform; Tailwind can use individual transform properties, so transform: none does not mean the thumb is unmoved.

Postprocessing previews

• Keep 3D postprocessing separate from DOM labels and controls so dither and edge detection do not damage text readability. Preserve canvas alpha so scanlines never fill the clean page background; compare a UI-element screenshot pixel-for-pixel with the effect on and off.
• Apply dependent scene/material changes atomically per file during HMR. Partially updated frame loops can throw every animation frame and flood Vite's forwarded console; inspect the latest log and HTTP health rather than treating a listening port as a working preview.
• Provide an effects bypass during visual iteration and compare actual rendered pixels with effects on/off at multiple pixel ratios. Preserve selection, camera, and isolation while switching.
• Validate the ordered-dither matrix covers its intended threshold range exactly; plausible-looking arithmetic can silently duplicate thresholds and alter the tonal distribution.
• Gate dither strength out of near-black backgrounds in a dark scene; otherwise a subtle surface effect becomes a full-screen checkerboard.
• Verify cinematic pause with both a frozen timeline and identical canvas pixels. Animate decorative rings, breathing, and camera motion from the same pausable clock.
• Prove WebGL artwork motion with timed framebuffer reads and a stable visible-artwork screenshot crop, not canvas presence or draw counts alone. When a still image and texture loader share a CDN URL, reproduce image-then-fetch in a fresh browser context: a no-CORS image response can poison the cache for the subsequent CORS texture fetch. Match the still's crossOrigin mode to the texture request, and verify normal and reduced-motion pixels without increasing effect strength.