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

점 먹기 로더Chomp Loader

Chomp Loader

점 먹기 로더

다른 이름Also known as · Arcade Chomp Loader · 입을 벌려 점 먹기 로더

596

렌더 추가 예정CLIP COMING점 먹기 로더Chomp Loader정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 596. 점 먹기 로더 · Chomp Loader · linear

입을 벌리는 원형 캐릭터가 연속된 작은 점을 삼킨다.A circular character opens its mouth as a row of dots moves into it.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

대기 시간을 장난스럽게 표현한다.Makes waiting feel playful.

언제 쓰나Use whenUSE WHEN

게임 다운로드 대기에서 지속 활동을 표시할 때
짧은 반복으로 대기 시간을 장난스럽게 표현한다 때

Use a playful waiting cue in a game-related interface.
Use a short repeating motion to communicate makes waiting feel playful.

과용 주의AvoidAVOID

업무 오류 화면에 장난스러운 캐릭터를 넣어 상태의 심각성을 흐린다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

게임 다운로드 대기에서 원형 캐릭터가 20px 간격의 점을 먹는다

과용 · 나쁜 사례OVERUSE

업무 오류 화면에 장난스러운 캐릭터를 넣어 상태의 심각성을 흐린다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1000ms	750~1500ms	한 번의 반복에 걸리는 시간이다
입각	60deg	40~80deg	위아래 반원이 각각 30deg 움직인다
점 간격	20px	16~28px	점열이 한 주기마다 한 칸 이동한다
이징	linear	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx .top,.fx .bottom { width:40px; height:20px; background:currentColor; transform-origin:50% 100%; border-radius:40px 40px 0 0; animation:jaw 1s linear infinite; }
.fx .bottom { rotate:180deg; animation-direction:reverse; }
.fx .dots { animation:food 1s linear infinite; }
@keyframes jaw { 0%,100% { transform:rotate(0); } 50% { transform:rotate(-30deg); } }
@keyframes food { to { transform:translateX(-20px); } }

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 점 먹기 로더를 적용해. 주기 1000ms, 입각 60deg, 점 간격 20px, 이징 linear로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Chomp Loader to <target>. Use a 1-second cycle, a 60 degree mouth opening and 20px dot spacing, 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

<파일>의 대기 표시 또는 배경 영역에 점 먹기 로더를 적용해. 주기 1000ms, 입각 60deg, 점 간격 20px, 이징 linear를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 0.5초, 1초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Chomp Loader in the waiting indicator or background region of <file>. Use a 1-second cycle, a 60 degree mouth opening and 20px dot spacing, and linear easing; derive loop phase from absolute time. Capture at 0, 0.5, and 1 seconds to verify the intermediate change and the return to the starting frame.