CircularText

원형 경로를 따라 배치된 텍스트가 회전. 배지·도장·CD 라벨·스피너 라벨에 활용.

라이브 미리보기

텍스트 (마침표/구분자로 마무리 권장)회전 방향

반지름 (90px)회전 속도 (10000ms)시작 각도 (0°)글자 크기 (18px)굵기 (700)색상

기본 배지 (시계)

작은 도장

반시계 + 큰 글자

정지 (durationMs={'<='} 0)

사용

import { CircularText } from '@baneung-pack/effect';

// 기본 회전 배지
<CircularText text="BANEUNG · PACK · " radius={70} fontSize={16} fontWeight={700} />

// 반시계 + 느린 속도
<CircularText
  text="DESIGN · SYSTEM · "
  direction="ccw"
  durationMs={15000}
  radius={90}
/>

// 정지 (정적 배지)
<CircularText text="STATIC · BADGE · " durationMs={0} />

API

CircularTextProps

Property	Type	기본값	설명
text	string	—	표시할 텍스트 (필수). 8~20자 권장.
radius	number	80	원 반지름 (px).
durationMs	number	12000	한 바퀴 시간 (ms). 0 이하면 정지.
direction	'cw' \| 'ccw'	'cw'	회전 방향.
startAngleDeg	number	0	시작 각도 (deg). 0=12시.
fontSize	string \| number	—	폰트 크기.
fontWeight	CSSProperties['fontWeight']	—	폰트 굵기.
color	string	—	텍스트 색.
className	string	—	추가 클래스.
style	CSSProperties	—	인라인 style.