컴포넌트
Mirror Card
바닥에 거울 반사가 깔린 카드로, 카드 본체를 상하 반전한 복제본을 mask-gradient로 페이드시켜 물에 비친 듯한 반사를 순수 CSS로 구현하고 포인터 추종 스포트라이트/틸트를 자신의 컨테이너에만 격리한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MirrorCard-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| title | string | "Vivid Kit" | 카드 상단 제목. |
| subtitle | string | "거울 반사가 깔린 카드" | 제목 아래 한 줄 설명. |
| reflection | boolean | true | 바닥 거울 반사 클론 표시 여부. |
| reflectionFade | number | 0.55 | 반사가 사라지는 페이드 높이 비율(0~1). 클수록 반사가 길게 남는다. |
| interactive | boolean | true | 포인터 추종 스포트라이트/틸트 활성 여부. |
| maxTilt | number | 10 | 포인터에 따른 최대 3D 틸트 각도(도). |