A black hero that turns an SVG or PNG into a hologram of dots: the shape comes from the alpha channel (or from dark pixels when there is none) and the depth from the image tones. It sways gently with an upward scan band. Defaults to a rocket.
Feed it any SVG or PNG and the outline becomes a hologram of dots with relief taken from its tones. Ships as one file you own.
SVG or PNG · luminance relief · MIT licensed
npx hyperblur add hero-dot-silhouettenpx shadcn@latest add https://hyperblur.dev/r/hero-dot-silhouette.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-silhouette.tsx.
import { HeroDotSilhouette } from "@/components/hyperblur/hero-dot-silhouette"
<HeroDotSilhouette src="/logo-mark.png" title="Your product, in light." accent="#7fb3ff" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Launch day, rendered in light." | Headline at the bottom left. |
| subtitle | string | "Feed it any SVG or PNG and the outline becomes a hologram of dots with relief taken from its tones. Ships as one file you own." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "SVG or PNG · luminance relief · MIT licensed" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-silhouette" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Book a launch", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Apogee" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Missions", href: "#" }, { label: "Telemetry", href: "#" }, { label: "Careers", 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: "Learn more", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#ff8a4c" | Rim color of the hologram, the scan line, the 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 point budget (up to about 18,000 points at 1 on wide screens, half that below 640px). The image is re-sampled to fit the size of the hero. Kept between 0.2 and 2. |
| speed | number | 1 | Multiplier for the sway, the scan sweep and the floating motes. 0 holds the shape still while it keeps leaning toward the pointer. |
| src | string | rocket SVG data URI | Image to project: a data URI or a URL of an SVG or PNG. Transparent images use their alpha as the shape; opaque ones use dark pixels. Cross-origin images need CORS headers; if the image fails to load or cannot be read, the default rocket is shown. |
| relief | number | 0.25 | Depth taken from the image tones plus a soft dome toward the middle of the shape, as a share of its height, from 0 to 1. Lighter areas come forward. |
| swing | number | 28 | Sway amplitude around the vertical axis in degrees, from 0 to 80. |
| 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. |