애니메이션
Border Beam
빛 구슬(빔)이 카드 테두리 경로를 따라 한 바퀴 도는 강조 효과. CSS mask로 테두리 링만 남기고, 등록형 각도 커스텀 프로퍼티(@property)를 회전시켜 conic-gradient 혜성이 마스크 고정 상태로 테두리를 순회한다. reduced 모션 시 정적 글로우 링으로 대체.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BorderBeam-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | React.ReactNode | undefined | 링/카드 안에 들어갈 내용 |
| colorStart | string | #C084FC | 빛 구슬의 시작(중심) 색상 |
| colorEnd | string | #EC4899 | 빛 구슬의 끝(꼬리) 색상 |
| size | number | 2 | 테두리(빔) 두께 px |
| radius | number | 16 | 모서리 둥글기 px |
| duration | number | 5 | 빔이 한 바퀴 도는 데 걸리는 시간(초) |
| tail | number | 90 | 구슬 꼬리 길이(도). 클수록 긴 혜성 꼬리 |
| baseBorderColor | string | rgba(192,132,252,0.18) | 정지 상태에서 보이는 은은한 베이스 테두리 색 |
| background | string | #0b0713 | 카드 안쪽 배경색 |
| textColor | string | #f5f3ff | 글자색 |
| className | string | "" | 추가 클래스 |