애니메이션
Confetti
클릭/트리거 시 색종이가 터져 중력으로 흩날리는 Canvas 2D 파티클 효과. 각 조각은 회전·팔랑임·페이드아웃을 가지며, 클릭 지점이나 ref.burst()로 발사할 수 있다. Vivid Kit 팔레트, DPR 보정, 모션 축소 접근성 지원.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Confetti-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 90 | 한 번 터질 때 생성할 색종이 조각 수. |
| spread | number | 9 | 발사 초기 속도 스케일. 클수록 넓게 퍼진다. |
| gravity | number | 0.32 | 중력 가속도. 클수록 빨리 떨어진다. |
| colors | readonly string[] | Vivid Kit 팔레트 | 색종이 색상 팔레트(hex). 미지정 시 브랜드 팔레트 사용. |
| triggerOnClick | boolean | true | 클릭 시 클릭 위치에서 자동 발사. |
| fireOnMount | boolean | false | 마운트 직후 1회 자동 발사. |
| children | ReactNode | undefined | 컨테이너 위에 겹쳐 보여줄 자식(라벨 등). |
| className | string | undefined | 추가 CSS 클래스. |
| style | CSSProperties | undefined | 추가 인라인 스타일. |