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

글자 재배치 조립Letter Anagram Shift

Letter Anagram Shift

글자 재배치 조립

다른 이름Also known as · Letter Shuffle Reassembly

103

렌더 추가 예정CLIP COMING글자 재배치 조립Letter Anagram Shift정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 103. 글자 재배치 조립 · Letter Anagram Shift · power3.inOut

한 단어의 글자들이 옮겨 가 새 단어나 목록의 머리글자가 되는 효과The letters of one word travel to become the initials of a new word or list.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

같은 재료가 새 구조로 이어진다는 관계를 보여준다. 글자가 사라지지 않고 이동해 연속성이 느껴진다Shows the same material reconnecting into a new structure; letters move instead of vanishing, which keeps continuity.

언제 쓰나Use whenUSE WHEN

단어에서 항목 목록으로 넘어가며 각 글자가 항목의 머리글자가 될 때
메뉴 제목이 개별 항목 라벨로 분해될 때

Move from a word to a list where each letter becomes an item initial.
Break a menu title into individual item labels.

과용 주의AvoidAVOID

시작·도착 좌표는 실측하고 추정하지 않는다
이동 중 글자 크기 변화를 크게 두지 않는다(150% 초과 금지)
같은 글자가 중복되면 순서 규칙을 미리 정한다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

'MOTION' 여섯 글자가 800ms에 걸쳐 세로 목록 여섯 줄의 첫 글자 위치로 이동하고 나머지 글자가 뒤따라 나타난다

과용 · 나쁜 사례OVERUSE

글자마다 도착 시각이 제각각이고 경로가 교차해 어느 글자가 어디로 가는지 알 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 시간	800ms	600~1000ms	글자당
글자 간 지연	40ms	20~60ms	왼쪽부터
이징	power3.inOut	power2~power4.inOut	출발과 도착 모두 보임
도착 후 대기	500ms	300~800ms	나머지 글자 등장 전

GSAP

const from = [...src].map(e => e.getBoundingClientRect());
const to = [...dst].map(e => e.getBoundingClientRect());
src.forEach((el, i) => {
  tl.fromTo(el, { x: 0, y: 0 }, { x: to[i].left - from[i].left, y: to[i].top - from[i].top,
    duration: 0.8, ease: 'power3.inOut' }, i * 0.04);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에서 단어 '<원문>'의 각 글자가 목록 '<항목들>'의 머리글자 자리로 이동하게 해줘. 글자는 span으로 나누고 시작·도착 좌표를 미리 측정해 tween에 넣어. 글자당 0.8초, 40ms 간격, power3.inOut, 도착 후 0.5초 대기하고 나머지 글자를 페이드인. 한글은 음절 단위로 나눠.

In <target>, make each letter of the word '<source>' travel to the initial position of the items in '<items>'. Split into spans, pre-measure the start and end coordinates and bake them into the tweens. 0.8 seconds each, 40ms apart, power3.inOut, wait 0.5 seconds after arrival and then fade in the remaining letters. Split Korean by syllable.

Codex

<파일>에서 원문 글자 span과 목록 머리글자 span을 짝지어 좌표 차이를 계산한 뒤 tl.fromTo로 이동시켜. 좌표 계산은 빌드 시 1회만 하고 렌더 중 재측정 금지. 0.4초에 글자가 이동 중이고 1.4초에 각 글자 bbox가 목표 bbox와 2px 이내로 일치하는지 캡처와 스크립트로 확인해.

In <file> pair each source-letter span with its target initial span, compute the offset, and animate with tl.fromTo. Measure once at build time and never re-measure during rendering. Capture at 0.4s (letters in flight) and 1.4s, and verify by script that each letter bbox is within 2px of its target.