컴포넌트
Masonry Gallery
가변 높이 타일을 CSS multi-column으로 패킹한 벽돌쌓기 갤러리입니다. break-inside:avoid로 흐름 배치하여 JS 위치 계산이 전혀 없고, 타일 높이와 색은 seed 기반 절차적 그라디언트라 이미지 자산이 필요 없습니다. 마운트 시 transition-delay 스태거로 순차 등장합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MasonryGallery-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 9 | 타일 개수. |
| columns | number | 3 | 컬럼 수. |
| gap | number | 12 | 타일 간 간격(px). |
| duration | number | 0.5 | 타일 등장 시간(초). |
| stagger | number | 0.07 | 타일마다 등장 지연 스태거(초). |
| palette | string[] | ["#C084FC", "#EC4899", "#5EEAD4"] | 절차적 그라디언트 팔레트. |
| className | string | undefined | 추가 CSS 클래스. |