애니메이션
Ripple Effect
클릭하거나 터치한 지점에서 원형 물결이 퍼져 나가는 머티리얼식 리플 효과입니다. 클릭 좌표에서 컨테이너의 가장 먼 모서리까지 계산해 물결 크기를 정하고, scale과 opacity 애니메이션으로 확산시킨 뒤 종료 시 자동으로 제거합니다. 여러 번 연속 클릭하면 물결이 겹쳐 표시됩니다.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RippleEffect-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| color | string | #C084FC | 물결의 색상입니다. |
| duration | number | 650 | 물결 확산 애니메이션의 지속 시간(ms)입니다. |
| children | React.ReactNode | undefined | 컨테이너 내부에 표시할 자식 요소입니다. |
| className | string | "" | 컨테이너에 추가할 클래스명입니다. |
| background | string | linear-gradient(135deg, #EC4899 0%, #C084FC 100%) | 컨테이너 배경(CSS background 값)입니다. |
| maxOpacity | number | 0.55 | 물결의 시작 최대 불투명도(0~1)입니다. |