1rem
3.5rem

Magnetic

Add smooth magnetic attraction effects for HTML elements. Using @phucbm/magnetic-button

0px
Live Playground · Edit and see changes instantly
Or edit with AI support by
import {Magnetic} from "@/components/phucbm/magnetic";

export default function Example() {
    return (
        <div className="h-screen flex items-center justify-center bg-slate-50">
            <Magnetic distance={50} attraction={0.5}>
                <button
                    className="relative inline-flex items-center justify-center px-8 py-4 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-bold shadow-lg shadow-blue-500/50 transition-colors duration-200"
                >
                    HOVER ON ME
                </button>
            </Magnetic>
        </div>
    );
}

Installation

pnpm dlx shadcn@latest add @phucbm/magnetic

Props

NameTypeDefault
childrenReact.ReactNode
distancenumber

Defines the range within which the magnetic effect is active (in pixels).

50
attractionnumber

Controls the strength of the magnetic pull (0 = weak, 1 = strong).

0.3
speednumber

Controls the speed of the magnetic movement (0 = slow, 1 = instant).

0.1
maxXnumber

Maximum horizontal movement in pixels (optional constraint)

maxYnumber

Maximum vertical movement in pixels (optional constraint)

onEnter(data: MagneticData) => void

Callback fired when mouse enters the magnetic area

onExit(data: MagneticData) => void

Callback fired when mouse exits the magnetic area

activeClassstring

CSS class added when the magnetic effect is active

devboolean

Show debug area visualization.

`false`

Tweak the parameters

Interactive Playground
3.5rem
1rem