A piece from the lab.
Particle Typography
That headline is not text. It is 22,000 points on the GPU, sampled from the real heading. Scroll, and they fly down and rebuild themselves as the next one.
Twenty Two Thousand
Most sites that do something like this animate an image or a video. This reads the live heading out of the page, rasterises it, and turns every lit pixel into a point in a single mesh. Change the text and the effect changes with it, because there is no asset to re-export.
The whole morph runs in a custom shader: position blending, the mid-flight scatter, the idle drift and the cursor repulsion all happen on the GPU. The JavaScript only writes a handful of uniforms per frame, which is why it holds 60fps on a phone.
It also fails open, which matters more than the effect does. No WebGL, a shader that will not link, a library that never loads, or Reduce Motion switched on, and you get the ordinary crisp headings instead. Nothing on this page can be made invisible by a script that did not arrive.
- Points
- 22,000 on phones, 24,000 on desktop
- Draw calls
- One. A single Points mesh
- Per frame
- Uniforms only. No per-particle JavaScript
- Built with
- Three.js, a custom ShaderMaterial, GSAP ScrollTrigger
This is a capability piece, not a template. Most business websites should not have a particle hero, and I will say so. It is here because when a brand does need to be unforgettable, this is the level the work can reach.