Mammoth Templates logomammoth templates

Home / Three.js / Hero Sections

Video preview

Wire Field Hero opens with a stylised mammoth that is built entirely in code: parametric ellipsoids and tubes (torso, hump, head, trunk, curling tusks, legs, shaggy fur strands) are sampled into thousands of glowing points and wireframe lines, standing on a radar-ring ground grid with drifting motes. A scan sweep reveals the specimen on load, a short glitch settles, and the camera then swings slowly around it while the mouse adds parallax.

Everything around the creature is a working landing page: a monospace HUD (live clock, coordinates, FPS counter, Canvas2D radar and telemetry bars), annotation labels that stay pinned to 3D anchor points with leader lines, a scrolling keyword ticker, capability grid, a searchable and sortable specimen table driven by a data file, a pipeline timeline with animated stats, and a validated request form. Dark theme by default plus a paper-blueprint light theme.

The renderer is a small hand-written WebGL layer (about 40 KB of unminified JavaScript in total, no Three.js and no other libraries). It falls back to a static SVG outline without WebGL, pauses when the tab is hidden or the hero is off-screen, caps the pixel ratio and respects prefers-reduced-motion.

Highlights

  • Procedural mammoth: ellipsoids and tubes sampled into ~9.6k wireframe segments and ~7k points, no models or images
  • Scan-reveal and glitch intro (shader-driven), occasional glitch bursts, mouse parallax and idle orbit
  • Annotation labels pinned to 3D points with leader lines, plus live HUD: clock, coordinates, FPS, radar
  • Sortable, filterable specimen table fed from js/data.js
  • Validated request form with a mock API file ready to connect
  • Dark and light (paper blueprint) themes with toggle and system preference
  • Static SVG fallback, pause when hidden/offscreen, DPR cap, adaptive resolution, reduced-motion support
  • Responsive 360px to 1920px, keyboard accessible, zero dependencies, CC0