showcase · marketing · visual-experience
Topographic Terrain Hero
DRAFTA dark layered-ridge landscape with glowing edges, an italic serif headline, and floating captions that parallax under the pointer.
TapKeyboardCSS motionDark Topographic
Layers holdtales of time
Every layer of sediment records a chapter of our planet, from ancient seabeds to drifting ash, layered across millions of years beneath us.
Interactive maps let you peel back the crust to trace how stones, fossils, and deep time combine to shape the ground beneath your feet.
390px · narrowlight themecomfortablefull motioncatalog shows a poster; this stage is the live implementation
Original generated terrain: six deterministic ridge lines drawn as SVG with glow, occluding slopes for depth, a draw-on entrance, a slow ember breathe, and pointer parallax per layer. Editorial serif-and-sans headline, navigation pills that drop in, two floating captions, and a Relight control that cycles dusk, glacier, and mono palettes. No photography, no WebGL.
- Use when
- dark cinematic landing hero with 3D terrain feel and editorial type
- A site needs atmosphere and depth without a WebGL runtime or stock imagery
- Avoid when
- Light, dense application screens
- True volumetric scenes that require Three.js
- Visual style
- Dark Topographic
- States
- default, hover, focus-visible, active/pressed, narrow/mobile, reduced-motion
- Maturity
- DRAFT · v0.1.0 · builtin. Nothing is promoted automatically.
- Themes
- default, dark