글자별 스태거Per-character Rise

Per-character Rise

글자별 스태거

다른 이름Also known as · 글자 상승 · Character stagger · 글자 시간차 등장 · 글자 순차 등장 · Text Scale Cascade · 글자 스케일 캐스케이드 · scale-jump-stairstep · word-pop

088

도판Fig. 088. 글자별 스태거 · Per-character Rise · power3.out

재생 속도Speed

글자들이 아래에서 위로 시간차를 두고 올라오며 불투명해지는 효과Characters rise from below and fade in with a staggered delay.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

제목의 읽는 방향과 순차적 등장Communicates the reading direction and sequential entrance of a title.

언제 쓰나Use whenUSE WHEN

짧은 제목을 읽는 순서대로 등장시킬 때
문장이 한 덩어리로 나타나는 것보다 리듬을 주고 싶을 때

Reveal a short title in reading order.
Add rhythm to a sentence's entrance.

과용 주의AvoidAVOID

긴 본문을 글자마다 움직이지 않는다
출발 거리와 간격을 동시에 크게 늘리지 않는다

분류TagsTAGS

타이포Typography 주목 끌기Attention 순서·흐름Sequence 설명 영상Explainer video 숏폼Short-form 웹 UIWeb UI 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

각 글자가 아래 64px에서 0.035초 간격으로 출발해 같은 기준선에 정렬된다

과용 · 나쁜 사례OVERUSE

글자 간격이 너무 커 문장이 서로 떨어진 덩어리로 읽힌다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
글자 간격	0.035s	0.02~0.06s	공백 span을 포함한다
상승 거리	64px	32~80px	양의 y에서 0으로 이동한다
글자 지속	0.62s	0.40~0.80s	불투명도와 이동을 같이 끝낸다
시작 시각	0.30s	0.20~0.40s	첫 글자 출발

GSAP

tl.fromTo('.char', {y:64, opacity:0}, {
 y:0, opacity:1, duration:.62,
 stagger:.035, ease:'power3.out'
}, .3);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 이 효과를 적용하라. AI는 다음 말을 고른다를 공백을 보존한 개별 span으로 나누어라. 0.30초부터 글자마다 0.035초 간격으로 y 64px와 opacity 0에서 y 0과 opacity 1로 0.62초 동안 power3.out으로 상승시켜라. 3초 타임라인 안에서 마지막 0.6초는 완성 상태로 정지하라.

Apply this effect to <target>. Split "AI picks the next word" into individual spans while preserving spaces. Starting at 0.30 seconds, stagger characters by 0.035 seconds and animate from y 64px and opacity 0 to y 0 and opacity 1 over 0.62 seconds with power3.out. Within a 3-second timeline, hold the completed state for the final 0.6 seconds.

Codex

<파일>의 텍스트 장면에 적용하라. AI는 다음 말을 고른다를 공백을 보존한 개별 span으로 나누어라. 0.30초부터 글자마다 0.035초 간격으로 y 64px와 opacity 0에서 y 0과 opacity 1로 0.62초 동안 power3.out으로 상승시켜라. 0.43초에 글자별 높이와 불투명도가 다른지, 0.75초에 앞 글자가 먼저 도착하는지, 2.7초에 전체 정렬된 문장이 유지되는지 확인하라.

Apply this to the text scene in <file>. Split "AI picks the next word" into individual spans while preserving spaces. Starting at 0.30 seconds, stagger characters by 0.035 seconds and animate from y 64px and opacity 0 to y 0 and opacity 1 over 0.62 seconds with power3.out. Verify different character heights and opacities at 0.43 seconds, that earlier characters arrive first at 0.75 seconds, and that the fully aligned sentence holds at 2.7 seconds.