애니메이션
Radial Sparks
클릭 지점에서 방사형으로 불꽃 파티클이 튀는 인터랙션 효과. Canvas 2D와 requestAnimationFrame으로 파티클 생성·속도 감쇠·수명 페이드를 처리하며, 클릭(pointerdown)마다 균등 각도로 파티클을 방출한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RadialSparks-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colors | string[] | ["#C084FC", "#EC4899", "#F0ABFC"] | 불꽃 색상 배열. 파티클마다 순환하며 사용됩니다. |
| particleCount | number | 12 | 클릭 1회당 방출되는 파티클 수. |
| speed | number | 420 | 파티클 초기 속도(px/s). |
| lifetime | number | 520 | 파티클 수명(ms). 이 시간 동안 페이드아웃됩니다. |
| sparkLength | number | 14 | 스파크 선분 길이(px). |
| sparkWidth | number | 2 | 스파크 선 두께(px). |
| friction | number | 0.86 | 속도 감쇠 계수(0~1). 클수록 파티클이 빨리 느려집니다. |
| children | React.ReactNode | undefined | 클릭 대상이 되는 자식 요소. 컨테이너 전체가 클릭 감지 영역입니다. |
| className | string | undefined | 래퍼 요소에 적용할 추가 CSS 클래스. |