Design Atlas
한국어
▶ Motion graphics

Track matte

트랙 매트

A compositing technique where one layer's brightness (luma) or transparency (alpha) becomes the mask through which another layer shows — the trick behind footage playing inside the shape of text.

Also known as: Luma matteAlpha matteMatte layer
···
html
<div class="stage">
  <div class="masked-text">MATTE</div>
  <div class="track-row"><div class="pattern"></div></div>
  <span class="cap">매트가 움직이면 보이는 영역도 따라 움직인다</span>
</div>
css
.stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%}
.masked-text{font:900 clamp(26px,12vmin,78px)/1 sans-serif;letter-spacing:-.02em;
  background:repeating-linear-gradient(115deg,var(--accent) 0 16px,var(--accent-3) 16px 32px,var(--accent-2) 32px 48px);
  background-size:240% 240%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:slide-pattern 3.5s linear infinite}
@keyframes slide-pattern{from{background-position:0% 0%}to{background-position:120% 45%}}
.track-row{position:relative;width:76%;height:16%;min-height:30px;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,var(--accent) 0 8px,var(--accent-3) 8px 16px);
  -webkit-mask-image:radial-gradient(circle 34px at center,#000 100%,transparent 100%);
  mask-image:radial-gradient(circle 34px at center,#000 100%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:80px 80px;mask-size:80px 80px;
  animation:track-move 3.5s ease-in-out infinite}
@keyframes track-move{0%,100%{-webkit-mask-position:0% center;mask-position:0% center}50%{-webkit-mask-position:100% center;mask-position:100% center}}
.cap{font:11px/1.3 sans-serif;color:var(--muted);text-align:center;max-width:80%}

Put the layer you want as a matte (usually a shape or text) right below the layer you want to reveal, then link them with the Track Matte control. Show only the bright parts and it's a luma matte; cut by transparency and it's an alpha matte.

Animate the matte layer and the revealed area moves with it — that's what "track" refers to. Unlike a one-time static clip-path, the matte itself becomes part of the choreography.

Mismatched frame rates or resolutions between the matte and the fill layer leave messy edges. Always do a render test before exporting.

When to use

Keep the matte shape above the fill layer in stacking order, and leave both layers on Normal blend mode.