gamma logo

1

Magnetize Button

PreviousNext

A button that pulls animated particles toward its center using Framer Motion for a magnetic interaction effect.

Installation

pnpm dlx shadcn@latest add @gammaui/magnetize-button

Usage

import { MagnetizeButton } from "@/components/gammaui/magnetize-button"
 
export default function Example() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
      <MagnetizeButton>Hover me</MagnetizeButton>
    </div>
  )
}

The MagnetizeButton releases several particles that magnetically snap toward the button center on hover or touch. When the interaction ends, the particles spring back to random positions.

Props

PropTypeDefaultDescription
particleCountnumber12Number of particles orbiting the button.
attractRadiusnumber50Distance at which particles begin attracting.
classNamestring—Optional Tailwind classes to style the button.
...propsReact.ButtonHTMLAttributes—Any additional <button> attributes.

Example Variants

Adjusting Particle Count

<MagnetizeButton particleCount={25}>More Particles</MagnetizeButton>

Stronger Attraction

<MagnetizeButton attractRadius={120}>Stronger Pull</MagnetizeButton>

Custom Colors

<MagnetizeButton className="border-emerald-300 bg-emerald-200 text-emerald-700">
  Green Style
</MagnetizeButton>

Features

  • Magnetic Interaction Particles snap toward the button on hover/touch.

  • Random Particle Generation Each particle starts from a unique random position.

  • Smooth Framer-Motion Animation Spring-based transitions for natural movement.

  • Dark Mode Ready Uses Tailwind classes compatible with dark themes.

  • Highly Customizable Particle count, radius, colors, and size are fully configurable.

Tips

  • Increase particle density (particleCount) for dramatic visual effects.
  • Use relative containers for more controlled particle boundaries.
  • Combine with glowing shadows for a more futuristic style.
  • Works great in hero sections or call-to-action areas.