Marketing Atlas
한국어
# Social & short-form

Three-second hook

첫 3초 훅

Give viewers an immediate reason to stop scrolling in a short video.

···
html
<div class="timeline"><div class="screen"><span class="badge">0–3 SEC</span><strong>WAIT—<br>THIS CHANGES<br>EVERYTHING.</strong><i class="play">▶</i></div><div class="track"><div class="hook">HOOK</div><div class="story">EXPLAIN → PAYOFF</div><i class="head"></i></div><div class="time"><span>0s</span><span>3s</span><span>15s</span></div></div>
css
.timeline{width:min(88%,630px);font:900 clamp(10px,max(1.7vmin,1vw),14px)/1 sans-serif}.screen{position:relative;height:clamp(85px,24vmin,200px);display:grid;place-items:center;background:linear-gradient(135deg,#211b19,#47352f);color:white;text-align:center;overflow:hidden}.screen strong{font-size:clamp(15px,5.8vmin,48px);line-height:.95;letter-spacing:-.04em;animation:text 5s steps(1) infinite}.badge{position:absolute;left:12px;top:10px;background:var(--accent);padding:5px 7px;font-size:clamp(10px,max(1.5vmin,1vw),12px)}.play{position:absolute;right:10px;bottom:10px;font-size:12px}.track{position:relative;display:flex;height:clamp(20px,4.5vmin,35px);margin-top:clamp(6px,1.5vmin,12px);color:white}.hook{width:20%;background:var(--accent);display:grid;place-items:center}.story{flex:1;background:var(--muted);display:grid;place-items:center}.head{position:absolute;top:-5px;left:0;width:3px;height:calc(100% + 10px);background:var(--fg);animation:scan 5s linear infinite}.time{display:flex;justify-content:space-between;margin-top:4px;color:var(--muted)}@keyframes scan{to{left:100%}}@keyframes text{0%,20%{opacity:.3;transform:scale(.95)}25%,100%{opacity:1;transform:none}}
···

Short-form video숏폼 영상

Deliver one message through a concise sequence of vertical scenes.

···

Audience retention curve시청 유지 곡선

See where viewers leave a video over time.

···

Loopable ending반복 시청 엔딩

Make the last frame lead naturally into the first.

···

Pattern interrupt패턴 인터럽트

Break a predictable visual rhythm to regain attention.

A three-second hook quickly communicates the topic and a reason to keep watching. A question, preview of the payoff, or meaningful contrast should connect to the actual story.

The demo places the hook in the opening three seconds and continues into the explanation. Design the first visual and captions for people watching without sound.

A dramatic opening that the rest of the video cannot deliver may raise watch time while eroding trust. Keep the promise honest.

When to use

Use it while planning short social videos or ads, checking the first frame and first line together.

Open as page ↗