Magnetic Button

Button that elastically follows the cursor with a configurable magnetic strength. Snaps back on mouse leave.

Move cursor over the button

Installation

Run the CLI

$npx particleui-cli add magnetic-button

Usage

TSX

import { MagneticButton } from "@/components/ui/magnetic-button"

export default function Example() {
  return <MagneticButton strength={0.4}>Hover me</MagneticButton>
}

Props

Prop	Type	Default	Required
strength	number	`0.35`	no

Details

Source filecomponents/ui/magnetic-button.tsx

Typeui

Categoriesbuttons, particles

npm dependencies

Registry deps

Claude skill—