A black hero with a holographic atom of square dots: a glowing nucleus of clustered spheres, faint dotted orbit rings at different tilts and bright electrons with fading trails, floating over a projector base and leaning toward the pointer.
One small, typed nucleus and every service moving around it at its own pace. Observable from the first request, and every line is yours to change.
1 nucleus · 5 orbits · one canvas at 60 fps
npx hyperblur add hero-dot-orbitnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-orbit.tsx.
import { HeroDotOrbit } from "@/components/hyperblur/hero-dot-orbit"
<HeroDotOrbit title="Everything revolves around your core." orbits={3} electrons={2} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "A stable core with everything in orbit." | Headline at the bottom left. |
| subtitle | string | "One small, typed nucleus and every service moving around it at its own pace. Observable from the first request, and every line is yours to change." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "1 nucleus · 5 orbits · one canvas at 60 fps" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-orbit" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Deploy the core", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Valence" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Runtime", href: "#" }, { label: "Integrations", href: "#" }, { label: "Status", href: "#" }] | Centered mono links in the top bar. Hidden below 640px of container width. |
| navCta | { label: string; href: string } | null | { label: "Dashboard", href: "#" } | Outlined mono button at the right of the top bar. Pass null to hide it. |
| learnMore | { label: string; href: string } | null | { label: "Learn more", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#5aa9ff" | Rim color of the hologram, the projector glow, the caption details and 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 (about 7,700 at 1). Kept between 0.2 and 2. Narrow screens draw fewer dots automatically. |
| speed | number | 1 | Multiplier for the motion and the scan sweep. 0 freezes the animation while the hologram still leans toward the pointer. |
| orbits | number | 5 | Number of orbit rings, spread evenly around the nucleus. Kept between 1 and 8. |
| electrons | number | 1 | Electrons per orbit, each with a short fading trail. Kept between 1 and 3. |
| 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. |