애니메이션
Shine Border
카드 테두리를 따라 광택이 한 방향으로 흐르는 보더 효과. 회전하는 conic-gradient를 CSS mask 합성(exclude)으로 테두리 링에만 표시하여, 별처럼 반짝이는 대신 한 줄기 광택이 모서리를 매끄럽게 순환한다. @property로 각도를 등록해 키프레임 보간을 매끄럽게 하고, 미지원 브라우저에서는 requestAnimationFrame으로 각도를 직접 갱신하는 폴백을 갖춘다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ShineBorder-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | undefined | 카드 내부에 렌더링할 콘텐츠 |
| borderWidth | number | 2 | 테두리(광택 링) 두께(px) |
| radius | number | 20 | 모서리 둥글기(px) |
| duration | number | 4 | 광택이 테두리를 한 바퀴 도는 데 걸리는 시간(초) |
| colors | string[] | ["#C084FC", "#EC4899"] | 광택 그라데이션 색상 배열(Vivid Kit 브랜드색 기본) |
| shineSize | number | 90 | 광택 줄무늬가 차지하는 각도 폭(도). 작을수록 좁고 선명함 |
| reverse | boolean | false | 회전 방향 반전 여부 |
| className | string | undefined | 루트 요소에 추가할 클래스 |