Video hook

훅 (후킹)

A device in the first 3–5 seconds that gives viewers a reason to stay before they leave.

Also known as: HookCold open후킹오프닝 훅
···
html
<div class="vid">
  <div class="a">첫 3초</div>
  <div class="h1">이 한 가지로<br>조회수 10배</div>
  <div class="h2">▶ 끝까지 보면 알려드려요</div>
  <div class="bar"><i></i></div></div>
css
.vid{position:relative;width:min(92%,170vmin*1.3);aspect-ratio:16/9;max-height:92%;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#232b55,#0e1226);border:1px solid var(--line);font-family:sans-serif;color:#fff}
.bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.bar i{display:block;height:100%;background:#ff3d57;width:0;animation:prog 6s linear infinite}
@keyframes prog{0%{width:0}100%{width:100%}}
.a{position:absolute;top:8%;left:5%;font:700 clamp(8px,3vmin,13px) sans-serif;padding:3px 8px;border-radius:99px;background:#ff3d57}
.h1{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font:900 clamp(16px,7vmin,34px)/1.2 sans-serif;animation:h1 6s ease infinite}
.h2{position:absolute;left:0;right:0;bottom:14%;text-align:center;font:600 clamp(9px,3.2vmin,15px) sans-serif;color:#ffd166;animation:h2 6s ease infinite}
@keyframes h1{0%{opacity:0;transform:scale(1.4)}8%,40%{opacity:1;transform:scale(1)}55%,100%{opacity:.15;transform:scale(1)}}
@keyframes h2{0%,15%{opacity:0}25%,55%{opacity:1}70%,100%{opacity:0}}

On short-form platforms viewers decide whether to keep watching **within the first few seconds**. The hook is what you put there: show the strongest moment first (a cold open), ask a question, or reveal the result and leave the process for later. It is the opposite of opening with a greeting and a channel intro.

Common types: **result first** ("this one change 10×'d my views"), **question / provocation** ("why won't anyone tell you this?"), **curiosity gap** (delay the answer on purpose), and **pattern interrupt** (a sudden cut or sound that stops the scroll).

The body must deliver what the hook promised. An exaggerated hook raises clicks but lowers **retention**, which hurts recommendations too.

When to use

Use it when deciding the opening of Shorts, Reels or ad videos. After editing, try moving the most impactful 3 seconds to the very front.

Open as page ↗

Suggest an entry

Tell us about a term, effect or component that’s missing. We read every suggestion.