애니메이션
Sheen Sweep
카드에 마우스를 올리면 사선 광택(glare)이 표면을 쓸고 지나가고, 포인터 위치를 따라 은은한 radial 하이라이트가 이동하는 인터랙션 카드 래퍼.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SheenSweep-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | React.ReactNode | undefined | 카드 내부에 표시할 콘텐츠 |
| glareColor | string | "#C084FC" | 사선 광택 띠의 주 색상 |
| highlightColor | string | "#EC4899" | 포인터 추종 radial 하이라이트 색상 |
| angle | number | 45 | 광택 띠의 기울기(도). 45는 좌하→우상 사선 |
| duration | number | 650 | 광택 sweep 지속 시간(ms) |
| glareWidth | number | 0.22 | 광택 띠 두께 비율(0~1) |
| glareOpacity | number | 0.55 | 광택 최대 불투명도(0~1) |
| highlightRadius | number | 240 | radial 하이라이트 반경(px) |
| borderRadius | number | 16 | 모서리 둥글기(px) |
| className | string | "" | 추가 CSS 클래스 |