Clean-room engineering portfolio
Study the interface. Rebuild it clean.
Every page here started as a study of a site worth learning from — its canvas loops, scroll choreography, pointer math — and ended as an original build that keeps the principle and leaves the source behind.
3
reference-inspired demo routes
0
edits to the locked baseline — by design
Evidence-led workflow
Audit, abstract, rebuild, then document.
Route contract
Experiments ship under separate app routes.
Evidence first
Normal screenshots and manifests support each demo.
Original code
Every mechanism is rewritten from scratch in this codebase.
Every experiment, one untouched baseline.
Each experiment restyles the same Field Supply page and ships on its own route, so you can flip between a demo and the baseline to see exactly what the transfer changed — and what it deliberately left alone.
Field Supply - Ochi Interactions Demo
Clean-room Field Supply demo applying original magnetic pointer interactions, pointer-following eyes, and smooth text reveal bands inspired by ochi.design.
Next.js, Tailwind, Framer Motion, Pointer motion
Open route
Field Supply - Stripe Sessions Hero Wave Demo
Clean-room Field Supply demo applying an original Canvas 2D folded-ribbon hero background inspired by the runtime audit of stripe.com/sessions/2026.
Next.js, Tailwind, Canvas 2D
Open route
Field Supply - JoinClyde Background Field Demo
Clean-room Field Supply demo applying original Canvas 2D background-field principles inspired by joinclyde.com.
Next.js, Tailwind, Canvas 2D
Open routeLook first. Build second.
It is tempting to eyeball a reference and start typing. This workflow makes observation the first deliverable: measure the running page, write down the principles behind what it does, then write original code that answers to those notes.
Inspect
Capture runtime metadata, viewport evidence, resource maps, and canvas or WebGL signals before drawing conclusions.
Deconstruct
Separate static styling from motion systems, scroll orchestration, blend modes, masks, and procedural render loops.
Abstract
Turn observations into implementation-neutral principles: rhythm, density, velocity, contrast, and interaction rules.
Rebuild
Write original React and browser API code tuned to the local product, assets, palette, and accessibility constraints.
Differentiate
Document what changed: brand, layout, copy, timing, color, and technical mechanics stay intentionally distinct.
Clean-room rules are part of the interface.
This workspace studies public runtime behavior, then ships brand-different implementations with original code, altered mechanics, and explicit documentation.
The neutral sample remains unchanged, reference assets are not packaged, and every demo is isolated so comparison and review stay straightforward.
Review the builds