텍스트 애니메이션
Circular Spin Text
원형 경로를 따라 배치된 텍스트가 천천히 회전하는 애니메이션. 각 글자를 각도별로 회전·반지름 이동시켜 원둘레에 배치하고 컨테이너 전체를 무한 회전시킨다. 시계/반시계 방향과 회전 속도, 원 크기를 조절할 수 있으며 reduced-motion 시 정적 원형 배치로 표시된다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CircularSpinText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | (required) | 원형 경로를 따라 배치할 텍스트. |
| spinDuration | number | 18 | 한 바퀴 회전에 걸리는 시간(초). 클수록 천천히 돈다. |
| size | number | 200 | 원 지름(px). 텍스트가 놓이는 링의 크기. |
| fontSize | number | 18 | 글자 폰트 크기(px). |
| direction | "cw" | "ccw" | "cw" | 회전 방향. cw 시계방향, ccw 반시계방향. |
| colorFrom | string | "#C084FC" | 글자 색상 시작(짝수 인덱스 계열). |
| colorTo | string | "#EC4899" | 글자 색상 끝(홀수 인덱스 계열). |
| className | string | undefined | 래퍼에 추가할 CSS 클래스. |