Mammoth Templates logomammoth templates

Home / Three.js / Landing Pages

Video preview

Drift Terrain is a complete landing page built around a soft, procedurally generated pale-blue landscape. The terrain is noise-displaced, fogged into the sky, lit by a raking light and dusted with gentle wind particles. The camera drifts slowly by itself and flies down the valley as the visitor scrolls, so the whole page feels like gliding over the scene.

Around the 3D you get real, usable content: hero, feature grid, how-it-works steps, animated metrics, testimonials, a monthly/yearly pricing toggle, FAQ and an email sign-up form with validation. Everything sits on frosted-glass panels that stay readable over the animation, in both a light theme and a dusk-blue dark theme.

The 3D is a small hand-written WebGL renderer (about 20 KB). No Three.js or any other library is included. If WebGL is unavailable the page falls back to a static CSS/SVG landscape, rendering pauses when the tab is hidden, the pixel ratio is capped, and prefers-reduced-motion is respected.

Highlights

  • Endless noise terrain, sky, fog and wind particles in raw WebGL, no libraries
  • Scroll-linked camera plus a slow idle drift and mouse parallax
  • Light and dark theme (system preference + toggle, remembered)
  • Hero, features, steps, metrics, testimonials, pricing toggle, FAQ and sign-up form
  • Static CSS/SVG fallback when WebGL is unavailable or the context is lost
  • Pauses when hidden, caps pixel ratio, auto-lowers resolution on slow GPUs
  • Responsive from 360px to 1920px, keyboard accessible, reduced-motion aware
  • Works from file:// with zero dependencies; CC0 licensed