āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/vortex-background ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A wavy, swirly, vortex background ideal for CTAs and backgrounds.
background, special, CTA
npx shadcn@latest add @aceternity/vortex
Run the following command:
npx shadcn@latest add @aceternity/vortex
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| 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. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā