Components
Loading preview...
Interactive particle-based typography rendered on canvas. Text is constructed from dynamic particles that disperse on cursor interaction and smoothly return with spring physics. Fully customizable density, dispersion strength, return speed, size, and color. Perfect for hero sections, landing pages, and creative portfolios.
@harshjdhv
npx shadcn@latest add https://21st.dev/r/harshjadhavconnect/cursor-driven-particles-typographyimport { CursorDrivenParticleTypography } from "@/components/ui/cursor-driven-particles-typography";
export default function Demo() {
return (
<div className="w-full min-h-[500px] bg-black text-white flex items-center justify-center">
<CursorDrivenParticleTypography
text="Design"
fontSize={160}
particleDensity={5}
dispersionStrength={20}
/>
</div>
);
}