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

자간 공개Tracking Reveal

Tracking Reveal
자간 공개
다른 이름Also known as · Tracking reveal · 자간 변화 리빌 · Tracking Converge · 자간 수렴 · tracking-kerning-tween · Tracking Animation · 자간 애니메이션 · Text Tracking Expansion
114
렌더 추가 예정CLIP COMING자간 공개Tracking Reveal정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 114. 자간 공개 · Tracking Reveal · power2.out

넓게 벌어져 있던 글자 사이 간격이 줄어들며 제목이 한 덩어리로 정돈되는 효과Widely spaced letters tighten together until the title settles into one compact unit.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
고급스러운 응집. 흩어진 것이 정렬되며 신뢰와 차분함을 준다Refined cohesion: scattered elements aligning to signal trust and calm.
언제 쓰나Use whenUSE WHEN
  • 럭셔리·브랜드 필름의 제목 등장
  • 섹션 이름이나 부제를 조용히 정착시킬 때
  • Title reveals in luxury or brand films
  • Settling a section name or subtitle quietly
과용 주의AvoidAVOID
  • letter-spacing 자체를 보간하면 리플로가 생겨 줄이 흔들린다. 글자 위치를 고정하고 transform x로 보간한다
  • 한국어는 자간이 벌어지면 읽기가 끊긴다. 벌림은 0.2em 이하로 한다
분류TagsTAGS
타이포Typography분위기Mood브랜딩Branding설명 영상Explainer video발표Presentation스크롤덱Scroll deck난이도 기본Basicgsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"COLLECTION"이 letter-spacing 0.2em에서 0으로 0.8초 동안 모이며 opacity 0에서 1로 올라온다

과용 · 나쁜 사례OVERUSE

간격을 0.6em 이상 벌려 글자가 서로 무관한 조각처럼 보이고 줄이 화면 밖으로 넘친다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속0.8s0.6~1.2s천천히 모임
시작 자간0.2em0.1~0.4em한국어는 0.2em 이하
opacity0에서 10~1앞 60%에서 올라옴
이징power2.outpower2~power4끝이 부드럽게 정지
GSAP
// 최종 위치를 측정한 뒤 x 오프셋으로 벌림을 만든다
chars.forEach((c, i) => {
  const off = (i - (N - 1) / 2) * 0.2 * fontSize;
  tl.fromTo(node(i), {x: off, opacity:0}, {x:0, opacity:1, duration:0.8, ease:'power2.out'}, 0.2);
});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 제목에 tracking reveal을 넣어줘. 글자를 중앙 기준 0.2em 간격 오프셋에서 0으로 0.8초 동안 power2.out으로 모으고 opacity 0에서 1로 올려. letter-spacing 대신 글자별 transform x를 써서 리플로가 없게, 완료 뒤 1초 정지.

Add a tracking reveal to the title in <target>. Pull the letters from 0.2em offsets around the center to 0 over 0.8s power2.out while opacity goes 0 to 1. Use per-glyph transform x instead of letter-spacing to avoid reflow; hold 1s at the end.

Codex

<파일>의 제목에 tracking reveal을 적용해. 글자 i의 x 시작값=(i-(N-1)/2)*0.2*fontSize, x 0으로 0.8초 power2.out, opacity 0에서 1. 0.3초·0.7초·1.5초를 캡처해 글자 간격이 줄고 마지막 프레임에서 정상 자간인지, 줄 좌우 폭이 최종에서 화면 안인지 확인해.

Apply tracking reveal to the title in <file>. Glyph i starts at x=(i-(N-1)/2)*0.2*fontSize, tweens to 0 over 0.8s power2.out, opacity 0 to 1. Capture at 0.3s, 0.7s and 1.5s and verify spacing tightens, ends at normal tracking, and the line stays within the frame.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
글자 span의 x를 중앙 기준 오프셋으로 시작해 0으로 모은다. letter-spacing을 건드리지 않아 리플로가 없다
ReelForgeBRIEF TO VIDEO
브리프에 문구, 시작 자간 0.2em, 0.8초, 글자 크기를 싣는다. 크기가 바뀌면 오프셋을 다시 계산하게 한다
Scrolline DeckSCROLL SCRUB
진행률 0~0.5에 매핑한다. 홀드 구간에서 자간이 다시 벌어지지 않도록 종료 상태를 고정한다
06

잘 맞는 조합Pairs well with

블러 리빌 · Blur Reveal
Nº 030블러 리빌Blur RevealBlur Reveal
렌더 추가 예정CLIP COMING
단어 떠오르기Word Rise Fade
118
Nº 118단어 떠오르기Word Rise FadeWord Rise Fade
렌더 추가 예정CLIP COMING
클립 리빌Clip Reveal
059
Nº 059클립 리빌Clip RevealClip Reveal
07

출처Sources

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