컴포넌트
Button Magnetic
커서가 반경 안으로 들어오면 버튼과 라벨이 커서 쪽으로 부드럽게 끌려갔다 벗어나면 원위치로 스프링백하는 자석 버튼입니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonMagnetic-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "자석 버튼" | 버튼에 표시할 라벨 텍스트 |
| radius | number | 120 | 자석이 반응하는 반경(px). 커서가 이 거리 안에 들어오면 끌림 시작 |
| strength | number | 0.42 | 끌림 세기(0~1). 클수록 커서에 더 많이 붙는다 |
| accentColor | string | "#C084FC" | 액센트(그라디언트 시작) 컬러 |
| accentColorSecondary | string | "#EC4899" | 액센트(그라디언트 끝) 컬러 |
| onClick | () => void | undefined | 클릭 시 실행되는 콜백 |