Hand Press Launch
A coming-soon section revealed by a hand. As it scrolls into view a palm presses into a pin board from behind, fingertips last, and stays; the date and a real signup sit beside it.
Built with Pin Screen
What it is for
Launch a made thing (an instrument, a tool, a limited run) with a reveal that says handmade and touch-me before any copy does, while keeping the page honest and useful: one date, one field, one promise, and a form that really sends (or plainly says it did not).
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
- Pressed hand reveal, Deepest first arrival, Honest signup form, Cancelable signup event, Calendar day countdown, Container query recomposition
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Pin Screen
- States
- 12 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- ArrivingThe hand presses into the board deepest first, like a hand pushed into the back of the toy; the name, promise, date, form and specs rise in behind it.
- At restThe print stands in the pins under one lamp; the board sleeps.
- Hand over the boardPins lift in a 100px disc around the pointer and let go after it leaves.
- Invalid addressThe status line says so, the field is marked aria-invalid and focus returns to it; the first keystroke clears the error.
- Signed upPosts to the configured action, or thanks the visitor when the page handles the cancelable signup event; either way the board shakes flat and the hand presses in again.
- No action, not handledNothing is sent, and the status line says exactly that.
- After the dateThe label reads Pre-orders and the days read now open.
- PaletteMidnight with a signal accent, or porcelain; any pin finish.
- TabletTwo columns under 1000px: the product across the top, board and signup side by side, specs in two columns.
- PhoneOne column under 620px: the board square, the field stacked over a full-width button.
- Reduced motionThe hand is pressed in on the first paint; the words have no entrance; signup confirms without the shake.
- Off screenThe board's loop pauses; the block runs nothing of its own.
Notes
Original composition; Palma Instruments and its instrument are invented. The hand is the Pin Screen's procedural shape drawn in canvas, not a photograph. Faces: Outfit and Geist Mono (SIL OFL 1.1) as WOFF2, licences beside them.
Anatomy
Pressed hand reveal, Deepest first arrival, Honest signup form, Cancelable signup event, Calendar day countdown, Container query recomposition
Usage notes
Launch a made thing (an instrument, a tool, a limited run) with a reveal that says handmade and touch-me before any copy does, while keeping the page honest and useful: one date, one field, one promise, and a form that really sends (or plainly says it did not).
Options
| Option | Type | Description |
|---|---|---|
| maker | text | Maker |
| edition | text | Edition note |
| name | text | Product name |
| promise | text | Promise |
| body | text | Body |
| specs | text | “Term: value” pairs separated by semicolons, up to six. |
| date | text | YYYY-MM-DD. The days to go are counted in the visitor’s browser. |
| label | text | Date label |
| fieldLabel | text | Field label |
| button | text | Button |
| fine | text | Fine print |
| action | text | Where the form posts. Empty: nothing is sent (listen for the signup event instead). |
| palette | enum | Midnight with a signal accent, or porcelain. |
| finish | enum | Pins |
| light | number | Light from (degrees) |
Methods
- update
- board
- root
- destroy
How it works
Original composition; Palma Instruments and its instrument are invented. The hand is the Pin Screen's procedural shape drawn in canvas, not a photograph.