비트 싱크Beat Synchronization
요소의 도착, 크기 변화, 화면 컷이 음악의 특정 박자에 정확히 맞아떨어진다Arrivals, scale changes and cuts land exactly on specific beats of the music.
무엇을 전하나What it tells
- 음악 위에 카드나 문구가 차례로 등장하는 영상을 만들 때
- 컷 전환을 박자에 맞춰 리듬을 살릴 때
- Cards or lines appear in sequence over music.
- Time cuts to the beat to strengthen rhythm.
- 시작이 아니라 도착을 박에 맞춘다
- BPM은 분석 도구로 실측한다(감으로 입력 금지)
좋은 예와 나쁜 예Good and bad use
100BPM에서 박자 간격 600ms, 이동 400ms짜리 카드가 박 시각 0.6초, 1.2초, 1.8초에 정확히 도착한다. 도착 오차는 1프레임 이내다
이동이 시작하는 시각을 박에 맞춰 도착이 박보다 400ms 늦거나, 박자를 눈으로 대충 맞춰 매번 오차가 다르다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| BPM | 100 | 80~140 | 박 간격 60/BPM초 |
| 박자 간격 | 600ms | 428~750ms | BPM에서 계산 |
| 이동 시간 | 400ms | 250~500ms | 박 간격보다 짧게 |
| 허용 오차 | 1프레임 | 30fps 기준 33ms | 이내 |
const beat = 60 / 100; // 0.6s
[1, 2, 3, 4].forEach((n, i) => {
tl.from(`.card${i}`, { y: 60, opacity: 0, duration: 0.4, ease: 'power3.out' }, n * beat - 0.4); // 도착 = n*beat
});에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상> 카드 4장이 100BPM 음악의 박에 맞춰 도착하게 GSAP 타임라인을 짜줘. 박 간격은 0.6초이고 카드 i의 도착 시각은 (i+1)*0.6초야. 각 카드는 y 60px 아래에서 0.4초, power3.out으로 올라오게 하고, 시작 시각은 도착 시각에서 0.4초를 뺀 값으로 계산해줘.
Build a GSAP timeline where 4 cards of <target> land on the beat of a 100 BPM track. The beat interval is 0.6 seconds and card i arrives at (i+1)*0.6s. Each card rises from 60px below over 0.4 seconds with power3.out, and its start time is arrival minus 0.4s.
<파일>의 등장 애니메이션을 비트 싱크로 고쳐줘. 100BPM, 박 간격 0.6초, 카드별 tween은 position = 도착 - 0.4, duration 0.4, ease power3.out. 0.6초, 1.2초, 1.8초 시점에 캡처해 각 카드가 정확히 최종 위치에 있는지, 그 직전 33ms 시점에는 아직 이동 중인지 확인해.
Convert the entrance animation in <file> to beat sync: 100 BPM, 0.6s beat interval, per-card tween at position = arrival - 0.4, duration 0.4, ease power3.out. Capture at 0.6s, 1.2s and 1.8s to verify each card is exactly at its final position, and 33ms earlier to verify it is still moving.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- local/HyperFrames-skills (
claude-skill:music-to-video/references/motion-primitive-catalog.md)unknown - theatre-js/theatreApache-2.0 / AGPL-3.0 (구성요소별)
- motion dictionary 4-explainer-learning.md#C. 템포·리듬·편집과 비트 동기own
- theatre-js/theatreApache-2.0 / AGPL-3.0 (구성요소별)