효과Effects / UI 시연UI Demo / Nº 321

활성 표시 이동Active Indicator Glide

Active Indicator Glide

활성 표시 이동

다른 이름Also known as · Tabs indicator · 탭 표시 이동 · Active indicator glide · Sliding Active Indicator · 선택 표시 이동

321

렌더 추가 예정CLIP COMING활성 표시 이동Active Indicator Glide정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 321. 활성 표시 이동 · Active Indicator Glide · power3.out

활성 탭의 배경 캡슐이나 밑줄이 다음 탭 위치로 미끄러진다.The active underline or capsule glides to the newly selected tab.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

선택이 어느 구역으로 옮겨갔는지 알려준다.Keeps the current selection spatially clear.

언제 쓰나Use whenUSE WHEN

탭 사이 선택 이동을 보여줄 때
메뉴의 현재 위치를 안내할 때

Show selection moving between tabs.
Indicate the current menu location.

과용 주의AvoidAVOID

탭 너비를 모두 같은 값으로 가정하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

밑줄이 다음 탭의 측정 위치 180px와 너비 140px로 이동한다

과용 · 나쁜 사례OVERUSE

밑줄이 잘못된 탭 아래에 멈춘다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동	300ms	200~450ms	탭 전환
목표 위치	180px	0~600px	탭 시작점 측정
목표 너비	140px	80~240px	탭 실제 너비
이징	power3.out	power2.out~power3.out	감속 이동

GSAP

.indicator { transform-origin: left; transition: transform 300ms cubic-bezier(.215,.61,.355,1), width 300ms cubic-bezier(.215,.61,.355,1); }
.tabs[data-active='2'] .indicator { transform: translateX(180px); width: 140px; }
.tabs[data-active='1'] .indicator { transform: translateX(0); width: 120px; }

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 활성 표시 이동을 적용한다. 다음 탭의 위치 180px와 너비 140px를 측정값으로 지정하고 표시를 300ms에 이동한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Active Indicator Glide to <target> in <file>. Measure the next tab at x 180px and width 140px, then glide the indicator there in 300ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 활성 표시 이동 장면에 적용한다. 다음 탭의 위치 180px와 너비 140px를 측정값으로 지정하고 표시를 300ms에 이동한다. 0.07초·0.20초·0.50초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Active Indicator Glide in the scene for <target> in <file>. Measure the next tab at x 180px and width 140px, then glide the indicator there in 300ms. Capture at 0.07s, 0.20s, 0.50s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.