컴포넌트
ButtonParticles
호버·포커스 시 버튼 내부 Canvas2D에서 브랜드 3색 파티클이 방출되고 클릭 시 방사형 버스트가 터지는, 커서 격리된 완전 독자 구현 버튼 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonParticles-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "Hover me" | 버튼에 표시할 라벨 텍스트. |
| emitRate | number | 6 | 활성(호버/포커스) 시 파티클 방출량. 값이 클수록 조밀하게 방출된다. |
| particleSize | number | 3 | 파티클 기본 크기(반지름, px). |
| speed | number | 1 | 방출 속도 배수. 값이 클수록 파티클이 멀리 퍼진다. |
| maxParticles | number | 160 | 동시에 존재할 수 있는 파티클 최대 개수(성능 상한). |
| onClick | () => void | undefined | 버튼 클릭 시 호출되는 콜백. 클릭 시 방사형 파티클 버스트도 함께 발생한다. |