DATAFIELD

Three.js · WebGL · Remotion

A 3D composition that is live in your browser.

169 blocks whose heights come from two travelling waves plus a per-cell phase offset. Everything below is the real scene running in WebGL — move your mouse to orbit, drag the frame slider to scrub. Every value is a pure function of the frame, so it seeks exactly.

 DataField · WebGL · 169 instances
frame 0 / 119

The piece

Nothing is keyframed by hand, and nothing is random at render time — which is why the same scene scrubs cleanly here and renders identically to video.

Deterministic

Every value derives from the frame index. No wall-clock time, no Math.random. Drag the slider backwards and the field rewinds exactly.

Seeded, not random

Per-cell variation comes from a hash of the cell coordinates. The same seed always produces the same field, so a re-render matches the original.

Lit deliberately

One warm key light, one cool rim to separate the field from the background, and low ambient. Default lighting is what makes generated 3D look generated.

Type over depth

The serif overlay sits above the canvas so the geometry reads as depth behind the words, not an object on display.

One scene, two outputs

The WebGL scene above and the video below are the same composition — one runs live, one is rendered frame by frame.

  1. in the browserabove

    WebGL via Three.js, no bundler and no build step. It ships as plain files, which is why this page has no framework to break.

  2. stillone frame, to inspect

    npx remotion still DataField out/frame.png --frame=45 — the only reliable way to catch a scene that renders black, is mis-lit, or is off-camera.

  3. renderMP4, below

    npx remotion render DataField out/datafield.mp4 — H.264, 2.0s, 1920×1080, 768 KB. Remotion bundles its own FFmpeg, so nothing needs installing.

 the rendered output · H.264 · 1920×1080 · 2.0s 
// the one line that makes headless 3D work at all
Config.setChromiumOpenGlRenderer('angle');  // else: Error creating WebGL context

// in the scene — never R3F's useFrame; animate from the frame
const frame = useCurrentFrame();
<ThreeCanvas width={width} height={height} />

Where it fights back

Real friction from building this, not hedged caveats.