A typographic hero in bone on black with a giant tight headline, a rotating italic word, oversized numerals and a two-row keyword marquee.
An independent studio building identities, websites and products for companies with something to say. Lisbon and New York, since 2014.
npx shadcn@latest add https://hyperblur.dev/r/hero-type.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-type.tsx.
import { HeroType } from "@/components/hyperblur/hero-type"
<HeroType title="Software that" words={["ships.", "scales.", "sticks."]} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Brands that" | Fixed part of the headline. The rotating word follows it. |
| words | string[] | ["move.", "last.", "sell.", "matter."] | Words that roll into place one after another in the accent color. |
| subtitle | string | "An independent studio building identities..." | Supporting paragraph under the headline. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Start a project", href: "#" } | Accent pill with a round arrow. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "See selected work", href: "#" } | Underlined text link. null hides it. |
| meta | string[] | ["Halden Studio", "Brand & product design", "Lisbon / New York", "Booking Q1 2027"] | Small caps strip at the top. The first item gets the accent dot, the last a live dot. |
| stats | { value: string; suffix?: string; label: string }[] | [240+, 12, 38] | Oversized numerals beside the copy. The suffix is set small in the accent color. |
| keywords | string[] | ["Brand identity", "Web design", ...] | First marquee row, scrolling left. Empty array hides the marquee. |
| secondaryKeywords | string[] | ["Strategy", "Naming", ...] | Second marquee row in outlined type, scrolling right. Falls back to keywords when empty. |
| interval | number | 2400 | Milliseconds each rotating word stays on screen. |
| accent | string | "#ff4a1c" | The single accent color: rotating word, dots, numeral suffixes and the main button. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. Use h2 when the page already has an h1. |