Neo-Brutal Hero
The page opener and its only h1, on the page grid. split puts the copy on columns 1–7 and the media on 8–12 (stacked under lg, media below); centered is copy only; stacked centres the copy with the media below at full width.
Swiss Tech MonoMotion
Hero
The page opener and its only h1, set across the whole 12-column grid. split (the mockup): the eyebrow (usually the AnnouncementBar pill) at the left, the kit readout at the right, the title across all columns, then the copy on 4 columns beside the media on 8 (stacked under lg). centered is text only. stacked puts the media full width below the copy.
Live, interactive React component · light themeResponsive
About the Swiss Tech Mono Hero
The page opener and its only h1, set across the whole 12-column grid. split (the mockup): the eyebrow (usually the AnnouncementBar pill) at the left, the kit readout at the right, the title across all columns, then the copy on 4 columns beside the media on 8 (stacked under lg). centered is text only. stacked puts the media full width below the copy. Parts enter on load in order: eyebrow, title (rising out of a mask, its Highlight wiping in), text, actions, note, then the media opening from its crop marks; everything settles by about 1.3 s. A Figure as media opens its plate itself, so its caption and legend fade in with the note instead of waiting for the plate. Under GridGuides ruler, tighten the top with className="min-h-0! pt-6! md:pt-4!".
It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
See it on a full page
Noir Aurora Hero
The page opener and its only h1, under the aurora (backdrop={<Aurora />}). stacked (the Noir hero) centres the copy with the product frame rising below it; centered is copy only; split puts the copy beside the media (stacked under lg).
Soft Bento Hero
The page opener and its only h1. split puts the text beside the media from xl (stacked above it below), centered is text only, stacked centres the text with the media below.