Design Atlas
한국어
▶ Motion graphics

Glitch transition

글리치 트랜지션

A brief burst of RGB-channel split and digital noise dropped between two scenes, so the cut reads as a signal glitch rather than an edit.

Also known as: Digital glitch cutDatamosh transition
···
html
<div class="stage">
  <div class="scene a">SCENE A</div>
  <div class="scene b">SCENE B</div>
  <div class="chr r"></div><div class="chr g"></div><div class="chr b2"></div>
  <div class="blocks"></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 clamp(16px,6vmin,32px)/1 sans-serif;color:#fff;letter-spacing:.03em}
.a{background:linear-gradient(135deg,#1a2a3a,#0b141d);animation:show-a 3.2s steps(1) infinite}
.b{background:linear-gradient(135deg,#3a1a2a,#1d0b14);animation:show-b 3.2s steps(1) infinite}
@keyframes show-a{0%,58%{opacity:1}59%,100%{opacity:0}}
@keyframes show-b{0%,58%{opacity:0}59%,100%{opacity:1}}
.chr{position:absolute;inset:0;font:800 clamp(16px,6vmin,32px)/1 sans-serif;display:flex;align-items:center;justify-content:center;
  opacity:0;mix-blend-mode:screen;animation:chr-flash 3.2s steps(1) infinite}
.chr::before{content:'SCENE';display:block}
.r{color:#ff3355;transform:translateX(-6px)}
.g{color:#33ff88;transform:translateX(0)}
.b2{color:#3388ff;transform:translateX(6px)}
@keyframes chr-flash{0%,55%{opacity:0}58%,63%{opacity:.85}64%,100%{opacity:0}}
.blocks{position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 3px,transparent 3px 9px,rgba(255,255,255,.3) 9px 11px,transparent 11px 20px);
  animation:block-flash 3.2s steps(1) infinite}
@keyframes block-flash{0%,56%{opacity:0}58%,62%{opacity:.5}63%,100%{opacity:0}}

Where glitch-as-effect is a sustained "broken signal" texture across a whole scene, the glitch transition compresses that same texture into a tiny 0.1–0.3 second burst and uses it purely as a cut signal.

The most common recipe layers two things: shifting the red, green, and blue channels in different directions (a channel shift), and randomly slicing horizontal blocks and displacing them (faking datamoshing). In After Effects this is usually Turbulent Displace or a dedicated glitch plugin (Trapcode and similar) applied only for the transition's short duration.

Let it run too long and it starts to feel like an actual broadcast malfunction instead of a stylistic choice — it earns its keep in fast, rhythmic edits (music cuts, game highlights) precisely because it's brief.

When to use

It clashes with a calm, buttoned-up brand video — save it for fast, high-energy content where the noise fits the tone.