Magnet Button

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Attract Button
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { Magnet } from "lucide-react";
14import { motion, useAnimation } from "motion/react";
15import { useCallback, useEffect, useState } from "react";
16import { Button } from "@/components/ui/button";
17import { cn } from "@/lib/utils";
18 
19interface AttractButtonProps
20  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
21  particleCount?: number;
22  attractRadius?: number;
23}
24 
25interface Particle {
26  id: number;
27  x: number;
28  y: number;
29}
30 
31export default function AttractButton({
32  className,
33  particleCount = 12,
34  attractRadius = 50,
35  ...props
36}: AttractButtonProps) {
37  const [isAttracting, setIsAttracting] = useState(false);
38  const [particles, setParticles] = useState<Particle[]>([]);
39  const particlesControl = useAnimation();
40 
41  useEffect(() => {
42    const newParticles = Array.from({ length: particleCount }, (_, i) => ({
43      id: i,
44      x: Math.random() * 360 - 180,
45      y: Math.random() * 360 - 180,
46    }));
47    setParticles(newParticles);
48  }, [particleCount]);
49 
50  const handleInteractionStart = useCallback(async () => {
51    setIsAttracting(true);
52    await particlesControl.start({
53      x: 0,
54      y: 0,
55      transition: {
56        type: "spring",
57        stiffness: 50,
58        damping: 10,
59      },
60    });
61  }, [particlesControl]);
62 
63  const handleInteractionEnd = useCallback(async () => {
64    setIsAttracting(false);
65    await particlesControl.start((i) => ({
66      x: particles[i].x,
67      y: particles[i].y,
68      transition: {
69        type: "spring",
70        stiffness: 100,
71        damping: 15,
72      },
73    }));
74  }, [particlesControl, particles]);
75 
76  return (
77    <Button
78      className={cn(
79        "relative min-w-40 touch-none",
80        "bg-violet-100 dark:bg-violet-900",
81        "hover:bg-violet-200 dark:hover:bg-violet-800",
82        "text-violet-600 dark:text-violet-300",
83        "border border-violet-300 dark:border-violet-700",
84        "transition-all duration-300",
85        className
86      )}
87      onMouseEnter={handleInteractionStart}
88      onMouseLeave={handleInteractionEnd}
89      onTouchEnd={handleInteractionEnd}
90      onTouchStart={handleInteractionStart}
91      {...props}
92    >
93      {particles.map((_, index) => (
94        <motion.div
95          animate={particlesControl}
96          className={cn(
97// … truncated