A black hero with a holographic ringed planet built from thousands of square dots: banded latitudes, three rings with gaps that pass in front of and behind the sphere, the planet shadow on the rings, a scan sweep and a dotted projector base.
Interfaces that pull people in and keep them in orbit. Ship the source, own every line, and tune the motion to your brand.
3 rings · 15,000 dots · zero dependencies
npx hyperblur add hero-dot-saturnnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-saturn.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-saturn.tsx.
import { HeroDotSaturn } from "@/components/hyperblur/hero-dot-saturn"
<HeroDotSaturn title="Pull every user into orbit." accent="#ffc27a" ringTilt={0.35} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Build products with their own gravity." | Headline at the bottom left. |
| subtitle | string | "Interfaces that pull people in and keep them in orbit. Ship the source, own every line, and tune the motion to your brand." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "3 rings · 15,000 dots · zero dependencies" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-saturn" | 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 | "Annulus" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Platform", href: "#" }, { label: "Pricing", href: "#" }, { label: "Changelog", href: "#" }] | Centered mono links in the top bar. Hidden below 640px of container width. |
| navCta | { label: string; href: string } | null | { label: "Log in", 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 | "#c4a7ff" | 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 15,600 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. |
| ringTilt | number | 0.45 | Inclination of the ring plane toward the viewer, in radians. 0 shows the rings edge on; larger values open them up. Kept between -1.2 and 1.2. |
| bands | number | 9 | Number of latitude bands on the planet. Bright and dim bands alternate. Kept between 2 and 24. |
| 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. |