components/beautiful-ui/blocks/glass-landing-hero.tsx

The source ships with Pro.

The preview above is the real component. Its source installs into your repo with one command once you own it.

78 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

Landing HeroProv1.1.0

A liquid-glass landing hero in dark and light: the nav pill with the gliding lens, an announcement pill, a two-tone headline, the call to action pair and a live trend chart as the product visual (or a video, your own node, or nothing).

Sound by @web-kits/audio

.md

Add to your project

pnpm dlx shadcn@latest add @beautiful-ui-pro/glass-landing-hero

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Preview

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

navthe Lumen pill
{ brand?, links?, signIn?, cta?, menuLabel? } | ReactNode | null
Options configure the built-in nav pill (links get the gliding lens; below 760px they move into the menu dropdown). A node (e.g. <GlassNav />) replaces it; null hides it. Every link is { label, href?, onClick?, target?, rel?, aria-label? }; href renders an <a> (or linkComponent), onClick alone a <button>.
linkComponent"a"
ElementType
Renders every link that has an href, e.g. Next's Link or React Router's Link, for client-side navigation.
announcement{ tag: "NEW", label: "Story charts are here" }
{ tag?, label, href?, onClick? } | null
The pill above the headline. tag: null hides the amber tag.
headline["Charts that move with your data.", "Clear in a second, alive all day."]
string | [lead, muted?]
The one <h1>. The second half is set in the muted tone. Balanced wrapping; long headlines (over 90 characters) widen to 1000px.
headlineMaxWidth860 (1000 when long)
number
Headline max width in px.
subline–
ReactNode | null
The sentence under the headline (max 560px). null hides it.
primary / secondary"Start free" / "Book a demo"
{ label, href?, onClick? } | null
The solid pill (with the round arrow) and the glass pill. Labels may be long: the pair wraps, and a label wraps inside its pill before it overflows.
note"Free for 3 seats · no card needed"
ReactNode | null
Mono line under the buttons. null hides it.

Show all 16 props

visual{ kind: "chart" }
{ kind: "chart", … } | { kind: "video", … } | { kind: "none" } | ReactNode | null
The product visual under the copy. Without one (none or null) the copy centres with more room above and below. A node is shown with the same entrance and no card.
visual (chart)–
{ series?, dates?, end?, interval?, labels?, periods?, period?, defaultPeriod?, onPeriodChange?, live?, simulateLive?, liveInterval?, milestones?, compareTo?, eyebrow?, unit?, liveLabel?, latestLabel?, pulse?, locale?, messages?, formatValue?, formatTick?, formatDate?, formatChange?, height?, aria-label? }
series: values oldest first (weekly by default); new arrays animate in (the line shifts, the number rolls, the live dot blinks). dates or end + interval (week, day, month) place them in time (default: your data ends this week). periods: { id?, label, points } tabs of the latest N points (default 3M/13, 6M/26, 12M/52; null hides them); period + onPeriodChange control them by id (the label when there is no id). milestones: { index, label }[] draw amber dots on the line with a pill that fades in as the trace passes. compareTo: points back for the change (default one year; null hides it). simulateLive: demo ticks every liveInterval ms (default on only with the built-in sample). pulse: false stops the idle halo (the loop then sleeps). locale and messages translate the default formats and fixed strings.
visual (video)"1:12 · product video goes here"
{ src?, poster?, duration?, title?, caption?, label?, onPlay?, videoProps?, tracks? }
A 16:9 glass card with the play pill. With src, play swaps in a real <video> with controls; return false from onPlay to open your own player instead. Without a poster the glass card shows. videoProps go on the <video> (muted, loop, preload …); tracks add captions.
backgroundtrue
boolean
Paints the hero's own background and indigo/cyan glows. false keeps it transparent over your page.
motion"full"
"full" | "subtle" | "off"
full: the designed entrance, trace, rolling digits and pulse. subtle: calm 30% shorter entrance, no stagger, no trace or pulse. off: everything instant. prefers-reduced-motion always wins: 150ms fades, no trace, instant morphs, a still dot.
theme"system"
"system" | "dark" | "light"
system follows a .dark / .light class or data-theme on an ancestor (next-themes, shadcn), else the OS.
soundtrue
boolean | "subtle"
Built-in sound: true plays Lumen cues when a GlassSoundProvider (glass-sound) enables sound; false silences this instance (its cues and its clicks); "subtle" plays at 55%. Without a provider it is silent.
className / style / ref / …div props–
HTML div props
Spread on the root, which is also the container the layout queries (it switches at 760px of its own width, not the viewport).

Anatomy

Ships 2 named parts: the hero and its top bar.
Plays Lumen sound cues on tabs and calls to action.
Passes anything it doesn't read straight through.
Dark and light, designed separately.

GlassLandingHerodata-slot="landing-hero"
The landing hero block: headline, calls to action and the live chart visual.
GlassLandingHeroNavdata-slot="landing-hero-nav"
The hero's own top bar.

Part of

Landing Hero is part of

Get it with any of these. Pro pieces are not sold one at a time.

Lumen HaloSystem · 121 piecesIncluded in All-Access
All-Access LifetimeEvery system and pack, up to 10 developers$79 launch price

Compare options

Changelog

v1.1.0 · 2026-09-28All 2 entries

v1.1.0 · 2026-09-28
Built-in sound: tap on CTAs, open / close on the phone menu, select on period tabs, tick on chart arrow moves (with a GlassSoundProvider); the sound prop silences or softens one instance
v1.0.0 · 2026-09-27
First release, dark and light, from the Lumen landing hero handoff: live chart, video and no-visual layouts, phone menu

Keyboard

Tab: Nav links, Sign in, Start free (or the menu button), the announcement, the buttons, then the period tabs
← / → (period tabs): Previous / next period (wraps); Home / End jump to the first and last
← / → (chart focused): Move the playhead one point; Home / End jump to the first and last; Escape returns to the latest
Enter / Space (menu button): Open or close the phone menu; focus moves to its first link
Escape (menu open): Close the menu and return focus to the button

More in Marketing

Logo Carousel

FAQ