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

회전 루프Spin Loop

Spin Loop

회전 루프

다른 이름Also known as · 제자리 회전 · Ring Spinner · 회전 링 로더 · Ambient globe rotation · 지구 지속 회전

589

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

도판Fig. 589. 회전 루프 · Spin Loop · none

기어나 시계 바늘이나 로더가 중심 위치를 유지하며 계속 회전한다.A gear, pointer, or loader rotates around a fixed center.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

작동 중인 상태와 시간의 흐름을 느낀다.Suggests ongoing operation and passing time.

언제 쓰나Use whenUSE WHEN

기어의 작동 상태를 표시할 때
고정 원호 로더를 회전시킬 때

Use when presenting spin loop in a waiting or ambient scene.
Use for a compact status indicator with a stable surrounding layout.

과용 주의AvoidAVOID

SVG 중심이 어긋나 기어가 공전한다.
정보를 읽는 동안 반복 진폭을 키우지 않는다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 분위기Mood 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 기본Basicsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

기어 중심은 고정되고 2.4초마다 한 바퀴 돈다.

과용 · 나쁜 사례OVERUSE

SVG 중심이 어긋나 기어가 공전한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	2.4s	1.68~3.36s	유한 구간을 호스트 시간으로 반복
회전량	360deg	-360~360deg	한 주기 정확히 한 바퀴
앵커	50% 50%	대상 중심	SVG transform-box 설정
이징	none	none	움직임의 가속과 감속

GSAP

gsap.set('.rotor', {transformBox:'fill-box', transformOrigin:'50% 50%'});
tl.fromTo('.rotor', {rotation:0}, {rotation:360, duration:2.4, ease:'none'}, 0);
// Repeat this finite cycle using the host timeline's local time.

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 회전 루프을 적용해. 2.4초, 회전량 360deg; 앵커 50% 50%, 이징 none로 구현해. paused 타임라인으로 seek 가능하게 하고 반복은 유한 구간의 지역 시간으로 계산해.

Apply Spin Loop to <target> in <file>. Use a 2.4s segment with none; implement these explicit settings: Rotation per cycle: 360deg, Transform origin: 50% 50%. Use a paused, seekable timeline and repeat through local timeline time.

Codex

<파일>의 <대상> 레이어에 회전 루프을 적용해. 2.4초, 회전량 360deg; 앵커 50% 50%, none를 사용하고 0초, 1.2초, 2.4초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Spin Loop to the <target> layer in <file> with Rotation per cycle: 360deg, Transform origin: 50% 50%, using the supplied core snippet and a 2.4s segment with none. Capture at 0s, 1.2s, and 2.4s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.