선택 영역 이동Selection Travel

Selection Travel

선택 영역 이동

다른 이름Also known as · Code selection travel · 코드 선택 영역 이동 · Chart focus band sweep · 차트 구간 강조 띠

082

렌더 추가 예정CLIP COMING선택 영역 이동Selection Travel정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 082. 선택 영역 이동 · Selection Travel · power3.inOut

반투명 선택 띠가 한 범위에서 다음 범위로 이동하며 폭과 높이를 맞추는 강조A translucent selection band moves from one range to the next, resizing to fit.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

설명하는 대상의 범위를 읽게 한다. 같은 띠가 이동해 연속성을 준다Reads the grammatical range of what is being explained. One band moving keeps continuity.

언제 쓰나Use whenUSE WHEN

코드 줄이나 토큰을 차례로 짚으며 설명할 때
차트의 기간 구간을 한 구간씩 이동하며 강조할 때

When walking through code lines or tokens one by one
When a chart's period range is moved along section by section

과용 주의AvoidAVOID

띠 opacity 0.15~0.3
띠는 대상 경계보다 2~4px 여유
이동 중에도 대상 글자가 읽히게

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

코드 3행에 있던 선택 띠가 0.4초 동안 7행으로 내려가며 높이가 1행에서 3행으로 늘어난다

과용 · 나쁜 사례OVERUSE

띠가 매번 새로 나타났다 사라져 연속성이 없거나, 불투명도가 높아 글자를 가린다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 길이	0.4s	0.3~0.6s	범위 간 이동
opacity	0.25	0.15~0.3	글자를 가리지 않게
여백	2px	2~4px	대상 경계 바깥
이징	power3.inOut	power2~power3.inOut	도착이 정확

GSAP

const spans = [{ y: 120, h: 36 }, { y: 300, h: 108 }, { y: 516, h: 36 }];
spans.forEach((s, i) => tl.to('.sel', { y: s.y, height: s.h, duration: 0.4, ease: 'power3.inOut' }, 0.3 + i * 1.2));

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 코드에서 반투명 선택 띠를 이동시켜줘. 띠는 opacity 0.25 하나를 재사용하고 spans 배열 [{y:120,h:36},{y:300,h:108},{y:516,h:36}]로 0.3초부터 1.2초마다 y와 height를 0.4초 power3.inOut으로 옮겨. 범위마다 0.8초 유지. paused 타임라인 하나로 만들어.

Move a translucent selection band over <target> code with GSAP. Reuse one band at opacity 0.25 and, from 0.3s every 1.2s, tween y and height to the next entry of spans [{y:120,h:36},{y:300,h:108},{y:516,h:36}] over 0.4s with power3.inOut. Hold 0.8s per range. One paused timeline.

Codex

<파일>의 <대상>에 selection-travel을 적용해. .sel 하나를 spans.forEach로 y, height를 0.4s, power3.inOut, position 0.3+i*1.2에 tween. 각 범위 좌표는 getBoundingClientRect로 측정한 값이어야 한다. 0.5초·1.5초·2.7초를 캡처해 띠 경계가 대상 줄 경계와 2px 이내인지 확인해.

Apply selection-travel to <target> in <file>. Tween one .sel over spans.forEach with y and height, 0.4s, power3.inOut, position 0.3 + i*1.2. Range coordinates must come from getBoundingClientRect. Capture at 0.5s, 1.5s and 2.7s and check the band edges are within 2px of the target line edges.