Vortex Background
A wavy, swirly, vortex background ideal for CTAs and backgrounds.
Installation
Run the following command
npx shadcn@latest add @aceternity/vortexFull page demo usage
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
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
