효과Effects / 반복·앰비언트Loop & Ambient / Nº 622

원형 글자 회전Circular Text Spin

Circular Text Spin

원형 글자 회전

다른 이름Also known as · Spinning Circular Text · Circular Text Orbit · 원형 텍스트 회전

622

렌더 추가 예정CLIP COMING원형 글자 회전Circular Text Spin정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 622. 원형 글자 회전 · Circular Text Spin · none

원 둘레에 놓인 문장이 중심을 축으로 계속 회전하는 효과A sentence set around a circle rotates continuously about its center.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

순환과 지속의 느낌을 준다. 배지나 스티커에 살아 있는 표정을 더한다Suggests cycling and continuity and gives badges or stickers a living expression.

언제 쓰나Use whenUSE WHEN

'SCROLL DOWN' 같은 원형 배지에 회전을 줄 때
반복 슬로건을 인장처럼 돌릴 때

Spin a circular 'SCROLL DOWN' badge.
Rotate a repeated slogan like a seal.

과용 주의AvoidAVOID

한 바퀴 6초 미만 금지
문구 끝과 처음이 이어지는 구분 기호 없이 두지 않는다
중요한 정보는 회전 글자에만 두지 않는다

분류TagsTAGS

반복·앰비언트Loop & Ambient 브랜딩Branding 분위기Mood 웹 UIWeb UI 숏폼Short-form 발표Presentation 난이도 기본Basicsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

반지름 60px 링에 'DESIGN * MOTION * ' 문구가 12초에 한 바퀴, 등속으로 시계 방향 회전한다

과용 · 나쁜 사례OVERUSE

회전이 너무 빨라(3초 이하) 읽을 수 없고 가속·감속이 걸려 덜컹거린다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
한 바퀴	12s	8~20s	읽을 수 있는 속도
반지름	60px	48~120px	배지 크기
방향	시계	시계/반시계	동심원이면 서로 반대
이징	none	none	등속 필수

GSAP

/* <svg><path id="c" d="M0,-60 a60,60 0 1,1 0,120 a60,60 0 1,1 0,-120"/><text><textPath href="#c">DESIGN * MOTION * </textPath></text></svg> */
tl.to('.ring', { rotation: 360, transformOrigin: '50% 50%', duration: 12, ease: 'none' }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 배지에 문구 '<문구>'를 반지름 60px 원 경로의 textPath로 두르고, 링 전체가 12초에 360도 시계 방향으로 등속 회전하게 해줘. 문구 끝에 구분 기호를 넣어 이음새가 이어지게 하고, 이징은 none. 한글은 음절 간격이 고르게 보이도록 letter-spacing 0.08em을 줘.

On the badge in <target> wrap '<text>' around a 60px radius circular path as a textPath and rotate the whole ring 360 degrees clockwise at constant speed over 12 seconds, ease none. End the phrase with a separator so the seam reads continuously, and add 0.08em letter-spacing.

Codex

<파일>의 원형 텍스트 링에 tl.to(rotation 360, 12s, none)을 건다. 0초와 12초 프레임이 동일한지, 3초 시점에 90도 회전했는지 캡처와 transform 값으로 확인하고 글자 겹침이 없는지도 봐.

In <file> add tl.to on the circular text ring (rotation 360, 12s, none). Verify the frames at 0s and 12s are identical and that at 3s it has rotated exactly 90 degrees, using captures and the transform value; also check no glyphs overlap.