애니메이션
Magnifier Lens
커서를 따라다니는 원형 확대 렌즈. 동일한 children을 한 번 더 복제해 원형으로 clip한 뒤 커서 지점을 원점으로 scale 하여 돋보기처럼 확대합니다. 이미지 캡처 없이 동일 DOM을 재렌더하므로 어떤 콘텐츠든 확대할 수 있습니다. reduced-motion 시 렌즈가 비활성화됩니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MagnifierLens-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| zoom | number | 2 | 확대 배율 |
| size | number | 180 | 렌즈 지름(px) |
| children | React.ReactNode | — | 확대 대상 콘텐츠 |
| className | string | undefined | 래퍼 요소에 추가할 CSS 클래스 |