Vortex Background

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

Example

Full page demo usage

Note: This component uses simplex-noise & requires simplex-noise npm package as a dependency.

Please install simplex-noise using following commands.

npm

pnpm

bun

yarn

npm install simplex-noise

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.

You can copy and paste the following code to create these components:

Vortex.vue

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

On This Page