Fractal Topography Contours
A full-bleed topographic map drawn in one fragment shader: a slowly drifting fractal terrain traced as pixel-perfect contour lines with thicker index contours, an optional elevation tint, and a soft hill that rises under the pointer in the accent colour.
- Backgrounds
- threejs
- glsl
- advanced
- medium perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1058 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
Featured medium Aurora Shader Background
A full-screen fragment shader folds three ribbons of aurora colour through layered fbm noise above a dark horizon, lets the pointer bend the curtains with a lagged lens, adds grain and a vignette; a CSS gradient stands in without WebGL or with reduced motion.
- threejs
- glsl
medium Incense Ribbon
One incense stick in a glazed bowl of ash on ivory paper. A thin smoke ribbon rises straight from the ember, curls into turbulence and fades; move the pointer near it and your breath bends it. Six blends.
- threejs
- glsl
medium Velvet Nap
Full-screen crushed velvet shaded fibre by fibre. Drag across it and the pile flips along your stroke, leaving lighter or darker trails that slowly lie back down. Eight colourways, light-first.
- threejs
- glsl
medium Noise Gradient Mesh Background
A full-screen fragment shader blends four drifting colour fields through domain-warped simplex noise, adds animated film grain and a soft vignette, and lets the pointer gently pull the warp; a CSS gradient stands in when WebGL or motion is unavailable.
- threejs
- glsl