A product showcase with copy on the left and a browser frame on a gradient stage whose page scrolls slowly, with floating callouts pointing at what matters.
Lumen 3.0 is live
Every push becomes a live, shareable preview with performance, accessibility and dark mode checked before anyone hits merge.
npx shadcn@latest add https://hyperblur.dev/r/showcase-browser.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-browser.tsx.
import { ShowcaseBrowser } from "@/components/hyperblur/showcase-browser"
<ShowcaseBrowser url="lumen.app/launch" accent="#ff6b4a" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Lumen 3.0 is live" | Label with a pulsing dot above the title. |
| title | string | "See your site the way customers do" | Section heading. |
| subtitle | string | "Every push becomes a live, shareable preview..." | Supporting paragraph under the title. |
| points | string[] | 3 points | Checklist under the paragraph. Pass an empty array to hide it. |
| primaryCta | { label: string; href: string } | null | { label: "Start for free", href: "#" } | Filled pill button. |
| secondaryCta | { label: string; href: string } | null | { label: "Book a demo", href: "#" } | Outlined pill button. |
| url | string | "lumen.app/launch" | Address shown in the browser bar. |
| callouts | { label: string; detail?: string }[] | 4 callouts | Up to four floating labels around the frame. Below 600px they become a row of chips. |
| accent | string | "#ff6b4a" | Accent for the stage gradient, callouts and inner page. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |