컴포넌트
Comet Loader
꼬리를 끌고 원 궤도를 회전하는 혜성 모양의 로딩 인디케이터로, Canvas2D 잔상 세그먼트가 원뿔형 꼬리(conic tail)를 이루며 브랜드 그라데이션이 머리에서 꼬리로 흐른다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CometLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | number | 160 | 캔버스 한 변 크기(px). 정사각형으로 렌더된다. |
| orbitRatio | number | 0.62 | 궤도 반지름 비율(0.1~0.95). 캔버스 절반 크기 기준으로 혜성이 도는 궤도의 크기. |
| tailLength | number | 28 | 꼬리 세그먼트 개수. 많을수록 꼬리가 길고 촘촘해진다. |
| duration | number | 1600 | 1회전에 걸리는 시간(ms). 값이 작을수록 빠르게 돈다. |
| headColor | string | #C084FC | 혜성 머리(발광 코어 중심) 색. 브랜드 보라. |
| showOrbit | boolean | true | 배경 궤도 링(점선 원) 표시 여부. |