애니메이션
Marquee
로고나 텍스트가 끊김 없이 무한 스크롤되는 마퀴 컴포넌트입니다. 콘텐츠를 복제해 이음새 없는 루프를 만들고, CSS transform 애니메이션으로 부드럽게 흐르며 방향/속도 조절과 호버 시 일시정지를 지원합니다.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Marquee-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | ReactNode[] | 샘플 6종 | 스크롤할 아이템 목록(문자열/이모지/노드). 비어 있으면 기본 샘플을 사용합니다. |
| direction | "left" | "right" | "left" | 스크롤 방향입니다. |
| speed | number | 18 | 한 바퀴 도는 데 걸리는 시간(초). 작을수록 빠릅니다. |
| pauseOnHover | boolean | true | 마우스 호버 시 일시정지 여부입니다. |
| gap | number | 32 | 아이템 사이 간격(px)입니다. |
| fade | boolean | true | 좌우 페이드(그라데이션 마스크) 적용 여부입니다. |
| className | string | "" | 컨테이너에 추가할 클래스입니다. |