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

체이싱 도트Chasing Dots

Chasing Dots

체이싱 도트

다른 이름Also known as · 추격 점 로더 · Orbit Chase

595

렌더 추가 예정CLIP COMING체이싱 도트Chasing Dots정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 595. 체이싱 도트 · Chasing Dots · ease-in-out

여러 점이 원을 따라 돌면서 크기와 간격을 바꾸며 서로를 쫓는다.Dots orbit together while their sizes change with phase offsets.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

끊임없는 순환 작업을 보여 준다.Signals continuous cyclic processing.

언제 쓰나Use whenUSE WHEN

파일 처리 표시에서 지속 활동을 표시할 때
짧은 반복으로 끊임없는 순환 작업을 보여 준다 때

Show that a file operation is still running.
Use a short repeating motion to communicate signals continuous cyclic processing.

과용 주의AvoidAVOID

실제 처리율 숫자 옆에서 점의 개수를 완료 항목처럼 읽히게 한다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

파일 처리 표시에서 여섯 점이 돌며 차례로 커진다

과용 · 나쁜 사례OVERUSE

실제 처리율 숫자 옆에서 점의 개수를 완료 항목처럼 읽히게 한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	2000ms	1500~3000ms	한 번의 반복에 걸리는 시간이다
점 수	6개	3~8개	원 둘레에 균등 배치한다
위상차	120ms	80~180ms	점의 크기 변화에 적용한다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { position:relative; width:64px; height:64px; animation:chase 2s linear infinite; }
.fx i { position:absolute; inset:26px; transform:rotate(calc(var(--i)*60deg)) translateX(24px); }
.fx b { display:block; width:12px; height:12px; border-radius:50%; background:currentColor; animation:dot 2s ease-in-out infinite; animation-delay:calc(var(--i)*-120ms); }
@keyframes chase { to { transform:rotate(360deg); } }
@keyframes dot { 0%,100% { transform:scale(.4); } 50% { transform:scale(1); } }

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 체이싱 도트를 적용해. 주기 2000ms, 점 수 6개, 위상차 120ms, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Chasing Dots to <target>. Use a 2-second cycle, six dots with 120ms phase offsets, and ease-in-out 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

<파일>의 대기 표시 또는 배경 영역에 체이싱 도트를 적용해. 주기 2000ms, 점 수 6개, 위상차 120ms, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 1초, 2초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Chasing Dots in the waiting indicator or background region of <file>. Use a 2-second cycle, six dots with 120ms phase offsets, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 1, and 2 seconds to verify the intermediate change and the return to the starting frame.