A black hero with a holographic torus or Möbius band built from square dots that keep flowing across its surface, with helical light lanes, rim light and a dotted projector base. It turns slowly on two axes and leans toward the pointer.
Stream, retry and replay through a single continuous pipeline that never stalls and scales with your traffic.
99.99% uptime · 3 regions · MIT licensed
npx hyperblur add hero-dot-torusnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-torus.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-torus.tsx.
import { HeroDotTorus } from "@/components/hyperblur/hero-dot-torus"
<HeroDotTorus shape="mobius" title="A pipeline with no seams." accent="#ffb84d" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "One loop for every event you ship." | Headline at the bottom left. |
| subtitle | string | "Stream, retry and replay through a single continuous pipeline that never stalls and scales with your traffic." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "99.99% uptime · 3 regions · MIT licensed" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-torus" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Try it free", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Loopwell" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Product", href: "#" }, { label: "Pricing", href: "#" }, { label: "Docs", 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: "How it works", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#3ee6c8" | Rim color of the shape, the projector base, 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 surface points (about 10,000 for the torus and 5,600 for the band at 1, fewer on narrow screens). Kept between 0.2 and 2. |
| speed | number | 1 | Multiplier for the rotation, the surface flow and the scan sweep. 0 freezes the shape but it still tilts toward the pointer. |
| shape | "torus" | "mobius" | "torus" | The surface to draw: a ring torus whose dots flow around the tube, or a Möbius band with a half twist whose dots slide along the strip. |
| 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. |