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

눈동자 시선 루프Watching Eyes

Watching Eyes

눈동자 시선 루프

다른 이름Also known as · Watching Eyes Loader · 움직이는 눈 로더

620

렌더 추가 예정CLIP COMING눈동자 시선 루프Watching Eyes정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 620. 눈동자 시선 루프 · Watching Eyes · ease-in-out

한 쌍의 눈동자가 좌우로 이동하고 눈꺼풀이 잠깐 닫힌다.Pupils look from side to side and the eyelids briefly close.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

살아 있는 대기와 친근함을 준다.Adds a friendly sense of life to a waiting state.

언제 쓰나Use whenUSE WHEN

챗봇 대기 아이콘의 눈동자가 좌우를 보고 150ms 동안 깜박인다에서 지속 활동을 표시할 때
짧은 반복으로 살아 있는 대기와 친근함을 준다 때

Give a chatbot waiting icon a gentle gaze and blink.
Use a short repeating motion to communicate adds a friendly sense of life to a waiting state.

과용 주의AvoidAVOID

시선 이동이 매 프레임 달라져 사용자의 입력을 감시하는 느낌을 준다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

챗봇 대기 아이콘의 눈동자가 좌우를 보고 150ms 동안 깜박인다

과용 · 나쁜 사례OVERUSE

시선 이동이 매 프레임 달라져 사용자의 입력을 감시하는 느낌을 준다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	3000ms	2250~4500ms	한 번의 반복에 걸리는 시간이다
시선 거리	6px	3~8px	동공이 눈 바깥으로 나가지 않게 한다
깜박임	150ms	100~200ms	주기 끝의 5% 구간을 사용한다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx .pupil { animation:gaze 3s ease-in-out infinite; }
.fx .eye { transform-origin:center; animation:blink 3s linear infinite; }
@keyframes gaze { 0%,100% { transform:translateX(0); } 30% { transform:translateX(6px); } 65% { transform:translateX(-6px); } }
@keyframes blink {
  0%,90%,95%,100% { transform:scaleY(1); }
  92.5% { transform:scaleY(.05); }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 눈동자 시선 루프를 적용해. 주기 3000ms, 시선 거리 6px, 깜박임 150ms, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Watching Eyes to <target>. Use a 3-second cycle, 6px pupil travel and a 150ms blink, 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

<파일>의 대기 표시 또는 배경 영역에 눈동자 시선 루프를 적용해. 주기 3000ms, 시선 거리 6px, 깜박임 150ms, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 1.5초, 3초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Watching Eyes in the waiting indicator or background region of <file>. Use a 3-second cycle, 6px pupil travel and a 150ms blink, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 1.5, and 3 seconds to verify the intermediate change and the return to the starting frame.