효과Effects / 타이포Typography / Nº 100

글자 롤링 교체Glyph Roll

Glyph Roll

글자 롤링 교체

다른 이름Also known as · Rolling Glyphs · 굴러 바뀌는 글자 · Rolling glyph replacement

100

렌더 추가 예정CLIP COMING글자 롤링 교체Glyph Roll정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 100. 글자 롤링 교체 · Glyph Roll · power3.out

글자마다 세로 슬롯이 굴러 다음 글자로 정착하는 교체 효과Each character sits in a vertical slot that rolls until the next glyph lands.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

정보가 정교하게 갱신되는 느낌. 기계식 카운터나 예약판처럼 믿음직하게 읽힌다Information updates with mechanical precision, like a counter or a booking board.

언제 쓰나Use whenUSE WHEN

버튼 문구나 상태 라벨이 다른 값으로 바뀔 때
짧은 코드·번호·상태어가 갱신되는 순간

When a button label or status word changes to another value
When a short code, number or status word refreshes

과용 주의AvoidAVOID

슬롯은 overflow hidden으로 한 글자 높이만 보이게 한다. 삐져나오면 롤링이 지저분하다
5글자를 넘기면 전체 시간이 길어진다. 짧은 문자열에만 쓴다

분류TagsTAGS

타이포Typography 피드백Feedback 데이터 증명Data proof 웹 UIWeb UI 제품 시연Product demo 숏폼Short-form 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"대기" 두 글자가 0.7초 동안 세로로 굴러 "완료"로 바뀌고 글자 사이 시작 차는 0.05초다

과용 · 나쁜 사례OVERUSE

롤링 거리를 3em 이상 주어 글자가 번쩍이는 것처럼 보이고 무슨 글자인지 읽히지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
글자당 시간	0.7s	0.5~0.9s	ease-out
글자 간 시작 차	0.05s	0.03~0.08s	왼쪽부터
슬롯 이동	1em	1~1.2em	한 글자 높이
방향	위로	위/아래	선택지 순서에 맞춤

GSAP

chars.forEach((c, i) => {
  // 각 슬롯: .slot > .col(이전 글자, 다음 글자 세로 배열)
  tl.fromTo(slot(i).querySelector('.col'), {yPercent:0}, {yPercent:-50, duration:0.7, ease:'power3.out'}, 0.3 + i * 0.05);
});
// .slot { height:1.2em; overflow:hidden } .col { display:flex; flex-direction:column }

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 라벨을 글자별 세로 롤링으로 바꿔줘. 각 글자는 한 글자 높이의 슬롯(overflow hidden) 안에서 이전 글자가 위로 나가고 다음 글자가 아래에서 올라오며, 0.7초 power3.out, 글자 사이 시작 차 0.05초. 한국어는 음절 단위로 나눠.

Convert the label in <target> to a per-glyph vertical roll. Each character lives in a one-glyph-tall slot with overflow hidden; the old glyph exits up and the new one rises from below over 0.7s power3.out, starting 0.05s apart. Split Korean by syllable.

Codex

<파일>의 상태 라벨에 glyph roll을 적용해. Intl.Segmenter로 grapheme 분할, 슬롯 height 1.2em overflow hidden, .col yPercent 0에서 -50, duration 0.7, stagger 0.05, power3.out. 0.5초·0.8초·1.3초를 캡처해 중간에 두 글자가 슬롯 안에 걸쳐 보이고 끝에는 새 글자만 보이는지 확인해.

Apply glyph roll to the status label in <file>. Split by grapheme with Intl.Segmenter; slot height 1.2em with overflow hidden; .col yPercent 0 to -50, duration 0.7, stagger 0.05, power3.out. Capture at 0.5s, 0.8s and 1.3s and confirm two glyphs straddle the slot mid-roll and only the new glyph remains at the end.