← The lab
three.jsInstanced meshPhysical materials

Chrome Field

Hundreds of polished pins rise and lean toward your pointer, and a ripple runs out from wherever you are.

Move your pointer over the field, or focus it and use the arrow keys.

How it’s made

Every pin is one instance of a single mesh, so the whole field is one draw call. Each frame moves each pin toward a height set by its distance from the pointer, plus a travelling ripple, and eases there, so nothing snaps.

The chrome is the same recipe as the logo on the home page: a physical material with a clear coat, lit only by a studio-room environment map, so the reflections do the work.

Phones get a smaller field, fewer facets per pin and 30 frames a second.

Next: Ink Flow →Want something like this? Start a project