Horizon glow

Navy hero with a pill nav over a horizon shader.

Usage

import { HeroHorizon } from '@/components/blocks/hero-section-11'


<HeroHorizon />


<HeroHorizon
  brand="Aperture"
  badge={{ label: 'Read the launch notes', href: '/changelog' }}
  headline={['Payments that', 'settle in seconds.']}
  description="One API for cards, wallets and bank transfers in every market you sell to."
  cta={{ label: 'Talk to sales', href: '/contact' }}
  colors={{ base: '#060024', accent: '#7C5AF0', highlight: '#C09AFF', core: '#F7F6FF' }}
  curvature={1.2}
/>

Install

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

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

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

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

Source

Props

Horizon glow props
Prop	Type	Default	Description
brand / brandHref	string	= Meridian / #	Brand name and link next to the horizon logo mark.
navLinks	{ label: string; href: string }[]	= Product, Pricing, Company, Blog, Changelog	Links in the frosted pill. Collapses to a burger menu below md.
cta	{ label: string; href: string }	= Start free trial	White pill on the right of the nav. Also shown in the mobile menu.
badge	{ label: string; href?: string } \| null	= 'The 2026 Signals Report'	Pill above the headline with glowing lines on each side. href turns it into a link; null hides it.
headline	string[]	= ['See every signal', 'before it matters.']	One entry per headline line.
description	string	= Live product analytics and forecasting…	Supporting copy under the headline.
colors	Partial<{ base: string; accent: string; highlight: string; core: string }>	= { base: '#030B1E', accent: '#2B7FFF', highlight: '#8EC5FF', core: '#F2F8FF' }	Glow palette passed to the Horizon glow background: navy base, blue bands, light blue around the core and a near-white core.
intensity	number	= 1	Brightness of the glow bands.
curvature	number	= 1	How strongly the bands bend toward the edges. 0 gives a flat line.
horizon	number	= 0.72	Vertical position of the glow horizon, from 0 (top) to 1 (bottom).
speed	number	= 1	How fast the glow breathes and shimmers. 0 freezes it.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Override the --pp-* theme and type variables inline.