Cursor & Interaction Effects

Magnetic Hover

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

Preview

interaction effect

Magnetic Hover

move near the chip

Magnet

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/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

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
paddingnumber100Pointer activation area around the element.
disabledbooleanfalseWhether to disable magnetic movement.
magnetStrengthnumber2How strongly the element follows the pointer.
wrapperClassNamestring""Classes for the outer wrapper.
innerClassNamestring""Classes for the moving child wrapper.

Reference

ReactBits Magnetic Hover