Pin 404

Turn the one page nobody wants to land on into the one they play with for ten seconds before going home: the error is an object, the joke is in its behaviour, and the way out is one obvious button.

Copy the pin-404 folder and the pin-screen folder from its package next to your page, link the stylesheets and mount 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">
<link rel="stylesheet" href="pin-404/pin-404.css">
<div id="pin-404"></div>

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

  const pin404 = mount(document.getElementById('pin-404'), {
    code: 'Error 404 · Page not found',
    title: 'Nothing here but pins.',
    wit: 'Wipe the 404 flat if it helps. It comes back: the page is still missing.',
  }, { PinScreen });

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

mount(element, options, { PinScreen })

Builds the block inside the element and returns its handle. Hand it the Pin Screen it is built with.

handle.update(next = {})

Change options in place.

handle.board

handle.root

handle.destroy()

Stops it and cleans up after it.

1. Arriving404 rises out of the pins in a left-to-right wave; the label, headline, wit and actions rise in behind it.
2. At restThe number stands in the board; the board sleeps; its shadow on the page falls away from its lamp.
3. WipingThe visitor's hand presses the standing pins back toward flush in a 90px disc.
4. Coming backPressure halves every 2.7 s (heal 0.85): the number climbs back on its own and the board sleeps again.
5. Hover and focusThe button fills with the accent, the second link turns to it; both show a 2px focus ring.
6. PaletteWarm paper or dark slate, each with any pin finish; the caption names the material on screen.
7. TabletOne column under 900px with the board first, centred.
8. PhoneUnder 560px the board goes 5:4 with finer pins, the actions stack full width.
9. Reduced motionThe 404 is standing on the first paint and the pins ignore the pointer; every word is there.
10. Off screenThe board's loop pauses; the block runs nothing of its own.

Made of: Wipe and heal, Object on the page, Lamp true drop shadow, Requested path fallback, Container query recomposition, Palette tokens from one table.

Read more: How the Pin Screen works.

Original composition and copy. The only imagery is the Pin Screen drawing the number in canvas, and two CSS shadows. Faces: Big Shoulders and DM Mono (SIL OFL 1.1) as WOFF2, licences beside them.

• 01Pin ScreenThe pin-art toy, as a surface.

More blocks on the same object:

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