Impression Hero

Open a studio, maker or brand site with its name as an object rather than a logo: the word is physically there, lit and shadowed, and the first thing a visitor does is run a hand across it, while the headline, the pitch and the way in stay quiet, legible and out of its way.

Copy the impression-hero 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="impression-hero/impression-hero.css">
<div id="impression-hero"></div>

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

  const impressionHero = mount(document.getElementById('impression-hero'), {
    brand: 'Tallow',
    word: 'TALLOW',
    eyebrow: 'Industrial design & small-batch fabrication',
  }, { PinScreen });

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

1. ArrivingThe word rises in a left-to-right wave within a second of the section appearing; the eyebrow, headline, copy and button follow it up at 0.55–1.1 s.
2. At restThe word stands proud in the pins; the board is asleep and costs nothing.
3. Hand over the boardPins lift in a 150px disc around the pointer, brighter, on visible shafts, casting longer shadows; they let go after it leaves (or stay, with keep).
4. Hover and focusLinks go from muted to ink; the button fills with the hover colour and its arrow slides; every link shows a 2px focus ring.
5. PaletteBrass on warm black, steel on cool black, or blackened steel with a signal accent: one table, applied as custom properties.
6. TabletOne column under 960px: the headline, then copy and button, then the notes as a row.
7. PhoneUnder 640px the board takes the top two thirds with finer pins, the copy sits on solid ground below, the nav drops to a quiet second row and the button goes full width.
8. Reduced motionThe word is standing on the first paint and the pins ignore the pointer; the copy has no entrance. Every word is present.
9. Off screenThe board's loop pauses; the block runs nothing of its own.

Made of: Pressed brand word, Full bleed object hero, Scrim framing, Container query recomposition, Arrival choreography, Palette from pin finish.

Read more: How the Pin Screen works.

Original composition; Tallow, its studio and its copy are invented. The only imagery is the Pin Screen drawing the word in canvas. Faces: Gloock and Bricolage Grotesque (SIL OFL 1.1) as WOFF2, licences beside them.

• 01Pin ScreenThe pin-art toy, as a surface.

More blocks on the same object:

• 01.2Pin 404A 404 standing out of a pin board.
• 01.3Hand Press LaunchA coming-soon section revealed by a hand.