Clear glass spheres float beside the copy and bend the grid behind them, each with a mirrored lens image, chromatic rim, caustic and a tinted shadow. The orbs drift in depth with the pointer.
Lens 2.4 · Trace maps now render in 3D
Lens follows a request from the browser to the database and back, so you can spot the slow hop before your customers do.
npx shadcn@latest add https://hyperblur.dev/r/hero-glass-orbs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-glass-orbs.tsx.
import { HeroGlassOrbs } from "@/components/hyperblur/hero-glass-orbs"
<HeroGlassOrbs title="Observability you can see through" accent="#7c3aed" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Lens 2.4 · Trace maps now render in 3D" | Glass pill above the headline. Hidden when empty. |
| title | string | "See through every layer of your stack" | Headline. |
| subtitle | string | "Lens follows a request..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Start tracing free", href: "#" } | Pearl white button. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Book a walkthrough", href: "#" } | Frosted outlined button. null hides it. |
| points | string[] | ["OpenTelemetry native", "14-day retention free", "EU and US regions"] | Short check-marked reassurances under the buttons. Empty array hides them. |
| accent | string | "#2f7bff" | Tints the backdrop glow, the pill dot and the button shadow. |
| interactive | boolean | true | Moves each orb by its own depth when the pointer moves. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |