AWESOME AI MOTION
효과Effects / 강조·주의Emphasis / Nº 079

강조점 순회Focus Handoff

Focus Handoff
강조점 순회
다른 이름Also known as · Accent Walk · gradient-text-sweep · Narration-synchronized signaling · 해설 동기 신호 주기 · Focus handoff · 초점 이전 · Code Range Focus · 코드 범위 초점 이동
079
도판Fig. 079. 강조점 순회 · Focus Handoff · power2.inOut
재생 속도Speed

이미 배치된 여러 항목 중 하나씩 색이나 빛이 켜졌다가 다음 항목으로 옮겨 간다Among items already laid out, one lights up at a time and the highlight hands off to the next.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
지금 설명 중인 항목이 어디인지, 읽는 순서가 어떻게 되는지 한눈에 알게 한다Viewers see which item is being explained and the reading order at a glance.
언제 쓰나Use whenUSE WHEN
  • 4개 항목을 차례로 설명하며 현재 항목만 밝히고 싶을 때
  • 해설과 화면이 동기되는 목록형 장면을 만들 때
  • Explain four items in turn and light only the current one.
  • Build a list scene synced with narration.
과용 주의AvoidAVOID
  • 동시 강조는 하나만
  • 항목 6개 초과 시 스크롤이나 분할을 쓴다
분류TagsTAGS
강조·주의Emphasis강조Emphasis순서·흐름Sequence설명 영상Explainer video발표Presentation스크롤덱Scroll deck난이도 기본Basicgsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

항목 4개가 모두 보이고 강조는 하나씩 500ms 홀드 후 150ms 전환으로 넘어간다. 꺼진 항목은 opacity 0.35

과용 · 나쁜 사례OVERUSE

항목마다 다른 색을 쓰고 전환이 0.6초 이상 걸려 어디가 켜졌는지 헷갈린다. 두 항목이 동시에 켜진다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
항목 수43~6전부 미리 배치
홀드500ms400~1200ms해설 길이에 맞춤
전환150ms100~250ms교차 페이드
비활성 opacity0.350.25~0.5읽을 수 있는 최소
GSAP
items.forEach((el, i) => {
  const t = 0.4 + i * 0.65; // 홀드 500 + 전환 150
  tl.to(el, { opacity: 1, scale: 1.04, duration: 0.15, ease: 'power2.inOut' }, t);
  tl.to(el, { opacity: 0.35, scale: 1, duration: 0.15, ease: 'power2.inOut' }, t + 0.65);
});
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 목록 4개 항목이 처음부터 모두 보이되 0.35 opacity로 흐리게 두고, 0.4초부터 항목이 하나씩 opacity 1, scale 1.04로 켜지게 해줘. 각 항목은 500ms 홀드 후 150ms에 다음 항목으로 넘어가고 이전 항목은 다시 0.35로 돌아가게 해. 이징은 power2.inOut.

Make all 4 list items in <target> visible from the start at 0.35 opacity, then from 0.4 seconds light them one at a time with opacity 1 and scale 1.04. Each holds 500ms then hands off over 150ms while the previous returns to 0.35. Use power2.inOut.

Codex

<파일>에 focus handoff를 구현해. 항목 4개, 홀드 500ms, 전환 150ms, 비활성 opacity 0.35, 활성 scale 1.04, ease power2.inOut. 0.6초, 1.25초, 1.9초, 2.55초에 캡처해 그 시점에 켜진 항목이 정확히 하나인지 확인해.

Implement focus handoff in <file>: 4 items, hold 500ms, transition 150ms, inactive opacity 0.35, active scale 1.04, ease power2.inOut. Capture at 0.6s, 1.25s, 1.9s and 2.55s and verify exactly one item is lit at each time.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
항목별 on/off tween을 타임라인 위치로 배치한다. 해설 시각 배열을 그대로 시작 시각에 쓰면 narration-sync와도 맞물린다
ReelForgeBRIEF TO VIDEO
브리프에 항목 수, 홀드, 전환, 비활성 opacity를 싣고 해설 문장 길이로 홀드를 정한다
Scrolline DeckSCROLL SCRUB
진행률 구간을 항목 수로 등분한다. 스크럽 중 두 항목이 겹치지 않도록 전환 폭은 구간의 20% 이하
06

잘 맞는 조합Pairs well with

하이라이트 스윕 · Highlight Sweep
Nº 089하이라이트 스윕Highlight SweepHighlight Sweep
렌더 추가 예정CLIP COMING
해설 동기 모션Narration-synchronized Motion
405
Nº 405해설 동기 모션Narration-synchronized MotionNarration-synchronized Motion
렌더 추가 예정CLIP COMING
선택 영역 이동Selection Travel
082
Nº 082선택 영역 이동Selection TravelSelection Travel
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo