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

Timeline

1. 1

   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

2. 2

   Early

   Fixed real interaction lag

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

3. 3

   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

4. 4

   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

5. 5

   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

6. 6

   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