컴포넌트
Glass Refraction
backdrop-filter로 유리 질감을 만들고 커서를 따라 굴절 하이라이트가 반짝이는 글래스모피즘 패널.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GlassRefraction-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | GlassRefractionItem[] | [3 dummy items] | 유리 패널에 표시할 항목 목록(썸네일은 그라데 블록). 미지정 시 자체 더미 데이터. |
| blur | number | 14 | backdrop-filter blur 세기(px). 유리의 굴절/불투명 정도. |
| intensity | number | 0.85 | 호버/포커스 시 커서 추종 반짝임 세기(0~1 클램프). |
| glowColor | string | #C084FC | 커서를 따라가는 굴절 하이라이트 주 색상. |
| glowColorSecondary | string | #EC4899 | 굴절 하이라이트 및 스펙트럼 밴드 보조 색상. |
| onSelectItem | (index: number) => void | undefined | 항목 클릭/키보드(Enter·Space) 선택 콜백. 지정 시 항목이 상호작용(button/tabIndex) 요소가 됨. |