카라오케 자막Karaoke Caption
자막 줄은 그대로 두고 발화 중인 단어의 색이나 배경만 이동하는 효과The caption line stays put while only the color or pill background of the spoken word moves.
무엇을 전하나What it tells
- 말이 빠른 강의·인터뷰 자막을 읽기 쉽게 할 때
- 노래·랩 가사 자막을 박자에 맞출 때
- Make fast-speaking lecture or interview captions easy to follow.
- Sync song or rap lyric captions to the beat.
- 강조 시 글자 폭이 변하는 굵기 변경 금지(줄이 흔들림)
- 자막 줄 폭 최대 32자
- 타임스탬프 없이 균등 분할로 대신하지 않는다
좋은 예와 나쁜 예Good and bad use
한 줄 6단어 중 발화 단어가 시작 시각에 150ms로 노랑으로 바뀌고 단어가 끝나면 원래 색으로 돌아간다
단어 타임스탬프보다 0.3초 늦게 바뀌어 소리와 어긋나고, 강조 때문에 줄 위치가 흔들린다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 강조 전환 | 150ms | 80~200ms | 색·배경 전환 |
| 단어 시작 오프셋 | 0ms | -50~50ms | 싱크 보정 |
| 강조 색 | #FFD400 | - | 배경 대비 7:1 이상 |
| 줄당 단어 수 | 4~6 | 3~7 | 한 화면 줄 |
words.forEach(w => {
tl.to(w.el, { color: '#FFD400', duration: 0.15, ease: 'power1.out' }, w.start)
.to(w.el, { color: '#FFFFFF', duration: 0.15, ease: 'power1.out' }, w.end);
});에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상> 자막을 카라오케 방식으로 만들어줘. 한 줄에 4~6단어(한글은 어절 단위 span)를 흰색으로 두고, <타임스탬프 JSON>의 단어 start에 0.15초 동안 #FFD400으로 바뀌고 end에 흰색으로 돌아오게 해. 굵기 변경은 하지 말고 줄 위치가 흔들리지 않게 해.
Build karaoke captions in <target>. Keep 4 to 6 words per line in white (per word span; for Korean group by eojeol, never split jamo). At each word start from <timestamp JSON> tween to #FFD400 over 0.15 seconds and return to white at the word end. Do not change weight and keep the line from shifting.
<파일>의 단어 span에 start/end 타임스탬프로 color tween(0.15s)을 걸어. 임의 단어 3개에 대해 start 시각에 색이 바뀌고 end 시각에 복구되는지 해당 시점 캡처로 확인하고, 줄 x 좌표가 변하지 않았는지도 봐.
In <file> add color tweens (0.15s) to word spans using start/end timestamps. Capture three arbitrary words at their start and end times to confirm the color change and recovery, and check the line x position never changes.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- heygen-com/hyperframesApache-2.0
- local/HyperFrames-skills (
claude-skill:embedded-captions/references/rail.md)unknown - local/HyperFrames-skills (
claude-skill:media-use/audio/references/captions/motion.md)unknown - local/motion-graphics (
claude-skill:motion-graphics/references/motion-vocabulary.md)unknown - dcmcand/dynamic-typography-videosApache-2.0