String wave
Dark shader background of strands sweeping into a wave.
Usage
import { StringWaveBackground } from '@/components/blocks/background-08'
<StringWaveBackground className="h-screen" />
// Optional: layer your own content on top
<StringWaveBackground className="min-h-[560px]">
<div />
</StringWaveBackground>
// The copper preset, with a denser mesh
<StringWaveBackground className="min-h-[560px]" palette="molten" lineCount={160} />
// Override single tones on top of a palette
<StringWaveBackground className="min-h-[560px]" colors={{ base: '#0A0A0A' }} />
Install
pnpm dlx shadcn@latest add @pastaui-pro/background-08npx shadcn@latest add @pastaui-pro/background-08yarn dlx shadcn@latest add @pastaui-pro/background-08bunx --bun shadcn@latest add @pastaui-pro/background-08Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| palette | 'blue' | 'molten' | = 'blue' | Preset colour scheme. 'blue' is navy strands with a sky-blue crest; 'molten' is the original copper wave on black with a deep red glow. |
| colors | Partial<{ base: string; haze: string; strand: string; glow: string; core: string }> | = { base: '#030B1E', haze: '#0B2A6B', strand: '#2B7FFF', glow: '#8EC5FF', core: '#F2F8FF' } | Hex colours that override single tones of the palette: the near-black base, the deep glow that pools on the left and under the crest, the strands themselves, the bright glow along the crest and the white heat where the strands bunch together. |
| intensity | number | = 1 | Brightness of the strands and glow. 1 matches the default look. |
| speed | number | = 1 | How fast the surface undulates. 0 freezes it. |
| lineCount | number | = 132 | Number of strands across the crest on a 16:10 screen. Narrower frames draw fewer so the strands stay fine without crowding. |
| 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. |