애니메이션
Tilt Card
마우스 위치에 따라 카드가 3D로 기울어지고(perspective + rotateX/Y) 커서를 따라가는 광택이 겹쳐지는 인터랙션. 커서가 벗어나면 부드럽게 원위치로 복귀한다.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/TiltCard-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | undefined | 카드 내부에 표시할 콘텐츠 |
| maxTilt | number | 14 | 최대 기울임 각도(도). 클수록 더 과하게 기운다 |
| perspective | number | 900 | perspective 값(px). 작을수록 원근이 강해진다 |
| hoverScale | number | 1.04 | 호버 시 살짝 커지는 배율(1이면 확대 없음) |
| glareColor | string | "#EC4899" | 광택 하이라이트 색상 |
| glareOpacity | number | 0.45 | 광택 세기(0~1) |
| returnMs | number | 400 | 복귀 애니메이션 전환 시간(ms) |
| className | string | "" | 추가 클래스 |
| style | CSSProperties | undefined | 카드 스타일 오버라이드 |