Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Vortex Background

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

Open in

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/vortex

Full page demo usage

Open in

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 NameTypeDefault ValueDescription
childrenanyOptional children to be rendered inside the component.
classNamestringOptional className for styling the children wrapper.
containerClassNamestringOptional className for styling the container.
particleCountnumber700Number of particles to be generated.
rangeYnumber100Vertical range for particle movement.
baseHuenumber220Base hue for particle color.
baseSpeednumber0.0Base speed for particle movement.
rangeSpeednumber1.5Range of speed variation for particles.
baseRadiusnumber1Base radius of particles.
rangeRadiusnumber2Range of radius variation for particles.
backgroundColorstring"#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

70+ templates and component blocks combined

Ready to copy paste component blocks, save days of development time

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji