컴포넌트
Gooey Loader
SVG goo 필터로 여러 점이 중앙으로 모였다 다시 퍼지며 액체처럼 융합되는 로딩 인디케이터로, 컨테이너 내부에 한정되며 재생/일시정지 토글을 제공한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GooeyLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| dotCount | number | 5 | 융합하는 블롭 개수 (3~8 범위로 clamp). |
| size | number | 160 | 로더 정사각 뷰포트 한 변 크기(px). 모든 렌더가 이 내부로 한정. |
| duration | number | 2400 | 모였다 퍼지는 1회 순환 시간(ms). 작을수록 빠름. |
| gooStrength | number | 6 | goo 융합 강도(blur 반경). 클수록 더 끈적하게 뭉침. |
| color | string | #C084FC | 블롭 주 색상 (Vivid Kit 퍼플). |
| color2 | string | #EC4899 | 블롭 보조 그라데이션 색상 (Vivid Kit 핑크). |