ns-ui / hero-letterpress-lockup
reload to watch the line compose, then lock
SET IN TYPE, LOCKED FOR GOOD
COMPOSING ROOM
Every glyph rides its own rail into place. Once the line is full, the quoin tightens and it doesn't move again.
ns-ui / loud
A letterpress hero whose identity is a terminal lock-up event — headline glyphs slide in as metal sorts on individually sprung composing rails, then the quoin tightens in one mechanical clunk: letter-spacing compresses, a hairline chase snaps to fit, and an impression flash prints the subhead beneath.
Use when a hero whose headline arrives once as individually sprung glyph sorts and then commits in a single mechanical tightening (letter-spacing compression + a hairline chase frame snapping to fit + an impression flash) before going fully static — unlike hero-dipole-field (continuous cursor-attraction field) or text-ligature-melt (hover-driven glyph fusion) or text-variable-weight (weight as a live continuous state), this one is about type becoming FIXED: the arrival is only the setup for one terminal event, not an ongoing interaction.
Install
npx shadcn add https://design.helpmarq.comns-ui / hero-letterpress-lockup
reload to watch the line compose, then lock
COMPOSING ROOM
Every glyph rides its own rail into place. Once the line is full, the quoin tightens and it doesn't move again.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow? | string | "COMPOSING ROOM" | mono eyebrow label above the headline |
| headline? | string | "SET IN TYPE, LOCKED FOR GOOD" | headline text — split into per-glyph rails; also the sr-only h1's full string |
| subhead? | string | "Every glyph rides its own rail into place. Once the line is full, the quoin tightens and it doesn't move again." | subhead copy, printed beneath once the line locks |
| className? | string | — | — |