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.

  • gallery
  • ridgelines
  • lines
  • relief
  • joy-plot
  • interactive

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.

See plans

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