Components
Loading preview...
he component includes all styling inline and maintains the interactive mouse/touch controls that adjust the animation progress based on cursor position around the circular path.
npx shadcn@latest add https://21st.dev/r/designali-in/particle-animationimport { ParticleAnimation } from "@/components/ui/particle-animation";
export default function DemoOne() {
return (
<div className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden">
<span className="pointer-events-none z-10 whitespace-pre-wrap absolute text-center text-7xl font-semibold leading-none tracking-tighter">
Particle Animation
</span>
<ParticleAnimation />
</div>
);
}