Fluted flame

Navy hero with centred copy over a fluted flame shader.

Usage

import { HeroFlutedFlame } from '@/components/blocks/hero-section-13'


<HeroFlutedFlame />


<HeroFlutedFlame
  brand="Larder"
  eyebrow={null}
  headline={['Heating that learns', 'how you live.']}
  description="A smart thermostat that trims your energy bill without you lifting a finger."
  primaryAction={{ label: 'Shop Larder', href: '/shop' }}
  colors={{ base: '#070D1F', primary: '#E8280A', core: '#FDAE1E', light: '#F0CFAA', haze: '#4F5B6E' }}
  fluteWidth={28}
/>

Install

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

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

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

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

Source

Props

Fluted flame props
Prop	Type	Default	Description
brand / brandHref	string	= Cinder / #	Brand name and link beside the flame mark, centred in the nav.
navLinks	{ label: string; href: string }[]	= Models, Pricing, Docs	Links on the left of the nav. Below md they move into a panel of large numbered links behind a Menu button.
cta	{ label: string; href: string }	= Open console	Frosted pill on the right of the nav, visible at every size.
eyebrow	string \| null	= 'Cold starts under 200 ms'	Label between two hairlines above the headline. null hides it.
headline	string[]	= ['Serverless GPUs that', 'stay warm for you.']	One entry per headline line.
description	string	= Deploy any open model behind a single endpoint…	Supporting copy under the headline.
primaryAction / secondaryAction	{ label: string; href: string }	= Deploy a model / Read the docs	White glowing pill and arrow text link under the description.
colors	Partial<{ base: string; primary: string; core: string; light: string; haze: string }>	= { base: '#030817', primary: '#2B7FFF', core: '#8EC5FF', light: '#EAF3FF', haze: '#23345A' }	Glow palette passed to the Fluted flame background: navy base, blue flame, light blue core, near-white bloom and a navy haze.
intensity	number	= 1	How bright the glow is, from 0 to about 1.5.
fluteWidth	number	= 20	Width of each glass flute in CSS pixels.
speed	number	= 1	How fast the glow drifts across the flutes. 0 freezes it.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Override the --pp-* theme and type variables inline.