A black hero with a stylized holographic bust drawn as horizontal dotted contour lines: skull, brow, nose, lips, ears, dim eye hollows, neck and shoulders on a projector base. It turns its head slowly while a scan line sweeps down and makes the face features flare.
Verify people at a glance with liveness, document match and fraud signals in a single API call. Built for regulated teams.
0.8 s median · 190 countries · ISO 27001
npx hyperblur add hero-dot-headnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-head.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-head.tsx.
import { HeroDotHead } from "@/components/hyperblur/hero-dot-head"
<HeroDotHead title="Know who is on the other side." accent="#7fb3ff" swing={25} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Identity checks in under a second." | Headline at the bottom left. |
| subtitle | string | "Verify people at a glance with liveness, document match and fraud signals in a single API call. Built for regulated teams." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "0.8 s median · 190 countries · ISO 27001" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-head" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Get API keys", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Facet" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Platform", href: "#" }, { label: "Docs", href: "#" }, { label: "Customers", href: "#" }] | Centered mono links in the top bar. Hidden below 640px of container width. |
| navCta | { label: string; href: string } | null | { label: "Contact sales", href: "#" } | Outlined mono button at the right of the top bar. Pass null to hide it. |
| learnMore | { label: string; href: string } | null | { label: "See the flow", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#5eead4" | 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 8,500 at 1, 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. |
| swing | number | 35 | Half angle of the slow head turn, in degrees (0 to 90). |
| scan | boolean | true | Shows the scan line that sweeps from top to bottom and brightens the face features as it passes. |
| 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. |