Components
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.
npx shadcn@latest add https://21st.dev/r/harshjadhavconnect/cursor-driven-particles-typographyLoading preview...
import { 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>
);
}