Gallery layout
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.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Layers
- 6
- Spacing
- 1.3
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8.5
- Softness
- 0.08
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
cursor
- Pointer mode
- Open
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.6
inactive
- Depth
- 1
- Dim
- 0.35
active
- Change time
- 2
- Wave
- 0.35
- Slant
- 0.3
- Separation
- 0.09
- Edge
- 0.12
pictures
- Autoplay
- 0
Depth Layers splits every picture by its own brightness into a few thin sheets floating one behind another. The back sheet holds the whole picture, and each sheet in front holds only what is brighter than its level, so the light parts of the picture stand forward.
How it works
A waiting picture's sheets are collapsed into one faint grey sheet. When it becomes the active one, a soft wave crosses it and opens the sheets into depth as they take their colour. From then on the sheets slide past each other whenever the camera, the gallery's lean or the cursor moves, which gives real parallax. Each sheet has a fine lit edge where it is cut. In Open mode the cursor opens the sheets a little further where it passes.
Settings
- Layers: how many sheets a picture is split into.
- Separation: the distance between the sheets when open. Few sheets far apart look like a stage set; many close sheets look like soft depth.
- Softness: how soft each sheet's cut is.
- Edge: brightness of the fine edge along each sheet.
- Change time, Wave and Slant: the speed, softness and angle of the change wave.
- Lean: how much the gallery turns toward the cursor, which is what makes the layers slide.
Use it for
Editorial features, album artwork, portraits and dreamy showcases. The same idea in cut paper with real shadows is Shadow Box.
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
Shadow Box
Pictures as cut-paper layers in a shadow box, lit by the scene so each sheet casts a real soft shadow on the one behind: inactive ones are pressed flat and grey, the active one opens into depth in full colour. Use for editorial, craft, kids and storytelling 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.
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.
Fold
Pictures printed on paper folded in one of six ways (accordion, herringbone, fan, scroll, page curl, crumple) and lit by the scene: inactive ones are folded tight and grey, the active one unfolds flat into full colour; the cursor presses a dent into it. Use for print, editorial, fashion and craft 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.
MaterialGrow
Scale up (or down) and stay — settles with a small overshoot; switching off brings it back
Object effectPainterly Bold
Bold painterly clouds with large brush strokes and vibrant colors
EffectPainterly Impressionist
Artistic clouds with visible brush strokes and impressionistic style, warm tones
EffectSparkles Burst
A radial burst of light for a 3D plane: rays, an expanding ring, a bright core and sparkles, with a Progress setting from start to finish.
Effect