컴포넌트
Liquid Fill Progress
원 안에서 사인파 수면이 목표치까지 차오르는 진행률 위젯. SVG clipPath로 물결을 원에 가두고 rAF로 매 프레임 파동 path를 재생성하며, 위상 다른 2레이어와 퍼센트 카운트업을 동조시킨다.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/LiquidFillProgress-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number | 65 | 목표 진행률(0~100). |
| size | number | 200 | SVG 지름(px). |
| amplitude | number | 7 | 수면 파동 진폭(px). |
| waveMs | number | 2200 | 파동 1주기 시간(ms). |
| fillMs | number | 1400 | 채워지는 애니메이션 지속(ms). |
| className | string | undefined | 루트 요소에 적용할 추가 CSS 클래스. |