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.

  • gallery
  • pins
  • relief
  • tactile
  • scene-lit
  • interactive

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.

See plans

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