어텐션 선Attention Lines

Attention Lines

어텐션 선

다른 이름Also known as · 주의 가중치 · Attention Weights · Attention weight encoding · 어텐션 선 굵기

361

도판Fig. 361. 어텐션 선 · Attention Lines · power2.inOut

재생 속도Speed

한 토큰이 참조하는 다른 토큰을 굵기와 진하기가 다른 호로 연결하는 움직임An animation that connects one token to the tokens it references using arcs of varying thickness and opacity.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

같은 문장 안에서도 참조 비중은 토큰마다 다르다Shows that tokens in the same sentence carry different attention weights.

언제 쓰나Use whenUSE WHEN

어텐션 가중치를 설명할 때
어떤 앞말에 집중하는지 보여줄 때

When explaining attention weights
When showing which preceding words receive attention

과용 주의AvoidAVOID

예시 가중치를 실제 모델 측정치로 오해시키지 않는다
모든 연결을 주홍으로 칠하지 않는다

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 발표Presentation 스크롤덱Scroll deck 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

고른다에서 다음으로 향하는 호가 가장 굵게 그려진다

과용 · 나쁜 사례OVERUSE

모든 호를 같은 굵기로 그려 가중치 차이가 사라진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
선 굵기	0.5~6px	0.5~8px	가중치 비례
호 그리기	1.15s	0.8~1.4s	출발점부터 연결
시간차	0.12s	0.06~0.15s	연결 순서
진하기	0.25~0.9	0.2~1	굵기와 함께 비중 표시

GSAP

const tl = Motion.timeline();
tl.from('.source',{color:'var(--ink)',duration:.3},.3);
tl.to('path',{strokeDashoffset:0,duration:1.15,stagger:.12,ease:'power2.inOut'},.45);
tl.to('.weights',{opacity:1,duration:.35},1.9);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 마지막 토큰을 주홍으로 강조하고 다른 네 토큰으로 SVG 호를 그린다. pathLength를 1로 두고 0.45초부터 strokeDashoffset을 1에서 0으로 1.15초 power2.inOut, 0.12초 stagger로 바꾼다. 선 굵기는 1.5, 0.5, 6, 3px이고 진하기는 0.35, 0.25, 0.9, 0.6으로 한다. 3초 타임라인 하나로 만들고 마지막 0.6초는 정지한다.

Highlight the last token in <target> in vermilion and draw SVG arcs to four other tokens. Set pathLength to 1. Starting at 0.45 seconds, animate strokeDashoffset from 1 to 0 over 1.15 seconds with power2.inOut and a 0.12-second stagger. Use stroke widths of 1.5, 0.5, 6, 3px and opacities of 0.35, 0.25, 0.9, 0.6. Use a single 3-second timeline and hold still for the final 0.6 seconds.

Codex

<파일>의 <대상>에 <대상>의 마지막 토큰을 주홍으로 강조하고 다른 네 토큰으로 SVG 호를 그린다. pathLength를 1로 두고 0.45초부터 strokeDashoffset을 1에서 0으로 1.15초 power2.inOut, 0.12초 stagger로 바꾼다. 선 굵기는 1.5, 0.5, 6, 3px이고 진하기는 0.35, 0.25, 0.9, 0.6으로 한다. 0.24초, 1.25초, 2.9초를 캡처해 출발 토큰, 호의 성장, 가중치별 굵기 차이를 확인한다. 시간은 GSAP 타임라인만 사용한다.

In <target> in <file>, Highlight the last token in <target> in vermilion and draw SVG arcs to four other tokens. Set pathLength to 1. Starting at 0.45 seconds, animate strokeDashoffset from 1 to 0 over 1.15 seconds with power2.inOut and a 0.12-second stagger. Use stroke widths of 1.5, 0.5, 6, 3px and opacities of 0.35, 0.25, 0.9, 0.6. Capture at 0.24, 1.25, and 2.9 seconds to check the source token, arc growth, and stroke-width differences by weight. Use only a GSAP timeline for timing.