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

공전 루프Orbit Loop

Orbit Loop

공전 루프

다른 이름Also known as · Orbiting Objects · 객체 공전 · Orbiting Opposed Dots · 마주 도는 두 점

613

도판Fig. 613. 공전 루프 · Orbit Loop · linear

재생 속도Speed

아이콘이나 이미지가 중심 객체 주위를 같은 또는 서로 다른 궤도로 돈다.Objects orbit a central subject while keeping their labels upright.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

중심과 연결된 대상들의 관계를 보여 준다.Shows relationships organized around a shared center.

언제 쓰나Use whenUSE WHEN

중앙 서비스 주위의 여섯 연동 아이콘이 방향을 유지하며 공전한다에서 지속 활동을 표시할 때
짧은 반복으로 중심과 연결된 대상들의 관계를 보여 준다 때

Explain integrations around a central service.
Use a short repeating motion to communicate shows relationships organized around a shared center.

과용 주의AvoidAVOID

궤도가 너무 좁아 아이콘과 중앙 설명이 겹친다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

중앙 서비스 주위의 여섯 연동 아이콘이 방향을 유지하며 공전한다

과용 · 나쁜 사례OVERUSE

궤도가 너무 좁아 아이콘과 중앙 설명이 겹친다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	10000ms	7500~15000ms	한 번의 반복에 걸리는 시간이다
반경	120px	80~200px	1920x1080 기준 중심과의 거리다
객체 수	6개	3~8개	아이콘이 겹치지 않게 배치한다
이징	linear	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { position:relative; width:240px; height:240px; }
.fx .orbit { position:absolute; inset:0; animation:orbit 10s linear infinite; }
.fx .item { position:absolute; left:120px; top:120px; transform:rotate(calc(var(--i)*60deg)) translateX(120px); }
.fx .icon { display:block; animation:upright 10s linear infinite; rotate:calc(var(--i)*-60deg); }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes upright { to { transform:rotate(-360deg); } }

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 공전 루프를 적용해. 주기 10000ms, 반경 120px, 객체 수 6개, 이징 linear로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Orbit Loop to <target>. Use a 10-second cycle, six objects on a 120px radius with counter-rotation, 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

<파일>의 대기 표시 또는 배경 영역에 공전 루프를 적용해. 주기 10000ms, 반경 120px, 객체 수 6개, 이징 linear를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 5초, 10초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Orbit Loop in the waiting indicator or background region of <file>. Use a 10-second cycle, six objects on a 120px radius with counter-rotation, and linear easing; derive loop phase from absolute time. Capture at 0, 5, and 10 seconds to verify the intermediate change and the return to the starting frame.