Vortex
Particle vortex effect with configurable particle count and motion.
Preview
Vortex
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Loading states and transition animations.
Why this component matters
A vortex implies transformation — ideal for states where content is being generated or processed.
Usage guidance
Use as a loading state background or section transition. Set particle count to match the perceived intensity of the operation.
Installation
bash
npx shadcn@latest add @aceternity/vortexUsage
example.tsxtsx
import { Vortex } from "@/components/ui/vortex";
export default function Example() {
return (
<Vortex>
{/* Your content here */}
</Vortex>
);
}Source
vortex.tsx
components/ui/vortex.tsx