Mammoth Templates logomammoth templates

Home / Three.js / Landing Pages

Video preview

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