컴포넌트
Droplet Slider
슬라이드를 덮고 있던 마스크가 진입 가장자리부터 물결치며 녹아 3~7개의 메타볼 방울로 분열하고, 각 방울이 베지어 아크를 따라 반대편 융합 시드로 흘러가 하나로 합쳐진 뒤 수축하며 다음 슬라이드를 드러냅니다. 드래그 플릭이 빠를수록 방울 수가 늘고 반지름이 작아져 잘게 흩어지고, 느리면 큰 방울 2~3개로 뭉근하게 굴러갑니다. 브랜드 3색은 콘텐츠가 아니라 경계 림에만 쓰이며, 마스크 기울기에 비례해 R/B 채널이 법선 방향으로 어긋나 빠른 구간에서만 무지개 색수차가 뜹니다. 마스크와 림은 1/4 해상도 오프스크린 캔버스에서 계산해 업스케일 합성하고, 전환이 끝나면 루프를 멈춥니다. 감속 선호(prefers-reduced-motion)와 저사양 감지 시에는 크로스페이드로 폴백합니다.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DropletSlider-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| slides | number | 4 | 슬라이드 개수(2~8로 제한). 각 슬라이드는 절차적으로 그려집니다 |
| autoplayMs | number | 3000 | 자동 전환 간격(ms). 0이면 자동 재생 없음이며 호버·포커스·드래그 중에는 일시정지합니다 |
| dropletMin | number | 3 | 느린 스와이프에서 생기는 최소 방울 수(크고 뭉근한 인상) |
| dropletMax | number | 7 | 빠른 플릭에서 생기는 최대 방울 수(작고 잘게 흩어지는 인상) |
| aberration | number | 3 | 경계 색수차 최대 오프셋(px). 로컬 마스크 기울기에 비례해 1px~이 값 사이로 적용됩니다 |
| gooSoftness | number | 0.35 | goo 융합 경계의 부드러움(0.05~0.9). 작을수록 또렷한 액체 실루엣 |
| showDots | boolean | true | 하단 인디케이터(점) 표시 여부 |