컴포넌트
BouncingBall
중력·반발 물리로 낙하하는 공을 squash & stretch와 높이 연동 접지 그림자로 표현하고, 컨테이너 클릭 시 다시 튀어오르는 Canvas2D 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BouncingBall-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| ballRadius | number | 26 | 공 반지름(px). 6~200 범위로 클램프됩니다. |
| gravity | number | 0.5 | 중력 가속도. 클수록 더 빠르고 무겁게 낙하합니다(0.05~4). |
| bounciness | number | 0.78 | 반발계수(0~0.98). 높을수록 오래 튀고 낮을수록 빨리 멈춥니다. |
| squashStrength | number | 1 | 찌그러짐/늘어남 과장 강도(0=효과 없음, 1=기본, 최대 2). |
| interactive | boolean | true | 컨테이너 클릭 시 공에 위쪽 임펄스를 주어 다시 튀게 할지 여부. |
| backgroundColor | string | #08060E | 컴포넌트 배경색. |