효과Effects / 등장·퇴장Entrance & Exit / Nº 034

역방향 매트Counter Moving Matte

Counter Moving Matte

역방향 매트

다른 이름Also known as · 역방향 매트 이동 · dual-layer-counter-move

034

렌더 추가 예정CLIP COMING역방향 매트Counter Moving Matte정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 034. 역방향 매트 · Counter Moving Matte · power3.out

창은 한쪽으로 열리고 안쪽 그림은 반대쪽으로 움직이며 나타난다.A revealing window and its content move in opposite directions.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

경계와 내용이 분리된 역동적인 공개를 느낀다.Separates the boundary from the image for a dynamic reveal.

언제 쓰나Use whenUSE WHEN

제품 사진을 역동적으로 공개할 때
섹션의 이미지 창을 열 때

Use when presenting counter moving matte in a content reveal scene.
Use for a focused title, image, or card with a clearly visible final state.

과용 주의AvoidAVOID

부모 overflow가 없어 창 밖 사진이 보인다.
완료 자세에서 내용이 가려지지 않게 한다.

분류TagsTAGS

등장·퇴장Entrance & Exit 주목 끌기Attention 전환Transition 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

창은 오른쪽에서 오고 내부 사진은 왼쪽에서 정렬된다.

과용 · 나쁜 사례OVERUSE

부모 overflow가 없어 창 밖 사진이 보인다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	0.6s	0.42~0.84s	0초부터 시작하는 공개 구간
창 시작 이동	100%	80~100%	오버플로 숨김 부모 내부
내용 시작 이동	-30%	-15~-40%	창과 반대 방향
이징	power3.out	power2.out, power3.out, sine.inOut	움직임의 가속과 감속

GSAP

gsap.set('.frame', {overflow:'hidden'});
tl.fromTo('.matte', {xPercent:100}, {xPercent:0, duration:0.6, ease:'power3.out'}, 0);
tl.fromTo('.content', {xPercent:-30}, {xPercent:0, duration:0.6, ease:'power3.out'}, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 역방향 매트을 적용해. 0.6초, 창 시작 이동 100%; 내용 시작 이동 -30%, 이징 power3.out로 구현해. paused 타임라인으로 seek 가능하게 하고 완료 자세를 유지해.

Apply Counter Moving Matte to <target> in <file>. Use a 0.6s segment with power3.out; implement these explicit settings: Initial window translation: 100%, Initial content translation: -30%. Use a paused, seekable timeline and hold the final pose.

Codex

<파일>의 <대상> 레이어에 역방향 매트을 적용해. 0.6초, 창 시작 이동 100%; 내용 시작 이동 -30%, power3.out를 사용하고 0초, 0.3초, 0.6초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Counter Moving Matte to the <target> layer in <file> with Initial window translation: 100%, Initial content translation: -30%, using the supplied core snippet and a 0.6s segment with power3.out. Capture at 0s, 0.3s, and 0.6s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.