컴포넌트
ButtonLiquid
호버 또는 키보드 포커스 시 버튼 아래에서 Canvas2D 액체가 차오르고 표면에 물결과 포인터 리플이 일렁이는 리퀴드 필 버튼.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonLiquid-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "Dive In" | 버튼에 표시할 라벨 텍스트. |
| colorFrom | string | "#EC4899" | 액체 하단(진한 쪽) 채움 색. |
| colorTo | string | "#C084FC" | 액체 표면(밝은 쪽) 채움 색. |
| waveHeight | number | 5 | 표면 물결 파고(px). 클수록 일렁임이 강해진다. |
| fillSpeed | number | 0.14 | 액체가 차오르는 반응 속도(0~1, 클수록 빠르게 채워짐). |
| ariaLabel | string | label 값 | 접근성 라벨. 미지정 시 label을 사용. |