CSS animations pegged my GPU and no agent could find it
- YT :: https://www.youtube.com/watch?v=TKlOCjLMNtw
- Original title :: Fable Broke My App and Couldn't Fix It
Theo debugs a browser performance bug in T3 Code where an idle page burned 13–50% of the GPU process CPU, depending on display resolution and refresh rate. Neither Fable nor GPT-5.6 ("Soul"/Codex) could find the cause — both confidently blamed unrelated code — and the real culprit turned out to be infinite CSS animations (Tailwind's animate-pulse) combined with backdrop-blur and a noise overlay. The lasting point of the video is the workflow: agents were useless as diagnosticians but very useful as tool builders while Theo did the diagnosis himself.
The symptom
T3 Code looked fine — snappy navigation, instant loads — but the browser's GPU process sat at 13–15% CPU at 720p and up to 50% on a 5K XDR display at 120 Hz. Heat was the first clue: after streaming games over Moonlight, the laptop stayed hot the next morning even with the game closed. Built-in browser performance tools were no help: they are tuned for runaway JavaScript, slow loads, and missing resources, and go nearly blind once work is offloaded to the compositor via CSS. The task manager is browser-wide, not per-tab, so Theo had to open a fresh Chrome with only T3 Code loaded to prove the tab was guilty — navigating to google.com dropped the GPU process from ~18% to ~3%.
Where the agents failed
Given a vague description, Codex produced a plausible-sounding diagnosis about websocket-driven main-thread stalls, history scans, state rewrites, and highlighting, then landed a 10,000+ line refactor of the network and React update layers. It changed nothing. Both Codex and Fable then fixated on the "ultrathink composer" gradient — a UI element that only appears when typing ultrathink under Claude Code, and which was not even active during the bug. Codex also spent 30 minutes failing to pull debug data out of Chrome via an extension before Theo told it to use computer use and just look at the tabs. Its eventual fix suggestions were bad on their own terms: make the pulse static, or run it for 2.5 seconds only, or blink slower.
The workflow that did work
Once Theo accepted the model would not find the answer, he changed the ask: build me a way to test theories fast. The agent produced a window._t3gpu binding that injects CSS to toggle whole classes of effects — animations, transitions, filters, shadows, blur, media layers, the noise overlay — plus .applyAll and .reset. Pasting that into the console on the production build gave immediate A/B measurement: applyAll dropped the GPU process to under 3%, reset spiked it back. Bisecting by category found animations, and the agent's follow-up scripts split animations from transitions and enumerated every animated element. The offenders were the pulsing terminal icons in the sidebar and similar infinite thread-status animations.
Why an opacity pulse is expensive
An opacity animation is normally a cheap compositor-only effect, but an infinite one promotes its element to its own GPU layer and forces the compositor to commit frames at the display refresh rate — 120 fps — forever, even when nothing else on the page changes. Several sidebar rows animating at once means many tiny layers recomposited continuously, and the page never goes idle. High-DPI displays multiply the cost. Fable's genuinely useful contribution was flagging backdrop-blur (originally added by Opus early in T3 Code's life) interacting with a low-opacity noise layer over the whole page — the combination of blur, noise, and constant recompositing is what made it brutal. Removing the noise layer required retuning grays: filters had been subtly brightening regions, so the sidebar, body, and composer chrome strip ended up visibly different shades on HDR displays, and getting the colors to match again took several more agent rounds.
Punchline and takeaways
After shipping the fix Theo still saw high GPU usage in his daily browser — until he closed three other windows, each holding an idle claude.ai page. Each idle Claude tab was costing ~10% of the GPU process on an $8,000 laptop, nearly convincing him his own fix had failed. He notes Codex's desktop app had the same class of regression repeatedly, which is why he built T3 Code in the first place.
The engineering lesson: the models could not understand the problem and their design suggestions were poor, but they searched the codebase faster than he could and built the instrumentation that made bisecting theories cheap. A day and a half of partly-attentive work replaced what would have been much longer by hand. Experience with CSS compositor behaviour — a domain where the standard tooling gives no signal — was the part only the human supplied.