Signature

Magnetic

Pulls its child toward the pointer when it comes close, and lets it spring back. Only on devices with a fine pointer and without reduced motion; the transform is set directly (no React render per frame).

demos/magnetic.tsx

import { Button } from "pixelbits/button";
import { Magnetic } from "pixelbits/magnetic";

export default function Demo() {
  return (
    <Magnetic>
      <Button variant="primary" size="lg">
        Start a project
      </Button>
    </Magnetic>
  );
}

Installation

npm: import

import { Magnetic } from "pixelbits/magnetic";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/magnetic.json

API

<Magnetic>

Example

<Magnetic><Button variant="primary">Start a project</Button></Magnetic>

Prop	Type	Default	Description
children*	ReactElement	—	The element to pull, usually a `Button`.
strength	number	0.3	How strongly it follows: 0 none, 1 all the way to the pointer.
radius	number	80	Distance in px around the element where the pull starts.
className	string	—	Extra classes, merged into the child element.