@tonybonet/magnetic

Pointer-tracking magnetic UI elements with a shared orchestrator — one pointermove, one rAF loop, IntersectionObserver gating for every element mounted.

Docs → · Playground · GitHub

Install

npm install @tonybonet/magnetic

Requires react ^19 and motion ^12.

Quickstart

import { Magnetic } from "@tonybonet/magnetic/component";

<Magnetic options={{ maxOffset: 20 }}>
  <button>Hover me</button>
</Magnetic>;

Or headless:

import { m } from "motion/react";
import { useMagnetic } from "@tonybonet/magnetic";

function Tile() {
  const magnetic = useMagnetic({ maxOffset: 20 });
  return (
    <m.div ref={magnetic.ref} style={magnetic.style}>
      Tile
    </m.div>
  );
}

License

See LICENSE.