Build Log

Corpus Workshop: real-image backdrop, perf fixes, and a drag-hand overlay

August 2, 2026

Chased three.js/R3F performance regressions to their real root causes, swapped the live-lit 3D room for a real background image, and replaced an abandoned primitive-geometry robotic hand with a generated image overlay.

CorpusPerformance3D/R3FUI Polish

distinct perf root causes found and fixed

abandoned build attempts (WebGPU experiment, primitive-geometry hand)

real DB foreign-key bug fixed (relationship_types)

Timeline

Start

Picked up mid-session: Workshop 3D UI perf complaints

Continued from a prior context window — panel sizing, monitor bezel, and the WebGPU experiment were already resolved before this window began

Early

Fixed real interaction lag

LitRoom re-rendering on every click; traced via an actual browser Performance report, not guesswork

Mid

Chased LCP/TTFB across multiple trace rounds

next/dynamic code-split, Promise.all query parallelization, dragSnapToOrigin — separated genuinely new findings from 2 accepted, structural costs (3D-scene compile time, Framer Motion's drag projection reflow) each round

Mid-late

Swapped the live 3D room for a real background image

Removed LitRoom's lights/tubes entirely; Zeb-generated photo background instead — the single biggest perf and visual win of the session

Late

Robotic drag-hand: 3D primitives abandoned, real image adopted

Built and discarded a primitive-geometry mesh ("looked like a bunch of cylinders"), replaced with a generated transparent-PNG hand image mirrored via CSS for both drag directions

End

Reverted a two-hand drop-flash addition

Built, shown, rejected outright ("looks horrible") — cleanly reverted to the single working hand overlay same session

What shipped

Removed MonitorFrame bezel mesh entirely — panel now floats as a self-lit hologram over a real background image

PopOutPanel.tsx — pop-out-of-monitor hover/click interaction, with a real bail-out fix for a permanent per-frame position write that caused a lag regression

DragHandOverlay.tsx — a generated robotic-hand image tracking drag position, CSS-mirrored for both drag directions, replacing an abandoned 3D primitive-geometry attempt

ResponsiveCamera.tsx — holds horizontal FOV constant across aspect ratios, fixing a real bug where narrower/squarer screens (1280x1024) cropped the side panels out of view

Fixed a real Postgres foreign-key violation in promote.ts — ensureRelationshipType() creates missing relationship_types rows instead of failing on any AI-generated relationship phrase that didn't exactly match a pre-seeded slug

Parallelized page.tsx's two independent DB queries (Promise.all), cutting one full Neon round-trip from TTFB (855ms -> 695ms, confirmed via a follow-up trace)

Compressed 3 background/hand images from a combined ~8MB down to ~373KB via sharp/WebP

Centered and re-themed the workshop header (title + counter) into the scene's own cyan/HUD language

Recolored drag-hint labels from red/green stoplight colors to the scene's actual cyan/amber palette

“the hand is just so bad looking, it looks like just a bunch of cylinders and shapes. no definition and depth... we might need to scrap this approach, if this is the best we can do”
— Zeb, on the primitive-geometry robotic hand — the direct feedback that led to abandoning 3D primitives for a generated image, the second time this exact lesson landed in one session