Skip to content

Wide flutes

Bright shader background of glass flutes over a blue glow.

Usage

Usage
import { WideFluteBackground } from '@/components/blocks/background-05'


<WideFluteBackground className="h-screen" />


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


// The blaze preset, with fewer, wider flutes
<WideFluteBackground
  className="min-h-[560px]"
  palette="blaze"
  flutes={9}
  speed={0.7}
/>

Install

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

Source

Props

Wide flutes props
PropTypeDefaultDescription
palette'blue' | 'blaze'= 'blue'Preset colour scheme. 'blue' is our blue melting into near-white above and navy below; 'blaze' is the original vivid red with a coral blush and maroon corners.
colorsPartial<{ highlight: string; tint: string; accent: string; deep: string; shadow: string }>= { highlight: '#FAFAFA', tint: '#8EC5FF', accent: '#2B7FFF', deep: '#0B3A99', shadow: '#020A1F' }Hex colours that override single tones of the palette: the light at the top, the tint where it melts into the glow, the glow itself, the deeper tone it sinks into and the darkest corners.
intensitynumber= 1How far the glow reaches up into the white, from 0 to about 1.5. Lower values leave more white at the top.
speednumber= 1How fast the glow drifts through the flutes. 0 freezes it.
flutesnumber= 11Number of glass flutes across the width. Flutes never get narrower than 28px, so small screens show fewer.
childrenReactNode= —Content rendered on top of the background.
classNamestring= —Additional classes for the wrapper, such as a min height or layout.
styleCSSProperties= —Inline styles for the wrapper.