AWESOME AI MOTION
효과Effects / 질감·스타일Texture & Style / Nº 479

네거티브 스페이스 반전Negative Space Inversion

Negative Space Inversion
네거티브 스페이스 반전
다른 이름Also known as · Negative Space Invert · 여백 반전 · matte-invert-negative-space · silhouette-negative-space-match
479
렌더 추가 예정CLIP COMING네거티브 스페이스 반전Negative Space Inversion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 479. 네거티브 스페이스 반전 · Negative Space Inversion · power2.inOut

실루엣은 유지되고 밝은 면과 어두운 여백의 역할이 뒤바뀌는 전환The silhouette stays the same while the bright shape and dark space swap roles.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
같은 대상의 관점이나 상황이 뒤집힌다는 감각. 배경과 형태의 자리바꿈The sense that perspective or circumstance has flipped for the same subject: figure and ground trade places.
언제 쓰나Use whenUSE WHEN
  • 전과 후, 문제와 해결처럼 같은 대상의 반대 상태를 보일 때
  • 로고나 아이콘 실루엣으로 장면을 이을 때
  • Show opposite states of the same subject, like before and after or problem and solution.
  • Link scenes through a logo or icon silhouette.
과용 주의AvoidAVOID
  • 실루엣 좌표는 반전 전후 완전히 같아야 한다
  • 중간 회색 구간을 0.1초 안에 지나간다
분류TagsTAGS
질감·스타일Texture & Style전환Transition비교Compare발표Presentation설명 영상Explainer video숏폼Short-form난이도 중급Intermediatesvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

흰 바탕의 검은 실루엣이 0.5초 동안 검은 바탕의 흰 실루엣으로 뒤집히며 형태 좌표는 그대로 유지된다

과용 · 나쁜 사례OVERUSE

반전 중 실루엣이 조금씩 움직여 정렬이 어긋나거나, 색이 회색 중간값에서 오래 머문다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속0.5s0.35~0.8s양 극 사이 이동
배경 색#fff→#111고대비 두 색0 이후 값
전경 색#111→#fff고대비 두 색배경의 반대
이징power2.inOutsine~power3전환 중 밝기 급변 방지
GSAP
tl.to('.bg', { backgroundColor: '#111', duration: 0.5, ease: 'power2.inOut' }, 0)
  .to('.shape', { fill: '#fff', duration: 0.5, ease: 'power2.inOut' }, 0)
  .to('.b', { opacity: 1, duration: 0.5, ease: 'power2.inOut' }, 0);
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 실루엣이 유지된 채 색 역할이 뒤집히는 네거티브 스페이스 반전을 만들어줘. 배경은 #fff에서 #111로, 실루엣 fill은 #111에서 #fff로 0.5초 동안 power2.inOut으로 보간하고 path 좌표는 바꾸지 마. 반전 뒤 B 콘텐츠가 실루엣 안쪽에 나타나게 해. paused 타임라인 하나.

Build a negative space inversion for <target> where the silhouette stays put and the colors swap roles. Tween the background from #fff to #111 and the silhouette fill from #111 to #fff over 0.5 seconds with power2.inOut. Do not change the path coordinates, and reveal B's content inside the silhouette afterward. One paused timeline.

Codex

<파일>에 negative space invert를 적용해. .bg backgroundColor #fff에서 #111, .shape fill #111에서 #fff를 0.5s power2.inOut으로 동시에 보간한다. 0.25초 캡처에서 회색 중간 상태의 실루엣 경계가 또렷한지, 0초와 0.5초에서 형태 좌표가 같은지 확인해.

Apply a negative space invert in <file>. Tween .bg backgroundColor #fff to #111 and .shape fill #111 to #fff together over 0.5s with power2.inOut. Capture at 0.25 seconds to confirm the silhouette edge is crisp in the gray midpoint, and at 0 and 0.5 seconds to confirm the shape coordinates are identical.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
SVG 실루엣을 하나의 path로 두고 fill과 배경색만 보간한다. 좌표를 건드리지 않아 seek에서 어긋나지 않는다
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 shapeSvg, colorA, colorB를 실어 두 씬이 같은 path를 공유하게 한다
Scrolline DeckSCROLL SCRUB
진행률 0.5를 반전 중간으로 두고 fill과 배경을 같은 진행률로 보간한다. 스프링은 색에 의미가 없다
06

잘 맞는 조합Pairs well with

매치컷 · Match Cut
Nº 124매치컷Match CutMatch Cut
비교 분할 · Split Compare
Nº 366비교 분할Split CompareSplit Compare
모프 전환 · Morph
Nº 125모프 전환MorphMorph
07

출처Sources

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