React Magnetic Button

Powered by

React

Framer Motion

Lucide React

Ever watched iron filings dance around a magnet? That mesmerizing pull where scattered particles suddenly snap into formation? Most button hover effects are predictable—color shifts, tiny bounces, maybe a shadow. This React component brings real physics to your interface with floating particles that get magnetically attracted to the center on hover, creating that satisfying "snap" moment that makes users want to interact again.

Magnetic particle attraction on hover

Watch particles float randomly then get pulled toward the center with spring physics:

import { MagneticButton } from "@/components/ui/shadcn-io/magnetic-button"export default function MagneticButtonDemo() {  return (    <div className="w-full p-6 flex justify-center">      <MagneticButton />    </div>  )}

'use client';import React, { useEffect, useState, useCallback } from 'react';import { motion, useAnimation } from 'framer-motion';import { Magnet } from 'lucide-react';import { cn } from '@/lib/utils';interface Particle {  id: number;  x: number;  y: number;}export interface MagneticButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {  particleCount?: number;  attractRadius?: number;  children?: React.ReactNode;}export const MagneticButton = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(({  className,  particleCount = 12,  attractRadius = 50,  children,  ...props}, ref) => {  const [isAttracting, setIsAttracting] = useState(false);  const [particles, setParticles] = useState<Particle[]>([]);  const particlesControl = useAnimation();  useEffect(() => {    const newParticles = Array.from({ length: particleCount }, (_, i) => ({      id: i,      x: Math.random() * 360 - 180,      y: Math.random() * 360 - 180,    }));    setParticles(newParticles);  }, [particleCount]);  const handleInteractionStart = useCallback(async () => {    setIsAttracting(true);    await particlesControl.start({      x: 0,      y: 0,      transition: {        type: "spring",        stiffness: 50,        damping: 10,      },    });  }, [particlesControl]);  const handleInteractionEnd = useCallback(async () => {    setIsAttracting(false);    await particlesControl.start((i) => ({      x: particles[i]?.x || 0,      y: particles[i]?.y || 0,      transition: {        type: "spring",        stiffness: 100,        damping: 15,      },    }));  }, [particlesControl, particles]);  return (    <button      ref={ref}      className={cn(        "min-w-40 relative touch-none",        "bg-violet-100 dark:bg-violet-900",        "hover:bg-violet-200 dark:hover:bg-violet-800",        "text-violet-600 dark:text-violet-300",        "border border-violet-300 dark:border-violet-700",        "transition-all duration-300 rounded-md px-4 py-2",        className,      )}      onMouseEnter={handleInteractionStart}      onMouseLeave={handleInteractionEnd}      onTouchStart={handleInteractionStart}      onTouchEnd={handleInteractionEnd}      {...props}    >      {particles.map((_, index) => (        <motion.div          key={index}          custom={index}          initial={{ x: particles[index]?.x || 0, y: particles[index]?.y || 0 }}          animate={particlesControl}          className={cn(            "absolute w-1.5 h-1.5 rounded-full pointer-events-none",            "bg-violet-400 dark:bg-violet-300",            "transition-opacity duration-300",            isAttracting ? "opacity-100" : "opacity-40",          )}        />      ))}      <span className="relative w-full flex items-center justify-center gap-2">        {children || (          <>            <Magnet className={cn("w-4 h-4 transition-transform duration-300", isAttracting && "scale-110")} />            {isAttracting ? "Attracting" : "Hover me"}          </>        )}      </span>    </button>  );});MagneticButton.displayName = "MagneticButton";

Built for React applications with TypeScript and Next.js. Uses Framer Motion's spring physics engine for natural particle movements that feel realistic, not mechanical. The magnetic effect triggers on both mouse hover and touch interactions, with customizable particle count and attraction behavior. Perfect integration with shadcn/ui design systems and dark mode support.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/magnetic-button.json

npx shadcn@latest add https://www.shadcn.io/registry/magnetic-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/magnetic-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/magnetic-button.json

Why static hover effects feel lifeless

Developers add a color change or scale effect and call it interactive. But users have seen the same hover states thousands of times. They don't create delight or memorable moments anymore. The problem isn't the effect itself—it's the predictability.

Magnetic attraction is fundamentally different. It creates anticipation as particles float, then satisfaction when they snap into place. The spring physics make it feel like real matter responding to forces. Users instinctively want to trigger it again because it mimics natural phenomena they understand.

This component handles the complex physics calculations, particle management, and performance optimization automatically. Multiple particles animate simultaneously without janky performance. The attraction radius and particle count are fully customizable for different interaction intensities.

Features

• Realistic spring physics using Framer Motion's animation engine with natural acceleration curves
• Customizable particle system with configurable count and attraction radius parameters
• Touch and mouse support with identical behavior across desktop and mobile devices
• Performance optimized with GPU-accelerated transforms and efficient particle rendering
• TypeScript interfaces with complete prop definitions and particle system types
• Dark mode compatible using CSS custom properties and theme-aware violet color scheme
• Accessible interactions maintaining proper button semantics and keyboard navigation
• Spring customization with separate attraction and release physics for different feels

API Reference

MagneticButton

Particle Physics

The component uses two different spring configurations for realistic motion:

Customization Examples

// More particles, tighter attraction
<MagneticButton particleCount={20} attractRadius={30} />

// Fewer particles, wider attraction field  
<MagneticButton particleCount={8} attractRadius={80} />

// Custom content
<MagneticButton>
  <span className="flex items-center gap-2">
    <Sparkles className="w-4 h-4" />
    Magic Button
  </span>
</MagneticButton>

Common gotchas

Performance on mobile: The particle animations are GPU-accelerated, but older devices might struggle with high particle counts. Consider reducing particleCount to 6-8 for broader compatibility.

Touch interaction timing: On touch devices, the magnetic effect triggers on touch start and releases on touch end. This feels natural but differs slightly from mouse hover behavior where particles can attract/release based on cursor proximity.

Particle positioning edge cases: Particles are positioned randomly within a 360px radius. Very small containers might clip particles during their initial scatter phase before attraction begins.

Spring physics interruption: Rapidly triggering attraction/release can interrupt spring animations mid-motion. The component handles this gracefully by recalculating from current positions, but very fast interactions might feel slightly jarky.

Z-index and stacking: The particles render behind the button text but above the button background. Complex parent stacking contexts might affect particle visibility during animation.

You might also like

Questions developers actually ask