애니메이션
Logo Ticker
로고 칩들이 requestAnimationFrame으로 구동되는 transform translateX를 통해 수평으로 끊김 없이 흐르며, 트랙을 2벌 복제해 seamless wrap을 만들고 호버 시 부드럽게 감속한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/LogoTicker-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| logos | ReactNode[] | DEFAULT_LOGOS (brand sample chips) | 흘러갈 로고/칩 목록. 비어 있으면 브랜드 기본 샘플 사용. |
| direction | "left" | "right" | "left" | 로고가 흐르는 방향. |
| speed | number | 60 | 스크롤 속도(px/초). 클수록 빠름. dt 보정으로 프레임률 무관. |
| hoverSlowdown | number | 0.25 | 마우스 호버 시 속도 배율(0~1, 0=완전정지). lerp로 부드럽게 감속. |
| gap | number | 28 | 로고 칩 사이 간격(px). 되감기 폭 계산에도 반영. |
| fade | boolean | true | 좌우 가장자리 그라데이션 마스크(페이드) 적용 여부. |