Light streak

Dark hero on a light streak shader with a capsule nav.

Usage

import { HeroLightStreak } from '@/components/blocks/hero-section-14'


<HeroLightStreak />


<HeroLightStreak
  brand="Relay"
  eyebrow="Series B, led by Quarry Ventures"
  headline={['Messages that', 'always land.']}
  description="Transactional email and SMS with delivery you can watch in real time."
  primaryAction={{ label: 'Send your first message', href: '/signup' }}
  secondaryAction={{ label: 'View the API', href: '/docs' }}
  colors={{ haze: '#2A1C6E', primary: '#7C5AF0', secondary: '#C09AFF', core: '#F7F6FF' }}
  grain={0.3}
/>

Install

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

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

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

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

Source

Props

Light streak props
Prop	Type	Default	Description
brand / brandHref	string	= Lumen / #	Brand name and link next to the streak logo mark.
navLinks	{ label: string; href: string }[]	= Network, Platform, Pricing, Docs	Links inside the floating capsule. Below md the capsule unfolds into a list from its plus button.
cta	{ label: string; href: string }	= Get started	White pill at the end of the capsule. Also shown in the mobile menu.
eyebrow	string \| null	= 'Now live in 310 cities'	Small label with a glowing dot above the headline. null hides it.
headline	string[]	= ['Deploy once.', 'Arrive everywhere.']	One entry per headline line.
description	string	= Lumen pushes your app to the edge in seconds…	Supporting copy beside the actions, under a hairline rule.
primaryAction / secondaryAction	{ label: string; href: string }	= Deploy your app / Explore the network	White pill and underlined text link beside the description.
colors	Partial<{ base: string; haze: string; primary: string; secondary: string; core: string }>	= { base: '#03060D', haze: '#0A2A66', primary: '#2B7FFF', secondary: '#8EC5FF', core: '#F2F8FF' }	Ribbon palette passed to the Light streak background: near-black base, deep navy haze, blue glow, light blue around the core and a near-white centre.
intensity	number	= 1	Brightness of the ribbon.
grain	number	= 0.5	Strength of the film grain, from 0 to 1.
speed	number	= 1	How fast the ribbon sways. 0 freezes it.
fluteWidth	number	= 56	Width of each fluted glass slice in CSS pixels on wide screens.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Override the --pp-* theme and type variables inline.