AWESOME AI MOTION
효과Effects / 3D·깊이3D & Depth / Nº 556

대기 원근Atmospheric Depth

Atmospheric Depth
대기 원근
다른 이름Also known as · depth-fog-atmospheric-falloff · depth-of-field-blur · Moving Fog Reveal · 이동 안개 공개
556
렌더 추가 예정CLIP COMING대기 원근Atmospheric Depth정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 556. 대기 원근 · Atmospheric Depth · sine.inOut

먼 층은 안개 속에서 흐리고 옅게 보이다가 가까워지며 선명해지는 깊이 표현Distant objects look hazy and faint in fog, then sharpen as they come closer.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
층 사이의 거리를 읽게 하고 공간이 깊다는 느낌을 만든다. 앞 정보가 먼저 눈에 들어오고 뒤는 배경으로 물러난다Makes distance between layers readable and gives the scene depth. Foreground information comes first while the back recedes.
언제 쓰나Use whenUSE WHEN
  • 여러 층의 배경을 겹쳐 깊이 있는 히어로를 만들 때
  • 카메라가 앞으로 나아가며 대상이 선명해지게 할 때
  • 초점 밖 층을 물러나게 해 주제를 강조할 때
  • Stack background layers for a deep hero.
  • Let a subject sharpen as the camera advances.
  • Push out-of-focus layers back to emphasize the subject.
과용 주의AvoidAVOID
  • blur 값은 4px 이하로 유지한다
  • 층 사이 opacity 차이를 0.2 이상 둔다
  • 텍스트 층에는 blur를 걸지 않는다
분류TagsTAGS
3D·깊이3D & Depth분위기Mood설명Explain설명 영상Explainer video스크롤덱Scroll deck발표Presentation난이도 기본Basiccss
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

먼 층이 opacity 0.3, blur 3px로 시작해 3초에 걸쳐 opacity 1, blur 0으로 선명해지며 가까운 층은 처음부터 또렷하다

과용 · 나쁜 사례OVERUSE

blur가 8px 이상이라 형태가 무너지거나, 모든 층이 같은 값이라 깊이가 생기지 않는다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
전체 시간3s2~5s접근 구간
먼 층 opacity0.30.2~0.5시작값
먼 층 blur3px2~4px시작값
층 수32~5깊이 순서
이징sine.inOutsine~power2부드러운 접근
GSAP
layers.forEach((l, i) => {
  const far = 1 - i / (layers.length - 1); // 0=가까움 1=멀음
  gsap.set(l, { opacity: 1 - far * 0.7, filter: `blur(${far * 3}px)` });
  tl.to(l, { opacity: 1, filter: 'blur(0px)', duration: 3, ease: 'sine.inOut' }, i * 0.4);
});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 배경 3개 층에 대기 원근을 넣어줘. 가장 먼 층은 opacity 0.3, blur 3px, 중간 층은 opacity 0.65, blur 1.5px로 시작하고, 3초 동안 sine.inOut으로 모두 opacity 1, blur 0이 되게 해. 층마다 0.4초씩 늦게 시작하고 가까운 층은 처음부터 또렷해야 해. 글자 층에는 blur를 쓰지 마.

Use GSAP to add atmospheric depth to three background layers of <target>. Start the farthest at opacity 0.3, blur 3px and the middle at opacity 0.65, blur 1.5px, and over 3 seconds bring all to opacity 1, blur 0 with sine.inOut. Each layer starts 0.4 seconds later; the nearest is sharp from the beginning. No blur on text layers.

Codex

<파일>의 배경 층에 atmospheric-depth를 적용해. 층 i의 초기값은 opacity 1-far*0.7, blur far*3px, tween은 position i*0.4, duration 3, ease sine.inOut. 0초에 먼 층이 흐린지, 1.5초에 중간 값인지, 4.5초에 모든 층 blur 0인지 캡처로 확인해.

Apply atmospheric-depth to the background layers in <file>. Initial values for layer i: opacity 1-far*0.7, blur far*3px; tween at position i*0.4, duration 3, ease sine.inOut. Capture 0s (far layer hazy), 1.5s (intermediate) and 4.5s (all layers blur 0).

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
filter blur는 paused 타임라인에서 문자열 보간이 안정적이므로 층 수를 5 이하로 둔다. 캡처는 0초, 1.5초, 3초에서 확인한다
ReelForgeBRIEF TO VIDEO
브리프에 층 수, 각 층 이미지, 시작 opacity 0.3, blur 3px, 3s를 싣는다
Scrolline DeckSCROLL SCRUB
진행률 0~1을 층별 opacity와 blur에 매핑한다. 뒤 층이 늦게 선명해지도록 오프셋을 둔다
06

잘 맞는 조합Pairs well with

패럴랙스 · Parallax
Nº 220패럴랙스ParallaxParallax
랙 포커스 · Rack Focus
Nº 222랙 포커스Rack FocusRack Focus
푸시인 · Push-in
Nº 221푸시인Push-inPush-in
07

출처Sources

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