Wave glass

Dark hero with blue light rising through fluted glass.

Usage

import { HeroWave } from '@/components/blocks/hero-section-09'


<HeroWave />


<HeroWave
  brand="Harbor"
  headline={['Ship calmer', 'with your whole team']}
  eyebrow="Now in beta"
  colors={{ accent: '#10b981', highlight: '#a7f3d0', core: '#ecfdf5' }}
  speed={0.7}
  waveAmplitude={1.3}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/hero-section-09

npx shadcn@latest add @pastaui-pro/hero-section-09

yarn dlx shadcn@latest add @pastaui-pro/hero-section-09

bunx --bun shadcn@latest add @pastaui-pro/hero-section-09

Source

Props

Wave glass props
Prop	Type	Default	Description
brand / brandHref	string	= Tideline / #	Brand name and link next to the logo mark.
navLinks	{ label: string; href: string; active?: boolean; items?: { label: string; href: string }[] }[]	= Home, Features, Updates, About Us	Links in the frosted pill. active draws the current-page pill; items turns a link into a dropdown. Collapses to a burger below md.
cta	{ label: string; href: string }	= Get started	White pill on the right of the nav.
eyebrow	string	= —	Optional small line above the headline.
headline	string[]	= ['Built for teams', 'that move in sync']	One entry per headline line.
description	string	= One calm workspace…	Supporting copy under the headline.
primaryAction	{ label: string; href: string }	= Get started	Outlined pill with a white arrow chip.
colors	{ base?: string; accent?: string; highlight?: string; core?: string }	= { base: '#0a0a0a', accent: '#2b7fff', highlight: '#8ec5ff', core: '#eef6ff' }	Hex colours for the base, glow, flute highlights and bottom core.
speed	number	= 1	How fast the wave travels across the flutes.
fluteWidth	number	= 44	Flute width in CSS pixels. Narrows automatically on small screens.
waveAmplitude	number	= 1	How far the glow swells and recedes. 0 is flat.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Override the --pp-* theme and type variables inline.