Particles
Every particle has its own mass, spring force and damping. The physics runs in real time on your graphics card. Move your mouse through it or tap into it.
The live simulation needs JavaScript and WebGL 2. The explanation below is readable without them.
- Particles
- 0
- Frames/s
- –
- Physics
- WebGL 2GPU
How it works
Every particle has its own mass, spring force and damping. The physics runs in real time on the graphics card (WebGL 2, transform feedback): every particle's position and velocity live in two alternating buffers, a shader computes forces and motion without reading data back to the CPU. A divergence-free flow field keeps the cloud in motion, the pointer pushes particles aside, a tap sends a shockwave through them.
The five target shapes of wordmark, app, web app, AI workflow and website are rasterised once into depth layers; every particle picks its point from them and moves on to the next shape on its own after a while. When drawing, each particle takes its colour from the design tokens; fast particles glow brighter. In the wordmark it takes on the logo’s colour at its target. Light and Dark recolour the scene without pausing it.