Reeded azure
Reeded glass shader background over a dark blue gradient.
Usage
import { ReededAzureBackground } from '@/components/blocks/background-06'
<ReededAzureBackground className="h-screen" />
// Optional: layer your own content on top
<ReededAzureBackground className="min-h-[560px]">
<div />
</ReededAzureBackground>
// The aurora preset, calmer and with wider flutes
<ReededAzureBackground
className="min-h-[560px]"
palette="aurora"
fluteWidth={24}
intensity={0.85}
speed={0.8}
/>
Install
pnpm dlx shadcn@latest add @pastaui-pro/background-06npx shadcn@latest add @pastaui-pro/background-06yarn dlx shadcn@latest add @pastaui-pro/background-06bunx --bun shadcn@latest add @pastaui-pro/background-06Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| palette | 'blue' | 'aurora' | = 'blue' | Preset colour scheme. 'blue' is a sky-blue glow with mist and navy edges; 'aurora' is the original cyan glow with rose light and dark red edges. |
| colors | Partial<{ base: string; primary: string; glow: string; secondary: string; rim: string }> | = { base: '#010207', primary: '#0A3FA6', glow: '#5AA8FF', secondary: '#9DB8E0', rim: '#0D2E78' } | Hex colours that override single tones of the palette: the near-black shadow, the deep tone around the glow, the bright glow, the light on the left edge and the dark tone at the far edges. |
| intensity | number | = 1 | How bright the glows are, from 0 to 1.5. |
| fluteWidth | number | = 28 | Width of each glass flute in CSS pixels. Narrow screens get narrower flutes so at least about 30 fit across, and the minimum is 6. |
| speed | number | = 1 | How fast the glow drifts through 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. |