Components
Interactive Particle Typography
A React component that renders a full-screen interactive particle animation forming the word "21ST.DEV". Particles are attracted to text-shaped targets and respond to mouse or touch movements, creating a dynamic typography effect.
import ParticleTypography from "@/components/ui/interactive-particle-typography-1";
const settings = {
PARTICLE_COUNT_TARGET: 4000,
ATTRACTION_FORCE_BASE: 0.1,
NOISE_STRENGTH_BASE: 0.4,
FRICTION: 0.95,
MOUSE_INTERACTION_RADIUS: 90,
MOUSE_DISPERSE_STRENGTH: 1.2,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<ParticleTypography {...s} />
</div>
);
}