Particle form

Hundreds of thousands of particles, simulated on the GPU, that hold a word, a logo, an image or a 3D shape and morph from one to the next. They drift in a flowing field, scatter, gather or swirl around the cursor, and can morph as the page scrolls. Brand colours tint them; an image keeps its own colours.

Renderer: WebGPU
Kind: Materials and worlds
Options: 7 fields, 6 presets

Loading the scene…

Presets

Used on

Atlas: this specimen
SURFACES: the hero, under every brand

Worth knowing

Simulated with WebGPU compute (on WebGL2, the same shader runs through transform feedback): each particle springs toward its place in the current form, through a flowing noise field, with a burst of turbulence while it morphs.
Forms are sampled in the browser: a word from the brand’s own font, a logo from any SVG path, an image weighted by brightness (and coloured by it), or a 3D shape’s surface.
Particle count follows the device (220k, 110k or 45k) and can be fixed. A light brand background switches from glowing light to ink.
Clicking moves on to the next form when the block responds to touch. Under reduced motion the form holds still.