애니메이션
Holographic Card
포인터 위치(--x/--y)에 따라 무지갯빛 포일 시닌이 흐르는 카드. 이미지 없이 conic-gradient 색환을 포인터 중심으로 배치하고 color-dodge 포일층과 overlay 광택층을 이중 블렌드해 젖은 광택을 만든다. 포인터 이탈 시 중앙으로 부드럽게 복귀하며 reduced-motion에 대응한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/HolographicCard-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | HOLOGRAPHIC | 카드 중앙에 표시할 라벨 |
| foilStrength | number | 0.65 | 포일 무지개 강도(0~1) |
| returnMs | number | 420 | 포인터 이탈 후 복귀 전환 시간(ms) |
| className | string | "" | 추가 CSS 클래스 |