키네틱 비트Kinetic Beats

Kinetic Beats

키네틱 비트

다른 이름Also known as · 단어 비트 · Kinetic typography · Kinetic beats · 박자 타이포 · 비트 타이포 · kinetic-beat-slam · Word Grid Burst · 단어 격자 축적

090

도판Fig. 090. 키네틱 비트 · Kinetic Beats · power3.out

재생 속도Speed

단어를 일정한 박자마다 중앙에 크게 찍고 빠르게 정착시키는 효과Words hit the center at a large scale on regular beats and quickly settle.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

세 단계의 리듬과 마지막 행동의 중요성을 전한다Communicates a three-step rhythm and emphasizes the final action.

언제 쓰나Use whenUSE WHEN

짧은 동사로 순서를 압축할 때
마지막 핵심 행동에 시선을 모을 때

Compress a sequence into short verbs.
Focus attention on the final key action.

과용 주의AvoidAVOID

긴 문장에는 쓰지 않는다
교체 순간에 두 단어를 겹치지 않는다
모든 단어에 강조색을 넣지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

읽고, 매기고, 고른다를 0.5초 간격으로 중앙에 찍고 마지막 단어만 주홍으로 남긴다

과용 · 나쁜 사례OVERUSE

긴 문장을 빠르게 교체해 읽기 전에 사라지게 한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
비트 간격	0.5s	0.4~0.8s	단어별 출발 간격
시작 배율	1.4	1.2~1.5	큰 단어가 빠르게 정착한다
정착 시간	0.25s	0.18~0.3s	다음 비트 전 읽기 시간을 남긴다
시작	0.3s	0.2~0.4s	빈 준비 구간

GSAP

['#read','#score','#choose'].forEach((s,i) => {
  const at = 0.3 + i * 0.5;
  tl.set(s, {opacity:1, scale:1.4}, at);
  tl.to(s, {scale:1, duration:0.25, ease:'power3.out'}, at);
  if(i < 2) tl.set(s, {opacity:0}, at + 0.5);
});

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 세 단어 읽고, 매기고, 고른다를 화면 중앙에 한 단어씩 보여줘. 0.3초, 0.8초, 1.3초에 opacity 1과 scale 1.4로 찍고 0.25초 동안 power3.out으로 scale 1에 정착시켜. 다음 비트에서 앞 단어를 즉시 숨기고 마지막 고른다만 주홍으로 3초까지 유지해.

Show the three words "Read", "Score", and "Pick" one at a time in the center of <target>. At 0.3, 0.8, and 1.3 seconds, make each word hit with opacity 1 and scale 1.4, then settle to scale 1 over 0.25 seconds with power3.out. Immediately hide the previous word on the next beat. Keep only the final word "Pick" in vermilion until 3 seconds.

Codex

<파일>의 .scene 중앙에 세 단어를 각각 독립된 span으로 배치해. 0.3초부터 0.5초 간격으로 opacity 1, scale 1.4를 설정하고 0.25초 동안 power3.out으로 scale 1에 정착시켜. 0.3초와 0.43초 캡처로 축소를, 0.73초와 1.23초로 단어 교체를, 2.9초로 마지막 주홍 단어 홀드와 겹침 없음을 확인해.

Place the three words "Read", "Score", and "Pick" in separate spans at the center of .scene in <file>. Starting at 0.3 seconds with 0.5-second intervals, set opacity 1 and scale 1.4, then settle to scale 1 over 0.25 seconds with power3.out. Capture at 0.3 and 0.43 seconds to check the scale reduction, at 0.73 and 1.23 seconds to check word replacement, and at 2.9 seconds to verify the final vermilion word holds without overlap.