Gallery layout

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.

  • gallery
  • contours
  • lines
  • topographic
  • graphic
  • interactive

Settings and defaults

shared

Layout
Row
Aspect
1.4
Spacing
1.3
Visible
2.4
Shape
1
Stiffness
26
Damping
8.5
Levels
22
Smoothing
3.6
Intensity
1
Opacity
1
Throwing
0.12

cursor

Pointer mode
Lift
Navigation
Click
Pointer strength
1
Pointer radius
0.6
Lift
0.18

inactive

Depth
1
Dim
0.55
Sparse
3
Line width
0.08

active

Change time
2.2
Wave
0.35
Slant
0.3

pictures

Autoplay
0

Contour Lines draws every picture as the contour lines of its own brightness, like a topographic map of the image. Every line is a clean hairline at any distance, and together they trace the forms of the picture.

How it works

A waiting picture shows only a few of its levels, as thin grey lines. When it becomes the active one, a soft wave crosses it: behind the wave the missing levels appear, every line thickens and takes the picture's colour, until the lines meet and close into the solid picture. Leaving runs it back to lines. In Lift mode the cursor raises the contours near it into a soft relief, using the picture's own brightness as height.

Settings

  • Levels: how many contour levels cover the brightness range. More gives a fine survey map, fewer gives broad bands.
  • Sparse: a waiting picture shows every n-th level.
  • Line width: the width of a waiting picture's lines.
  • Smoothing: how much the picture is softened before the lines are drawn. Higher gives rounder, calmer contours.
  • Lift: the height of the cursor's relief.
  • Change time, Wave and Slant: the speed, softness and angle of the change wave.
  • Layout, Dim and Depth: where the pictures sit and how the waiting ones fade.

Use it for

Architecture and landscape portfolios, maps, data stories and graphic editorial. A single picture in the same style is the Contour image; the stacked-card version of the idea is Terraces.

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

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.

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.

Terraces

Pictures as topographic models of stacked card lit by the scene: inactive ones are a flat grey contour map, the active one rises into terraces of its own brightness in full colour behind a soft wave; the cursor lifts the terraces higher. Use for architecture, maps, data and craft showcases.

Basic Carousel

A coverflow carousel of framed pictures on a damped scroll with drag, throw and snap, a lifted centre frame and a soft floor reflection; the cursor tilts or lifts the frames. Use for portfolios, product lines and photo sets.

Depth Layers

Pictures split by brightness into thin sheets floating in depth: inactive ones are collapsed into one faint grey sheet, the active one opens into depth in full colour and its sheets slide past each other with real parallax. Use for editorial, music and dreamy showcases.

Works well with

Used in