Impression Hero
A studio’s hero on a full-bleed board of brass pins. The brand word rises out of it under a raking lamp, and the visitor’s hand lifts the pins between the nav and the headline.
Built with Pin Screen
What it is for
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.
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 brand word, Full bleed object hero, Scrim framing, Container query recomposition, Arrival choreography, Palette from pin finish
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Pin Screen
- States
- 9 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- 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.
- At restThe word stands proud in the pins; the board is asleep and costs nothing.
- 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).
- 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.
- PaletteBrass on warm black, steel on cool black, or blackened steel with a signal accent: one table, applied as custom properties.
- TabletOne column under 960px: the headline, then copy and button, then the notes as a row.
- 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.
- Reduced motionThe word is standing on the first paint and the pins ignore the pointer; the copy has no entrance. Every word is present.
- Off screenThe board's loop pauses; the block runs nothing of its own.
Notes
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.
Anatomy
Pressed brand word, Full bleed object hero, Scrim framing, Container query recomposition, Arrival choreography, Palette from pin finish
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| brand | text | The wordmark in the nav. |
| word | text | Stands out of the pins. Short and wide reads best. |
| eyebrow | text | Eyebrow |
| headline | text | Headline |
| accent | text | The last words, in the lamp’s colour. |
| lede | text | One line of copy |
| cta | text | Button |
| href | text | Button link |
| nav | text | Comma-separated, up to five. |
| contact | text | Nav button |
| meta | text | Corner note |
| finish | enum | Brass on warm black, steel on cool black, blackened steel with a signal accent. |
| light | number | 0 is from above, clockwise. |
| pitch | number | The largest pitch; small screens go finer. |
| depth | number | Relief depth |
| keep | boolean | What the hand presses stays, like the real toy. |
Methods
- update
- board
- root
- destroy
How it works
Original composition; Tallow, its studio and its copy are invented. The only imagery is the Pin Screen drawing the word in canvas.