A minimal editorial hero on paper with a visible twelve-column grid, a huge tight headline that rises line by line, a single accent dot and a numbered index of services. Light by default, with a dark variant.
An independent practice of six designers. We build brand systems for museums, transit networks and companies that plan in decades.
Start a conversation
npx shadcn@latest add https://hyperblur.dev/r/hero-swiss.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-swiss.tsx.
import { HeroSwiss } from "@/components/hyperblur/hero-swiss"
<HeroSwiss lines={["Design for", "the long", "run"]} appearance="dark" />| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | ["We make", "quiet things", "that last"] | Headline lines. The second is indented one column and the last ends with an accent dot. |
| subtitle | string | "An independent practice of six designers..." | Short paragraph at the bottom left. Hidden when empty. |
| meta | string[] | ["Studio Brandt", "No. 07 / Autumn 2026", "Identity and wayfinding", "Zurich, CH"] | Masthead row above a ruled line. |
| services | { label: string; href: string }[] | 4 services | Numbered index links with a drawn rule and arrow on hover. |
| cta | { label: string; href: string } | null | { label: "Start a conversation", href: "#" } | Underlined link at the bottom right. null hides it. |
| footnote | string | "47.3769 N, 8.5417 E" | Mono text at the right of the footer rule. |
| accent | string | "#ff3b1f" | Color of the dot, the circle mark and hovers. |
| appearance | "light" | "dark" | "light" | Paper or ink background. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |