Flairconfetti-pop

Confetti

Particle burst on success — celebrate the click.

tap / hover to play

const COLORS = ["#FF6B6B", "#FFD93D", "#6C5CE7", "#4ECDC4"];
const [bits, setBits] = useState<number[]>([]);

<button onClick={() => setBits(Array.from({ length: 16 }, (_, i) => i))} className="relative">
  Celebrate
  {bits.map((i) => (
    <motion.span
      key={i}
      initial={{ x: 0, y: 0, opacity: 1 }}
      animate={{ x: (Math.random() - 0.5) * 180, y: (Math.random() - 0.5) * 180, opacity: 0, rotate: Math.random() * 360 }}
      transition={{ duration: 0.8, ease: "easeOut" }}
      onAnimationComplete={() => setBits([])}
      style={{ position: "absolute", left: "50%", top: "50%", width: 8, height: 8, background: COLORS[i % 4] }}
    />
  ))}
</button>