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

도형 굴리기 루프Rolling Shape Loop

Rolling Shape Loop

도형 굴리기 루프

다른 이름Also known as · Rolling Shape Loader · 도형 구르기 로더

616

렌더 추가 예정CLIP COMING도형 굴리기 루프Rolling Shape Loop정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 616. 도형 굴리기 루프 · Rolling Shape Loop · linear

원이나 다각형이 바닥을 따라 구르거나 모서리를 축으로 넘어간다.A shape translates along a floor while rotating in proportion to its travel.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

이동을 동반한 반복 작업을 보여 준다.Suggests repeated work involving movement.

언제 쓰나Use whenUSE WHEN

전송 대기 표시에서 지속 활동을 표시할 때
짧은 반복으로 이동을 동반한 반복 작업을 보여 준다 때

Use a rolling shape to indicate repeated transport.
Use a short repeating motion to communicate suggests repeated work involving movement.

과용 주의AvoidAVOID

이동 거리와 회전량이 맞지 않아 바닥에서 미끄러진다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 순서·흐름Sequence 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

전송 대기 표시에서 작은 원이 80px 굴러가고 끝에서 사라져 다시 출발한다

과용 · 나쁜 사례OVERUSE

이동 거리와 회전량이 맞지 않아 바닥에서 미끄러진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1600ms	1200~2400ms	한 번의 반복에 걸리는 시간이다
이동 거리	80px	40~160px	반지름 약 12.7px 원의 한 바퀴 거리다
회전각	360deg	180~720deg	이동 거리를 원둘레와 맞춘다
이징	linear	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { width:25.46px; height:25.46px; border-radius:50%; background:conic-gradient(#0d9488 50%,#334155 0); animation:roll 1.6s linear infinite; }
@keyframes roll {
  0% { transform:translateX(0) rotate(0); opacity:0; }
  10%,90% { opacity:1; }
  100% { transform:translateX(80px) rotate(360deg); opacity:0; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 도형 굴리기 루프를 적용해. 주기 1600ms, 이동 거리 80px, 회전각 360deg, 이징 linear로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Rolling Shape Loop to <target>. Use a 1.6-second cycle, 80px travel, 360 degree rotation, and a 12.73px radius, and linear easing. Include the required element structure and drive the effect with one paused, seekable timeline. Hold the first frame when reduced motion is enabled.

Codex

<파일>의 대기 표시 또는 배경 영역에 도형 굴리기 루프를 적용해. 주기 1600ms, 이동 거리 80px, 회전각 360deg, 이징 linear를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 0.8초, 1.6초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Rolling Shape Loop in the waiting indicator or background region of <file>. Use a 1.6-second cycle, 80px travel, 360 degree rotation, and a 12.73px radius, and linear easing; derive loop phase from absolute time. Capture at 0, 0.8, and 1.6 seconds to verify the intermediate change and the return to the starting frame.