A poster-scale typographic hero with three lines that each move differently: letters pump like an equalizer, an outlined line slides as a marquee and a color wave runs through the last line, whose letters flip on hover.
We design identities that refuse to sit still: type systems, motion languages and launch films for brands that live on screens.
npx shadcn@latest add https://hyperblur.dev/r/hero-kinetic.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-kinetic.tsx.
import { HeroKinetic } from "@/components/hyperblur/hero-kinetic"
<HeroKinetic lines={["Build", "it", "louder"]} accent="#ff5c35" />| Prop | Type | Default | Description |
|---|---|---|---|
| lines | [string, string, string] | ["Motion", "is the", "message"] | The three headline lines: equalizer, sliding outline and color wave. |
| subtitle | string | "We design identities that refuse to sit still..." | Paragraph in the footer row. Hidden when empty. |
| meta | string[] | ["Kinetik Studio", "Type in motion since 2014", "Berlin / Remote", "Open for Q1 2027"] | Mono strip at the top. The first item gets a glowing dot. |
| primaryCta | { label: string; href: string } | null | { label: "Start a project", href: "#" } | Accent pill with a round arrow that turns on hover. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Showreel 2026", href: "#" } | Outlined pill. null hides it. |
| accent | string | "#c8ff3d" | Color of the wave, the outline strokes and the primary button. |
| speed | number | 1 | Multiplier for every loop. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |