purrfect uiComponents

Get in touch

Magnetic

Pulls what it wraps toward the mouse, then springs back with a little overshoot.

Behaviour

  • While the mouse is over it, the content follows the pointer; on leave it springs back with a little overshoot.
  • Mouse only: touch and pen leave it still, so there is no stuck offset on phones.
  • One spring per axis, only running while it moves; it never re-renders React.
  • No dependencies.
  • Reduced motion: it does not move.

Props

PropTypeDescription
childrenReactNodeWhat to pull toward the pointer: a button, a link, an icon.
strengthnumberdefault 1How much of the pointer's offset from the centre the content follows. 0 stays still.
classNamestringExtra classes on the wrapper (an inline-block span).

Installation

npx shadcn@latest add https://purrfectui.com/r/magnetic.json

How to use

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

<Magnetic strength={0.6}>
  <button className="rounded-full px-6 py-3">Get in touch</button>
</Magnetic>

Source code

Loading…

License

MIT. Copy it into your project and change it as you like.

0