AWESOME AI MOTION
효과Effects / 데이터Data / Nº 260

차트 스크럽Chart Scrub

Chart Scrub
차트 스크럽
다른 이름Also known as · Chart scrub · 그래프 훑기 · 차트 탐색 읽기 · chart-scrub-readout · Linked chart time cursor · 차트 공통 시간 커서 · Graph linked to moving readout · 그래프와 값 동시 추적
260
렌더 추가 예정CLIP COMING차트 스크럽Chart Scrub정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 260. 차트 스크럽 · Chart Scrub · power1.inOut

이미 그려진 차트 위를 추적선과 점이 이동하고 현재 위치의 날짜와 값이 함께 바뀐다.A cursor and linked readout travel across a completed chart.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
그래프가 실제 수치를 가진 탐색 대상임을 보여준다.Makes a chart readable as a sequence of values.
언제 쓰나Use whenUSE WHEN
  • 월별 매출을 훑으며 커서와 매출 숫자가 함께 이동한다.
  • 그래프가 실제 수치를 가진 탐색 대상임을 보여준다. 기준값과 대상을 함께 표시할 때.
  • Inspect values along an existing chart.
  • Keep the encoded values, labels, and visual state synchronized.
과용 주의AvoidAVOID
  • 불규칙 날짜는 실제 시간 간격으로 매핑한다.
분류TagsTAGS
데이터Data데이터 증명Data proof비교Compare설명 영상Explainer video발표Presentation데이터 스토리Data story난이도 중급Intermediatesvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

월별 매출을 훑으며 커서와 매출 숫자가 함께 이동한다.

과용 · 나쁜 사례OVERUSE

커서는 6월인데 라벨은 5월 값을 표시한다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속2000ms1500~3000ms탐색을 읽을 시간 확보
데이터 점2010~40날짜와 값 동기화
커서 폭2px1~4px차트 선과 구별
GSAP
const tl=gsap.timeline({paused:true}), s={p:0};
tl.to(s,{p:1,duration:2,ease:'power1.inOut',onUpdate:()=>{
 const f=s.p*(values.length-1),i=Math.min(Math.floor(f),values.length-2);
 const v=values[i]+(values[i+1]-values[i])*(f-i);
 cursor.setAttribute('x1',100+800*s.p);cursor.setAttribute('x2',100+800*s.p);
 dot.setAttribute('cx',100+800*s.p);dot.setAttribute('cy',500-v*4);
 label.textContent=v.toFixed(1);
}});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 차트 스크럽을 적용해. 동일 진행값으로 선 위치, 데이터 보간 점, 인덱스 라벨을 계산한다. 지속 2000ms; 데이터 점 20; 커서 폭 2px을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Implement Chart Scrub on <target> in <file>. Scrub 20 samples over 2000ms with a 2px cursor, interpolating the dot and value from the same progress. Use one paused GSAP core timeline, support seeking, and avoid random values and timers.

Codex

<파일>의 설명 장면에서 <대상>에 차트 스크럽을 적용해. 동일 진행값으로 선 위치, 데이터 보간 점, 인덱스 라벨을 계산한다. 지속 2000ms; 데이터 점 20; 커서 폭 2px을 적용한다. 0초, 1초, 2초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Chart Scrub on <target> in <file>. Scrub 20 samples over 2000ms with a 2px cursor, interpolating the dot and value from the same progress. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 1s, and 2s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 차트 스크럽 상태를 넣고 seek 시 2초의 좌표와 색을 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 지속 2000ms; 데이터 점 20; 커서 폭 2px을 싣고 월별 매출을 훑으며 커서와 매출 숫자가 함께 이동한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 2초 구간에 매핑한다. scrub에서는 스프링 대신 power2.out을 쓰고 역방향에서도 라벨과 도형을 함께 갱신한다.
06

잘 맞는 조합Pairs well with

선 그리기 · Line Draw
Nº 244선 그리기Line DrawLine Draw
카운트업 · Count-up
Nº 242카운트업Count-upCount-up
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo