波浪背景

一个酷炫的波浪背景效果。

注意: This component requires simplex-noise as a dependency.

通过 CLI 安装

npm

pnpm

bun

yarn

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

npm

pnpm

bun

yarn

npm install simplex-noise

复制并粘贴以下代码：

WavyBackground.vue

Prop 名称	类型	默认值	描述
`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.

本页