Home / Three.js / Landing Pages
Particle Field puts a living point cloud behind a complete landing page. As the visitor scrolls, the same buffer of 50,000 to 200,000 particles reshapes itself from a sphere into a torus, then into any word you choose, a spiral galaxy and finally a rolling wave. The pointer leans the field toward the cursor and a small control lets visitors switch density live.
Around the effect you get a polished dark (and light) page: a fixed header, a scene rail, five story sections, a feature grid, a how-it-works block, an FAQ and a closing call to action. Scroll progress is derived from the section positions, so copy of any length stays in sync with the morph.
The renderer is a small hand-written WebGL layer (about 27 KB of unminified JavaScript in total), not Three.js, and everything is CC0. Without WebGL it falls back to a 2D starfield and CSS gradient, it pauses when hidden or offscreen, caps the pixel ratio and respects prefers-reduced-motion.
Highlights
- Five morph targets: sphere, torus, canvas-sampled text, spiral galaxy and wave, all from one buffer and one draw call
- Your own word or logo text rendered in particles by sampling a hidden canvas (one constant to change)
- Live density switch: 50k, 100k or 200k points, with a lighter default on phones
- Scroll-linked morph computed from section positions, plus deep links (#torus, #logo, #galaxy, #wave) and a scene rail
- Dark (additive glow) and light themes with toggle and system preference
- Canvas2D starfield fallback, pause when hidden/offscreen, DPR cap, reduced-motion support
- Responsive 360px to 1920px, keyboard accessible, zero dependencies, CC0
mammoth templates


