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.
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
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.
The component renders all contour lines in a single draw call using LineSegments with per-vertex attributes. Pulse animation is computed entirely in the fragment shader — no JavaScript runs per-frame for trail rendering. Head dot positions use a pre-allocated buffer with zero garbage collection pressure. Fill mesh uses a 100×100 subdivided plane — enough for clean stepped displacement without unnecessary vertex count. IntersectionObserver pauses rendering when the component scrolls out of view.
Hero section backgrounds for tech, AI, SaaS, and data-focused landing pages — Full-bleed animated sections between content blocks — Dark-themed portfolio and agency sites — Interactive data visualization aesthetics — Conference and event websites
Built with Three.js (WebGLRenderer) and custom GLSL vertex/fragment shaders — Single code component — no external dependencies beyond Three.js — All geometry is procedural — zero external assets — Tested on Chrome, Firefox, Safari, Edge (desktop and mobile)
Alexandr Demidov
