Creative development · WebGL · case study

Making a background feel alive.

I transformed a mathematical interference-wave demo into a responsive, scroll-directed 3D environment, then built the tuner and performance system needed to shape it like a portfolio identity asset.

Live waveform renderer placeholder

Process

From exported loop to live environment.

The project started as a plan to render a looping video fallback. After testing capture pipelines, WebCodecs, headless rendering, and file size tradeoffs, I cut the fallback and committed to a live renderer.

Interaction

The camera became the page behavior.

Scroll drives a spiral camera path while the waveform continues its own phase loop. Raw scroll input is eased so the camera feels responsive without inheriting every abrupt trackpad movement.

Technical system

One shared configuration, multiple surfaces.

The tuner, portfolio page, and renderer share the same wave settings, camera model, palette, post-processing options, and quality limits.

Role of Codex

AI as implementation partner.

I used Codex to turn visual feedback into controls, diagnostics, render tools, and code revisions while I directed the concept, taste, and product decisions.

Skills + tools

Three.jsWebGLGLSLCreative codingPerformance tuningInteraction designDesign systems