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

스크롤 프레임 스크럽Scroll Frame Scrubbing

Scroll Frame Scrubbing

스크롤 프레임 스크럽

다른 이름Also known as · Scroll Scrubbed Image Sequence · 스크롤 영상 프레임 스크럽 · Frame-by-frame scrollytelling

349

렌더 추가 예정CLIP COMING스크롤 프레임 스크럽Scroll Frame Scrubbing정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 349. 스크롤 프레임 스크럽 · Scroll Frame Scrubbing · none

스크롤 진행률에 따라 이미지 시퀀스가 앞으로 재생되거나 되감긴다.Scroll progress scrubs an image sequence forward and backward.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

사용자가 진행 속도와 방향을 조절하며 제품의 구조 변화를 탐색한다.Lets viewers control the pace and direction as they explore changes in a product’s structure.

언제 쓰나Use whenUSE WHEN

제품 회전이나 분해 과정을 스크롤로 탐색하게 할 때
설명의 단계와 영상 프레임을 같은 진행률로 맞출 때

Letting viewers explore a product rotation or exploded view by scrolling.
Synchronizing explanation stages and video frames to the same progress value.

과용 주의AvoidAVOID

프레임을 준비하기 전에 스크럽을 활성화하지 않는다.
프레임마다 canvas 크기를 바꿔 화면을 흔들지 않는다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

2400px 스크롤 구간에서 120프레임 제품 분해도를 표시하고 역스크롤하면 같은 프레임을 역순으로 보여준다.

과용 · 나쁜 사례OVERUSE

프레임을 불러오기 전에 스크롤을 시작해 빈 화면이 나오거나 매번 다른 프레임을 선택한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
원본 영상 길이	4000ms	2000~6000ms	프레임 시퀀스의 원본 시간 길이다.
프레임 수	120	60~180	120개는 4초 영상의 30fps에 대응한다.
스크롤 거리	2400px	1600~3600px	시작 지점부터 끝 프레임까지의 거리다.
진행률	0~1	0~1	범위 밖 값은 양 끝으로 제한한다.
이징	none (linear)	none	프레임 탐색은 진행률과 직접 대응한다.

GSAP

const state = { progress: 0 };
const ctx = canvas.getContext('2d');
const draw = () => {
  const i = Math.round(Math.max(0, Math.min(1, state.progress)) * 119);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(frames[i], 0, 0, canvas.width, canvas.height);
};
const tl = gsap.timeline({ paused: true });
tl.to(state, { progress: 1, duration: 4, ease: 'none', onUpdate: draw });
tl.seek(0); draw();

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 120프레임 이미지 시퀀스를 canvas로 표시해. 모든 프레임을 미리 로드하고 2400px 스크롤 구간을 진행률 0~1로 매핑해 round(progress*119) 프레임을 그려. 원본 길이는 4초이며 이징은 linear로 두고 역스크롤에서도 같은 인덱스 규칙을 유지해.

In <file>, render a 120-frame image sequence for <target> on a canvas. Preload every frame and map a 2400px scroll interval to progress from 0 to 1, drawing frame round(progress*119). Use a 4-second source duration and linear mapping, keeping the same index rule when scrolling backward.

Codex

<파일>의 <대상> canvas 장면에 4초 paused GSAP 타임라인과 120프레임 시퀀스를 연결해. 스크롤 2400px를 진행률 0~1로 제한하고 round(progress*119)를 사용해. 0초, 2초, 4초를 캡처해 인덱스 0, 60, 119가 보이는지 확인하고 2초로 다시 seek해 같은 프레임이 복원되는지 검증해.

In <file>, connect the canvas scene for <target> to a paused 4-second GSAP timeline and a 120-frame sequence. Clamp progress from a 2400px scroll interval to 0 through 1 and use round(progress*119). Capture at 0, 2, and 4 seconds to verify indices 0, 60, and 119, then seek back to 2 seconds to verify the same frame is restored.