Pin Screen

Give a hero, a cover, a 404 or a launch something to touch before anything is read: the name stands out of the board the way a hand stands out of the real toy, and the visitor presses it, wipes it or leaves their own print in it.

Copy the pin-screen folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="pin-screen/pin-screen.css">
<div id="pin-screen" style="width: min(92vw, 1100px); height: min(64vh, 520px); border-radius: 16px"></div>

<script type="module">
  import PinScreen from './pin-screen/pin-screen.mjs';

  const pinScreen = new PinScreen(document.getElementById('pin-screen'), {
    text: 'TACTILE',
    shape: 'text',
    finish: 'steel',
  });

  // pinScreen.update({ … });   change any option in place
  // pinScreen.destroy();        and take it away again
</script>

new PinScreen(element, options)

Builds it inside the element with these options.

update(opts = {})

Change options in place.

replay()

Press the relief in again: the pins fall flat, then the shape comes up through them.

reset()

Shake the board flat, like tilting the toy: every pressed pin lets go, then the relief presses back in.

pressAt(nx, ny, strength = 1)

Press at a point given as fractions of the board (0…1).

state

destroy()

Stops it and cleans up after it.

1. ArrivingWhen the board is first 30% visible the relief presses in from behind: a left-to-right wave, or deepest first (arrival: press), standing within a second; a webfont relief waits for its face.
2. At restThe relief stands proud under the lamp (hold), the flush field sparkles; the loop is asleep and costs nothing.
3. Hand over itPins under the pointer spring out (lift) or are pressed back flat (wipe); raised pins brighten, show their shafts and cast shadows away from the lamp.
4. RememberingWithout keep, pressure decays with a half-life set by memory, so a stroke lingers and lets go.
5. Impression keptWith keep, whatever the hand pressed stays until reset(); the loop still sleeps once the pins settle.
6. Shaken flatreset() drops every pin top to bottom in 0.3 s, then the relief presses back in.
7. Off screen or hiddenThe loop pauses; a returning tab cannot launch the springs with a long frame.
8. ResizedRebuilt at the new size, pitch refitted so the relief stays legible; a relief that had arrived is simply there.
9. PhoneSmall boards get finer pins so the word stays at least ten pins tall; pan-y keeps vertical scrolling.
10. Reduced motionThe relief standing and still on the first paint. No arrival, no springs, no pointer; nothing lost.

Made of: Pressure field, Spring heightfield, Hex pin grid, Image heightmap, Silhouette inflate, Stroke aware pitch, Cast shadow march, Sprite atlas shading, Dirty region repaint, Sleeping loop, Text relief.

Read more: How the Pin Screen works.

Original. Taken from the physical pin-art toy, not from a catalogue reference, so references is honestly empty. Canvas 2D only; the relief is text in the page fonts, a procedural hand or mark drawn with canvas paths, or any image the page passes in, so no image ships.

• 01.1Impression HeroA studio’s hero on a full-bleed board of brass pins.
• 01.2Pin 404A 404 standing out of a pin board.
• 01.3Hand Press LaunchA coming-soon section revealed by a hand.