Pin Screen
The pin-art toy, as a surface. Press a word through polished pins under a raking lamp, drag it, wipe it, or shake it flat. Your hand is the mould.
What it is for
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.
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
- 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
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- 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.
- At restThe relief stands proud under the lamp (hold), the flush field sparkles; the loop is asleep and costs nothing.
- 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.
- RememberingWithout keep, pressure decays with a half-life set by memory, so a stroke lingers and lets go.
- Impression keptWith keep, whatever the hand pressed stays until reset(); the loop still sleeps once the pins settle.
- Shaken flatreset() drops every pin top to bottom in 0.3 s, then the relief presses back in.
- Off screen or hiddenThe loop pauses; a returning tab cannot launch the springs with a long frame.
- ResizedRebuilt at the new size, pitch refitted so the relief stays legible; a relief that had arrived is simply there.
- PhoneSmall boards get finer pins so the word stays at least ten pins tall; pan-y keeps vertical scrolling.
- Reduced motionThe relief standing and still on the first paint. No arrival, no springs, no pointer; nothing lost.
Notes
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.
Anatomy
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
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| text | text | The word behind the board. Empty is a plain board that takes the shape of whatever presses it. |
| shape | enum | The word, an open hand or a round mark. In code, any image or canvas works too. |
| finish | enum | Auto follows the page: a light board on a light finish, a dark one on a dark finish. |
| frame | enum | Frame |
| hold | boolean | Like the toy, the shape stays up. Off: it appears only under the hand. |
| keep | boolean | What the hand presses stays until the board is shaken flat. |
| pointer | enum | Lift pushes pins out from behind; wipe presses them back flat from the front. |
| pitch | number | The largest pitch. Small boards go finer so the relief stays legible. |
| pinSize | number | Head diameter as a share of the pitch. |
| radius | number | Hand radius (px) |
| depth | number | Relief depth |
| memory | number | How long a stroke stays when the impression is not kept. 0 lets go at once; 1 holds for seconds. |
| light | number | 0 is from above, clockwise. |
| intro | boolean | The relief comes up through the pins when the board first comes into view. |
| arrival | enum | A wave that reads left to right, or deepest first, like a hand pushed in from behind. |
Methods
- update
- replay
- reset
- pressAt
- state
- destroy
How it 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.