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 https://ui.aceternity.com/registry/vortex.jsonFull 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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is the man! He is the best front-end developer I have worked with.
He took the requirements and quite literally ran with them. We are super happy with the result and product we go...
John Shahawy
Founder at Rogue and Moonbeam