컴포넌트
Skeleton Shimmer
스켈레톤 카드 위로 대각선 shimmer 광선이 Canvas2D로 반복 스윕하며 로딩을 표현하고, 커서 위치에 따라 광선 각도가 미세하게 기우는 플레이스홀더입니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SkeletonShimmer-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "card" | "list" | "profile" | "card" | 뼈대 레이아웃 프리셋 (card=썸네일 카드, list=목록 행, profile=아바타+텍스트+버튼). |
| width | number | 300 | 전체 카드 너비(px). |
| speed | number | 1600 | shimmer 광선이 한 번 스윕하는 데 걸리는 시간(ms). 작을수록 빠르다. |
| bandWidth | number | 0.34 | 밝은 shimmer 띠의 폭 비율(0~1, 컨테이너 대각선 대비). |
| shimmerColor | string | "#C084FC" | shimmer 하이라이트 색(브랜드 바이올렛 계열). |
| boneColor | string | "#1A1526" | 스켈레톤 뼈대(바닥) 색. |