대응 기호 이동Matching Token Transform

Matching Token Transform

대응 기호 이동

다른 이름Also known as · Code token FLIP · 코드 토큰 이동 · Matching-symbol equation transform · 동일 기호 수식 변환 · TransformMatchingTex · TransformMatchingStrings · Matched code token move · 대응 코드 토큰 이동

384

렌더 추가 예정CLIP COMING대응 기호 이동Matching Token Transform정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 384. 대응 기호 이동 · Matching Token Transform · power2.inOut

같은 의미의 코드 토큰이나 수식 기호가 다음 상태의 위치로 이동한다. 사라진 항은 흐려지고 새로운 항은 나타난다.Semantically matched tokens move to their next positions while other tokens fade.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

변환 전후에 유지되는 부분과 달라지는 부분을 구별한다.Separates preserved meaning from added or removed terms.

언제 쓰나Use whenUSE WHEN

등식의 같은 x 기호를 유지하며 우변 위치로 이동한다.
변환 전후에 유지되는 부분과 달라지는 부분을 구별한다. 기준값과 대상을 함께 표시할 때.

Explain code or equation transformations.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

반복 기호는 위치와 의미를 포함한 키로 대응한다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 제품 시연Product demo 스크롤덱Scroll deck 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

등식의 같은 x 기호를 유지하며 우변 위치로 이동한다.

과용 · 나쁜 사례OVERUSE

문자가 같다는 이유로 의미가 다른 토큰을 연결한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 지속	1000ms	600~1500ms	의미 키로 대응
줄 간격	60px	40~90px	1920x1080 기준
출입 페이드	250ms	150~400ms	새 기호와 삭제 기호만

GSAP

const tl=gsap.timeline({paused:true});
matches.forEach(m=>tl.fromTo(m.element,{x:m.from.x,y:m.from.y},{x:m.to.x,y:m.to.y,duration:1,ease:'power2.inOut'},0));
tl.to('.removed-token',{opacity:0,duration:0.25},0);
tl.fromTo('.new-token',{opacity:0},{opacity:1,duration:0.25},0.75);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 대응 기호 이동을 적용해. HTML 또는 SVG 기호를 의미 키로 대응해 전후 좌표와 불투명도를 GSAP 코어로 보간한다. 이동 지속 1000ms; 줄 간격 60px; 출입 페이드 250ms을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 대응 기호 이동을 적용해. HTML 또는 SVG 기호를 의미 키로 대응해 전후 좌표와 불투명도를 GSAP 코어로 보간한다. 이동 지속 1000ms; 줄 간격 60px; 출입 페이드 250ms을 적용한다. 0초, 0.5초, 1초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Matching Token Transform on <target> in <file>. Move tokens over 1000ms with 60px line spacing and 250ms entry and exit fades. Match tokens by semantic keys and distinct identifiers for repeated symbols. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.5s, and 1s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.