애니메이션
Like Burst Button
탭하면 하트가 튀어오르며 방사형 파티클과 확산 링이 버스트되는 좋아요 버튼. 순수 CSS keyframe으로 각 파티클에 CSS 변수로 방향만 주입해 단일 애니메이션을 재사용하고, 종료 시 span을 스스로 제거한다. aria-pressed 접근성 지원.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/LikeBurstButton-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | 좋아요 | 버튼에 표시할 라벨 텍스트 |
| particleCount | number | 8 | 버스트 시 방출되는 방사형 파티클 개수 |
| radius | number | 44 | 파티클이 날아가는 반경(px) |
| onToggle | (pressed: boolean) => void | undefined | 눌림 상태 변경 콜백 |
| className | string | "" | 추가 CSS 클래스 |