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.
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.
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
Basic
The six standard 3D surface materials, from unlit flat color to physically based paint, clearcoat and cel shading. How each one takes light.
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 formatAluminum
Bright, lightweight aluminum with high reflectivity and slight surface roughness
MetalBasic 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.
BasicBirch
Very pale, almost white birch with a matte finish. For Scandinavian interiors, plywood furniture and bright minimal scenes.
Wood