Design Atlas
한국어
↝ Motion

Staging

스테이징

The principle of making one idea read clearly at a time — using silhouette, framing and timing to tell the viewer's eye exactly where to look. The name comes straight from stage direction.

Also known as: Staging (12 principles)Visual staging
···
html
<div class="split">
  <div class="panel bad">
    <span class="tag">No staging</span>
    <i class="s s1"></i><i class="s s2"></i><i class="s s3"></i><i class="s s4"></i>
  </div>
  <div class="panel good">
    <span class="tag">Staging</span>
    <i class="s g1"></i><i class="s g2"></i><i class="s g3"></i>
    <i class="hero"></i>
  </div>
</div>
css
.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.panel{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.tag{position:absolute;top:6%;left:0;right:0;text-align:center;font:700 10px/1 ui-monospace,monospace;color:var(--muted);letter-spacing:.04em;z-index:2}
.bad .s{position:absolute;width:20%;aspect-ratio:1;border-radius:50%;animation:pulse 1.3s ease-in-out infinite}
.bad .s1{left:14%;top:22%;background:var(--accent)}
.bad .s2{left:62%;top:18%;background:var(--accent-2);animation-delay:.2s}
.bad .s3{left:20%;top:62%;background:var(--accent-3);animation-delay:.4s}
.bad .s4{left:60%;top:60%;background:var(--accent);animation-delay:.6s}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.good .s{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:var(--muted);opacity:.22}
.good .g1{left:10%;top:16%}
.good .g2{left:70%;top:20%}
.good .g3{left:14%;top:66%}
.good .hero{position:absolute;left:50%;top:55%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;border-radius:50%;
  background:var(--accent-2);box-shadow:0 0 30px 8px rgba(242,92,138,.4);animation:pulse 1.3s ease-in-out infinite}

One of Disney's 12 principles: good staging leaves no doubt about what the viewer should be looking at right now. The test is whether the silhouette alone reads clearly, whether the camera (or screen) frames the important thing, and whether competing actions aren't stealing attention from each other.

In UI this becomes "animate one thing at a time." If five elements pulse, bounce and recolor at once, nothing actually gets noticed. Staging means brightening and enlarging the one thing you want seen while dimming or freezing everything else to create contrast.

The left panel below has no staging — four identical shapes pulse at the same size and speed, so nothing stands out. The right panel uses the same setup, but the background is dimmed and static while one shape glows and grows — the eye goes there automatically.

When to use

Reserve it for the one state change the user must not miss — an error banner, a completion toast. Animating the whole page at once defeats staging entirely.