Attract Button

​

Installation

npx shadcn@latest add @kokonutui/attract-button

​

Usage

import AttractButton from "@/components/kokonutui/attract-button";

export default function Example() {
  return (
    <AttractButton 
      particleCount={12}
      attractRadius={50}
    >
      Hover me
    </AttractButton>
  );
}

​

Props

​

Dependencies

• motion/react (Framer Motion) - For particle attraction animations
• lucide-react - For the Magnet icon
• @/components/ui/button - Base button component
• @/lib/utils - Utility functions (cn)

​

Features

• Magnetic particle animation on hover/touch
• Customizable particle count
• Spring physics for smooth animations
• Touch-friendly interactions
• Particles scatter when not hovering
• Icon scales on interaction
• Dark mode support
• Violet color scheme