Design Atlas
한국어
▶ Motion graphics

Lower third

로워 서드

A broadcast graphic placed in the bottom third of the frame to show a name or title — how news and interview footage introduces a person.

Also known as: Name plateTitle bar자막바
···
html
<div class="frame">
  <div class="footage"></div>
  <div class="lt">
    <div class="bar"></div>
    <div class="text"><strong>정하늘</strong><span>브랜드 디자이너</span></div>
  </div>
</div>
css
.frame{position:absolute;inset:0;overflow:hidden}
.footage{position:absolute;inset:0;background:
  radial-gradient(circle at 72% 30%,#2b3660 0%,#0c0c12 62%),
  linear-gradient(180deg,#15151f,#0c0c12)}
.lt{position:absolute;left:6%;bottom:14%;width:50%;height:16%;min-height:34px;display:flex;align-items:center}
.bar{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,#5b5bf7,#5b5bf7 68%,rgba(91,91,247,0));
  transform-origin:left center;animation:bar-in 3.6s ease-in-out infinite}
.text{position:relative;padding:0 14px 0 16px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:2px;
  opacity:0;animation:text-in 3.6s ease-in-out infinite}
.text strong{font:700 clamp(11px,3.4vmin,17px)/1.15 sans-serif;letter-spacing:.01em;white-space:nowrap}
.text span{font:400 clamp(9px,2.3vmin,12px)/1.15 sans-serif;color:#c7c9e8;white-space:nowrap}
@keyframes bar-in{0%{transform:scaleX(0)}12%{transform:scaleX(1)}78%{transform:scaleX(1)}92%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@keyframes text-in{0%{opacity:0;transform:translateX(-8px)}18%{opacity:1;transform:translateX(0)}74%{opacity:1}88%{opacity:0;transform:translateX(-8px)}100%{opacity:0}}

The name-plate graphic that appears when someone starts speaking in an interview or news clip and disappears when they stop. Its placement — the bottom third of the frame — literally gave it its name.

In After Effects, the bar and the name text live on separate layers: the bar slides in from the left with a scale-up, and the text fades in a beat later, after the bar has landed — that lag is what gives it rhythm. Editors often save the whole thing as a Motion Graphics Template (.mogrt) in Premiere Pro's Essential Graphics panel so anyone can swap in a new name without touching the design.

Keep it inside the title-safe area so it never collides with captions, and remember to reposition it for vertical/short-form cuts with a different aspect ratio.

When to use

Reuse one template across every speaker instead of redesigning it each time — consistency reads as more professional than variety.