Wavy Background

A cool background effect with waves that move.

Note: This component requires simplex-noise as a dependency.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/wavy-background.json"

npm

pnpm

bun

yarn

npm install simplex-noise

WavyBackground.vue

Prop Name	Type	Default	Description
`class`	`string`	`-`	The content to be displayed on top of the wavy background.
`containerClass`	`string`	`-`	The CSS class to apply to the content 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"`	Range of speed variation for particles.
`waveOpacity`	`number`	`0.5`	Base radius of particles.
`[key: string]`	`any`	`-`	Range of radius variation for particles.

Slot Support: Easily add any content inside the component using the default slot.

On This Page