short-form-video

短视频

制作一段能留住观众的 9:16 视频。短视频不是缩小版的发布影片，而是一台留存机器：用一个钩子赢得最初一秒，每隔几秒用模式中断重新吸引注意力，并且通常以循环结尾，把观看时长推过 100%。短视频的功夫在于节奏，而非精修。

适用场景

• Reels / TikTok / YouTube Shorts（7–60 秒，竖屏 9:16）。
• 留存剪辑：解决观众流失、加入模式中断、加快节奏。
• 钩子、无缝循环、可重复套用的短视频模板（一种设计，适用于多个主题）。

故事结构（留存契约）

短视频叙事是与观众手指立下的契约：每一秒都必须重新赢得下一秒。叙事应当从留存曲线倒推，而不是从开场正向铺陈。动时间线之前，先把以下几点确定下来。

• 每条视频只讲一个观点。 一条短视频只承载一个明确的收获。第二个观点会分散注意力，让曲线在中段下滑——不如把它做成第二条视频。如果你无法用一句话说出唯一要传达的内容，那这条短视频还没准备好。
• 在开头约 3 秒内埋下悬念，最后揭晓。 钩子提出一个问题或留出一个缺口（悬念）；回报则给出答案。观众会因为悬念尚未揭晓而留下——所以不要提前揭晓，也不要把回报埋在铺垫里。
• 不要有冷场。 每个节拍都必须推进观点或重新吸引注意力。两者都做不到的内容，统统剪掉。沉默、缓慢铺陈、清嗓子式开场（“大家好，这期视频……”）都会让观众划走。
• 为什么工作单位是曲线，而不是剪辑点。 算法会分发能让逐秒留存曲线保持平稳的内容；能拉平曲线的“好”剪辑，敌不过能让曲线维持高位的粗糙剪辑。你剪辑的是曲线，而钩子决定了后续内容能否被看到——先从钩子着手。

叙事主线（Hook → Setup → Body → Payoff/loop 结构的时长分配见下表）：

环节	故事作用	缺失时的问题
钩子	埋下悬念；承诺揭晓结果	前 3 秒内划走
悬念维持	在主体内容中持续留住悬念	中段平淡，观众中途流失
回报	揭晓悬念——交付唯一观点	“浪费了我的时间”，无人分享
循环 / CTA	衔接回第 0 帧，或提出一个明确要求	无人重看，也没有行动

（下方的 The retention arc 表格为每个环节分配时长；本节说明的是其背后的叙事逻辑和顺序。Hook grammar 列出了钩子类型。）

驱动一切的唯一指标

留存，而非制作水准。 算法会分发能够留住观众的内容；约 87% 的人会在 3 秒内决定继续观看还是划走，而获得分发的门槛约为 70%+ 的平均观看完成率（Shorts 约 73%，TikTok 约 78%，Reels 约 65%）。下面的每项决策都要权衡对这条曲线的影响。一段精美镜头若在 0:04 让人觉得无聊，就会输给一段粗糙但能留住观众的镜头。

留存节奏

节拍	作用	时长（以 20 秒短视频为例）
钩子（0–1 秒）	用一个画面加一句话埋下悬念	0–1 秒
铺垫	交代为什么值得看——承诺、利害关系或悬念缺口	1–4 秒
主体	以多个节拍传递价值；每个节拍只讲一个观点	4–17 秒
回报 / 循环	揭晓悬念，或衔接回第 0 帧	17–20 秒

延长主体，不要延长钩子。60 秒的短视频主体更长、节拍更多——但钩子仍然只有 1 秒。

Hook 语法（前 ~1s）

Hook 是一句话加一个视觉画面，用来制造大脑迫切想要解开的好奇缺口。选一种模式并贯彻到底：

Hook 类型	形式	最适合
悬念	“你的 X 总是 Y 的原因……”（延迟揭晓答案）	大多数内容
直接承诺	“30 秒内学会 ___ 的 3 种方法”	教育类 / 清单类
模式打断	第 1 帧使用快速变焦 / 快速摇镜 / 视觉错位	娱乐类
否定	“别再 ___ 了” / “你 ___ 的方式完全错了”	强烈观点

两条规则：Hook 文案必须在第 1 帧前就出现在屏幕上（85% 的观众会静音观看），最醒目的视觉画面也必须是第一帧——绝不能缓慢进入。保持醒目的开场画面；不要从黑屏淡入。

模式打断与剪辑节奏

模式打断是任何能重置注意力的变化：硬切、变焦冲击、B-roll 插入、音效、字幕弹出或角度变化。短视频的变化密度很高——每 ~2–4 秒就要有一次视觉变化；大约每 4 秒出现一次打断的视频，观看留存率约为 58%，而静态口播约为 41%。最致命的是平淡的中段：当观看完成率曲线趋于平缓时，TikTok 会减少内容分发，因此绝不要用低能量的片段拼接主体内容。

// Drive every interrupt off the FRAME, not wall-clock — renders deterministically.
import { useCurrentFrame } from "remotion";
const fps = 30;
const cuts = [0, 1.2, 3.0, 5.4, 8.0, 11.2, 14.0]; // seconds — uneven on purpose
const frame = useCurrentFrame();
const shot = cuts.findIndex((t, i) => frame < (cuts[i + 1] ?? Infinity) * fps);

变换时间间隔——像节拍器一样规律会让人感到无聊，不均匀的剪辑则能带来推进感。快速推近是成本最低的打断方式，不需要新素材：

import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
const PunchIn = ({ at, children }) => {
  const frame = useCurrentFrame(); const { fps } = useVideoConfig();
  const s = spring({ frame: frame - at * fps, fps, config: { damping: 12, stiffness: 200 } });
  const scale = interpolate(s, [0, 1], [1, 1.12]); // snap to 112% on the beat
  return <div style={{ transform: `scale(${scale})`, transformOrigin: "50% 45%" }}>{children}</div>;
};

字幕

大多数观众会静音观看，因此屏幕字幕不可或缺——字幕承载内容，每个短语弹出时还能起到模式打断的作用。每行保持 4–7 个词，高对比度，并放在安全区域内。不要在此处重新实现字幕动画——使用 caption-animation 技能来处理逐词计时、卡拉 OK 高亮和样式；此技能仅负责将字幕放在留存时间线上，并确保字幕位于 9:16 安全区域内。

循环与重看

无缝循环会将每次重看都计为新的观看时长——一个干净的 8s 循环被观看 3 次，就能达到 300% 的观看完成率，这是最强的信号。两种技巧：让最后一帧与第一帧匹配（构图、位置、颜色相同），使剪辑点隐形；并写一个句子循环——让 Hook 的措辞使揭晓内容回接到第 0 帧（“……这就是我从不——”→循环回开头）。适合重看的最佳时长约为 7–15s。

9:16 安全区域

在通用安全区域内构图，避免平台 UI 遮挡文字或人脸。

区域	像素（1080×1920）	避免
通用安全区域（所有平台）	中央 900×1400	将任何关键信息放在区域之外
顶部	保持约 120px 的空白	个人资料 / 声音 UI
底部	保持约 320px 的空白	字幕、CTA、话题标签、音频栏
右侧	保持约 120px 的空白	点赞 / 评论 / 分享栏

将 Hook 文案和主要主体放在中央 900×1400 区域内。即使在编辑器里看起来空空如也，也要为底部约 320px 留出空间——平台会在此处显示自己的字幕和按钮。

输出检查清单

• Hook 文案在第 1 帧前已显示在屏幕上；最醒目的视觉画面是第一帧（不淡入）。
• 在前 ~4s 内设置一个悬念 / 承诺。
• 每 ~2–4s 出现一次视觉模式打断；间隔不均匀；中段不平淡。
• 有字幕（通过 caption-animation），每行 4–7 个词，并放在安全区域内。
• 循环闭合——首尾帧匹配，或通过句子回接到第 0 帧。
• 构图位于中央 900×1400 区域内；底部 320px / 顶部 120px / 右侧 120px 保持空白。
• 每个动画值均由 useCurrentFrame() 派生——不使用 CSS / 库计时器。

交付与验证（渲染静帧 → MP4）

打包的辅助脚本（scripts/）：使用 scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png 将静帧拼成图集，然后使用 scripts/probe-mp4.sh out.mp4 [WxH] [fps] 验证编码结果。参见 scripts/README.md。

短视频以 Remotion 组合的形式交付（<Composition> + zod schema + defaultProps）——每个剪辑、推近和中断效果都由 useCurrentFrame() 驱动，绝不使用 Date.now() / Math.random() / 计时器。交付内容 = out/*.mp4 + 项目文件（每个主题都可重新渲染）。默认采用 9:16 竖屏（1080×1920）。

验证流程——渲染静帧 → 检查 → 编码。 三帧用于测试决定留存效果的三项关键因素：钩子、节奏和循环衔接。

# Stills at hook / mid-body / last frame — WITH SHIPPED PROPS (the real topic, not defaults)
npx remotion still Short out/f-hook.png --frame=10  --props='{"topic":"...","hook":"..."}'   # ~first 3s reads instantly
npx remotion still Short out/f-mid.png  --frame=N   --props='{"topic":"...","hook":"..."}'
npx remotion still Short out/f-end.png  --frame=L   --props='{"topic":"...","hook":"..."}'   # L = durationInFrames-1

# Inspect each PNG:
#  - HOOK frame (~frame 0-ish / first 3s): hook line is on-screen text and reads instantly; strongest visual already up (no fade-up)
#  - LOOP seam: compare f-hook(frame 0) vs f-end(last frame) — same composition/position/color for an invisible loop cut
#  - 9:16 safe area: hook + key subject inside the center 900x1400 box; clear of top ~12%, bottom ~20-35% (captions/CTA/audio), right action rail

npx remotion render Short out/short.mp4 --props='{"topic":"...","hook":"..."}'   # encode once stills verify
npx remotion render Short out/demo.gif --codec=gif                                # README proof clip

每个主题 / 批次：先通过静帧验证一个主题，再渲染所有主题。使用 npx remotion compositions 获取 durationInFrames/fps，以选取中间帧和最后一帧。

完成前：

1. 钩子帧、中间帧和最后一帧均能正常渲染，无错误。
2. 钩子帧能让人一眼看懂（屏幕文字 + 最强视觉元素一开始就出现，不要淡入）；首帧与末帧匹配，确保循环衔接流畅。
3. 钩子 + 主体 + 字幕在每个检查帧中都位于 9:16 中央 900×1400 安全框内。
4. 仅由帧驱动——不使用 Date.now() / Math.random() / 计时器；剪辑时长不均匀，中段不平淡。
5. 使用真实主题的已交付 props（而非 defaultProps）渲染正确；MP4 已编码，GIF 可选。

参考文件

• references/retention-pacing.md — 完整且可运行的 Remotion <Short> 组合：由帧驱动的镜头调度器、时长不均匀的剪辑、PunchIn 节奏中断、屏幕钩子、9:16 安全区域叠加层，以及首尾帧无缝循环。此外还包含钩子模式库、留存曲线调试方法、各平台安全区示意图，以及按模板×主题批量渲染的模式。