# Commander: a pointer-following mascot hero from 90 video frames, and eight traps > How Commander scrubs 90 video frames on a canvas so a cat follows the pointer, and eight traps: pill borders, a canvas benchmark, a spotlight, focus rings and a hero that broke in a preview. Behind the build, by [Ramin Valadan](https://upfork.dev/developers/ramin-valadan), about [Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js)](https://upfork.dev/products/pet-shop-hero) (Component, comes with the Pro plan). Published 2026-10-26. 7 min read. Written with AI: Claude Opus 5.5, through Claude. ## What it is Commander is a hero section for a premium pet shop, in React and Next.js, whose mascot follows the visitor's attention. The Commander, a Maine Coon in a beret, comes from a ten-second AI-generated video turned into 90 frames that the page scrubs live on a canvas: move the pointer up and he looks up, move it down to the product cards and he looks down at them, focus the search field and he watches you type. Around him: a pet-type control, a search with suggestions, "inspected" product picks with an add-to-cart that flies to the cart, and a trust ticker. Dark by default, or framed on paper in a light theme. [Live preview of Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js)](https://upfork.dev/products/pet-shop-hero) This article is for anyone, person or AI, building a hero around a filmed character or any frame sequence that reacts to the pointer: how the frames are stored and drawn, and eight traps we hit, each with its fix. Two of them only showed up once the hero was listed on UpFork. ## Ninety frames, decoded on a budget The video's frames are cut into two parts each: a blurred 160 px "plate" (all 90 in one sprite) for the softly lit background, and a sharp crop of the cat feathered into it, so no seam shows where the light changes. The pointer's height picks the frame: the top of the hero maps to the first frame (looking up), the eyes' height to the level-gaze frame, the bottom to the last. Frames load coarse to fine, so scrubbing works long before the last one arrives: `components/hero/engine/frame-store.ts`, lines 31–34: ```ts /** * Coarse to fine: the frames in `first`, every 8th frame and the last one, then every 4th, every 2nd, the rest. * Scrubbing works from the end of the first pass on, with the nearest frame standing in for the missing ones. */ ``` Decoded frames are big (about 4.3 MB each on desktop), so how many stay decoded depends on the device's memory: `components/hero/hero-config.ts`, lines 142–148: ```ts /** * Memory for decoded frames, by the device's RAM (8 GB+, 4 GB+, less). Every second frame stays decoded plus a * window round the head, so the frame drawn is never more than one away from the exact one; raising `high` to * about 400 keeps all 90 desktop frames decoded (smoothest, heavy on integrated GPUs). One desktop frame of this * video is about 4.3 MB decoded, a mobile one 1.1 MB (mobile always fits all 90). */ frameMemoryMB: { high: 300, mid: 220, low: 120 }, ``` `components/hero/engine/frame-store.ts`, lines 120–129: ```ts export function frameBudget(o: { count: number; frameBytes: number; deviceMemory?: number; budgetsMB: { high: number; mid: number; low: number }; }): number { const ram = o.deviceMemory ?? 4; const mb = ram >= 8 ? o.budgetsMB.high : ram >= 4 ? o.budgetsMB.mid : o.budgetsMB.low; return Math.max(16, Math.min(o.count, Math.floor((mb * 1024 * 1024) / Math.max(1, o.frameBytes)))); } ``` Between two frames the renderer cross-fades, which is where the first trap was. > **Lesson: Blending a scrubbed frame with a stand-in until the right one decodes reads as blur: draw the nearest frame alone** (My own mistake; learned by the AI (Claude Opus 5.5)) > **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. `components/hero/engine/renderer.ts`, lines 104–121: ```ts const pos = Math.min(count - 1, Math.max(0, p)); const i0 = Math.floor(pos); const i1 = Math.min(count - 1, i0 + 1); const f = pos - i0; // Blend only two exact neighbours. A stand-in frame a few positions away would blend into a double image, so // until the right frames are decoded, the single nearest frame is drawn, sharp. let a = source.getDrawable(Math.round(pos)); let b: typeof a = null; let t = 0; if (this.opts.crossfade && f > 0.004 && i1 !== i0) { const d0 = source.getDrawable(i0); const d1 = source.getDrawable(i1); if (d0 && d1 && d0.index === i0 && d1.index === i1) { a = d0; b = d1; t = f; } ``` ## Measuring smoothness without fooling yourself The second complaint in that review was that the head felt "sticky" rather than smooth. Before changing anything, we measured, and the first measurement was wrong. > **Lesson: Reading a canvas back with getImageData moves it off the GPU: it poisoned a whole frame-rate benchmark** (The tools and the machine; learned by the AI (Claude Opus 5.5)) > **I assumed:** calling `getImageData` after each draw was a harmless way to make the benchmark wait until the canvas had really been drawn. > **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 with a fresh page for each variant and no readbacks, every variant ran at 16.7 ms. > **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. > **Evidence:** the two benchmark runs in the build notes. With honest numbers, the cost wasn't the canvas at all. It was what moved with the pointer. > **Lesson: A pointer spotlight painted from CSS variables repaints the whole stage on every move: move a fixed disc instead** (My own mistake; learned by the AI (Claude Opus 5.5)) > **I assumed:** a soft light following the pointer was cheap as a full-stage radial gradient whose centre came from CSS variables set on the hero. > **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 backdrop again every frame. > **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 steady 60 fps, p95 16.8 ms, with real pointer events. > **Evidence:** HeroStage.tsx lines 241–242; commander-hero.css lines 187–196 and 321–325; commit d4ec4b9. `components/hero/HeroStage.tsx`, lines 236–243: ```tsx const key = `${shift}|${mx.toFixed(3)}|${my.toFixed(3)}`; if (key === written) return; written = key; inner.style.transform = `translate3d(${shift}px,0,0)`; if (content) content.style.transform = `translate3d(${((-px * motion.parallaxPx) / 2).toFixed(2)}px,0,0)`; // The spotlight is a fixed disc moved by transform: no repaint, no restyle. if (spot) spot.style.transform = `translate3d(${(mx * stageWidth).toFixed(1)}px,${(my * stageHeight).toFixed(1)}px,0)`; }, ``` `components/hero/commander-hero.css`, lines 187–196: ```css .cmd-spot { /* A fixed soft disc moved with transform (the stage writes it), so following the pointer never repaints. */ position: absolute; left: 0; top: 0; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; background: radial-gradient(closest-side, rgb(255 236 214 / 0.075), rgb(255 236 214 / 0.03) 42%, rgb(255 236 214 / 0) 100%); mix-blend-mode: screen; ``` `components/hero/commander-hero.css`, lines 321–325: ```css /* * Gradient rings: a 1px border painted by a masked pseudo-element, light at the top and fading down, so edges read * as catching the light rather than as drawn lines (an inset box-shadow thins out on the curves). No backdrop blur * over the canvas: it would be recomputed on every frame of the head's motion. */ ``` ## Borders that keep their width > **Lesson: A 1px border drawn by a masked ring thins out on a pill's round ends: draw pill borders as an SVG stroke** (My own mistake; learned by the AI (Claude Opus 5.5)) > **I assumed:** the 1 px gradient ring that looked right on the cards (a pseudo-element masked down to its border) would look right on pill-shaped buttons and fields too. > **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 all the way round. > **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 radii, keep the masked ring. > **Evidence:** PillRing.tsx lines 8–26; commander-hero.css lines 357–362; commit 7012bfa. `components/hero/PillRing.tsx`, lines 8–26: ```tsx /** * The border of a pill-shaped control, drawn as an SVG stroke so it keeps one width all the way round (a masked 1px * ring thins out on the round ends). Optionally a comet of light that runs round it: dashes that share one leading * edge and get longer layer by layer, so the tail fades smoothly. CSS decides when the comet shows (hover, focus). * * `radius` is only the fallback for browsers without CSS geometry properties; the stylesheet sets ry: 50%. */ export function PillRing({ id, radius, comet = false }: { id: string; radius: number; comet?: boolean }) { const geom = { width: "100%", height: "100%", rx: radius, ry: radius }; return (