A black hero with a holographic double helix of square dots standing on a projector base. Two strands joined by base pair rungs turn about their axis while bright pulses run along the strands and light up each rung they pass.
Version every dataset and replay every experiment. A pipeline that pairs each change with its proof, from the first sample to the final figure.
6 turns · 60 base pairs · runs in any React app
npx hyperblur add hero-dot-dnanpx shadcn@latest add https://hyperblur.dev/r/hero-dot-dna.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-dna.tsx.
import { HeroDotDna } from "@/components/hyperblur/hero-dot-dna"
<HeroDotDna title="Sequence everything." accent="#7fb3ff" pulses={4} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Two strands. One source of truth." | Headline at the bottom left. |
| subtitle | string | "Version every dataset and replay every experiment. A pipeline that pairs each change with its proof, from the first sample to the final figure." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "6 turns · 60 base pairs · runs in any React app" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-dna" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Run a sequence", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Strandline" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Pipelines", href: "#" }, { label: "Research", href: "#" }, { label: "Docs", href: "#" }] | Centered mono links in the top bar. Hidden below 640px of container width. |
| navCta | { label: string; href: string } | null | { label: "Request access", 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 | "#38e8c6" | 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 10,000 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. |
| turns | number | 6 | Full turns of the helix, which gives twice as many strand crossings. Ten base pair rungs are drawn per turn. Kept between 2 and 16. |
| pulses | number | 3 | Number of bright pulses traveling up the strands, alternating between the two. 0 turns them off. Kept between 0 and 8. |
| 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. |