Hand Press Launch

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).

Copy the hand-press-launch 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="hand-press-launch/hand-press-launch.css">
<div id="hand-press-launch"></div>

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

  const handPressLaunch = mount(document.getElementById('hand-press-launch'), {
    maker: 'Palma Instruments',
    edition: 'First edition · 250 made',
    name: 'Palma',
  }, { PinScreen });

  // handPressLaunch.update({ … });   change any option in place
  // handPressLaunch.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.

Events it fires, which bubble from the element: signup.

1. 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.
2. At restThe print stands in the pins under one lamp; the board sleeps.
3. Hand over the boardPins lift in a 100px disc around the pointer and let go after it leaves.
4. Invalid addressThe status line says so, the field is marked aria-invalid and focus returns to it; the first keystroke clears the error.
5. 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.
6. No action, not handledNothing is sent, and the status line says exactly that.
7. After the dateThe label reads Pre-orders and the days read now open.
8. PaletteMidnight with a signal accent, or porcelain; any pin finish.
9. TabletTwo columns under 1000px: the product across the top, board and signup side by side, specs in two columns.
10. PhoneOne column under 620px: the board square, the field stacked over a full-width button.
11. Reduced motionThe hand is pressed in on the first paint; the words have no entrance; signup confirms without the shake.
12. Off screenThe board's loop pauses; the block runs nothing of its own.

Made of: Pressed hand reveal, Deepest first arrival, Honest signup form, Cancelable signup event, Calendar day countdown, Container query recomposition.

Read more: How the Pin Screen 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. Faces: Outfit and Geist 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.2Pin 404A 404 standing out of a pin board.