애니메이션
Mosaic Wipe
호버 또는 클릭 시 픽셀 격자(CSS grid)가 순차/랜덤 딜레이로 채워지며 두 번째 콘텐츠로 전환되는 픽셀 와이프 효과. 격자 크기·색상·전환 속도·스태거·트리거 방식을 조절할 수 있다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MosaicWipe-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| firstContent | ReactNode | 브랜드 라벨 'Vivid' | 기본 상태(전환 전)에 표시할 콘텐츠 |
| secondContent | ReactNode | 브랜드 라벨 'Kit' | 전환 후 표시할 콘텐츠 |
| gridSize | number | 8 | 격자 한 변의 셀 개수 (2~20으로 클램프, 총 gridSize×gridSize 셀) |
| pixelColor | string | "#EC4899" | 픽셀 오버레이 채우기 색상 |
| pixelDuration | number | 240 | 픽셀 하나가 나타나는 전환 시간(ms) |
| staggerTotal | number | 420 | 셀별 딜레이가 분산되는 전체 스태거 총량(ms) |
| mode | "sequential" | "random" | "random" | 딜레이 패턴: 순차(왼→오) 또는 무작위 |
| trigger | "hover" | "click" | "hover" | 전환 트리거 방식: 호버 또는 클릭 토글 |
| size | number | string | "100%" | 컨테이너 가로/세로 크기(숫자는 px, 문자열은 CSS 값) |
| radius | number | 16 | 모서리 둥글기(px) |
| className | string | undefined | 추가 CSS 클래스 |
| style | CSSProperties | undefined | 컨테이너 인라인 스타일 오버라이드 |