MagneticButton

A button that subtly pulls toward the cursor on hover. The effect intensity is controlled by a single strength prop.

Interactive Demo

Hover each button to feel the pull. Compare different strength values.

Subtle (0.2)

Default (0.4)

Strong (0.6)

Usage

import { MagneticButton } from "@mantleui/react/motion";

<MagneticButton
  strength={0.4}
  className="rounded-full bg-zinc-900 px-6 py-3 text-white"
  onClick={() => console.log("clicked")}
>
  Hover me
</MagneticButton>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Button content.
`strength`	`number`	`0.3`	Magnetic strength factor between 0 and 1.
`...rest`	`ButtonHTMLAttributes<HTMLButtonElement>`	—	All native button attributes are forwarded.

children

ReactNode

Button content.

strength0.3

number

Magnetic strength factor between 0 and 1.

...rest

ButtonHTMLAttributes<HTMLButtonElement>

All native button attributes are forwarded.