컴포넌트
Gradient Border Card
conic-gradient 링이 카드 테두리를 따라 회전합니다. mask 합성(exclude)으로 안쪽 픽셀을 도려내 링만 노출하고, @property 각도 애니메이션으로 rAF 없이 순수 CSS만으로 회전합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GradientBorderCard-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "Vivid Kit" | 카드 중앙에 표시할 텍스트. |
| borderWidth | number | 2 | 회전 링(테두리)의 두께(px). |
| spin | number | 6 | 링이 한 바퀴 회전하는 주기(초). |
| className | string | undefined | 루트 요소에 추가할 CSS 클래스. |