Interactive particle text effect with custom fluid dynamics, post processing, advanced animation and animated gradient. Particles can be configured to expand from mouse or attract to mouse. Additionally mouse clicks create explosive force. Highly customizable
import { ParticleText, hexToRGB } from "@/components/ui/particle-text";
const Default = () => {
return <ParticleText text="Particle Text" />;
};
const CustomText = () => {
return (
<ParticleText
text="CUSTOM TEXT"
particleSize={0.01}
animationSpeed={2}
primaryColor={[0.2, 0.3, 0.8]}
secondaryColor={[0.6, 0.2, 0.9]}
mouseForce={70}
fontFamily="papyrus"
fontSize={80}
/>
);
};
const Attract = () => {
return (
<ParticleText
text="ATTRACT"
interactionMode="attract"
/>
);
};
const WarmGradient = () => {
return (
<ParticleText
text="WARM"
primaryColor={[0.9, 0.3, 0.2]}
secondaryColor={[1.0, 0.6, 0.1]}
accentColor={[1.0, 0.8, 0.0]}
glowColor={[1.0, 0.4, 0.0]}
/>
);
};
// Example using hex colors
const HexColors = () => {
return (
<ParticleText
text="HEX COLORS"
primaryColor={hexToRGB('#FF6B6B')}
secondaryColor={hexToRGB('#4ECDC4')}
/>
);
};
export { Default, CustomText, WarmGradient, Attract, HexColors };