Components
Loading preview...
You can easily adjust the visual appearance by modifying the props, such as changing colors, particle count, or animation timing.
npx shadcn@latest add https://21st.dev/r/designali-in/particle-animation-1import { ParticleAnimation } from "@/components/ui/particle-animation-1";
export default function DemoOne() {
return (
<div className="w-full h-screen flex items-center justify-center">
<div className="w-full h-full overflow-hidden">
<ParticleAnimation
particleCount={500}
colors={['#fff200', '#a855f7', '#f43f5e', '#22c55e']}
animationDuration={[1, 5]}
containerSize="100vmin"
/>
</div>
<span className="absolute pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
Time Travell
</span>
</div>
);
};