Ripple

자식 요소를 감싸 클릭 위치에서 물결이 퍼지는 효과를 입혀주는 래퍼. 버튼·카드·아이콘 등 어디든 적용 가능.

버튼에 적용

카드 / 큰 영역에 적용

클릭 가능한 카드

카드 전체가 ripple 효과의 영역이 됩니다. 모서리 안에서만 퍼지도록 자동 클리핑.

옵션 컨트롤

Ripple 색상 (RGBA 권장)Duration (600ms)

사용

import { Ripple } from '@baneung-pack/effect';

// 버튼 감싸기
<Ripple color="rgba(255,255,255,0.45)">
  <button>클릭</button>
</Ripple>

// 카드/리스트 항목
<Ripple color="rgba(0,0,0,0.08)" duration={800}>
  <div role="button" tabIndex={0}>카드</div>
</Ripple>

// 비활성화
<Ripple disabled>
  <button>ripple 없음</button>
</Ripple>

API

RippleProps

Property	Type	기본값	설명
children	ReactNode	—	감쌀 요소 (단일 권장).
color	string	currentColor	ripple 색상 (rgba 권장).
duration	number	600	ripple 시간 (ms).
opacity	number	0.35	시작 opacity (퍼지며 0으로 감소).
disabled	boolean	false	ripple 효과 비활성화.