Wavy Background
A cool background effect with waves that move.
Hero waves are cool
Leverage the power of canvas to create a beautiful hero section
Installation
Run the following command
npx shadcn@latest add @aceternity/wavy-background| Prop | Type | Default | Description |
|---|---|---|---|
children | any | - | The content to be displayed on top of the wavy background. |
className | string | - | The CSS class to apply to the content container. |
containerClassName | string | - | The CSS class to apply to the main container. |
colors | string[] | ["#38bdf8", "#818cf8", "#c084fc", "#e879f9", "#22d3ee"] | The colors of the waves. |
waveWidth | number | 50 | The width of the waves. |
backgroundFill | string | "black" | The background color. |
blur | number | 10 | The blur effect applied to the waves. |
speed | "slow" | "fast" | "fast" | The speed of the wave animation. |
waveOpacity | number | 0.5 | The opacity of the waves. |
[key: string] | any | - | Any other props not listed above. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
