A glass prism catches a beam of white light and fans it into a living spectrum behind the headline, with a spectrometer scale along the bottom. The spectrum sways on its own and tilts toward the pointer.
Spectra 3 · Signal decomposition
Spectra splits a single firehose of product events into the seven metrics your team actually acts on, refreshed every second and explained in plain language.
npx shadcn@latest add https://hyperblur.dev/r/hero-prism.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-prism.tsx.
import { HeroPrism } from "@/components/hyperblur/hero-prism"
<HeroPrism title="One dataset. Every insight." primaryCta={{ label: "Try it free", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Spectra 3 · Signal decomposition" | Monospace line with a spectrum chip above the headline. Hidden when empty. |
| title | string | "One stream in. Every signal out." | Headline. The last part is painted with a warm-to-violet gradient. |
| subtitle | string | "Spectra splits a single firehose..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Start splitting data", href: "#" } | White button with a spectrum border. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "See how it works", href: "#" } | Outlined button. null hides it. |
| showRuler | boolean | true | Shows the 380 to 700 nm spectrometer scale at the bottom. |
| interactive | boolean | true | Tilts the spectrum fan toward the pointer. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |