컴포넌트
Frost Tiles
유리질 아이콘 그리드로, 각 타일에 호버하면 CSS 3D 틸트와 커서를 따라가는 굴절 하이라이트, 확대 효과가 자체 컨테이너 안에서만 나타난다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FrostTiles-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | GlassIconItem[] | 내장 8종 더미 세트 (Prism, Spark, Frost, Lens, Cell, Launch, Orbit, Bloom) | 표시할 아이콘 목록(글리프+라벨+선택 강조색). 미지정 시 컴포넌트 자체 더미 데이터 사용. |
| columns | number | 4 | 그리드 열 수(1 이상). 항목 수를 넘지 않도록 클램프된다. |
| maxTilt | number | 18 | 호버 시 최대 3D 틸트 각도(도). 클수록 더 크게 기운다. |
| hoverScale | number | 1.12 | 호버 시 타일 확대 배율(1 이상). 1이면 확대 없음. |
| glareSize | number | 62 | 커서를 따라가는 굴절 하이라이트 반경(%). 클수록 넓게 퍼진다. |
| onSelect | (index: number) => void | undefined | 타일 클릭/키보드 활성화 콜백. 지정 시 각 타일이 키보드 접근 가능한 버튼처럼 동작. |