Gallery layout
Slats
Pictures cut into thin vertical slats lit by the scene: inactive ones stand nearly edge-on as fine grey lines, the active one turns its slats to face you in a soft wave, closing into the picture; the cursor turns the slats near it. Use for architecture, interiors and product showcases.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Slats
- 36
- Spacing
- 1.3
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8.5
- Thickness
- 0.018
- Gap
- 0.04
- Roughness
- 0.5
- Metalness
- 0.1
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
- Back color
- #2a2c33
cursor
- Pointer mode
- Turn
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.5
- Pointer turn
- 22
inactive
- Depth
- 1
- Dim
- 0.45
- Turn
- 82
active
- Change time
- 1.8
- Wave
- 0.45
- Slant
- 0
pictures
- Autoplay
- 0
Slats cuts every picture into thin vertical strips, each a real 3D slat that turns on its own vertical axis, like louvres or window blinds. The front of each slat carries its strip of the picture; its back and edges are plain.
How it works
A waiting picture's slats stand nearly edge-on, a row of fine grey lines with the dark showing between them. When it becomes the active one, a soft wave crosses it and the slats turn to face the viewer one after another, closing into the picture in full colour; leaving turns them back. The slats are lit by your scene's lights, so the light catches them as they turn. In Turn mode the cursor turns the slats near it a little toward it.
Settings
- Slats: how many slats a picture is cut into.
- Turn: how far a waiting picture's slats are turned, in degrees.
- Thickness and Gap: the depth of each slat and the space between them.
- Roughness and Metalness: the finish of the slats.
- Back color: the colour of the slats' backs and edges.
- Change time, Wave and Slant: the speed, softness and angle of the change wave.
Use it for
Architecture and interior portfolios, product showcases, any page where a picture should open like a façade. For pictures as stacked horizontal plates, see Strata; for one picture with its own animated change, see the image objects.
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
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.
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.
Pop-up
Pictures as pop-up book spreads lit by the scene: cut-paper sheets hinged to a page lie folded down and grey when inactive, and stand up one after another into the picture in full colour when it becomes active. Use for storytelling, kids, editorial and craft showcases.
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.
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.
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.
Works well with
GLB
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
The six standard 3D surface materials, from unlit flat color to physically based paint, clearcoat and cel shading. How each one takes light.
MaterialBirch
Very pale, almost white birch with a matte finish. For Scandinavian interiors, plywood furniture and bright minimal scenes.
WoodBrushed Metal
A satin, matte grey metal with soft, wide highlights, for appliances, panels and modern architectural details.
Metal