A pure black hero with a huge canvas planet of thousands of tiny dots where the continents stand out bright against a sparse ocean. It spins on a tilted axis, leans toward the pointer, with a bottom-aligned headline and an install command.
Deploy once and serve every region from the nearest point of presence. Plain source you own, no runtime and no lock-in.
6 continents · 40 edge regions · MIT licensed
npx hyperblur add hero-dot-earthnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-earth.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-earth.tsx.
import { HeroDotEarth } from "@/components/hyperblur/hero-dot-earth"
<HeroDotEarth title="Deploy close to every user." accent="#7fb3ff" oceanDots={0.2} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Software that reaches every continent." | Headline at the bottom left. |
| subtitle | string | "Deploy once and serve every region from the nearest point of presence. Plain source you own, no runtime and no lock-in." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "6 continents · 40 edge regions · MIT licensed" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-earth" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Get started", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Meridian" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Docs", href: "#" }, { label: "Examples", href: "#" }, { label: "Kit", 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: "Learn more", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#ffb84d" | Rim color of the planet, 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 points (about 5,400 at 1, mostly on land). Kept between 0.2 and 2. |
| oceanDots | number | 0.14 | Share of ocean points that are kept, from 0 to 1. Lower values make the continents stand out more; 1 draws the whole sphere evenly. |
| speed | number | 1 | Multiplier for the rotation and the drifting dust. 0 keeps the sphere still but still tilting toward the pointer. |
| 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. |