애니메이션
Magnetic Lines
격자 형태의 짧은 선들이 커서 방향을 향해 나침반 바늘처럼 정렬·회전하는 인터랙티브 배경. Canvas 2D로 각 셀의 각도를 커서 기준 atan2로 계산하고 짧은 회전 방향으로 lerp 보간하며, 커서와의 거리로 길이·굵기·밝기·색(보라→핑크)을 감쇠시킨다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MagneticLines-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| spacing | number | 34 | 격자 셀 간격(px). 작을수록 선이 촘촘해진다. |
| lineLength | number | 16 | 선의 기준 길이(px). 셀 간격의 0.7배로 자동 상한 적용. |
| influence | number | 160 | 자기장 영향 반경(px). 커서에서 이 거리 안의 선이 강하게 반응한다. |
| ease | number | 0.18 | 커서를 향한 회전 보간 계수(0~1). 클수록 빠르게 정렬한다. |
| drawLines | boolean | true | true면 방향성 선, false면 꼬리가 있는 방향성 점으로 렌더한다. |
| glow | boolean | true | 선과 커서 코어에 발광(글로우) 효과를 적용한다. |
| className | string | undefined | 컨테이너에 추가할 CSS 클래스. |