Vortex Background

A wavy, swirly, vortex background ideal for CTAs and backgrounds.

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/vortex.json"

npm

pnpm

bun

yarn

npm install simplex-noise

Vortex.vue

Full page demo usage

Prop Name	Type	Default	Description
`class`	`string`		Optional className for styling the children wrapper.
`containerClass`	`string`		Optional className for styling the container.
`particleCount`	`number`	`700`	Number of particles to be generated.
`rangeY`	`number`	`100`	Vertical range for particle movement.
`baseHue`	`number`	`220`	Base hue for particle color.
`baseSpeed`	`number`	`0.0`	Base speed for particle movement.
`rangeSpeed`	`number`	`1.5`	Range of speed variation for particles.
`baseRadius`	`number`	`1`	Base radius of particles.
`rangeRadius`	`number`	`2`	Range of radius variation for particles.
`backgroundColor`	`string`	`"#000000"`	Background color of the canvas.

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

On This Page