The word itself is the hero: a giant poster word made of black dots that flies in, forms and drifts, repelling from the cursor, on off-white paper. Minimal mono text bar, small subtitle and CTA below.
Turn any word into a living field of dots. One canvas, no dependencies.
Any word · MIT licensed
npx shadcn@latest add https://hyperblur.dev/r/hero-dot-text.jsonnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-text.tsx.
import { HeroDotText } from "@/components/hyperblur/hero-dot-text"
<HeroDotText word="LAUNCH" title="Ship words that glow." accent="#e11d48" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Type that floats off the page." | Main headline of the hero. |
| subtitle | string | "Turn any word into a living field of dots. One canvas, no dependencies." | Short paragraph under the headline. Empty hides it. |
| caption | string | "Any word · MIT licensed" | Small caption line next to the actions. Empty hides it. |
| command | string | "npx shadcn@latest add https://hyperblur.dev/r/hero-dot-text.json" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Get the kit", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Glyphwork" | Brand name in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Fonts", href: "#" }, { label: "Showcase", href: "#" }, { label: "Pricing", href: "#" }] | Links in the top bar. They collapse on narrow containers. |
| navCta | { label: string; href: string } | null | { label: "Log in", href: "#" } | Call-to-action link in the top bar. Pass null to hide it. |
| learnMore | { label: string; href: string } | null | { label: "How it works", href: "#" } | Secondary link near the bottom of the hero. Pass null to hide it. |
| accent | string | "#0d0d0d" | Color of the dots that make up the word, plus the primary button. The button text switches between dark and white for contrast when a hex color is given. |
| density | number | 1 | Multiplier for the number of dots. The letters are re-sampled to fit the size of the hero. Kept between 0.4 and 2. |
| speed | number | 1 | Multiplier for the fly-in and drifting motion. 0 holds the word still. |
| word | string | "HYPERBLUR" | The word to draw. It is rendered with the section font once the fonts have loaded, and re-sampled when it changes. Short words read best; an empty string draws nothing. |
| depth | number | 0.18 | Depth of the dots' float as a share of the glyph height, from 0.02 to 1. |
| swing | number | 32 | Sway amplitude in degrees, from 0 to 80. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |
| onSearch | () => void | undefined | Called when the search icon button in the top bar is pressed. |
| className | string | "" | Extra classes on the section. |
| style | React.CSSProperties | undefined | Inline styles on the section. |