Fluted flame

Reeded glass shader background over a rising glow.

Usage

import { FlutedFlameBackground } from '@/components/blocks/background-03'


<FlutedFlameBackground className="h-screen" />


// Optional: layer your own content on top
<FlutedFlameBackground className="min-h-[560px]">
  <div />
</FlutedFlameBackground>


// The hearth preset, with wider flutes
<FlutedFlameBackground
  className="min-h-[560px]"
  palette="hearth"
  fluteWidth={24}
  intensity={0.9}
  speed={0.8}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/background-03

npx shadcn@latest add @pastaui-pro/background-03

yarn dlx shadcn@latest add @pastaui-pro/background-03

bunx --bun shadcn@latest add @pastaui-pro/background-03

Source

Props

Fluted flame props
Prop	Type	Default	Description
palette	'blue' \| 'hearth'	= 'blue'	Preset colour scheme. 'blue' is a blue glow with a sky-blue core; 'hearth' is the original red-orange glow with a golden amber core.
colors	Partial<{ base: string; primary: string; core: string; light: string; haze: string }>	= { base: '#030817', primary: '#2B7FFF', core: '#8EC5FF', light: '#EAF3FF', haze: '#23345A' }	Hex colours that override single tones of the palette: the base, the glow rising from the bottom, its bright core, the pale bloom above it that also tints the flute highlights, and the cool haze in the top right.
intensity	number	= 1	How bright the glow and flute highlights are, from 0 to 1.5.
fluteWidth	number	= 20	Width of each glass flute in CSS pixels. The minimum is 8.
speed	number	= 1	How fast the glow drifts across the flutes. 0 freezes it.
children	ReactNode	= —	Content rendered on top of the background.
className	string	= —	Additional classes for the wrapper, such as a min height or layout.
style	CSSProperties	= —	Inline styles for the wrapper.