Three.js Digital Grid Pulse — Independently Fading WebGL Cube Field

The Three.js Digital Grid Pulse snippet fills a floor-plane grid with 400 small emissive cubes, each one rising up, glowing, and fading back down entirely on its own random schedule — a "digital data" or matrix-like aesthetic — using per-block materials and a triangular fade envelope, with core Three.js loaded from a CDN.

Why every block needs its own material instance

It would be tempting, for performance, to share one MeshStandardMaterial across all 400 cube meshes — but this snippet deliberately creates a brand-new material for every single block. The reason is direct: a material's opacity is a property of the *material*, not the mesh. If every block shared one material object, animating any single block's opacity would instantly change the opacity of all 400 blocks simultaneously, since they'd all be reading from the exact same object. Independent per-block fading strictly requires independent per-block materials — a rare case where more object instances, not fewer, is the correct choice.

Each block owns its own timer, not a shared clock

Every block stores its own delay (a random initial wait), duration (how long its rise-glow-fade cycle takes), and elapsed (its personal running clock, deliberately started at a random *negative* value so blocks don't all begin their very first cycle at the same instant). Because THREE.Clock().getDelta() is added into every block's own elapsed value independently every frame, no two blocks are ever perfectly synchronized — the grid reads as a field of independently-blinking data points rather than a single wave sweeping through in lockstep.

A triangular envelope, not a sine wave

Rather than a smooth sine-based fade, this snippet computes a simple triangular shape: opacity ramps linearly up to full brightness at the cycle's halfway point, then ramps linearly back down to zero. This is deliberately snappier and more "digital" feeling than a smooth sine curve — a small, characterful choice that reinforces the matrix/data aesthetic more than an eased fade would, and it requires nothing more than a conditional and two multiplications, no easing library.

Scale and position move together with opacity

As a block's envelope value rises, its Y-axis scale grows alongside its opacity, and its Y position is recalculated so it always appears to grow *upward from the floor plane* rather than expanding from its own center in both directions. This coupling — three properties (opacity, scale, position) all derived from one shared envelope number — is what makes each block read as physically emerging from the ground rather than simply materializing in place.

Modulo arithmetic creates the repeating cycle

Each block's progress is computed as (elapsed % (duration + delay)) / duration, using JavaScript's modulo operator to wrap the ever-increasing elapsed time back into a repeating window. Whenever that wrapped value exceeds 1, the block is in its "resting, invisible" phase between pulses — explicitly forced to zero opacity and minimum scale — before its next cycle begins.

Where this technique applies

Independently-timed per-object pulse cycles are the standard technique behind matrix-style data visualizations, equalizer bar grids, and any "field of independently blinking things" effect. Pair it with a network graph for a "raw data versus connected structure" pairing, or contrast its snappy, digital fade against the smooth, continuous motion of the particle wave.