컴포넌트
Profile Tilt
마우스 포인터 위치에 따라 3D 틸트되고 홀로그램 글로우가 도는 프로필 카드. pointer 이벤트로 rotateX/Y를 계산하고 포인터를 추종하는 광택과 회전하는 홀로그램 링을 결합했다. 아바타(이니셜/이모지)·이름·역할·상태 배지를 표시하며, reduced motion과 키보드 접근성을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ProfileTilt-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| name | string | "김비비드" | 표시할 이름 |
| role | string | "Product Designer" | 역할/직함 |
| avatar | string | undefined | 아바타 내용(이니셜 또는 이모지). 미지정 시 이름 첫 글자 사용 |
| glowColor | string | "#C084FC" | 홀로그램 글로우 주 색상 |
| glowColorSecondary | string | "#EC4899" | 홀로그램 글로우 보조 색상 |
| maxTilt | number | 14 | 최대 틸트 각도(도) |
| onSelect | () => void | undefined | 클릭/키보드 활성화 시 콜백. 지정 시 카드가 버튼 역할로 동작 |