Captions-first video

자막 중심 영상

Design visuals and captions so the message works with sound off.

···
html
<div class="s-demo"><div class="cf"><div class="cf-video"><div class="cf-shape"></div><div class="cf-label">SOUND OFF</div><div class="cf-caption">FOLD IT.<br><b>TAKE IT ANYWHERE.</b></div></div><div class="cf-indicator">CAPTIONS <span>ON</span></div></div></div>
css
.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.cf{display:flex;align-items:center;gap:clamp(8px,3vmin,24px)}.cf-video{position:relative;width:clamp(105px,30vmin,190px);height:clamp(135px,42vmin,265px);background:linear-gradient(145deg,var(--accent-2),var(--accent));overflow:hidden;border-radius:12px}.cf-shape{position:absolute;width:38%;height:46%;left:31%;top:20%;border:clamp(5px,1.4vmin,9px) solid var(--fg);border-radius:10px;transform:rotate(-15deg);animation:cfshape 5s ease-in-out infinite}.cf-label{position:absolute;top:8px;left:8px;background:var(--fg);color:var(--bg);padding:3px 6px;font-size:clamp(10px,max(2vmin,1vw),12px)}.cf-caption{position:absolute;bottom:10px;left:6px;right:6px;text-align:center;background:#211b19;color:#fff6ed;padding:5px 2px;font-size:clamp(10px,max(2.2vmin,1vw),14px);font-weight:900;animation:cfcaption 5s infinite}.cf-caption b{color:var(--accent-2)}.cf-indicator{width:clamp(70px,22vmin,130px);font-size:clamp(12px,3vmin,21px);font-weight:900}.cf-indicator span{display:block;color:var(--accent);font-size:1.5em;animation:cfcaption 5s infinite}@keyframes cfcaption{0%,20%{opacity:0;transform:translateY(7px)}35%,90%{opacity:1;transform:none}100%{opacity:0}}@keyframes cfshape{50%{transform:rotate(5deg)}}

Captions-first video places key words inside the visual composition, beyond merely transcribing speech. The topic remains visible in a muted feed.

The demo compares a muted scene before and after captions appear. Break copy into short phrases and keep it clear of the product.

Transcribing every word can overwhelm a small screen. Select the phrases that carry the point.

When to use

Use it when editing feed videos or interview clips that must work muted.

Open as page ↗