A black hero with a holographic brain made of tiny dots: two hemispheres with winding folds, a cerebellum and a brain stem, seen from a three-quarter angle above a projector base. Signals crawl along the folds and synapses flash while a scan band sweeps up.
Capture notes, decisions and docs in one place, then find anything in milliseconds. Local-first and end-to-end encrypted.
12 ms search · 40k teams · SOC 2 Type II
npx hyperblur add hero-dot-brainnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-brain.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-brain.tsx.
import { HeroDotBrain } from "@/components/hyperblur/hero-dot-brain"
<HeroDotBrain title="Think faster together." accent="#7fb3ff" activity={1.5} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "A second brain for your whole team." | Headline at the bottom left. |
| subtitle | string | "Capture notes, decisions and docs in one place, then find anything in milliseconds. Local-first and end-to-end encrypted." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "12 ms search · 40k teams · SOC 2 Type II" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-brain" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Start free", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Cortexa" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Product", href: "#" }, { label: "Research", href: "#" }, { label: "Pricing", 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 | "#c084fc" | Rim color of the hologram, the projector glow 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 16,000 at 1, at most 24,000, fewer below 640px of width). Kept between 0.2 and 2. |
| speed | number | 1 | Multiplier for the sway, the scan sweep and the animation. 0 freezes the motion but keeps the pointer tilt. |
| folds | number | 1 | Depth of the folds and how strongly the dots gather along the grooves, from 0 (smooth hemispheres) to 2. |
| activity | number | 1 | Amount of neural activity: crawling signal chains and synapse flashes, from 0 (none) to 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. |