Like-Button mit Partikeln

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Heart } from "lucide-react";

interface ParticleLikeButtonProps {
  color?: string;
  particles?: number;
}

export default function ParticleLikeButton({
  color = "#d25563",
  particles = 8,
}: ParticleLikeButtonProps) {
  const [liked, setLiked] = useState(false);

  return (
    <button
      type="button"
      aria-label="Gefällt mir"
      aria-pressed={liked}
      onClick={() => setLiked((v) => !v)}
      className="relative grid h-14 w-14 place-items-center rounded-full bg-white dark:bg-[#1c1c1e] text-[#1d1d1f] dark:text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
    >
      <motion.span
        animate={{ scale: liked ? [1, 1.35, 1] : 1 }}
        transition={{ type: "spring", stiffness: 300, damping: 30 }}
      >
        <Heart
          className="h-6 w-6"
          fill={liked ? color : "transparent"}
          stroke={liked ? color : "currentColor"}
        />
      </motion.span>
      <AnimatePresence>
        {liked &&
          Array.from({ length: particles }, (_, i) => (
            <motion.i
              key={i}
              className="absolute h-1 w-1 rounded-full"
              style={{ backgroundColor: color }}
              initial={{ x: 0, y: 0, opacity: 1 }}
              animate={{
                x: Math.cos((i / particles) * Math.PI * 2) * 30,
                y: Math.sin((i / particles) * Math.PI * 2) * 30,
                opacity: 0,
              }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.55 }}
            />
          ))}
      </AnimatePresence>
    </button>
  );
}