# Pin 404

A 404 standing out of a pin board. The visitor wipes it flat by hand; a moment later it climbs back up, because the page is still missing.

Block · With a Pass · https://tactileui.dev/blocks/pin-404

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| code | text | Label |
| title | text | Headline |
| wit | text | One line of wit |
| path | text | Empty shows the real address the visitor asked for. |
| home | text | Button |
| homeHref | text | Button link |
| report | text | Second link |
| reportHref | text | Second link, address |
| caption | text |  |
| palette | enum | Warm paper, or dark slate. |
| finish | enum | Pins |
| light | number | The pins’ lamp; the board’s shadow on the page follows it. |
| heal | number | How slowly the wiped number rises again. |

## Methods

- update
- board
- root
- destroy

## States

1. **Arriving**: 404 rises out of the pins in a left-to-right wave; the label, headline, wit and actions rise in behind it.
2. **At rest**: The number stands in the board; the board sleeps; its shadow on the page falls away from its lamp.
3. **Wiping**: 
4. **Coming back**: 
5. **Hover and focus**: The button fills with the accent, the second link turns to it.
6. **Palette**: Warm paper or dark slate, each with any pin finish; the caption names the material on screen.
7. **Tablet**: 
8. **Phone**: 
9. **Reduced motion**: The 404 is standing on the first paint and the pins ignore the pointer; every word is there.
10. **Off screen**: The board's loop pauses; the block runs nothing of its own.

## How it works

Original composition and copy. The only imagery is the Pin Screen drawing the number in canvas, and two CSS shadows.