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

카메라 추적Camera Follow

Camera Follow
카메라 추적
다른 이름Also known as · Camera follow · Camera Caret Track · 입력 초점 추적 · camera-cursor-tracking · Moving time-window zoom · 시간 창 추적 확대 · Aspect-aware demo reframing · 화면비에 맞춘 시연 재구도
225
렌더 추가 예정CLIP COMING카메라 추적Camera Follow정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 225. 카메라 추적 · Camera Follow · power2.out

움직이는 대상이 정해진 화면 위치에 머물도록 화면의 크롭이나 배경이 반대 방향으로 이동한다. 대상이 안전 영역을 벗어날 때만 구도를 따라잡는 방식도 쓴다.Follow a moving subject by shifting the world in the opposite direction.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
긴 입력이나 이동 과정에서 현재 행동 위치를 계속 읽게 한다.Keeps the current action readable.
언제 쓰나Use whenUSE WHEN
  • 긴 입력에서 캐럿을 계속 보여줄 때
  • 이동 중인 시계열의 최신 구간을 읽힐 때
  • Keep the caret visible during long input.
  • Follow the latest section of a moving time series.
과용 주의AvoidAVOID
  • 대상이 안전 영역 안에 있으면 카메라를 멈춘다.
분류TagsTAGS
가상 카메라Camera설명Explain순서·흐름Sequence설명 영상Explainer video스크롤덱Scroll deck제품 시연Product demo난이도 중급Intermediategsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

캐럿이 안전 영역을 넘으면 월드를 600ms 동안 이동해 화면 폭 60%에 맞춘다.

과용 · 나쁜 사례OVERUSE

키 입력마다 화면을 이동해 문장 전체가 흔들린다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
추적 지속600ms300~900ms대상의 이동보다 늦게 정착
안전 영역65%55~75%화면 폭 기준 임계
고정점60%40~65%대상을 놓을 화면 가로 위치
여백24px16~48px크롭 경계 여유
GSAP
const tl = gsap.timeline({paused:true});
const targetX = 1500, viewport = 1920;
const shift = targetX > viewport * 0.65 ? viewport * 0.60 - targetX : 0;
tl.to('.world', {x:shift, duration:0.6, ease:'power2.out'});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 카메라 추적를 적용해. HTML 월드 래퍼나 SVG 좌표계에 대상 위치의 역이동을 적용하고 크롭 중심을 같은 진행값으로 보간한다. 추적 지속 600ms; 안전 영역 65%; 고정점 60%; 여백 24px. 이징은 power2.out로 하고 GSAP 코어 paused 타임라인으로 역방향 seek도 같은 상태를 만들게 해.

Apply Camera Follow to <target> in <file>. Shift the world to keep a subject at 60% of the viewport width when it crosses the 65% threshold; use 24px padding and a 600ms tween. Use power2.out and a paused GSAP core timeline that produces identical states when seeking backward.

Codex

<파일>의 대상 장면에 카메라 추적를 적용해. HTML 월드 래퍼나 SVG 좌표계에 대상 위치의 역이동을 적용하고 크롭 중심을 같은 진행값으로 보간한다. 추적 지속 600ms; 안전 영역 65%; 고정점 60%; 여백 24px. 이징은 power2.out를 사용해. 0초·0.3초·0.6초 시점을 캡처하고 시작 상태, 중간 변화, 끝 상태가 정의와 일치하는지 확인해. 같은 시점을 역방향 seek해서도 같은 화면인지 검증해.

Apply Camera Follow to the target scene in <file>. Shift the world to keep a subject at 60% of the viewport width when it crosses the 65% threshold; use 24px padding and a 600ms tween. Use power2.out. Capture at 0, 0.3, and 0.6 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 타임라인에서 0.6초 진행값을 구동하고 seek마다 좌표와 렌더 상태를 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 추적 지속 600ms; 안전 영역 65%; 고정점 60%; 여백 24px를 싣고 대상 좌표계와 도착 상태를 명시한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 0.6초 타임라인에 매핑하고 scrub에서는 스프링 대신 ease-out 또는 선형 진행을 쓴다.
06

잘 맞는 조합Pairs well with

타이핑 입력 · Typing Input
Nº 317타이핑 입력Typing InputTyping Input
렌더 추가 예정CLIP COMING
주석 위치 추적Annotation Tracking
369
Nº 369주석 위치 추적Annotation TrackingAnnotation Tracking
07

출처Sources

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