WavyBackground
wavy-backgroundRenders layered multicolor waves with a canvas value-noise field.
Usage
Basic usage
WavyBackground comes with canvas background + centered content layer, children can put the title directly; the default is chart token.
<WavyBackground containerClassName="h-64 w-full">
<span className="text-sm font-medium text-foreground">WavyBackground</span>
</WavyBackground>Animation speed
speed="slow" makes the waves slower and more relaxed, and "fast" makes the waves more active.
<WavyBackground speed="slow" containerClassName="h-64 w-full">
<span className="text-sm font-medium text-foreground">slow</span>
</WavyBackground>Blur intensity
blur controls the softness of the band. When blur=0, the edge is sharp and the band outline is clear.
<WavyBackground blur={0} containerClassName="h-64 w-full">
<span className="text-sm font-medium text-foreground">blur=0</span>
</WavyBackground>Custom color
colors Pass a set of color values (recommended 5) to customize the brand wavy belt.
<WavyBackground
colors={["#a855f7", "#6366f1", "#c084fc", "#818cf8", "#a855f7"]}
blur={8}
containerClassName="h-64 w-full"
>
<span className="text-sm font-medium text-white">custom</span>
</WavyBackground>When to Use
Use it for soft, flowing color bands behind a hero or marketing section. Its dependency-free Canvas noise looks more liquid than the pure CSS Aurora, at the cost of Canvas rendering. Use GridPattern or DotPattern for regular geometry. The exported valueNoise2D helper can drive custom waveforms.
Import
import { WavyBackground, valueNoise2D } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | Chart tokens | Wave colors; accepts any CSS color string, including var(--…), and resolves computed values after mount |
| waveWidth | number | 50 | Wave stroke width in pixels; higher values produce thicker bands |
| backgroundFill | string | --color-background / --color-bg | Background fill color, translucent drawing of each frame produces smear |
| blur | number | 10 | canvas filter blur (px), 0=no blur |
| speed | "slow" | "fast" | "fast" | Animation speed |
| waveOpacity | number | 0.5 | Overall transparency of each wave (0–1) |
| className | string | — | Content container class (wrapper div overlaid on the wave) |
| containerClassName | string | — | Outer root container class |
| containerProps | Omit<HTMLAttributes<HTMLDivElement>, "className"> & Record<\data-${string}\, …> | — | Attributes forwarded to the outer root div, including custom data-* attributes |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content above the wave (absolute centered overlay) |
Usage Guidelines
- Based on canvas, client rendering is required; it will automatically drop to a still frame under
prefers-reduced-motion. Remember to turn off the system switch when verifying the animation. - The container size is expanded with
containerClassName(such ash-full w-full), and the outer parent needs to berelative+overflow-hidden. colors/backgroundFillsupportsvar(--…), parsed after mounting - the first frame of SSR will not have color, which is normal.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<WavyBackground
speed="fast"
blur={10}
waveWidth={50}
waveOpacity={0.5}
containerClassName="h-64 w-full"
>
<h2 className="text-2xl font-bold">Hello, Waves</h2>
</WavyBackground>