컴포넌트
Button Shine Sweep
마우스를 올리거나 키보드로 포커스하면 사선 광택이 버튼 표면을 한 번 쓸고 지나가는 CTA 버튼이며, 순수 CSS transition으로 구현되고 포인터 추종 하이라이트는 컨테이너 상대좌표로만 렌더된다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonShineSweep-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "Get Vivid Kit" | 버튼에 표시할 라벨 텍스트. |
| colorFrom | string | "#C084FC" | 그라데이션 배경 시작 색(왼쪽, 바이올렛 기본). |
| colorTo | string | "#EC4899" | 그라데이션 배경 끝 색(오른쪽, 마젠타 기본). |
| duration | number | 0.9 | 광택 스윕 1회 지속 시간(초). 작을수록 빠르게 지나감. |
| shineWidth | number | 0.32 | 광택 밴드의 폭 비율(0~1). 클수록 넓은 하이라이트. |
| onClick | () => void | undefined | 클릭 핸들러. button 시맨틱이라 Enter/Space 키도 동작. |