Gallery layout
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.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Cells
- 56
- Spacing
- 1.3
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8.5
- Wire
- 0.55
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
- Wire color
- #9fb3d9
cursor
- Pointer mode
- Reveal
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.5
- Lift
- 0.08
inactive
- Depth
- 1
- Dim
- 0.5
active
- Change time
- 2
- Wave
- 0.35
- Slant
- 0.3
- Relief
- 0.22
pictures
- Autoplay
- 0
Wire Relief turns every picture into a fine wire mesh lifted by its own brightness, with colour panels set between the wires. The bright parts of the picture rise, the dark parts stay low, so the image becomes a small terrain drawn in wire.
How it works
A waiting picture is a flat grey wire grid with no panels. When it becomes the active one, a soft wave crosses it: behind the wave the grid rises into the picture's relief and the panels fill in with the picture's colour, while the wires fade back to a faint tracery over it. In Reveal mode the panels near the cursor lift away and only the bare wire shows, so a visitor can look under the surface of the picture.
Settings
- Cells: how many grid cells run across a picture. A dense grid gives a fine survey mesh, a coarse one a bold terrain.
- Relief: how high the brightest point rises.
- Wire and Wire color: the brightness and colour of the wires.
- Lift: how far the panels lift away under the cursor.
- 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
Tech and engineering showcases, data stories, architecture and terrain. For a relief made of pins, see Pinscreen; for one made of lines on a dark ground, see Ridgelines.
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
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.
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.
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.
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.
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.
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
Holographic 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.
CursorLiDAR scan
Sweep a laser across a 3D object and turn it into a scanned mesh and point cloud, like real LiDAR capture.
Object effectTesla Discharge
A Tesla cursor: a bright spark at the mouse with a thin charged line behind it, pulses of energy running along it. For tech, science and electric brands.
CursorAluminum
Bright, lightweight aluminum with high reflectivity and slight surface roughness
MetalBrushed Metal
A satin, matte grey metal with soft, wide highlights, for appliances, panels and modern architectural details.
MetalChromatic Aberration
Chromatic aberration post-processing: split the colour channels into thin fringes for a lens, VHS or glitchy screen look.
Post-processing effect