Prism
Year
2026
Client
Personal Project
Service
Creative Coding, Interactive Prototype, WebGPU R&D, Material Design
Prism is an interactive WebGPU study that treats a live HTML document as a physical material
© Prism
The Premise — Interface as Material
Prism began as a simple provocation: most web interfaces are flat because the medium asks them to be, not because flatness is correct. The project treats a live HTML card as a physical surface — rasterized, draped, and lit like a sheet of holographic film — to test what shifts when readable content gains weight, drag, and refraction.
The piece is built around three coupled systems: a DOM-to-texture pipeline that paints the live card onto a GPU canvas whenever its content or accent changes, a CPU verlet cloth that hangs the texture from four pinned corners under wind and gravity, and a WebGPU material stack — transmission, iridescence, clearcoat, thin-film interference — that turns the result into something between paper and oil-slick. The interaction layer ties them together: a raycast pointer pin grabs the cloth and pulls a falloff-weighted patch, so the surface responds to touch rather than dragging a single vertex.
The Build — From DOM to Cloth to Light
The hardest decision was how to read the HTML. An early SVG foreignObject pipeline was elegant on paper but failed silently across font and browser configurations, so the final approach reads text nodes directly from an offscreen card and repaints a designed layout — tag pill, kicker, title, body, technique label, chevron — onto a 540×720 canvas at 3× DPR. The output backs a CanvasTexture with anisotropy 16, which keeps type crisp at glancing angles where the cloth folds away from the camera.
The cloth itself is a 32×40 grid of verlet particles relaxed under structural, shear, and bend constraints, stepped at a fixed 60 Hz inside an accumulator-clamped render loop so behavior stays stable when the tab loses focus or the GPU stalls. A sum-of-sines wind field animates the drape; a "Gust" envelope pulses on top and decays at 0.92× per frame, modeling the brief snap of air rather than a continuous fan. Material parameters — IOR, translucency, opacity, thickness — are wired through a Zustand store with selector subscriptions, so a slider drag retunes the surface in real time without a full scene rebuild. Density changes debounce a 120 ms rebuild to keep the solver responsive.
IoT Hub Sensor Dashboard