AWESOME AI MOTION
효과Effects / 타이포Typography / Nº 099

글꼴 셔플Font Shuffle

Font Shuffle
글꼴 셔플
다른 이름Also known as · Font shuffle · Typeface Shuffle · 키워드 글꼴 셔플
099
렌더 추가 예정CLIP COMING글꼴 셔플Font Shuffle정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 099. 글꼴 셔플 · Font Shuffle · steps(1)

문장은 고정하고 핵심 단어의 글꼴만 박자마다 바뀌는 효과The sentence stays put while a key word changes typeface on every beat.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
같은 말이 여러 성격을 가진다는 것과 음악의 박자를 함께 보여준다. 글꼴 변화가 리듬 악기가 된다Shows one word taking on different personalities in time with the music; the font change acts as a rhythm instrument.
언제 쓰나Use whenUSE WHEN
  • 음악 영상에서 키워드가 박자마다 다른 표정을 가질 때
  • 브랜드 가치 단어를 다양한 서체로 훑을 때
  • Give a keyword a different face on each beat in a music video.
  • Sweep a brand-value word through several typefaces.
과용 주의AvoidAVOID
  • 슬롯 폭을 가장 넓은 글꼴 기준으로 고정한다
  • 글꼴 4종 초과 금지
  • 최종 정지 글꼴은 가독성이 가장 높은 것으로
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

'FREE'가 박자 250ms마다 4가지 글꼴로 바뀌고 1초 뒤 최종 글꼴에서 멈추며 문장의 나머지는 움직이지 않는다

과용 · 나쁜 사례OVERUSE

글꼴마다 글자 폭이 달라 문장 전체가 좌우로 출렁인다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
박자 간격250ms150~400ms글꼴 교체 간격
글꼴 수43~5교체 후보
최종 정지1000ms600~1500ms마지막 글꼴 유지
슬롯 폭최대 글꼴 폭-레이아웃 고정
GSAP
const fonts = ['Playfair Display', 'Bebas Neue', 'Space Mono', 'Pretendard'];
fonts.forEach((f, i) => {
  tl.set('.kw', { fontFamily: f }, i * 0.25);
});
/* .kw는 min-width로 슬롯 폭을 고정 */
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문장에서 핵심 단어 '<단어>'만 글꼴이 바뀌게 해줘. 0.25초마다 Playfair Display, Bebas Neue, Space Mono, Pretendard 순으로 교체하고 마지막 글꼴에서 1초 정지. 단어 슬롯 폭은 가장 넓은 글꼴 기준 min-width로 고정해 나머지 문장이 흔들리지 않게 하고, 글꼴은 preload해.

In the sentence of <target> change only the key word '<word>' typeface: every 0.25 seconds cycle Playfair Display, Bebas Neue, Space Mono, Pretendard and hold the last one for 1 second. Fix the word slot to a min-width based on the widest face so the rest of the sentence never shifts, and preload the fonts.

Codex

<파일>에 .kw의 fontFamily를 tl.set으로 0, 0.25, 0.5, 0.75초에 교체하고 min-width를 고정해. 각 시점을 캡처해 글꼴이 실제로 바뀌었는지, 주변 문장 x 좌표가 동일한지 확인해.

In <file> switch .kw fontFamily with tl.set at 0, 0.25, 0.5 and 0.75s and fix min-width. Capture each moment to confirm the face actually changed and that the x position of the surrounding text is identical.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
모든 글꼴을 preload하고 tl.set으로 교체한다. 로드 전 대체 글꼴이 렌더되지 않도록 document.fonts.ready 이후에 캡처한다
ReelForgeBRIEF TO VIDEO
타이포 씬 브리프에 글꼴 4종 이름과 박자 배열(초)을 명시한다. beat 분석 결과를 그대로 쓴다
Scrolline DeckSCROLL SCRUB
글꼴 인덱스를 진행률 구간 4등분으로 정한다. scrub에서도 계단식 교체라 되감기에 안전하다
06

잘 맞는 조합Pairs well with

07

출처Sources

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