Vortex Background
A wavy, swirly, vortex background ideal for CTAs and backgrounds.
The hell is this?
This is chemical burn. It'll hurt more than you've ever been burned and you'll have a scar.
Installation
Run the following command
npx shadcn@latest add @aceternity/vortexFull page demo usage
The hell is this?
This is chemical burn. It'll hurt more than you've ever been burned and you'll have a scar.
Props
| Prop Name | Type | Default Value | Description |
|---|---|---|---|
children | any | Optional children to be rendered inside the component. | |
className | string | Optional className for styling the children wrapper. | |
containerClassName | 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. |
This component is inspired by this GitHub Repo
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
