Gallery layout
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.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Pins
- 64
- Spacing
- 1.3
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8.5
- Pin size
- 0.84
- Roughness
- 0.45
- Metalness
- 0.15
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
- Board color
- #15161b
cursor
- Pointer mode
- Press
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.4
inactive
- Depth
- 1
- Dim
- 0.42
active
- Change time
- 2
- Wave
- 0.35
- Slant
- 0.3
- Relief
- 0.16
- Base
- 0.12
pictures
- Autoplay
- 0
Pinscreen turns every picture into a bed of fine square pins. Each pin's height follows the brightness of the picture at its place and its head carries the picture's colour, so the active picture stands out from the board as a real relief.
How it works
A waiting picture is a flat grey bed of pin heads flush with the board. When it becomes the active one, a soft wave crosses it and pushes the pins out into relief in full colour; leaving lets them sink back. The pins are lit by the lights of your scene, so a low side light draws long shadows across the relief. In Press mode the cursor presses the pins in where it passes, like a hand on the toy.
Settings
- Pins: how many pins run across a picture.
- Relief: how far the brightest pins stand out.
- Base: how far the darkest pins stand out, as a share of the brightest.
- Pin size: the width of a pin against the gap between them.
- Roughness and Metalness: the finish of the pins, from matte plastic to steel.
- Board color: the board the pins stand in.
- Change time, Wave and Slant: the speed, softness and angle of the change wave.
Use it for
Product and tech showcases, tactile brand pages, portraits that visitors want to touch. A single picture in the same style is the Pinscreen image; for a relief made of lines, see Wire Relief.
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
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.
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.
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.
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.
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.
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.
Works well with
3D print
Print a 3D object layer by layer like an FDM printer, with a hot nozzle and glowing layers, or show its slicer preview.
Object effectAluminum
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.
MetalGrow
Scale up (or down) and stay — settles with a small overshoot; switching off brings it back
Object effectLiquid Metal Blob
A liquid metal cursor: a glossy chrome blob that ripples as it follows the mouse and swells when you move fast. For luxury, fashion and tech.
CursorSteel
Dark polished steel with medium roughness, ideal for industrial and mechanical objects
Metal