Gallery layout
Ridgelines
Pictures as stacked horizontal hairlines lifted by their brightness, each ridge hiding the lines behind it: inactive ones are flat grey lines, the active one rises into ridges and fills with the picture’s colour behind a soft wave; the cursor raises the ridges. Use for music, data, tech and editorial showcases.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Rows
- 64
- Spacing
- 1.3
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8.5
- Line width
- 0.004
- Smoothing
- 1.8
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
- Line color
- #e8ecf4
cursor
- Pointer mode
- Raise
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.5
- Raise
- 0.08
inactive
- Depth
- 1
- Dim
- 0.55
- Fill opacity
- 1
- Fill color
- #07080c
active
- Change time
- 2
- Wave
- 0.4
- Slant
- 0.1
- Relief
- 0.15
pictures
- Autoplay
- 0
Ridgelines draws every picture as a stack of horizontal hairlines, each lifted by the brightness along its own row. The rows sit one behind another, so every ridge hides the lines behind it: the look known as a joy plot.
How it works
Each row is a line with a fill below it, and the fill is what hides the rows further back. A waiting picture is flat grey lines over a dark fill. When it becomes the active one, a soft wave crosses it: behind the wave the ridges rise into the picture's own relief and the fills take the picture's colour, so the whole picture is drawn in ridges. In Raise mode the cursor lifts the ridges near it.
Settings
- Rows: how many ridgelines run down a picture. Many fine rows give tall, dense ridges; few rows give broad, soft hills.
- Relief: how high the brightest point lifts its ridge.
- Line width and Line color: the ridgelines themselves.
- Fill opacity and Fill color: the fill of a waiting picture, which decides how much of the lines behind shows.
- Raise: how far the cursor lifts the ridges.
- Change time, Wave and Slant: the speed, softness and angle of the change wave.
Use it for
Album artwork and music pages, data stories, editorial covers and tech portfolios. For the same lift drawn as a mesh, see Wire Relief; for lines that flow around the picture, see Flow Lines.
Code and API
Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.
More gallery layouts
Contour Lines
Pictures drawn as the contour lines of their own brightness, like a topographic map: inactive ones are a few thin grey lines, the active one fills in as a soft wave thickens the lines into the solid picture; the cursor lifts the contours into relief. Use for architecture, data and graphic showcases.
Engraving
Pictures drawn as banknote engraving, fine parallel lines bent and widened by the picture’s tone: inactive ones are a faint grey hatch, the active one thickens into full colour behind a soft wave; the cursor turns the hatching under it. Use for luxury, finance, heritage and editorial showcases.
Flow Lines
Pictures as fine lines flowing like water around their own forms: inactive ones are thin grey dashed lines drifting, the active one closes the dashes and thickens the lines into the picture in full colour behind a soft wave; the cursor parts the lines. Use for wellness, nature, music and calm showcases.
Pinscreen
Pictures as beds of fine pins lit by the scene: inactive ones are a flat grey bed, the active one is pushed out by a soft wave into a relief in full colour; the cursor presses the pins in. Use for product, tech and tactile showcases.
Strata
Pictures as stacks of thin horizontal plates lit by the scene, each plate’s front following the picture’s brightness like a laser-cut relief: inactive ones are a flat grey stack, the active one slides forward into relief in full colour; the cursor pushes plates back. Use for architecture, product, interiors and craft showcases.
Wire Relief
Pictures as a fine wire mesh lifted by their own brightness: inactive ones are a flat grey wire grid, the active one rises into relief and fills with colour panels behind a soft wave; near the cursor the panels lift away to the wire. Use for tech, data, architecture and engineering showcases.
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 ShaderCustom Shader
Custom shader surfaces for 3D objects: an unlit color-or-image surface to start from, and the shader materials you create yourself in the studio.
MaterialGLB
GLB is the single-file binary form of glTF, the 3D format made for the web. Upload a GLB to 3DRise and build an interactive scene around it.
Model formatGLTF
GLTF is the text form of glTF, the open 3D format for the web. Bring a GLTF into 3DRise and restyle it with materials and effects.
Model formatHolographic Crosshair
A holographic crosshair cursor: a spinning targeting ring with four ticks that follows the mouse. For games, HUD interfaces and sci-fi product pages.
CursorSpin
Turn the target a full turn (or more) about its own axis, landing where it started
Object effect