해설 동기 모션Narration-synchronized Motion

Narration-synchronized Motion

해설 동기 모션

다른 이름Also known as · Temporal contiguity of explanation and change · 설명과 변화의 동시 제시 · Sparse keyword support with narration · 해설과 짧은 핵심어 지원

405

렌더 추가 예정CLIP COMING해설 동기 모션Narration-synchronized Motion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 405. 해설 동기 모션 · Narration-synchronized Motion · power2.out

원인을 말하는 순간 대응하는 변화가 화면에서 동시에 일어나게 맞추는 동기화When the narration names a cause, the matching visual change happens at the same moment.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

말과 눈앞의 사건이 한 덩어리로 이어져 이해가 쉬워진다Speech and the event on screen fuse into one idea, which is easier to grasp.

언제 쓰나Use whenUSE WHEN

용어를 말하는 순간 그 도형이 나타나야 할 때
원인과 결과를 말하는 타이밍에 두 변화를 각각 걸 때

When a shape must appear as its term is spoken
When two changes should land on their spoken cause and effect

과용 주의AvoidAVOID

큐는 발화 시작 0~100ms 이내
큐 시각은 자막 타임스탬프에서 읽는다
시각 변화는 발화보다 먼저 시작하지 않는다

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

음성에서 매출이라고 말하는 1.24초에 막대가 0.8초 동안 올라오기 시작한다

과용 · 나쁜 사례OVERUSE

음성보다 0.5초 늦게 시각이 나타나 말이 끝난 뒤에야 이해된다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
큐 지연	0~100ms	0~150ms	발화 시작 기준
변화 길이	0.8s	0.5~1.2s	등장 tween
큐 수	2~4	1~5	한 장면 기준
이징	power2.out	power2~power3.out	도착이 분명

GSAP

const cues = { revenue: 1.24, cost: 3.10 };
tl.from('.bar-revenue', { scaleY: 0, transformOrigin: '50% 100%', duration: 0.8, ease: 'power2.out' }, cues.revenue + 0.05)
  .from('.bar-cost', { scaleY: 0, transformOrigin: '50% 100%', duration: 0.8, ease: 'power2.out' }, cues.cost + 0.05);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상>의 해설 동기 모션을 넣어줘. cues에 단어별 발화 시각 {revenue:1.24, cost:3.10}을 두고, 각 시각 +0.05초에 해당 막대가 scaleY 0에서 1로 0.8초 power2.out으로 올라오게 해. 큐 시각은 오디오 타임스탬프에서 읽은 값이야. paused 타임라인 하나로 만들어.

Add narration-synced motion to <target> with GSAP. Put word start times in cues {revenue:1.24, cost:3.10}, and at each time + 0.05s scale the matching bar from scaleY 0 to 1 over 0.8s with power2.out. Read cue times from the audio timestamps. One paused timeline.

Codex

<파일>의 <대상>에 narration-sync를 적용해. cues={revenue:1.24,cost:3.10}로 막대 tween을 position cues.x+0.05, 0.8s, power2.out에 건다. 1.2초·1.4초·3.2초를 캡처해 발화 시각 전에는 막대가 0이고 큐 후 100ms 이내에 자라기 시작하는지 확인해.

Apply narration-sync to <target> in <file>. With cues={revenue:1.24,cost:3.10} tween the bars at position cues.x + 0.05, 0.8s, power2.out. Capture at 1.2s, 1.4s and 3.2s and check the bar is 0 before its cue and starts growing within 100ms after it.