A black hero that turns an SVG path into a hologram of extruded dots that swings like a pendulum, with a bright front face, lit side walls, an upward scan band, brief signal flicker and pointer tilt. Defaults to the Hyperblur mark.
Drop in any SVG path and it turns into a swinging hologram of extruded dots, front face bright and edges lit. Plain source, no runtime.
Any SVG path · 6 depth layers · MIT licensed
npx hyperblur add hero-dot-logonpx shadcn@latest add https://hyperblur.dev/r/hero-dot-logo.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-logo.tsx.
import { HeroDotLogo } from "@/components/hyperblur/hero-dot-logo"
<HeroDotLogo path="M4 4 H28 V28 H4 Z M10 10 V22 H22 V10 Z" viewBox="0 0 32 32" accent="#7fb3ff" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Your mark, projected in three dimensions." | Headline at the bottom left. |
| subtitle | string | "Drop in any SVG path and it turns into a swinging hologram of extruded dots, front face bright and edges lit. Plain source, no runtime." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "Any SVG path · 6 depth layers · MIT licensed" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-logo" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Upload your mark", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Slipstream" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Product", href: "#" }, { label: "Brand kit", href: "#" }, { label: "Changelog", 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 | "#2f7bff" | 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 mark is re-sampled to fit the size of the hero. Kept between 0.2 and 2. |
| speed | number | 1 | Multiplier for the swing or spin, the scan sweep and the floating motes. 0 holds the mark still while it keeps tilting toward the pointer. |
| path | string | "M18.0 9.0 H33.0 L28.0 23.0 H13.0 Z M13.5 9.0 H16.1 L11.1 23.0 H8.5 Z M10.0 9.0 H11.6 L6.6 23.0 H5.0 Z M7.2 9.0 H8.1 L3.1 23.0 H2.2 Z" | SVG path data (the d attribute) of the mark, filled with the nonzero rule. Several subpaths are fine. Falls back to the default mark when the path draws nothing. |
| viewBox | string | "0 0 36 32" | The viewBox the path coordinates refer to, as four numbers. |
| depth | number | 0.35 | Extrusion depth as a share of the mark height, from 0.02 to 1.5. |
| swing | number | 50 | Pendulum amplitude around the vertical axis in degrees, from 0 to 85. Ignored when spin is true. |
| spin | boolean | false | Full slow turn around the vertical axis instead of the swing. The turn slows down through the front and back views and speeds through the edge-on view; back faces are dimmed. |
| 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. |