How Pixels Create Color

Every color on this screen begins with only three tiny lights.

Build Process

01How the 3D models were builtProcedural

I modeled the pixel display, RGB subpixels, enclosure, glow, and camera views directly in TypeScript with Three.js primitives. React Three Fiber connects the scene to React state, so color changes update the model, lighting, and interface together—without downloaded 3D assets.

3D & animation stack

3D rendering: React Three Fiber + Three.js — Builds the pixel grid, RGB subpixels, enclosure, camera, and WebGL scene.
Motion & interaction: useFrame + OrbitControls — Interpolates camera moves and lets mouse or touch rotate the model.
Light & materials: Emissive materials + additive glow — Mixes RGB channels into the enclosure light, halo, and live interface accent.
Performance: Dynamic loading + batched geometry — Loads WebGL only on this route, combines the pixel panel, and caps pixel density.

How Pixels Create Color — interactive 3D experience

How Pixels Create Color