Grid
Contour Grid
A topographic map floor: contour lines over a drifting landscape, with glowing peaks and an optional real 3D relief.
Settings and defaults
- Levels
- 16
- Roughness
- 0.5
- Warp
- 0.35
- Cell Size
- 14
- Line Width
- 1
- Section Size
- 5
- Section Width
- 2.2
- Line Mode
- 0
- Cell Mode
- 1
- Anim Speed
- 1
- Anim Scale
- 0.5
- Anim Intensity
- 1
- Fade Strength
- 0.7
- Displace
- 0
- Size
- 50
- Line Color
- #59d9b3
- Section Color
- #bff299
- Cell Color
- #1a5c52
- Glow Color
- #8cffbf
- Bg Color
- #020a0a
- Bg Opacity
- 0
- Reveal
- 1
- Reveal Duration
- 0
The Contour Grid draws a topographic map: the contour lines of a rolling landscape, with every few lines drawn heavier as index contours, the way survey maps mark them. The land drifts slowly, so the lines swell, merge and split as hills rise and sink.
How it works
An invisible landscape of hills and valleys is generated from layered noise. The grid draws the lines where that landscape crosses each height step, so you are looking at the land from above, read as lines. The fill between them follows height too: low ground stays dark and the peaks glow, so the eye reads the relief without a legend. Turn up Displace and the surface really rises to the height its contours describe, so the map becomes a terrain model.
Settings
- Levels is the number of contour steps from the lowest point to the highest.
- Roughness goes from rolling hills around 0.35 to craggy ground around 0.65.
- Warp bends the contours into ridges and valleys.
- Cell Size sets how large the landforms are.
- Line Mode Flow lights a band of contours that climbs through the height range.
Use it for
Outdoor, travel and mapping brands, data and analytics pages, editorial layouts and calm technical backgrounds. Pair it with a terrain for a full landscape, or see the Flow Net Grid for another field drawn as lines.
Code and API
Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.
More grids
Advanced Grid
A Grid with shader material , animation and noise effects.
Apollonian Grid
An Apollonian gasket of tangent circles built by circle inversion, re-balanced by a slow Möbius flow. Use for jewel-like, mathematical and luxury scenes.
Basic Grid
Basic grid with cells and sections
Chladni Grid
Vibrating Chladni plates: sand settles on the nodal lines of a standing wave that drifts between resonances. Use for sound, music, science and meditative floors.
Circuit Grid
Beautifull circuit grid
Conformal Grid
A square lattice pulled through ideal-flow potentials (spinning cylinder, vortex, source-sink); colour is flow speed and dye rides the streamlines. Use for science and tech scenes.
Works well with
3d Rise Mesh Shader Material
An unlit surface that shows a color or an image exactly as given, unaffected by scene lights. For screens, posters, panels and flat graphics.
Custom ShaderBasic Material
An unlit 3D material: flat color or image that ignores every light in the scene. For UI panels, flat graphics and exact brand colors.
BasicCirrus Fast
Fast-moving cirrus clouds with pronounced streaks and dynamic appearance
EffectCirrus Gentle
Thin, wispy high-altitude cirrus clouds with gentle movement and high transparency
EffectCirrus Thick
Thicker cirrus clouds with reduced transparency and more visible cloud structure
EffectCloud
Animated procedural cloud materials for any 3D surface: bright, sunset, dawn, stormy and overcast skies with silver linings and light rays.
Material