Design Atlas
한국어
▶ Motion graphics

Match cut

매치 컷

Cutting between two totally different times or places so their composition lines up exactly, making the cut feel like one continuous motion.

Also known as: Graphic match
···
html
<div class="stage">
  <div class="scene a"><i class="shape"></i><span>SCENE A</span></div>
  <div class="scene b"><i class="shape"></i><span>SCENE B</span></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10%}
.scene span{font:700 12px/1 ui-monospace,monospace;color:#c9c9d6;letter-spacing:.08em}
.shape{width:clamp(40px,16vmin,74px);height:clamp(40px,16vmin,74px);border-radius:50%}
.a{background:#171724;animation:show-a 3s steps(1) infinite}
.a .shape{background:var(--accent-2)}
.b{background:#101a28;animation:show-b 3s steps(1) infinite}
.b .shape{background:var(--accent-3)}
@keyframes show-a{0%,54%{opacity:1}55%,100%{opacity:0}}
@keyframes show-b{0%,54%{opacity:0}55%,100%{opacity:1}}

The most famous example is the bone-to-spaceship cut in 2001: A Space Odyssey — the round shape and its position in frame line up so precisely that a single cut spans millions of years.

Editors look for a frame in each clip where the key element — a round shape, a silhouette, the direction of camera motion — sits at the same coordinates, then splice exactly those frames together. Often the shots are composed on set with the eventual match cut already in mind.

In the edit bay, two still frames get laid over each other to check the alignment by eye — even a one-pixel mismatch and the cut reads as a coincidental resemblance instead of an intentional one.

When to use

A match cut almost never happens by accident in the edit bay — design the composition at the storyboard stage, before you shoot.