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.
Hero Sections
14 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.
Neo-Brutal Frame
Device chrome around a screenshot or mock, floating on a 10 px hatched offset (the page's one floating object): a browser (outlined dots and a mono address bar), a window (a title bar in the display face), a phone (keeps its 9:19 shape) or a flat plain panel.
Neo-Brutal Product Mock
A data-driven app dashboard, the hero's one floating object: a window bar with the kit mark, the title and the subtitle as a neutral badge, folder tabs, the first metric's big figure that rolls in with the entrance (from a value near the final one), its delta pill and note (a "Month end · €61k–67k" string splits into label and value), the chart (solid cobalt area, hatched volt band, volt marker), ruled KPI cells for the next three metrics, an ink status chip with a pulsing volt dot over the top edge, and in wide containers a sidebar and share bars.
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).
Noir Aurora Frame
Device chrome around a screenshot or mock: a browser (address bar), a window (title bar), a phone (keeps its 9:19 shape) or a plain panel, all in a lit glass bezel with an aurora line along the top edge where the sky meets it.
Noir Aurora Product Mock
A data-driven app dashboard for heroes, CTAs and feature blocks: sidebar, title, period tabs, metrics that count up, a chart, share bars, people and a status line, inside a Frame.
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.
Soft Bento Hero Stage
The blue stage behind the hero composition: brand clay with a peach and a lilac light, paper grain and wind grooves (aria-hidden), entering with a scale.
Soft Bento Frame
Clay chrome around a screenshot or mock: a browser (address bar), a window (title bar), a phone (keeps its 9:19 shape) or a plain panel.
Soft Bento Product Mock
A data-driven app dashboard in clay for heroes, CTAs and feature blocks: sidebar, title, period tabs, a rolling revenue figure, KPI wells (with sparklines), a chart, share bars, people and a status line, inside a Frame.
Soft Bento Float Card
A satellite card for hero and CTA compositions: white clay, candy or the blue slab, with rounded-card and raised depth.
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.
Swiss Tech Mono Frame
Device chrome around a screenshot or mock: a browser (a sunken mono address field), a window (three small square lights), a squared phone (keeps its 9:19 shape) or a plain panel, on a 12 px panel with a hairline edge and a tight shadow.
Swiss Tech Mono Product Mock
The ink instrument for heroes and feature blocks: a title bar with period tabs, people and a lime Share button, a ruled row of KPIs that count up (the first one large), a headed chart that draws (every second x label, forecast weeks in lime) beside headed share bars with their total, A/B/C key squares that a Figure legend can name, and a live status line with an optional goal bar.
Preview everything. Take three a day, free.
A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.