컴포넌트
Button3DFlip
호버·포커스 시 앞면과 뒷면 라벨이 3D로 뒤집히며, 포인터를 따라 미세하게 기울어지는 완전 독자 구현 버튼.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Button3DFlip-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| frontLabel | string | "마우스를 올려보세요" | 앞면(기본 상태) 라벨 텍스트. |
| backLabel | string | "안녕하세요! 👋" | 뒷면(호버/포커스 시 노출) 라벨 텍스트. |
| axis | "x" | "y" | "x" | 플립 회전축. x는 위아래로, y는 좌우로 뒤집힘. |
| duration | number | 500 | 플립 전환 시간(ms). reduced-motion 시 0으로 즉시 전환. |
| tiltMax | number | 12 | 포인터 추종 3D 기울기 최대 각도(도). 0이면 기울기 비활성. |
| accentColor | string | "#C084FC" | 앞면 그라데이션 시작 색 및 뒷면 보더/포커스 강조색. |