Gallery layout
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.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Sheets
- 4
- Spacing
- 1.3
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8.5
- Separation
- 0.16
- Smoothing
- 3.2
- Roughness
- 0.85
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
- Shadows
- On
- Page
- Off
- Page color
- #d8d2c6
inactive
- Direction
- Back
- Depth
- 1
- Dim
- 0.5
- Closed
- 76
cursor
- Pointer mode
- Tilt
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.6
- Tilt
- 12
active
- Change time
- 2.2
- Wave
- 0.35
- Slant
- 0.3
- Stagger
- 0.6
pictures
- Autoplay
- 0
Pop-up turns every picture into a pop-up book spread. The picture is cut by its brightness into a few paper sheets, each hinged along its bottom edge at its own depth, and when the picture becomes active the sheets stand up one after another, back to front, like a page opening.
How it works
A waiting picture's sheets lie down and grey. Direction sets which way: Back lays them away from the viewer, like a printed page seen from above; Forward folds them down toward the viewer, showing their plain card backs. As a picture becomes active the sheets rise and take their colour; leaving lays them back, front to back. The sheets cast their own cut-out shadows on each other and on the scene. In Tilt mode the cursor tips the sheets near it back a little, like a fingertip on the paper.
Settings
- Sheets: how many sheets a picture is cut into.
- Separation: the depth between the sheets' hinges.
- Closed: how far a waiting picture's sheets lie down, in degrees from upright.
- Stagger: how much the sheets rise one after another rather than together.
- Smoothing: how rounded the cuts are.
- Shadows: the sheets cast shadows.
- Page and Page color: show the paper page the sheets are hinged to.
- Tilt: how far the cursor tips the sheets.
Use it for
Children's stories, storytelling campaigns, editorial features and craft brands. More paper: Shadow Box and Fold.
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.
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.
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.
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.
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
Bounce
Hop on the spot — a real arc with a squash on every landing
Object effectBubbles
A bubble cursor: iridescent soap bubbles rise from the mouse pointer, drift and pop. For kids, playful brands, water and beauty sites.
CursorFlip
Crouch, jump and flip in the air, landing with a squash
Object effectJelly
Squash and wobble like soft rubber, keeping its volume — settles back to rest
Object effectBubble trail
Soap bubbles form over copies of a moving 3D object, then rise, wobble and pop, each with a sliding soap-film sheen.
Object effectCartoon Bouncy
Highly stylized bouncy cartoon clouds with exaggerated puffiness and vibrant colors
Effect