Magnetic — React Interaction

Give a button, link, or any small piece of content a gentle pull.

Starting live preview

Usage

import { Magnetic } from "@/components/Magnetic";

export function Action() {
  return <Magnetic strength={18}
    {...{
      strength: 18
    }}
  ><a href="/start">Get started</a></Magnetic>;
}

Implementation notes & API

Accepts children, strength, disabled, className and style. Supply your own link or button; its semantics are preserved. Stable outer hit area. Touch and reduced-motion disable movement. No WebGPU dependency.

Property	Type	Notes / default
`children`	`ReactNode`	Your own content; the default is a demonstration
`disabled`	`boolean`	false; motion also respects system preferences
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT