랙 포커스Rack Focus

Rack Focus

랙 포커스

다른 이름Also known as · 초점 이동 · 포커스 풀 · Rack focus · rack-focus-reference · depth-of-field-blur · Focus pull · Rack Focus Layers · 레이어 초점 전환

222

도판Fig. 222. 랙 포커스 · Rack Focus · power1.inOut

재생 속도Speed

위치를 움직이지 않고 앞뒤 대상의 선명함을 교환하는 초점 이동A focus shift that swaps sharpness between foreground and background subjects without changing their positions.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

시선의 우선순위를 앞 대상에서 뒤 대상으로 옮긴다Shifts visual priority from the foreground subject to the background subject.

언제 쓰나Use whenUSE WHEN

전경과 배경 사이에 주의를 넘길 때
장면 이동 없이 두 대상의 중요도를 바꿀 때

When transferring attention between foreground and background
When changing the relative emphasis of two subjects without moving the scene

과용 주의AvoidAVOID

모든 글자를 동시에 흐리게 만들어 읽을 초점이 사라진다
최종 상태를 0.5초 미만으로 유지하지 않는다

분류TagsTAGS

가상 카메라Camera 강조Emphasis 설명Explain 설명 영상Explainer video 발표Presentation 스크롤덱Scroll deck 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

큰 앞의 말은 0px에서 8px로 흐려지고 작은 다음 말은 8px에서 0px로 선명해진다

과용 · 나쁜 사례OVERUSE

모든 글자를 동시에 흐리게 만들어 읽을 초점이 사라진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
흐림 반경	8px	4~10px	선명함 차이가 보이는 값
선명 반경	0px	0~1px	도착 초점은 읽을 수 있게
초점 이동	1.8s	1.0~2.0s	두 tween 동시 시작
이징	power1.inOut	none / power1.inOut	연속적인 초점 교환

GSAP

tl.set('#front', {filter: 'blur(0px)'}, 0);
tl.set('#back', {filter: 'blur(8px)'}, 0);
tl.to('#front', {filter: 'blur(8px)', duration: 1.8, ease: 'power1.inOut'}, .3);
tl.to('#back', {filter: 'blur(0px)', duration: 1.8, ease: 'power1.inOut'}, .3);
tl.to('#note', {opacity: 1, duration: .2}, 2.1);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 랙 포커스 효과를 GSAP 코어로 만들어줘. 큰 앞의 말은 0px에서 8px로 흐려지고 작은 다음 말은 8px에서 0px로 선명해진다 3초 클립에서 0.3초까지 시작 상태를 유지하고 다음 기본값을 적용해: 흐림 반경 8px, 선명 반경 0px, 초점 이동 1.8s, 이징 power1.inOut. 마지막 0.5초 이상은 완성 상태로 정지하고 시간 제어는 paused 타임라인 하나로 해.

Create a Rack Focus effect on <target> using GSAP core. Blur the large "previous word" from 0px to 8px and sharpen the small "next word" from 8px to 0px. In a 3-second clip, hold the initial state until 0.3 seconds and apply these defaults: blur radius 8px, sharp radius 0px, focus-shift duration 1.8s, ease power1.inOut. Hold the completed state for at least the final 0.5 seconds, and control timing with a single paused timeline.

Codex

<파일>의 scene 내부에 랙 포커스를 적용해. 흐림 반경는 8px. 선명 반경는 0px. 초점 이동는 1.8s. 이징는 power1.inOut. 0.23초, 1.23초, 2.9초를 캡처해 시작 상태와 중간 변화, 큰 앞의 말은 0px에서 8px로 흐려지고 작은 다음 말은 8px에서 0px로 선명해진다의 최종 상태를 확인해. 2.5초와 2.9초의 장면이 같은지, 의도한 카메라 프레임 외의 잘림과 라벨 겹침이 없는지 검증해.

Apply Rack Focus inside the scene in <file>. Use these settings: blur radius 8px, sharp radius 0px, focus-shift duration 1.8s, ease power1.inOut. Capture at 0.23, 1.23, and 2.9 seconds to check the initial state, intermediate changes, and the final state: Blur the large "previous word" from 0px to 8px and sharpen the small "next word" from 8px to 0px. Verify that the scenes at 2.5 and 2.9 seconds match, with no clipping beyond the intended camera frame or overlapping labels.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

장면 내부 래퍼를 하나의 paused GSAP 타임라인으로 움직이고 seek 시 같은 좌표를 재현한다.

ReelForgeBRIEF TO VIDEO

장면 내부 요소의 filter blur 키프레임에 위 기본값을 적용하고 3초 끝까지 최종 상태를 유지한다.

Scrolline DeckSCROLL SCRUB

0.3~2.5초 동작 구간을 스크롤 진행률 0.1~0.83에 대응시키고 끝 구간은 최종 상태로 둔다.

잘 맞는 조합Pairs well with

Nº 009모션 위계Motion HierarchyMotion Hierarchy

Nº 120크로스페이드CrossfadeCrossfade

Nº 316스포트라이트SpotlightSpotlight

쓰이는 곳Used in

루트Route

썸네일Thumbnail

출처Sources

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

GSAP Timeline.to()공식 API 문서 참조
heygen-com/hyperframesApache-2.0
helpx.adobe.comunknown
heygen-com/hyperframesApache-2.0
motion dictionary 2-transitions-camera.md#25. 랙 포커스 · Rack Focus / Focus Pullown