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.
Built with Pin Screen
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Wipe and heal, Object on the page, Lamp true drop shadow, Requested path fallback, Container query recomposition, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Pin Screen
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- Arriving404 rises out of the pins in a left-to-right wave; the label, headline, wit and actions rise in behind it.
- At restThe number stands in the board; the board sleeps; its shadow on the page falls away from its lamp.
- WipingThe visitor's hand presses the standing pins back toward flush in a 90px disc.
- Coming backPressure halves every 2.7 s (heal 0.85): the number climbs back on its own and the board sleeps again.
- Hover and focusThe button fills with the accent, the second link turns to it; both show a 2px focus ring.
- PaletteWarm paper or dark slate, each with any pin finish; the caption names the material on screen.
- TabletOne column under 900px with the board first, centred.
- PhoneUnder 560px the board goes 5:4 with finer pins, the actions stack full width.
- Reduced motionThe 404 is standing on the first paint and the pins ignore the pointer; every word is there.
- Off screenThe board's loop pauses; the block runs nothing of its own.
Notes
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.
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
How it works
Original composition and copy. The only imagery is the Pin Screen drawing the number in canvas, and two CSS shadows.