애니메이션
Spin Border
버튼이나 카드의 테두리를 따라 빛나는 그라데이션이 회전하는 애니메이션 보더. conic-gradient로 만든 빛 스팟을 회전시키고 안쪽 컨텐츠 레이어로 중앙을 덮어 테두리 링만 빛나게 한다. 순수 CSS로 자작해 외부 에셋이 없고, prefers-reduced-motion 시 정지된 정적 그라데이션으로 대체된다.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpinBorder-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | React.ReactNode | undefined | 버튼/카드 안에 들어갈 내용 |
| colorStart | string | #C084FC | 회전하는 빛의 시작 색상 (기본: 바이올렛) |
| colorEnd | string | #EC4899 | 회전하는 빛의 끝 색상 (기본: 마젠타) |
| thickness | number | 2 | 테두리 두께(px) |
| radius | number | 14 | 모서리 둥글기(px) |
| duration | number | 4 | 1회전 소요 시간(초) |
| background | string | #0b0713 | 안쪽 컨텐츠 배경색 |
| textColor | string | #f5f3ff | 컨텐츠 글자색 |
| className | string | "" | 추가 클래스 |
| onClick | () => void | undefined | 클릭 핸들러 (버튼처럼 동작, Enter/Space 키 지원) |