A black hero with a holographic spiral galaxy made of thousands of tiny square dots: a bright core, glowing arms that wind with inner stars moving faster, a sparse halo and a projector base below. A scan band sweeps up through it and it tilts toward the pointer.
Every piece is plain React you copy into your repo. No runtime to install, no account, nothing orbiting your bundle.
3 spiral arms · 15k stars · MIT licensed
npx hyperblur add hero-dot-galaxynpx shadcn@latest add https://hyperblur.dev/r/hero-dot-galaxy.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-galaxy.tsx.
import { HeroDotGalaxy } from "@/components/hyperblur/hero-dot-galaxy"
<HeroDotGalaxy title="Every component in one place." arms={2} tightness={0.28} accent="#7fb3ff" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "A whole universe of effects, one command away." | Headline at the bottom left. |
| subtitle | string | "Every piece is plain React you copy into your repo. No runtime to install, no account, nothing orbiting your bundle." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "3 spiral arms · 15k stars · MIT licensed" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-galaxy" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Start building", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Corvid" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Docs", href: "#" }, { label: "Gallery", href: "#" }, { label: "Changelog", href: "#" }] | Centered mono links in the top bar. Hidden below 640px of container width. |
| navCta | { label: string; href: string } | null | { label: "Sign in", href: "#" } | Outlined mono button at the right of the top bar. Pass null to hide it. |
| learnMore | { label: string; href: string } | null | { label: "Explore", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#a99bff" | Color of the outer arms, the projector base, the caption details and the primary button. The core stays warm white. The button text switches between dark and white for contrast when a hex color is given. |
| density | number | 1 | Multiplier for the number of stars (about 15,000 at 1, fewer on narrow screens). Kept between 0.2 and 2. |
| speed | number | 1 | Multiplier for the rotation, the scan sweep and the projector rings. 0 freezes the galaxy but it still tilts toward the pointer. |
| arms | number | 3 | Number of spiral arms, from 1 to 8. |
| tightness | number | 0.35 | Pitch of the logarithmic spiral, from 0.12 to 1.2. Lower values wind the arms more tightly. |
| 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. |