AWESOME AI MOTION
효과Effects / 가상 카메라Camera / Nº 231

프레임 스크럽Frame Scrub

Frame Scrub
프레임 스크럽
다른 이름Also known as · Scroll image sequence · 스크롤 이미지 시퀀스
231
렌더 추가 예정CLIP COMING프레임 스크럽Frame Scrub정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 231. 프레임 스크럽 · Frame Scrub · none

스크롤이나 진행값에 맞춰 연속 이미지 또는 영상의 프레임이 앞뒤로 바뀐다.Map progress to an image or video frame, including reverse scrubbing.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
제품의 회전과 과정의 세부 단계를 원하는 속도로 읽게 한다.Makes detailed stages and product views explorable.
언제 쓰나Use whenUSE WHEN
  • 제품 회전을 직접 탐색하게 할 때
  • 분해 과정의 중간 단계를 읽힐 때
  • Let viewers explore a product rotation.
  • Inspect intermediate steps of an assembly breakdown.
과용 주의AvoidAVOID
  • 이미지 크기와 로딩 완료를 확인한 뒤 시작한다.
분류TagsTAGS
가상 카메라Camera설명Explain순서·흐름Sequence설명 영상Explainer video스크롤덱Scroll deck제품 시연Product demo난이도 중급Intermediatecanvas
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

120장을 미리 로드하고 진행률 0.5에서 60번째 이미지를 그린다.

과용 · 나쁜 사례OVERUSE

이미지 로딩이 끝나기 전에 스크럽을 시작해 빈 프레임이 보인다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
프레임 수12060~1800부터 119까지
재현 지속5000ms3000~8000ms영상 타임라인 기준
평활 지속600ms200~800ms입력 변화 완화
스크롤 구간2000px1200~3000px진행률 0~1 구간
GSAP
const tl = gsap.timeline({paused:true}), s = {p:0};
const draw = ()=>{
  const i = Math.round(Math.max(0,Math.min(1,s.p))*119);
  ctx.clearRect(0,0,1920,1080); ctx.drawImage(frames[i],0,0,1920,1080);
};
draw();
tl.to(s, {p:1, duration:5, ease:'none', onUpdate:draw});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 프레임 스크럽를 적용해. Canvas에 진행률을 정수 프레임 인덱스로 변환해 선택한 이미지를 그리며 역방향 진행도 같은 방식으로 처리한다. 프레임 수 120; 재현 지속 5000ms; 평활 지속 600ms; 스크롤 구간 2000px. 이징은 none로 하고 GSAP 코어 paused 타임라인으로 역방향 seek도 같은 상태를 만들게 해.

Apply Frame Scrub to <target> in <file>. Preload 120 frames and map clamped progress to round(progress*119). Use a 5000ms timeline or a 2000px scroll range with 600ms input smoothing. Use none and a paused GSAP core timeline that produces identical states when seeking backward.

Codex

<파일>의 대상 장면에 프레임 스크럽를 적용해. Canvas에 진행률을 정수 프레임 인덱스로 변환해 선택한 이미지를 그리며 역방향 진행도 같은 방식으로 처리한다. 프레임 수 120; 재현 지속 5000ms; 평활 지속 600ms; 스크롤 구간 2000px. 이징은 none를 사용해. 0초·2.5초·5초 시점을 캡처하고 시작 상태, 중간 변화, 끝 상태가 정의와 일치하는지 확인해. 같은 시점을 역방향 seek해서도 같은 화면인지 검증해.

Apply Frame Scrub to the target scene in <file>. Preload 120 frames and map clamped progress to round(progress*119). Use a 5000ms timeline or a 2000px scroll range with 600ms input smoothing. Use none. Capture at 0, 2.5, and 5 seconds to verify the initial state, the defining intermediate change, and the final state. Seek backward to the same times and compare the images.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에서 5초 진행값을 구동하고 seek마다 좌표와 렌더 상태를 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 프레임 수 120; 재현 지속 5000ms; 평활 지속 600ms; 스크롤 구간 2000px를 싣고 대상 좌표계와 도착 상태를 명시한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 5초 타임라인에 매핑하고 scrub에서는 스프링 대신 ease-out 또는 선형 진행을 쓴다.
06

잘 맞는 조합Pairs well with

주석 등장 · Annotation Callout
Nº 240주석 등장Annotation CalloutAnnotation Callout
렌더 추가 예정CLIP COMING
고정 장면 스크롤리텔링Pinned Scrollytelling
389
Nº 389고정 장면 스크롤리텔링Pinned ScrollytellingPinned Scrollytelling
07

출처Sources

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