TerrainLines

TerrainLines generates real-time procedural topographic contour backgrounds powered by Three.js and custom GLSL shaders. Every line is computed on the fly from a noise field — no images, no external assets. Drop it in, pick your colors, and you have a premium animated background that's unique every time.

Features

Procedural contour generation from Simplex noise with Fractal Brownian Motion — GPU-rendered pulse animation via custom GLSL shaders (zero per-frame CPU cost) — 3D topographic depth with adjustable Z-displacement and camera tilt — Scroll-driven parallax camera mode — Color gradient mapped to contour elevation — Optional filled terrain shapes between contour lines (gradient or solid color) — Seeded randomness — same seed always produces the same pattern — Visibility-aware — pauses rendering when off-screen to save resources — Responsive — adapts to any container size with ResizeObserver — Full GPU resource cleanup on unmount

Property Controls

Pattern — Scale, Octaves, Levels, Smoothing, and Seed let you dial in anything from broad, gentle hills to tight, complex terrain. Use the Topographic preset for curated defaults, or switch to Custom for full control.

3D View — Z-Depth controls how much the contour levels rise above each other. Camera Tilt adjusts the viewing angle from top-down (1°) to near-side (89°). Enable Scroll Parallax to animate the tilt as users scroll past the component.

Fill — Toggle colored fill between contour lines. Choose Gradient (follows the line color ramp) or Solid color mode. Adjust opacity to taste.

Pulses — Speed Min/Max sets the velocity range (each pulse gets a random speed within this range). Count controls how many pulses are active. Trail Length and Head Radius shape the pulse appearance. Set Head Radius to 0 for trail-only mode.

Colors — Background, Gradient Start (lowest level), Gradient End (highest level), and Pulse Color. All colors update in real time without rebuilding the scene.