A black hero with an open holographic hand of tiny dots, palm toward the viewer with a slight three-quarter turn, standing on a projector base with a dotted wrist cuff. The fingers roll in a slow wave and curl a little when the pointer moves toward the bottom of the hero.
Hand tracking for the web: 21 joints per hand at 60 fps from any webcam, with gestures you define in a few lines.
60 fps · 21 joints · runs on device
npx hyperblur add hero-dot-handnpx shadcn@latest add https://hyperblur.dev/r/hero-dot-hand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-hand.tsx.
import { HeroDotHand } from "@/components/hyperblur/hero-dot-hand"
<HeroDotHand title="Point, pinch and swipe." accent="#7fb3ff" wave={0.6} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Interfaces you can reach out and touch." | Headline at the bottom left. |
| subtitle | string | "Hand tracking for the web: 21 joints per hand at 60 fps from any webcam, with gestures you define in a few lines." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "60 fps · 21 joints · runs on device" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-hand" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Try the demo", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Palmar" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Gestures", href: "#" }, { label: "Docs", href: "#" }, { label: "Showcase", 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: "Watch it move", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#ff8a5b" | 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 7,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. |
| wave | number | 1 | Strength of the traveling finger roll, from 0 (still fingers) to 2. |
| curl | boolean | true | Curls the fingers slightly as the pointer approaches the bottom of the hero. |
| 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. |