Cursor & Interaction Effects

Magnetic Hover

호버 시 자식 요소가 포인터 쪽으로 끌려오는 자기장 효과입니다.

Preview

desktop only

Magnetic Hover

desktop pointer preview

Desktop preview

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/magnet.json

Code

typescript
Copied
1import { Magnet } from "@/components/magnet"23export default function Example() {4  return (5    <Magnet padding={80} magnetStrength={3}>6      <button>Magnet</button>7    </Magnet>8  )9}

Props

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

padding

Type
number
Default
100
Description
Pointer activation area around the element.

disabled

Type
boolean
Default
false
Description
Whether to disable magnetic movement.

magnetStrength

Type
number
Default
2
Description
How strongly the element follows the pointer.

wrapperClassName

Type
string
Default
""
Description
Classes for the outer wrapper.

innerClassName

Type
string
Default
""
Description
Classes for the moving child wrapper.

Reference

ReactBits Magnetic Hover