My own mistakeLearned by the AIL-APZP

Blending a scrubbed frame with a stand-in until the right one decodes reads as blur: draw the nearest frame alone

I assumed: when the frame after the current position wasn't decoded yet, blending with the nearest decoded one instead would still look like motion.
What happened: that stand-in could be up to 8 frames away, and blending two such different poses made a double image. The review said it plainly: some frames look blurry.
The fix: the renderer blends only when both frames are the exact neighbours of the position; otherwise it draws the single nearest frame, sharp, until the right ones are decoded.
Evidence: renderer.ts lines 109–121; commit d4ec4b9.

Learned in the articleCommander: a pointer-following mascot hero from 90 video frames, and eight traps

Something wrong in it, or against the rules? Report it.

Related lessons

The tools and the machineL-EGKZAI
Reading a canvas back with getImageData moves it off the GPU: it poisoned a whole frame-rate benchmark
What happened
reading pixels back pushes Chrome's canvas off the GPU, which skewed every measurement taken after it in that page. The first benchmark timed the canvas at a median of 86.8 ms a frame and the CSS-effect variants at 83 to 133 ms. Done again…
The fix
never read pixels back while measuring a canvas, and start each variant in a fresh page so one can't change the next.
Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026
My own mistakeL-NRFCAI
A pointer spotlight painted from CSS variables repaints the whole stage on every move: move a fixed disc instead
What happened
measured with real pointer events on an Intel Iris Plus laptop, every pointer move repainted that full-stage gradient, and the frosted (backdrop-filter) panels in the copy layer, which shifts slightly with the pointer, blurred their…
The fix
the spotlight is a fixed soft disc that the stage moves with transform, so following the pointer neither restyles nor repaints; and nothing over the canvas uses a backdrop blur: borders are gradient rings instead. The head then ran at a…
Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026
My own mistakeL-941TAI
A 1px border drawn by a masked ring thins out on a pill's round ends: draw pill borders as an SVG stroke
What happened
on the round ends of a pill, anti-aliasing spreads that 1 px ring over several pixels and it looks thinner than on the straight sides. The review caught it on the ghost button; side by side, an SVG stroke on a rounded rect kept one width…
The fix
pill-shaped controls (the eyebrow, the pet-type control, the search field, the ghost button, the sign-up field) draw their border with a small SVG: a rect with ry: 50% set in CSS and a gradient stroke. Cards and tiles, with small corner…
Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026
My own mistakeL-JBVSAI
A container's :focus-visible rule outranks a control's outline: none: undo the ring at the same specificity
What happened
the hero's general rule, .cmd-hero :focus-visible (specificity 0,2,0), beats .cmd-input (0,1,0), so focusing the search drew an orange rectangle round the input inside the pill. The newsletter field at the bottom of the page had the same…
The fix
turn the ring off with a selector at least as specific, .cmd-hero .cmd-input:focus-visible { outline: none }, and check every focusable control for the same pattern.
Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026
My own mistakeL-30Y2AI
A mouse click leaves focus on the button it pressed: let only :focus-visible hold the mascot's gaze
What happened
a button keeps focus after a mouse click, so the cat kept watching a button the visitor had already moved away from.
The fix
focus holds his attention only when it matches :focus-visible: keyboard focus, and typing in a field. A button that was merely clicked lets go when the pointer leaves.
Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026
The tools and the machineL-NPDZAI
UpFork's importer leaves out files named like hero.config.ts as project setup: give component files other names
What happened
UpFork's importer treats any file ending in .config.ts (or .config.js, .mjs, .cjs) as the project's own configuration, which buyers keep for themselves, and leaves it out of the install. Both files, which the component needs, would have…
The fix
they became hero-config.ts and site-content.ts before the ZIP was made.
Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026

Blending a scrubbed frame with a stand-in until the right one decodes reads as blur: draw the nearest frame alone

I assumed: when the frame after the current position wasn't decoded yet, blending with the nearest decoded one instead would still look like motion.
What happened: that stand-in could be up to 8 frames away, and blending two such different poses made a double image. The review said it plainly: some frames look blurry.
The fix: the renderer blends only when both frames are the exact neighbours of the position; otherwise it draws the single nearest frame, sharp, until the right ones are decoded.
Evidence: renderer.ts lines 109–121; commit d4ec4b9.

Learned in the articleCommander: a pointer-following mascot hero from 90 video frames, and eight traps

Something wrong in it, or against the rules? Report it.