Files

Dmytro Stanchiev abb472c83d chore: ruler files update

Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>

2026-05-24 21:03:49 -04:00

78 KiB

Raw Blame History

v5 · "Markdown is the new typewriter."

Director's Notes for the huashu-md-html v2.0 launch film 30 seconds · 1920×1080 · 25 fps · no voiceover Director: huashu-design (acting as Apple-tier launch film director) Composer: TBD (target: Max Richter / Ólafur Arnalds / Jóhann Jóhannsson minimal-cinematic register) Color base: ivory white #FAFAF6 · ink #1A1A1A · terracotta #C2410C Type: Newsreader (display + body) · JetBrains Mono (interface) · Noto Serif SC (中文)

Part I · Director's Statement

1.1 这不是一支「功能介绍片」

绝大多数 SaaS 升级视频都犯同一个错——把镜头当成 PPT。打开 → 6 个功能滑过 → logo + slogan → 结束。每一秒都在「展示」，没有一秒在「讲」。观众离开时记住的不是产品，而是「又一个看着像 AI 做的页面」。

这支片不要做这个。

我们要讲一个故事。故事只有一行：

「md 是源代码，万物是产物。」

这不是 slogan，是世界观。Markdown 不是「一种轻量级文档格式」——它是写作的源头。一切下游的形式（html、docx、pdf、epub）都是从这同一个源头派生出的产物。huashu-md-html v2.0 把这条产物链从 4 条延长到 6 条——但延长的不是「功能列表」，是源头的影响力半径。

如果观众看完这支片只记住一件事，我希望那件事是：「原来 md 才是源代码」。功能列表能记多少都是 bonus。

1.2 视觉语言的语境对话

每一部好的宣传片都在跟一组前作对话。我希望这支片对话的语境是：

Apple — "Designed by Apple in California" (2013)

那支片子是我心目中科技公司宣传片的天花板。导演 Mark Romanek 做对了三件事：

纯白底 + 衬线字体——告诉观众这是一支「关于设计的设计」，不是 demo
慢拍——每一句话的字幕都比观众阅读速度慢半拍，强迫观众停留
Jony Ive 的旁白几乎像耳语——不是兜售，是分享

我们这支片没有 voiceover，所以前两个原则要被 typography 和 timing 强化到 200%。

Apple Silicon Launch Films (M1 / M2 / M3, 2020-2024)

这一系列短片教会我typography 也能跳舞。"M1" 三个字符可以从消失、到出现、到放大、到旋转、到爆炸成尘埃、再到重组——观众看着一个 logo 在 30 秒里成为一支舞剧的主角。

这支片的 hero 不是产品 UI，是 md. 这两个字符 + 一个橙色句点。它要在 30 秒里成为舞剧主角。

Anthropic 品牌语言（2024-2026）

Anthropic 把「赤陶橙 + 衬线 + 几何抽象」做成了 AI 公司的反 slop 样板。它告诉行业：你可以是科技公司，但你也可以看起来像 Penguin Classics 出版的一本哲学小书。

我们继承这套色彩。但要做得更克制——Anthropic 偶尔用纯赤陶橙作大色块；我们的赤陶橙永远只作 accent（占总画面 < 8% 面积），剩下 92% 留给象牙白和墨黑。

Penguin Classics（1947 起，Romek Marber 1961 grid 之后）

Penguin 教会我typography 的勇敢。一本书的封面可以是大字号衬线 + 一条黑横线 + 没有插图——读者反而会停下来。

第 25-29 秒的 slogan reveal 借这个语言：ONE SOURCE. 和 SIX FORMS. 不是「装饰文字」，它们就是画面本身。

Pentagram (Paula Scher / Michael Bierut)

Pentagram 的招牌是信息建筑——文字和文字之间的距离、文字和边界的距离、文字层级之间的字号比，都不是「凭直觉」，是数学。

我们的网格系统（Part II.3）来自这一传统。

Kenya Hara《白》(2008)

Hara 写过：「白不是颜色，是一种感受性。」（白は色彩ではなく、感受性なのだ）

这支片的真正主角不是 md.，是包围它的那片象牙白。每一个 shot 都要留出至少 60% 的负空间。负空间不是「还没填满」，是内容本身。

Massimo Vignelli — Modernism in design

Vignelli 的 8 字格言：「If you can design one thing, you can design everything.」（能设计好一件东西，你就能设计好一切）

我们的设计系统不允许「这一镜临时加一种字体」「这一镜临时加一个圆角值」。所有 12 个 shots 共享同一套 5 个色值、3 种字体、4 个 easing curves。

1.3 观众画像

三类观众，按重要性排：

主受众 A · 已使用 v1 的 huashu-md-html 老用户（约占 60% 流量）

他们打开片子是为了知道「升级了啥」。我们对他们的承诺：30 秒之内，你必须明确知道——

新增能力 5：md → 出版级 PDF
新增能力 6：md → 标准 EPUB
这两个能力的视觉品质比想象中更高（不是「我用 wkhtmltopdf 也能搞」级别）

→ Shot 08 和 Shot 09 各 3 秒，必须有「★ NEW」标签 + destination card 上必须能看到「印厂裁切标记」「Apple Books frame」这类看得见的专业级细节——让老用户秒懂「这不是凑数功能，是正经做了的」。

次受众 B · 听说过 huashu-md-html 但没用的 AI Native 创作者（约 25%）

他们关心的是「这个 skill 跟我有什么关系」。我们对他们的承诺：30 秒之内，你必须意识到——

你写文章 / 做调研 / 做白皮书时，md 应该是你的 source of truth
6 种下游格式，一次命令解决

→ Shot 04（any → md）要让他们看到 PDF/DOCX/PPTX/XLSX/HTML 一起被 md 吸收——这是「源头思维」的视觉具象化。

外受众 C · 完全不熟悉的设计师 / 编辑 / 出版人（约 15%）

他们看到的是一支「漂亮的科技短片」，不一定 follow up。我们对他们的承诺：30 秒之内，你必须留下印象——

这家做的东西有出版社品位
跟你过去看到的 AI 工具不一样

→ 整支片的反 AI slop 自检（Part II.7）就是为他们做的。任何紫渐变、emoji 图标、SVG 手画人物——一律不出现。

1.4 节奏哲学

苹果宣传片的节奏不是匀速的。它是慢拍 — 加速 — 顶峰 — 缓收的曲线（详见 Part III 情绪曲线图）。

具体到这支片：

0-3s 慢拍：观众进入。typography 一个字符一个字符地呼吸。
3-6s 第一加速：md 字符诞生，6 个文件 cards 鱼贯飞入。
6-22s 第二加速段：6 个 capability 一气呵成，每个 3 秒不松手。
22-26s 顶峰：slogan 双行 reveal，所有 chrome 同步律动。
26-30s 缓收：capability map 慢慢淡入，最后一秒留给品牌印章 + 极弱的 piano 残响。

关键决策：第 22 秒是这支片的高潮点（不是第 29 秒）。29 秒是 resolution，22 秒是 climax。这两个不要混。

1.5 这支片不做的事（反 AI slop 自检）

按重要性排：

不做	原因
不用紫渐变	训练语料里「科技感」的万能公式，2026 年看是 cyber slop
不用 emoji 作图标	「不专业就用 emoji 凑」的病
不画 SVG 人物 / 手 / 抽象人形	AI 画的 SVG 人物永远五官错位、比例诡异
不用 Inter/Roboto/Arial 作 display	太常见，撞 system fonts
不用赛博霓虹 / 深蓝底 #0D1117	GitHub dark mode 美学的烂大街复制
不堆 effects（blur/glow/particle）	一个 effect 出现两次就是装饰，三次就是 slop
不用 Lorem ipsum	每一段假文都用真正能读的内容（含「md is the source. Anything else is product.」这种 hook）
不用 stock photo	整支片不出现任何真实照片（it's about typography, not lifestyle）
不画进度条 + 时间码 + 版权署名条	这些是 player chrome，不是 content chrome——会和外部播放器撞
不让 md 字符在每个 scene 都长得一样	它要在 12 镜里有 12 种状态，但保持同一个核心字形

1.6 一句话定位

"Markdown is the new typewriter."

A 30-second film about source-of-truth thinking, made for designers who write and writers who design.

Part II · Visual System

2.1 完整色板

不是 3 色，是 10 色。每一色都有功能定义（不是「好看就用」）。

名称            HEX        作用                           占画面比例上限
─────────────────────────────────────────────────────────────────────
Ivory paper    #FAFAF6    主底色（象牙白，一抹温度）         60-70%
Mist           #F2EDE4    次级背景层（card 阴影下的微暗）    < 15%
Mica           #E6E1D6    细线 / 分隔符 / 卡片边框          < 5%
Smoke          #6B6B6B    次级文本 / metadata             < 5%
Cinder         #3D3530    次级深色（深褐黑，不是纯黑）       < 10%
Ink            #1A1A1A    主黑 / 主文本                    20-25%
Charred        #2A2620    极深褐黑（封面卡专用）            < 5%
Terracotta     #C2410C    主 accent（Anthropic 调）         5-8%
Terra Hot      #E55D21    高光 variant（仅 NEW 标签亮起一瞬）< 1%
Terra Deep     #8B2D08    阴影 variant（赤陶橙投影）         < 1%

铁律：

任何一镜不出现以上 10 色之外的颜色。没有「这一镜临时加点冷灰」。
赤陶橙系（Terracotta + variants）三色合计占画面 < 10%，否则视觉过载。
任何文本只能用 4 色之一：Ink / Cinder / Smoke / Terracotta。

2.2 字体系统

字号层级        字体                  weight    用途                       字距 (em)
────────────────────────────────────────────────────────────────────────────────────
Display XXL    Newsreader            700       slogan 顶字（200px）         -0.035
Display XL     Newsreader            700       capability number（48px）   -0.020
Display L      Newsreader            600       hero md 字符（300-480px）   -0.040
Display M      Newsreader            600       chapter title (32-44px)     -0.015
Body L         Newsreader            400       essay 正文 (18-22px)         0
Body M (zh)    Noto Serif SC         500       中文 sub-line (20-26px)     +0.04
Italic         Newsreader italic     400       引语、副标                   +0.01
Mono S         JetBrains Mono        500       标签 / capability counter   +0.18
Mono XS        JetBrains Mono        700       NEW / version chip (11-14px) +0.22
Caret          (block 3px wide)      —         typing cursor               —

字体加载策略：

Google Fonts 预连接 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
单一 <link> 请求合并所有 weights，减少 round-trip
录制 MP4 前必须 document.fonts.ready 完成才开始计时（Stage 已实现）

2.3 网格系统

主画布：1920 × 1080

外边距（safe zone）：80px 上下左右

主内容区：1760 × 920

12-column grid：column-width = 132px，gutter = 16px

Baseline grid：8px 基础律。所有 vertical position 必须是 8 的倍数（除非有特殊视觉理由）。

黄金分割锚点：

上 1/3 线：y = 360
下 1/3 线：y = 720
中线：y = 540（hero md 默认 anchor）
黄金分割上：y = 412
黄金分割下：y = 668

关键安全区：

顶部 60px 内：chrome 元素区（capability counter, version chip）
底部 60px 内：watermark / metadata 区
中央 800×600 区域：主内容禁区（每一镜的 hero 元素必须落在此区域内）

2.4 动画系统

Easing 库（共 4 条，禁用其他）：

名称           曲线公式                            用途
──────────────────────────────────────────────────────────────────
expoOut       1 - 2^(-10t)                       默认 ease（90% 的入场用这个）
overshoot     cubic-bezier(0.34, 1.56, 0.64, 1)  NEW 标签弹出 / 按钮浮现
linear        t                                   底色 fade / paper texture 移动
expoIn        2^(10(t-1))                        退场 ease（10% 的出场用这个）

Duration 字典：

事件类型                  持续时间      备注
────────────────────────────────────────────────────────
字符 stagger              30-50ms       打字效果 / slogan 字符依次出现
小元素入场                300ms         file card / pill / chip
中元素入场                500ms         destination card / capability number
hero 元素入场             700-900ms     md 字符 morph
slogan 字符入场           800ms         "ONE SOURCE." 整体
scene 之间过渡            300ms 重叠    cross-dissolve + scale
退场                      200-300ms     出场永远快于入场

Stagger 法则：

多元素同时进场时，相邻元素 delay 30-80ms（不是 0，也不超过 100ms）
6 个 pill 进场：累计 stagger 250ms（每个 50ms）
slogan 字符进场：累计 stagger 280ms（每个 ~30ms × 10 字符）

Scene 之间过渡：

永远是 cross-dissolve + soft scale（不切换硬切）
上一镜在末尾 300ms 内：opacity 1 → 0, scale 1 → 0.96
下一镜在开头 300ms 内：opacity 0 → 1, scale 1.04 → 1
两镜重叠 300ms（在时间轴上 Sprite end 比下一镜 start 大 0.3s）

2.5 Chrome 元素（贯穿全片）

这些是 持续在画面里的小东西，提供「这是一支完整的片子」的感觉。

Chrome A · top-left · capability counter（00-22s）

   ┌─────────────┐
   │  ●  CAP·01  │     pulse dot (terracotta) + label
   │  ●●●●○○○○○  │     6-dot progress (filled = current)
   └─────────────┘

字体：JetBrains Mono 12px，letter-spacing 0.24em
颜色：Ink for label, Terracotta for current dot, Mica for upcoming dots
动画：每次切 scene 时，下一个 dot 从空心 → 实心（500ms expoOut）

Chrome B · top-right · version chip（02-30s）

   ╔═════════════════════════╗
   ║ ● HUASHU-MD-HTML · v2.0 ║
   ╚═════════════════════════╝

字体：JetBrains Mono 13px Bold，letter-spacing 0.22em
颜色：Terracotta dot + Ink label
入场：02s 时整体 fade-in 600ms
pulse dot：每 4 秒做一次极弱呼吸（opacity 1 → 0.6 → 1, 1500ms ease-in-out）

Chrome C · bottom-center · timeline ticker（07-22s）

   any→md  ━━━━●━━━━━━━━━━━━  md→html  ─  html→md  ─  md→docx  ─  md→pdf  ─  md→epub

字体：JetBrains Mono 11px，letter-spacing 0.18em
当前 capability 用 Terracotta + bold，其他用 Smoke
一条横线连接 6 个名字，进度点（●）随时间从左滑到右
入场：07s 时整条 fade-in 500ms

Chrome D · bottom-right · watermark（持续）

   CREATED BY HUASHU-DESIGN

字体：JetBrains Mono 10px，letter-spacing 0.24em
颜色：rgba(26,26,26,0.32)
完全静态，不动

Chrome E · 极淡 paper texture（持续）

SVG 噪点 + 极慢的 0.3% scale 呼吸
opacity ≤ 0.04
录像时几乎看不见，但能让画面有「呼吸」

2.6 音频系统

BGM 走向（30 秒分段曲线）

强度
 │                            ╱╲
1│                          ╱╱  ╲╲
 │                       ╱╱      ╲╲
 │                    ╱╱             ╲
 │                ╱╱                   ╲
 │            ╱╱                          ╲
 │       ╱╱                                  ╲
 │   ╱╱                                          ╲
0└──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴
   0  2  4  6  8 10 12 14 16 18 20 22 24 26 28 30s
   │  │     │              │           │  │
   入场│   弦乐进 │      节奏律动加入  │ 顶峰 │  decay
      piano                              swell

层级（每层 30 秒持续，强度变化由 envelope 控制）：

L0 · Room tone（00-30s）：极弱 background noise，给画面「不死寂」的呼吸感
L1 · Piano single note（00-08s）：单一钢琴音持续敲击，每 1.2 秒一次，慢慢累积
L2 · Piano arpeggio（03-22s）：钢琴琶音入场，给「拾起节奏」的感觉
L3 · Cello drone（08-22s）：低频弦乐铺底，给「重量」
L4 · Pulse（15-22s）：极弱 sub-kick，4/4 节奏（不是 dance beat，是 cinematic pulse）
L5 · String swell（22-26s）：整组弦乐 swell up 到 climax
L6 · Decay + reverb tail（26-30s）：所有层级 decay，留下钢琴 + reverb

风格目标：Max Richter 的 On the Nature of Daylight + Ólafur Arnalds 的 Re:member + Jóhann Jóhannsson 的 Orphée

SFX 字典

Cue                          时间        类型               音量
────────────────────────────────────────────────────────────────────
keyboard click               00.5-02.0   keypress × 12     -18dB（每次 30ms）
cursor blink                 02.0-02.8   subtle tick        -28dB
md morph swell               02.8-03.2   soft whoosh + bloom -16dB
file card whoosh × 6         05.5-08.0   short whoosh       -20dB（每次 200ms）
absorb / ink drop             08.0-08.4   "absorb" splash    -16dB
paper rustle                 08.5-09.0   paper turn         -22dB
chime: capability 02 →        09.0       single chime tone  -18dB
chime: capability 03 →        12.0       single chime tone  -18dB
chime: capability 04 →        15.0       single chime tone  -18dB
chime: NEW (05)               18.0       double chime + glow -14dB
chime: NEW (06)               21.0       double chime + glow -14dB
build sweep                  22.0-22.6   ascending sweep    -10dB
impact (slogan ONE)          22.6        deep impact         -8dB
impact (slogan SIX)          23.4        deep impact         -8dB
pen flourish                 24.0-24.4   pen on paper        -22dB
final stamp / sign-off       29.0-29.5   ink stamp           -14dB

SFX 频段隔离（防止互相打架）：

BGM 占低频 (40Hz-2kHz)
SFX whooshes / chimes 占中高频 (2kHz-8kHz)
SFX impacts 占低频 sub (40Hz-120Hz) — 与 BGM cello 重叠但 BGM 同时 duck -3dB

2.7 反 AI slop 自检表（per-shot）

每一镜在执行前必须过这个 checklist：

□  没有紫色（任何饱和度）
□  没有圆角卡片 + 左 border accent 的组合（除了 destination card 的诚实 mica border）
□  没有 emoji 作为图标
□  没有 SVG 画的人物 / 抽象人形
□  没有未在 Part II.1 色板里的颜色
□  没有 Inter / Roboto / Arial 作为 display
□  字距、行高、字号都来自 Part II.2 字体系统（没有「凭手感」加的值）
□  vertical position 是 8 的倍数（除了刻意的视觉理由）
□  赤陶橙在本镜占画面 < 10%
□  这一镜有至少一处「pause 暂停时值得截图」的细节（120% 签名）
□  上一镜到这一镜的过渡是 cross-dissolve + scale，不是硬切
□  本镜结束时为下一镜做了视觉「让位」（不是「全画面填满到最后」）

Part III · Story Arc

3.1 三幕结构

ACT I · SET-UP (00.0 — 06.0s)

观众进入画面。问题被提出：什么是 source of truth？

SHOT 01 (0.0-1.5s) · BLANK PAGE
SHOT 02 (1.5-3.0s) · THE CURSOR
SHOT 03 (3.0-5.0s) · THE TRANSFORMATION
SHOT 04 (5.0-6.0s) · 进入 gathering（与 ACT II 重叠）

ACT II · ESCALATION (06.0 — 22.0s)

答案展开：md 是源头。它向外辐射 6 条产物链。

SHOT 04 (5.0-8.5s) · GATHERING（any → md）
SHOT 05 (8.5-11.5s) · FIRST FLOWER（md → html）
SHOT 06 (11.5-14.5s) · REVERSE FLOW（html → md）
SHOT 07 (14.5-17.5s) · PUBLISHER GRADE（md → docx）
SHOT 08 (17.5-20.5s) · ★ NEW · PRINT（md → pdf）
SHOT 09 (20.5-22.5s) · ★ NEW · EBOOK（md → epub，与 ACT III 重叠 0.5s）

ACT III · PAYOFF (22.5 — 30.0s)

主题升华。slogan 出现。品牌印章。

SHOT 10 (22.5-24.0s) · THE CONVERGENCE
SHOT 11 (24.0-26.5s) · ONE SOURCE.
SHOT 12 (26.5-29.0s) · SIX FORMS.
SHOT 13 (29.0-30.0s) · SIGN-OFF

3.2 情绪曲线

情绪强度
 │                                       ╔═══╗
 │                                    ╔══╝   ╚══╗
 │                              ╔═════╝         ╚══╗
 │                          ╔═══╝                   ╚══╗
 │                       ╔══╝                          ╚══╗
 │                   ╔═══╝                                 ╚════════╗
 │             ╔═════╝                                              ╚══╗
 │       ╔═════╝                                                       ╚══
 │  ╔════╝
 │══╝
 0──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──>
    0     2     4     6     8    10    12    14    16    18    20    22    24    26    28    30s
    │     │     │            │           │            │            │     │     │
    blank cursor morph      gather       cap 02-04   cap 05/06 ★  slogan slogan sign-off
                                                                  ONE   SIX
                                                                  ──────►
                                                                  PEAK 24.5s

关键 emotional beats：

02.0s：第一个 keyboard click → 观众进入
03.0s：md 字符诞生 → 第一次「awe」
08.0s：6 个文件 cards 收拢进 md → 「啊，原来 md 是源」第一次 click
18.0s：第一个 NEW 标签出现 → 老用户「噢」
22.5s：所有 chrome 收拢，准备进入 Act III → tension build-up peak
24.5s：SIX FORMS. 落地 → emotional climax
30.0s：md 印章静静停留 → resolution

Part IV · Shot-by-Shot Storyboard

每一镜的格式：

SHOT NN · NAME
[TIMECODE]  |  FUNCTION
[VISUAL]     画面构图
[TYPE]       排版精确 spec
[ANIM]       每元素 in/out/easing/delay
[AUDIO]      music beat + SFX cue
[CHROME]     四角元素状态
[ANTI-SLOP]  通过的自检项
[WHY]        承接 + 推进

SHOT 01 · "BLANK PAGE"

[TIMECODE] 00.00 — 01.50s (1.5s) | FUNCTION 开场。引观众进入。给「空」一个时间。

[VISUAL]

整个 1920×1080 是 Ivory paper #FAFAF6。画面里什么都没有。

唯一的存在：一层极淡的 paper texture（SVG 噪点 + 0.3% scale 极慢呼吸），几乎看不见，但赋予画面「这是一张真的纸」的潜意识。

构图：完全空。这是 Kenya Hara 意义上的「白」——不是「还没画」，是「内容本身」。

[TYPE] 无文本。

[ANIM]

0.00s · paper texture opacity 从 0 → 0.04（500ms linear）
0.50-1.50s · 整个画面 hold，无动作。让观众的眼睛适应这个白。
1.40-1.50s · 画面中央偏左（x=860, y=540）开始浮现一个 cursor 的位置（透明，下一镜才显形）

[AUDIO]

BGM: room tone 进入 (300ms fade-in to -38dB)
SFX: 无

[CHROME] 全部隐藏。Chrome A/B/C/D/E 都还没显形。

[ANTI-SLOP]

✅ 没有 logo、没有「Loading...」、没有任何品牌前置
✅ 没有渐变、没有 effects
✅ 这一镜的「pause-and-look」signature：画面有质感（paper texture）但绝不抢戏

[WHY]

苹果 "Designed by Apple in California" 也是这样开场——给空白一个时间。它告诉观众「这部片需要你慢下来」。如果开场就堆 logo 和 chrome，观众的注意力被分散，后面 30 秒都收不回。

这 1.5 秒是这支片最重要的 1.5 秒之一。

SHOT 02 · "THE CURSOR"

[TIMECODE] 01.50 — 03.00s (1.5s) | FUNCTION typewriter 诞生。第一个内容。

[VISUAL]

画面中央偏左（x=860, y=540），一个垂直的黑色 block（3px × 56px, Ink #1A1A1A）开始闪烁。这是 cursor。

闪烁两次（0.7s 一周期 × 2）后，cursor 后面开始逐字出现 # markdown.md，字体 JetBrains Mono 56px，颜色 Ink #1A1A1A，letter-spacing -0.01em。

每打一个字符，键盘 click 音响一次。打完最后一个字符（13 个字符总计），cursor 在 .md 之后继续闪烁 1 次。

[TYPE]

Text: # markdown.md
Font: JetBrains Mono 500 weight
Size: 56px
Color: Ink #1A1A1A
Letter-spacing: -0.01em
Position: horizontal center, y = 540（baseline，文字 vertical center 略低于此）

[ANIM]

01.50s · cursor block opacity 0 → 1 (200ms)
01.50-01.85s · cursor blink 第一次（off 200ms / on 200ms）
01.85-02.20s · cursor blink 第二次
02.20-02.85s · 13 个字符 staggered 出现，每个间隔 50ms（共 650ms 完成），每个字符各自 fade + 1px slide-down (180ms expoOut)
02.85-03.00s · cursor 在末尾再 blink 一次（最后一次，标志输入完成）

[AUDIO]

BGM: piano 第一音敲击 at 01.50s (-22dB)
SFX: keyboard click × 13 (每字一次, -18dB, 30ms each)
SFX: 最后一次 cursor blink 后 200ms 静默（给下一镜 morph 让位）

[CHROME] 仍隐藏。

[ANTI-SLOP]

✅ cursor 不是 sci-fi 闪烁（不是 0.1s 极快闪烁），是 macOS terminal cursor 节奏的真实模拟
✅ typing 不是「字符一次性出现」，是真的有节奏的打字
✅ font 是 JetBrains Mono，不是 Courier 或 Menlo 这种系统默认 mono
✅ pause-and-look signature：cursor 的 3px 宽度（不是 2px 或 4px）—— 一个非常精确的细节，懂行的人会注意到这是「真实 terminal 设计的」

[WHY]

这一镜是 setup 的核心：markdown 不是一个名词，它是一个动作——它是「敲击键盘把字符变成结构」这件事本身。

cursor 是写作的最小单位。从一个 cursor 开始，是「源代码」的诞生。

下一镜的 morph 就建立在这个观众已经接受「我们在写 markdown」的前提上。

SHOT 03 · "THE TRANSFORMATION"

[TIMECODE] 03.00 — 05.00s (2.0s) | FUNCTION 揭示 hero。# markdown.md morph 成 hero md.

[VISUAL]

第 03.00 秒：# markdown.md（56px mono）开始向中央收拢、放大、变形。

morph 过程（详细解构）：

03.00-03.30s（300ms）：# markdown.md 的 # 和 arkdown 部分淡出（opacity 1 → 0），同时 m 和 d.md 的 md 部分留下。
03.30-04.10s（800ms）：留下的 md 从 mono 字体 morph 成 Newsreader serif，从 56px 放大到 480px，从 Ink 变成 Ink（不变色），位置不变（仍在画面中央）。
04.10-04.80s（700ms）：在 md 字符的右下角，一个 Terracotta 句点 . 浮现（fade-in + scale 0.6 → 1 + overshoot easing）。
04.80-05.00s（200ms）：句点正式 settle，hero 完整。下方 30px 出现一条 320px 宽的赤陶橙细线（terracotta accent rule, 2px thick），从中心向两端展开。

结束帧：md.（Newsreader 600 weight, 480px, Ink with Terracotta dot）+ 下方一条赤陶橙细线。画面其他全空。

[TYPE]

Text: md.（md Ink, . Terracotta）
Font: Newsreader 600 weight
Size: 480px (display L)
Letter-spacing: -0.04em
Color: m+d Ink #1A1A1A, . Terracotta #C2410C
在 hero 中线（y = 540）水平垂直居中
accent rule 下方 30px，width 320px（从 0 长成）

[ANIM]

03.00-03.30s · # arkdown md（中段）淡出 (opacity 1 → 0, expoOut)
03.30-04.10s · md morph：fontFamily 切换、fontSize 从 56 → 480、weight 从 500 → 600（800ms expoOut，注意 morph 不是 abrupt 切换，而是 ghost 残影叠加 + scale up + opacity 切换）
04.10-04.80s · . 入场 (700ms overshoot, scale 0.6 → 1)
04.80-05.00s · accent rule width 0 → 320px (300ms expoOut)

[AUDIO]

BGM: piano 第二音 at 03.00s (-20dB), 第三音 at 04.20s (-18dB) — piano 累积
SFX: 03.00-03.20s soft whoosh（morph 开始时, -16dB）
SFX: 04.10s subtle bloom（句点出现的瞬间, -20dB）
SFX: 04.80s short paper rustle（accent rule 展开, -22dB）

[CHROME]

04.50s · Chrome B（version chip top-right）开始浮现 (fade-in 600ms)
- 形态：● HUASHU-MD-HTML · v2.0
- terracotta dot, mono text, Ink color
- 进入位置：top: 78px, right: 80px
仍隐藏：Chrome A, C, E（visible only ≥ 06s）

[ANTI-SLOP]

✅ morph 不是「淡出 + 淡入」的廉价 transition，是真正的字符变形（含 ghost 残影叠加）
✅ 句点是 hero 的「签名细节」（120% 做到的那个）：Terracotta 句点小如指甲，但是这部片的视觉锚点，所有后面的镜头里这个句点都保留为 hero 标识
✅ accent rule 不是装饰，是 hero 的 base line——它在 Shot 11 的 slogan 那里会再次出现，建立首尾呼应
✅ pause-and-look signature：480px Newsreader 'md' 的字距 -0.04em 让 m 和 d 之间几乎贴合但不接触，这是 Newsreader 这个字体在大字号时的招牌质感

[WHY]

这是 hero shot。后面 25 秒整部片的「主角」（md.）在此诞生。

morph 的设计哲学：从 mono 到 serif，是从「我在打字」到「我在写作」的隐喻。mono 是 typewriter，serif 是 publishing。md 同时是两者——它在键盘上敲，但它是 publishing 的源代码。

下一镜进入 ACT II，hero 已经站住了——它会被推到画面上方，让出空间给「物质化的产物」。

SHOT 04 · "GATHERING" (any → md)

[TIMECODE] 05.00 — 08.50s (3.5s) | FUNCTION CAPABILITY 01 揭示。万物 → md。建立「md 是源」的世界观。

[VISUAL]

05.00s：hero md. 从画面中央（y=540）向上滑到 y=280（即 1/4 高度位置），同时缩小到 220px。

随后画面下半部（y=520 ~ y=900 区域）出现 6 张文件 cards，按顺序从画面外（下方 y=1140）飞入，沿一条隐形的抛物线轨迹向 md hero 收拢。

6 张 cards 的设计（每张都是真实文件类型的迷你 demo，不是 fake bar lines）：

.pdf   │ 双栏布局 + 页眉 "doc.pdf" + 页码 "— 12 —" + 几行真实排版的小文字
.docx  │ heading "On Markdown" + 副标 italic + 6 行段落 ascii
.pptx  │ 标题 "MD AS SOURCE" + 一个简化的 bar chart 占位
.xlsx  │ 6×4 的 spreadsheet 网格 + 一些数字
.epub  │ Apple Books 风的页面 + 章节标题 "Chapter 01"
.html  │ 一个浏览器 chrome（三个圆点 + URL bar "example.com"）+ 标题 + 段落

每张 card 尺寸 130×180px，白底 + Mica 边框 + 24°右上角 fold。

飞行轨迹：从下方 y=1140 出发，沿抛物线向 md hero 的「.」位置（约 x=960+50, y=280+90）汇聚。中段（在画面中部时）6 张 cards 排成扇形，每相邻两张间隔 220px。最终所有 6 张被 md 「吸收」（scale 1 → 0.5 + opacity 1 → 0，同时 position 收拢到一个点）。

吸收时机：从 05.60s 开始，每隔 0.18s 一张 launch。每张飞行 1.1s 后被吸收。最后一张 absorb 完成时间约 07.60s。

吸收完成后（07.60-08.20s），下方 60px 处出现 tagline：「万物 → md」（中文衬线，36px，Ink，italic）

08.20-08.50s · 整体 hold，准备进入 Shot 05。

[TYPE]

hero md.：缩小到 220px（同 SHOT 03 字体规格）
6 cards 内部排版：JetBrains Mono 12-14px for labels, Newsreader 12-16px for content
tagline「万物 → md」：Noto Serif SC 36px italic + 中间的 → 是 Newsreader italic + Terracotta
顶部 Chrome A 文字：JetBrains Mono 12px

[ANIM]

05.00-05.30s · hero md 缩放 + 上移（300ms expoOut）
05.30s · Chrome A capability counter 入场（CAPABILITY · 01 显示，第一个 dot 实心）
05.60-07.60s · 6 张 cards 依次发射（每张 launch delay = 5.60 + i × 0.18s, 飞行 1.1s，absorb at launch+1.1）
07.60-08.20s · tagline「万物 → md」入场（fade-in 400ms + slight y slide 12px → 0）
08.20-08.50s · hold

[AUDIO]

BGM: piano arpeggio L2 进入 at 05.00s（-26dB → -20dB 渐入）
SFX: file card whoosh × 6（每张 launch 时一次，每次 200ms，-20dB）
SFX: absorb / ink drop（最后一张 card 被吸收时，-16dB）
SFX: paper rustle（tagline 入场时，-22dB）

[CHROME]

A（top-left capability counter）: ON, 显示 CAPABILITY · 01, 第一个 dot 实心
B（version chip）: ON, 持续显示
C（timeline ticker）: OFF (会在 SHOT 05 入场)
D（watermark）: ON, 永远 ON
E（paper texture）: ON

[ANTI-SLOP]

✅ 6 张 cards 不是 emoji 也不是图标，是有内部内容的迷你 demo——每张都 readable
✅ 飞行轨迹是抛物线（重力感），不是直线（电脑感）
✅ 收拢时是「吸收」（scale + position 同时收）不是「叠加」
✅ 没有给 md 字符任何 glow 或 particle effects（不需要解释「md 在吸收」，观众自己看得懂）
✅ pause-and-look signature：每一张 card 在飞行中段 pause 看，都能读出来「这是个 PDF / 这是个 DOCX」——这就是 120% 做到的细节
✅ tagline 用「→」而不是「to」或「至」，是 markdown 自己的字符

[WHY]

这是 ACT II 的开门镜。如果观众看完这 3.5 秒没意识到「噢，md 是源」，后面的镜头就白做了。

3.5 秒里有 3 个 micro-narrative beats：

hero 让位（md 上移）—— 暗示「我让位给我的产物们」
6 个产物现身 —— 揭示「我能收的东西」
全部归位回 md —— 「但他们最终都是 md」

下一镜进入 md → html 的正向流动——观众已经接受「md 是源」，现在 ready to see「md 怎么变」。

SHOT 05 · "FIRST FLOWER · HTML" (md → html)

[TIMECODE] 08.50 — 11.50s (3.0s) | FUNCTION CAPABILITY 02。第一次正向输出。建立 ScenePipeline 模式（后续 5 镜共用此结构）。

[VISUAL]

08.50s：hero md. 从中心上方位置滑到画面左侧（x=480, y=540），尺寸保持 220px。

同时画面右侧 (x=1400, y=540) 出现一个 destination card：模拟「Tufte CSS 风的 essay html」。

destination card 设计（真实可读的内容，不是 bar lines）：

┌─────────────────────────────────┐
│                                  │
│  On Markdown                     │  ← Newsreader 600, 32px, Ink
│  AN ESSAY · 2026                 │  ← Mono 11px, 0.18em, Smoke
│  ▬▬▬                             │  ← Terracotta rule 60×3px
│                                  │
│  md is the source of truth.      │  ← Newsreader 400, 18px, line-height 1.7
│  Anything else is product.       │
│  We write once. Publish six      │
│  ways. The river forks; the      │
│  spring stays the same.          │
│                                  │
│  ─ huashu, 2026.05.11            │  ← italic 14px, Smoke
│                                  │
│  article.html · TUFTE THEME      │  ← Mono 10px, 0.18em, Smoke (bottom)
└─────────────────────────────────┘
   宽 480px × 高 560px
   白底 + Mica border + 24° 角折

md 字符与 destination card 之间用一条 terracotta 细线连接，从 md 的 dot 出发，向右生长 380px，箭头 head 触达 card 左边界。线上方 30px 处显示 label「md → html」（JetBrains Mono 14px Terracotta，letter-spacing 0.14em）。

09.80s 时：Chrome C（timeline ticker）首次入场，固定在 y=1000 处。

[TYPE]

见 visual description 内嵌
label「md → html」字号 14px， Mono Bold，Terracotta，letter-spacing 0.14em
destination card 顶部 chapter title 是 Newsreader 600, 32px, Ink
destination card 底部小印 mono 10px Smoke 0.18em

[ANIM]

08.50-08.80s · hero md 从 center-top 滑到 left-mid（300ms expoOut）
08.80-09.10s · arrow line 从 md.dot 起点向右生长（300ms expoOut, 0 → 380px）
09.10s · arrow head 浮现（200ms overshoot）
09.20-09.40s · label「md → html」入场（fade-in + 8px y slide-down, 300ms expoOut）
09.40-10.10s · destination card 整体入场（700ms expoOut, scale 0.85 → 1 + opacity 0 → 1）
10.10-10.80s · destination card 内部 staggered 入场：title (400ms delay 0) → 副标 metadata (delay 200ms) → terracotta rule (delay 400ms) → 6 行正文 (each delay 60ms cascade) → 签名 (delay 1000ms) → bottom mono (delay 1100ms)
10.80-11.50s · hold + 微观呼吸 (整体 scale 1 → 1.005 → 1, 600ms ease-in-out infinite, 但本镜只播放半个周期)

[AUDIO]

BGM: cello drone L3 入场 at 09.00s (-30dB → -24dB)
SFX: chime: capability 02 at 09.00s (-18dB)
SFX: paper rustle（card 入场时, -22dB）
SFX: micro ticks（每行文字 staggered 入场时, -26dB each）

[CHROME]

A: 推进到 CAPABILITY · 02, 第二个 dot 实心
B: ON
C: 首次入场 at 09.80s，any→md ━━━━●━━━━━ md→html ─ html→md ─ md→docx ─ md→pdf ─ md→epub，进度点 ● 位于第二格上方
D: ON
E: ON

[ANTI-SLOP]

✅ destination card 的「On Markdown」essay 内容是真的可读的英文哲学小段，不是 Lorem ipsum
✅ 「article.html · TUFTE THEME」这个小印是「pause 时能读出来的细节签名」
✅ 没用任何 glow 或 particle 来「强调」md → html 的转换——靠 typography 和构图自己讲清楚
✅ arrow line 不是 dashed 或 dotted（避免「网页教程」感），是 1.5px 实线 Terracotta
✅ pause-and-look signature：destination card 顶部的「AN ESSAY · 2026」副标用了 Newsreader 的 small caps OpenType feature，0.18em 字距——是这一镜的 120% 细节

[WHY]

这是 ScenePipeline 模式的首次建立。后续 5 个 capability shots 都会按这个结构推进：

md 在左、destination 在右
arrow + label 在中间
destination card 内部 staggered 入场（每个 card 都有 6-8 个文字层级）
card 内容是真实可读的，不是 fake bar lines

观众看到第二次（SHOT 06）就会理解这个模式，看到第六次（SHOT 09）会有「啊，又来一次，但这次是 NEW」的感觉——这正是 ACT II 的节奏设计。

SHOT 06 · "REVERSE FLOW · MD" (html → md)

[TIMECODE] 11.50 — 14.50s (3.0s) | FUNCTION CAPABILITY 03。反向归档：html → md。建立「双向流」概念。

[VISUAL]

cross-dissolve 进入。前一镜的 destination card 在 11.50-11.80s 内缩小退场到右下角，新的 destination card（这次显示 markdown 源代码）从右侧入场。

新的 destination card 设计：深底 markdown source 视图（与 SHOT 05 的浅底 html 形成视觉对比）。

┌─────────────────────────────────┐
│                                  │  ← 背景 Charred #2A2620
│  # On Markdown                   │  ← Terracotta, mono 14px
│                                  │
│  An essay · 2026                 │  ← Smoke, mono 14px
│                                  │
│  > md is the source.             │  ← italic Smoke, mono 14px
│  > Anything else is **product**. │     `**product**` 高亮 mica + bold
│                                  │
│  - 1 source                      │  ← mono 14px Smoke
│  - 6 forms                       │
│  - ∞ outputs                     │
│                                  │
│  essay.md · CLEAN MARKDOWN       │  ← bottom Mono 10px Smoke
└─────────────────────────────────┘
   480×560px, Charred 底, 顶部 24° 角折是 Cinder

arrow direction 反向：从右侧 destination card 向左 md 字符方向（短 Terracotta 线 + 箭头 head 指向左）。label 改为「html → md」。

关键差异点（和 SHOT 05 形成 visual rhyme）：

destination 在右、md 在左（同 SHOT 05）
但 arrow direction 反向（visual: 我们在归档/拉回来）
card 是深底（视觉对比，强调这是 source）

[TYPE]

全卡片内部都是 JetBrains Mono 14px
markdown 语法元素配色：# 标题 Terracotta，> 引用 italic Smoke，**bold** Mica + bold，列表 dash Smoke
bottom mono 10px Smoke

[ANIM]

11.50-11.80s · 上一镜 card 退场（缩 → 右下角, fade out）+ md 字符保持
11.80-12.10s · arrow line 反向生长（这次从右向左, 300ms expoOut）
12.10s · arrow head（指向左）浮现
12.20-12.40s · label「html → md」入场
12.40-13.10s · 新 destination card 入场（同 SHOT 05 入场逻辑）
13.10-13.80s · markdown 内部 6 行 staggered 入场（每行 100ms delay）
- 特殊 micro-detail：每一行入场时模拟 typewriter——line 的 character-by-character cascade reveal（让观众感觉到「这是 markdown 被「写出来」的过程」）
13.80-14.50s · hold

[AUDIO]

BGM: 持续 L1+L2+L3 layers
SFX: chime: capability 03 at 12.00s (-18dB)
SFX: paper rustle (12.40s)
SFX: 每行入场时极弱 keyboard click ticker（-26dB each, 100ms apart）

[CHROME]

A: 推进到 CAPABILITY · 03，第三个 dot 实心
B: ON
C: 进度点 ● 滑到「html→md」位置
D: ON
E: ON

[ANTI-SLOP]

✅ 这是整支片唯一的「深底」镜头——刻意制造视觉对比，让观众知道「这是 source code」，不是「又来一个 destination」
✅ markdown 内部的 syntax highlighting 用的颜色不是 cyber 配色（不是 VS Code Dark+ 那种），是出版社配色（Terracotta + Smoke + Mica）
✅ 「essay.md · CLEAN MARKDOWN」底部小印 → pause-and-look signature
✅ 反向 arrow 不是「U-turn 曲线」，是直线 + 反向箭头——保持结构一致性

[WHY]

这一镜的真正作用不是「秀 capability 03」，是告诉观众这条管道是双向的。

如果整支片 6 个 capability 都是从 md 向外辐射，观众会以为「md 只是出去」。第 3 个 capability 让流动反向，建立「md 是一切的中枢」的世界观。

这是为什么 capability 顺序我选了 02 (md→html) → 03 (html→md) → 04 (md→docx) ——故意把反向 capability 卡在第 3 位，最大化「双向流」的认知 surprise。

SHOT 07 · "PUBLISHER GRADE · DOCX" (md → docx)

[TIMECODE] 14.50 — 17.50s (3.0s) | FUNCTION CAPABILITY 04。出版社品位 docx。建立「md 不只是给程序员的」论点。

[VISUAL]

回到浅底，回到「md 在左、destination 在右」。

destination card 设计：出版社级 docx 章节首页（高密度信息，但完全克制）。

┌─────────────────────────────────┐
│                       ON MARKDOWN│  ← page header, right-aligned, Smoke italic mono 9px
│  CHAPTER · 01                    │  ← Terracotta mono 11px bold 0.22em
│                                  │
│  On Markdown                     │  ← Newsreader 700, 36px, Ink, lh 1.1
│  A short essay on source-of-truth│  ← Newsreader italic 14px, Smoke
│  thinking                        │
│                                  │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━     │  ← Terracotta full-width rule 3px
│                                  │
│  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬       │  ← 10 lines of mica bar paragraphs
│  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬           │     (varied widths 76-95%)
│  ...                             │
│                                  │
│                — 1 —             │  ← page number, centered, mono 10px Smoke
└─────────────────────────────────┘
   480×580px, white card, Mica border, 24° corner fold

特别细节：

顶部右上角的「page header」（书名 italic 灰色 mono）是真实出版社 docx 的细节签名
「CHAPTER · 01」前缀让观众一眼意识到「这是一本书的一页，不是一篇文章」
terracotta full-width rule（不是细线，而是 3px 粗 rule）是出版社章节首页的招牌
底部 page number「— 1 —」前后的破折号是 Newsreader 的 em-dash，不是 hyphen

[TYPE]

page header: Newsreader italic 9px, Smoke, letter-spacing 0.14em
CHAPTER · 01: JetBrains Mono Bold 11px, Terracotta, letter-spacing 0.22em
main title: Newsreader 700, 36px, Ink, line-height 1.05
subtitle: Newsreader italic 14px, Smoke
terracotta rule: 3px thick, full card width
bar paragraphs: Mica color #E6E1D6, height 6px
page number: JetBrains Mono 10px, Smoke, letter-spacing 0.18em

[ANIM]

14.50-14.80s · 前一镜 card 退场 + md 保持
14.80-15.10s · arrow line 正向生长
15.10s · arrow head, label「md → docx」入场
15.30-16.10s · destination card 整体入场
16.10-17.00s · 内部 stagger：page header (delay 0) → CHAPTER 标 (delay 100ms) → title (delay 300ms) → subtitle (delay 500ms) → rule (delay 700ms) → 10 行段落 cascade (delay 850ms + 60ms cascade) → page number (delay 1600ms)
17.00-17.50s · hold

[AUDIO]

BGM: 持续；at 15.00s BGM 整体 swell +2dB（暗示我们在向高潮推进）
SFX: chime: capability 04 at 15.00s (-18dB)
SFX: paper rustle (15.30s)

[CHROME]

A: CAPABILITY · 04, 第四个 dot 实心
B/C/D/E: ON

[ANTI-SLOP]

✅ 不写「这是一本书的内页 mockup」的解释字（让排版自己说话）
✅ bar paragraphs 用 Mica（#E6E1D6）这种极淡灰色，不是黑色——给「这是排版样式预览，不是真内容」的诚实信号
✅ pause-and-look signature：顶部 right-aligned page header italic mono——99% 的观众不会看，1% 的设计师看到会知道「这家做了功课」
✅ 这一镜是 6 个 capability 里色彩最饱和的（Terracotta 占了 page rule + chapter label + 顶部右 chrome counter）——刚好在故事弧的中段，符合「向高潮 build-up」的曲线

[WHY]

CAPABILITY 04 是承上启下的关键一镜：

它确认了「md 不只是 web 用」——它能做出版社级别的 docx
它建立了「印刷品」的视觉语境，为 SHOT 08（pdf）和 SHOT 09（epub）做准备

观众看完这一镜，对「md → 印刷品」这条链条 ready。接下来两镜的 NEW 标签就有了承接。

SHOT 08 · "★ NEW · PRINT" (md → pdf)

[TIMECODE] 17.50 — 20.50s (3.0s) | FUNCTION CAPABILITY 05。NEW。md → 出版级 PDF。第一次「升级」标志亮起。

[VISUAL]

cross-dissolve 进入。这一镜的视觉强度显著高于 SHOT 05-07——因为这是「新东西」，需要被记住。

视觉差异点：

NEW 标签：top-left 在 capability counter 旁边亮起一个 Terracotta 矩形框，内含「★ NEW」字符（JetBrains Mono Bold 13px, Terracotta, letter-spacing 0.22em，4px Terracotta border, 6px×12px padding）
destination 不是单一卡片，是两张 PDF fan 出来：A4 在后面（轻微 +5° 旋转），大32开（176×240mm，国内纸质书规格）在前面（轻微 -3° 旋转），形成「两个 page-size 都支持」的视觉
每张 PDF 上有「印刷裁切标记」（crop marks）——四角各一个 L 型小线，2px 粗，Smoke 色——这是真正印厂 PDF 的细节
arrow + label 配色全部用 Terracotta（不是 Ink），整体配色更暖

两张 PDF 内容：

PDF A（A4, 后面）：

┌──────────────────────────┐
│ ┌                      ┐ │  ← crop marks
│  A4 · 210×297mm           │  ← Mono Bold 10px Terracotta
│  ─── (Terracotta rule)    │
│  On Markdown              │  ← Newsreader 22px
│  ──────────────────       │
│  ▬▬▬▬▬▬▬▬▬▬▬             │  ← 7 lines mica bars
│  ▬▬▬▬▬▬▬▬▬▬▬▬            │
│  ...                      │
│                           │
│ └                      ┘ │  ← crop marks
└──────────────────────────┘
   360×460px, white card, +5° rotation

PDF B（大32开，前面）：

┌────────────────────┐
│ ┌                ┐ │  ← crop marks
│  大32开 · 176×240mm│  ← Mono Bold 10px Terracotta
│  ───                │
│  On Markdown        │  ← Newsreader 19px
│  ──────────         │
│  ▬▬▬▬▬▬▬▬▬▬        │  ← 6 lines mica bars
│  ...                │
│ └                ┘ │
└────────────────────┘
   290×410px, white card, -3° rotation

[TYPE]

NEW 标签：Mono Bold 13px Terracotta, 0.22em letter-spacing, 1.5px Terracotta border
arrow label「md → pdf」：Mono Bold 14px Terracotta, 0.14em
PDF spec labels (A4 · 210×297mm 等)：Mono Bold 10px Terracotta, 0.2em
chapter titles inside PDFs：Newsreader 600 weight, 19-22px, Ink

[ANIM]

17.50-17.80s · 前一镜 card 退场 + md 保持
17.70s · NEW 标签亮起（特殊处理：scale 0.8 → 1.1 → 1.0 over 400ms with overshoot easing；同时一道极弱 terracotta glow 短暂 pulse 然后消失）
17.80-18.10s · arrow + label 入场（这次用 Terracotta accent，强调「这是 NEW」）
18.20-18.60s · PDF B（前面那张）入场（400ms expoOut, scale 0.85 → 1 + 顺时针 -8° → -3°）
18.50-18.90s · PDF A（后面那张）紧随入场（400ms expoOut, scale 0.85 → 1 + 顺时针 0° → +5°，stagger delay 300ms）
18.90-19.70s · 两张 PDF 内部 cascade staggered 入场
19.70s · 4 个 crop marks（PDF B 的）依次出现（80ms cascade，给「印厂工艺」的细节签名）
19.70-20.50s · hold

[AUDIO]

BGM: percussion pulse L4 加入 at 18.00s (-32dB)（极弱 sub-kick 4/4 节奏建立）
SFX: chime: NEW (05) at 17.70s（double chime + soft glow + reverb tail, -14dB） ← 这是整支片最重要的 SFX cue 之一
SFX: paper rustle × 2（每张 PDF 入场时，-22dB each）
SFX: subtle "ink stamp" at 19.70s（crop marks 出现时, -22dB）

[CHROME]

A: CAPABILITY · 05, 第五个 dot 实心
A 旁边新增 NEW 标签
B: ON, 此时 version chip 旁的橙点同步 pulse（强调「v2.0 新增」）
C: 进度点 ● 滑到「md→pdf」位置, 这个位置的文字字号加大 0.5px 强调
D: ON
E: ON

[ANTI-SLOP]

✅ NEW 标签不是 emoji 不是 sticker——是 typographic mark（mono + 0.22em + ★ + border）
✅ 两张 PDF 不是「叠在一起」的廉价 stacking，是 fan + 旋转（暗示「打开看」的物理动作）
✅ crop marks 是真正印厂术语的视觉表达，pause 时能看到「啊这是 print-ready」
✅ 没用 glow 或 particle 来强调「NEW」——靠 typography 和 SFX 自己说话
✅ pause-and-look signature：PDF B 顶部的「大32开 · 176×240mm」中英混排，是花叔生态对国内纸质书规格的尊重

[WHY]

这是 ACT II 高潮镜之一。两件事必须同时发生：

观众必须 immediate 意识到「这是新功能」
必须用视觉细节说明「这不是凑数的 wkhtmltopdf 包装，是真正出版级」

NEW 标签 + crop marks + 两张 PDF fan + 完整的 A4 / 大32开规格说明——四件事一起做到上面两件。

下一镜的 epub 是双 NEW 镜头里的第二个，节奏感、情绪强度要比这一镜再上一档。

SHOT 09 · "★ NEW · EBOOK" (md → epub)

[TIMECODE] 20.50 — 22.50s (2.0s) | FUNCTION CAPABILITY 06。NEW。md → 标准 EPUB3。第二个新功能。最后一个 capability。

[VISUAL]

cross-dissolve 进入。这一镜的镜头时长比前面短（只 2.0s 而不是 3.0s）——因为我们已经建立了「NEW + destination」的模式，第二次出现观众秒懂，节奏可以加速。

destination card 设计：Apple Books 风的 EPUB reader frame（强调「这本书已经在阅读器里了」的现实感）。

   ╔════════════════════════════════════╗
   ║ ● ● ●                              ║  ← window chrome (Apple Books)
   ╠════════════════════════════════════╣
   ║                                    ║
   ║  HUASHU · ORANGE BOOK              ║  ← Mono Bold 10px Terracotta 0.22em
   ║                                    ║
   ║                                    ║
   ║  On                                ║  ← Newsreader 700, 30px, Ivory paper
   ║  Markdown                          ║     (on Charred bg)
   ║                                    ║
   ║  ───                               ║  ← Terracotta rule 40×2px
   ║                                    ║
   ║  an essay · 花叔                   ║  ← italic 14px Smoke on Charred
   ║                                    ║
   ╠════════════════════════════════════╣
   ║ Apple Books · 1 of 24    EPUB 3   ║  ← Mono 10px Smoke 0.14em
   ╚════════════════════════════════════╝
   460×470px, ivory paper outer + Charred inner book cover area
   2px Ink border, 22px border-radius (modern app frame)

关键视觉差异：

整体 frame 是「macOS app 窗口」感（三个圆点 + 圆角 22px）
中间是「打开的电子书」cover area（Charred 底 + 出版社品位的 typography）
底部是「Apple Books · 1 of 24」reader chrome
整张 card 给人「我在 Apple Books 里读这本书」的现实感

[TYPE]

HUASHU · ORANGE BOOK：Mono Bold 10px, Terracotta, 0.22em
book title (On Markdown)：Newsreader 700, 30px, Ivory (on Charred bg), line-height 1.0
terracotta rule：40×2px
author italic：Noto Serif SC italic 14px, Smoke
Apple Books chrome：Mono 10px, Smoke, 0.14em

[ANIM]

20.50-20.80s · 前一镜 PDF 退场 + md 保持
20.70s · NEW 标签保持亮起（这次不重新弹出，因为已经在 SHOT 08 建立了——直接显示「★ NEW」即可）
20.80-21.10s · arrow + label「md → epub」入场（Terracotta accent，同 SHOT 08）
21.20-21.80s · EPUB destination card 整体入场（600ms expoOut, scale 0.88 → 1）
21.30-22.00s · 内部 staggered：window chrome dots (delay 0) → 顶部 brand label (delay 200ms) → book title 「On」(delay 400ms) → 「Markdown」(delay 480ms) → rule (delay 700ms) → author italic (delay 850ms) → bottom chrome (delay 1000ms)
22.00-22.50s · hold + 准备 transition 到 ACT III

[AUDIO]

BGM: percussion 持续，但 at 22.00s 整体 BGM swell +3dB（为 SHOT 10 的 convergence build-up）
SFX: chime: NEW (06) at 20.70s（double chime + soft glow，比 SHOT 08 高半个音, -14dB）——半音差让两个 NEW 镜头形成 musical relationship
SFX: window chrome subtle "click" at 21.20s（macOS 窗口出现感, -24dB）
SFX: page turn rustle at 21.40s

[CHROME]

A: CAPABILITY · 06, 第六个 dot 实心（全部实心 — 6/6）
A 旁边 NEW 标签持续
B: 版本 chip 的橙点 pulse 加强（amplitude × 1.5）
C: 进度点 ● 抵达最右端「md→epub」位置
D: ON
E: ON

[ANTI-SLOP]

✅ 不画 Kindle 或 Apple Books 的真 logo（避免 IP 风险）；用 macOS 窗口 chrome 暗示「阅读器」即可
✅ 没用 e-ink 灰色滤镜（避免 Kindle slop）
✅ 「Apple Books · 1 of 24」chrome 是真实出版数据感（24 章节，第 1 章）
✅ pause-and-look signature：书名「On / Markdown」断行——Newsreader 在 30px 大字号下的换行设计，致敬 Penguin Classics 封面排版

[WHY]

这一镜是 ACT II 的收尾。两件事必须完成：

6 个 capability 全部展示完毕（counter 6/6 实心）
情绪开始向 ACT III 的高潮 build-up

镜头长度从 3.0 → 2.0s 是刻意的——节奏在加速，观众感知到「我们要到顶峰了」。

SHOT 10 · "THE CONVERGENCE"

[TIMECODE] 22.50 — 24.00s (1.5s) | FUNCTION ACT II → ACT III 的过渡。所有元素归位。准备 slogan。

[VISUAL]

22.50s：所有之前的 destination card 已退场。Chrome A/C 开始 fade out（capability counter 已 6/6 完成，使命达成）。

画面中央，md 字符从左侧位置（x=480）滑回正中（x=960），同时尺寸从 220px → 300px。

md 周围的 6 个 capability label（any→md / md→html / html→md / md→docx / md→pdf / md→epub）从远处（圆周 r=380px）逐个浮现，环绕 md 字符成圆形，每 60° 一个，按顺时针顺序排列（顶部从「any→md」开始）。这些 label 是 Mono Bold 14px Smoke（非 active）+ Terracotta（actually new）的 mix。

整体效果：md 字符是太阳，6 个 capability 是行星。

但这一镜不需要让观众停留太久——这是过渡镜。

23.50-24.00s：6 个 capability label 缓慢 fade out（200ms 每个，inverse cascade），md 字符继续保持在中央，缩小到 180px，准备让位给 slogan。

[TYPE]

6 个 capability label：JetBrains Mono Bold 14px, letter-spacing 0.16em
- 前 4 个（any→md / md→html / html→md / md→docx）：Smoke
- 后 2 个（md→pdf / md→epub）：Terracotta

[ANIM]

22.50-22.80s · 上一镜 EPUB card 退场，Chrome A/C fade out（300ms linear）
22.50-23.00s · md 字符滑回中央 + 放大（500ms expoOut）
22.80-23.40s · 6 个 capability label 从 md 周围浮现（每个 60° 位置，r=380px，stagger 80ms each, fade-in 300ms + 微 outward slide 20px）
23.40-23.80s · hold（6 个 label 在 md 周围 settle）
23.80-24.00s · 6 个 label 同时 fade out（200ms linear），md 字符缩小到 180px（200ms expoOut）

[AUDIO]

BGM: at 23.00s, all-layer swell 开始（L1+L2+L3+L4 → +4dB）
BGM: at 23.50s, percussion 短暂停顿 1 拍（给 sudden silence 的张力）
SFX: 6 个 capability label 入场时极弱「click」（-30dB each, staggered）
SFX: 23.50s 开始 ascending sweep（build-up 到 24.00s）

[CHROME]

A: fade out at 22.50s（counter 已 6/6，使命完成）
B: ON, 但开始为 ACT III 准备过渡（保持位置不变，但内部 spacing 略微 tighten）
C: fade out at 22.50s
D: ON
E: ON

[ANTI-SLOP]

✅ 6 个 capability label 不是「围着 md 转一圈」（避免「行星 spinner」的 cyber slop）；是「在固定位置 settle，然后一起 fade」（更克制）
✅ Chrome A/C 在使命完成后体面退场（不是「永远在画面上」），这是「为下一幕让位」的好习惯
✅ pause-and-look signature：23.40s 时 6 个 label 同时在画面上，按顺时针顺序读，是这部片唯一的「全 capability 全景」一帧——观众如果暂停在此处，能完整看到 6 条管道——这是 marketing 截图的最佳 frame

[WHY]

这是一座桥。

ACT II 结束在 22.50s（NEW (06) 刚做完），但 slogan 还需要在 24.00s 才入场——中间这 1.5s 不能是「空白等待」，必须有 narrative motion。

「convergence」的概念：6 条管道做完后，所有 capability 收拢回 md 这个源头。这正是这支片整个故事的 essence——所有的流，最终都回到源。

下一镜，让位给 slogan。md 字符缩小到 180px，准备成为 slogan 的「品牌印章」。

SHOT 11 · "ONE SOURCE."

[TIMECODE] 24.00 — 26.50s (2.5s) | FUNCTION ACT III peak first half。slogan 上行入场。情绪 climax。

[VISUAL]

md 字符已缩小到 180px，停留在画面中央（y=540）。

24.00s：md 字符继续向画面 top-left 滑动到 (x=128, y=88)，缩小到 56px——成为「品牌印章」固定在左上角。这是品牌的归位。

24.20s：画面中央偏上（y=460）开始浮现 hero slogan top line：

ONE SOURCE.

字体：Newsreader 700, 168px, letter-spacing -0.03em, line-height 0.95, Ink #1A1A1A 位置：水平居中（x=960），y=460（character baseline）

入场方式：staggered letter reveal——10 个字符（O-N-E-space-S-O-U-R-C-E-.）按 30ms stagger 依次入场，每个字符 fade + 12px y slide-down + scale 0.92 → 1.0（260ms expoOut each）。

26.00s：在 slogan 下方 30px 出现一条短 Terracotta rule（320×3px），从中央向两端展开（300ms expoOut）。

26.50s：进入下一镜。

[TYPE]

ONE SOURCE.：Newsreader 700, 168px, Ink, letter-spacing -0.03em, line-height 0.95
terracotta rule: 320×3px, centered, accent

[ANIM]

24.00-24.30s · md 字符滑到 top-left（300ms expoOut，size 180 → 56）
24.20s · ONE SOURCE. 第一个字符 'O' 入场（260ms expoOut）
24.23s · 'N' 入场
24.26s · 'E' 入场
24.29s · space（无视觉，但 layout 占位）
24.32s · 'S'
24.35s · 'O'
24.38s · 'U'
24.41s · 'R'
24.44s · 'C'
24.47s · 'E'
24.50s · '.'（句点）
24.20-25.00s · 整个 ONE SOURCE. 完成（10 字符 × 30ms stagger + 260ms each = total ~560ms）
25.00-26.00s · hold（让观众读「ONE SOURCE.」）
26.00-26.30s · Terracotta rule 出现（300ms expoOut from 0 → 320px）
26.30-26.50s · hold

[AUDIO]

BGM: 22.00s 开始的 swell 在 24.50s 达到 peak（最响 -6dB）
BGM: 整组弦乐进入（L5），cello + violin + viola 三层叠加
SFX: impact (slogan ONE) at 24.20s — deep bass impact + short reverb tail (-8dB) ← 这是这支片最强的 SFX cue
SFX: 极轻的 pen-on-paper stroke at 26.00s（rule 出现时, -22dB）

[CHROME]

A: OFF (已退场)
B: ON, 但重要变化：version chip 此时 cross-dissolve 成新形态——在右上角的同位置，但 chip 的尺寸略大，字号 18px（之前 16px），更突出。同时 Terracotta dot 的 pulse amplitude × 2（强调「v2.0 升级时刻」）
C: OFF (已退场)
D: ON
E: ON

新增 chrome：

md 字符（top-left, 56px, Newsreader 600 + Terracotta dot）正式入驻 corner，成为品牌印章

[ANTI-SLOP]

✅ slogan 不是「整词 fade-in」（廉价），是 letter-by-letter stagger（电影级）
✅ 单字符的 stagger 时间 30ms 是经过计算的——足够看到 cascade，但不会拖慢节奏（如果 60ms 就会显慢）
✅ 字号 168px 是经过 layout 验证的——再大会撞 SIX FORMS.（SHOT 12），再小则气势不够
✅ pause-and-look signature：「ONE SOURCE.」末尾的「.」是 Terracotta（不是 Ink），呼应 hero md 字符的 Terracotta dot——首尾品牌签名一致

[WHY]

这是 emotional climax 的第一半。

「ONE SOURCE.」是这部片的 thesis。如果观众看完整支片只记住一句话，就是这一句。

让 md 字符在此刻退到 top-left 是策略性的——slogan 是主角，md 是品牌印章。两者不抢戏。

下一镜，SIX FORMS. 落下，thesis 完整。

SHOT 12 · "SIX FORMS."

[TIMECODE] 26.50 — 29.00s (2.5s) | FUNCTION ACT III peak second half。slogan 下行 + capability map 完整呈现。整支片的 emotional resolution。

[VISUAL]

26.50s：ONE SOURCE. 仍在画面上方位置（y=460）。

画面下半部分（y=720）开始入场 hero slogan bottom line：

SIX FORMS.

字体：Newsreader 700, 168px, letter-spacing -0.03em, line-height 0.95, Terracotta #C2410C 位置：水平居中（x=960），y=720（character baseline）

入场方式：与 SHOT 11 镜像——staggered letter reveal，9 个字符 + 1 个 .（共 10），每个 30ms stagger（更慢的 stagger 因为这是 climax）。

入场细节：每个字符是 fade + 12px y slide-up（而不是 SHOT 11 的 slide-down，方向对称）+ scale 0.92 → 1.0（260ms expoOut each）。

27.20s：SIX FORMS. 完成，整个 slogan 双行 typography 完整。

27.20-27.80s：在 SIX FORMS. 下方 30px 处，出现 6 个 capability pills，依次入场：

[any→md] [md→html] [html→md] [md→docx] [md→pdf ★NEW] [md→epub ★NEW]

每个 pill：

字体：JetBrains Mono Bold 14px, letter-spacing 0.16em
大小：10px×18px padding, 1.5px border
前 4 个：Ink text + Ink border + transparent background
后 2 个（NEW）：Terracotta text + Terracotta border + Mist (#FFF7F0) background + 右上角 -8/-10px 处 Terra Hot 「NEW」mini badge

每个 pill 间距 14px。整组水平居中（x=960），y=820。

入场：从左到右 staggered，每个 80ms delay，fade-in + 4px y slide-up (300ms expoOut)。

27.80-28.30s：副标行入场（y=890）：

md 是源代码，万物是产物。

字体：Noto Serif SC italic 26px, Ink, letter-spacing 0.04em 水平居中。

入场：fade-in + 8px y slide-up (400ms expoOut)。

28.30-29.00s：整体 hold。这是这部片最静态的一帧——所有元素到位，让观众"读完它"。

[TYPE]

SIX FORMS.：Newsreader 700, 168px, Terracotta, letter-spacing -0.03em, line-height 0.95
pills：JetBrains Mono Bold 14px, letter-spacing 0.16em, 1.5px border
副标：Noto Serif SC italic 26px, Ink, letter-spacing 0.04em

[ANIM]

26.50-27.20s · SIX FORMS. 字符 stagger（同 SHOT 11 镜像）
27.20-27.30s · short hold
27.30-27.80s · 6 pills cascade（每 80ms stagger × 6 = 480ms total + 300ms each pill duration）
27.80-28.30s · 副标入场（400ms）
28.30-29.00s · 整体 hold

[AUDIO]

BGM: 26.50s peak swell 持续，至 27.20s 达到全片最响（-4dB）
BGM: 27.20s 后 BGM 开始 sustain（不再增强，但保持 peak intensity）
SFX: impact (slogan SIX) at 26.50s — deep bass impact，比 ONE 镜的 impact 稍重半音 (-7dB)
SFX: 6 个 pills 入场时 staggered metallic clicks（每个 -24dB, 50ms）
SFX: 27.80s 极轻 pen flourish（副标入场）

[CHROME]

B: ON, version chip 持续
D: ON, watermark 持续
E: ON
md 印章 (top-left): ON

[ANTI-SLOP]

✅ ONE SOURCE. 是 Ink, SIX FORMS. 是 Terracotta——分别代表「源」和「物」的色彩对比，不是装饰用色
✅ 6 pills 中 NEW 那两个 background 是 #FFF7F0（极淡 mist tint），不是「橙色填充」——克制
✅ NEW mini badge 在 pill 的右上角 -8/-10px 突出位置，但只有 9px 字号——细节签名的标准位置
✅ 副标用「，」中文逗号 + 句号「。」——是中文排版的尊重
✅ 这一帧（28.30s）是这支片的「marketing 用最完整一帧」——可以截图作为 thumbnail / X 海报 / 公众号封面图，所有信息都在一帧里：slogan + 6 capability + 副标 + 品牌印章 + version

[WHY]

这是 resolution 镜。

如果 SHOT 11 是 thesis（ONE SOURCE.），SHOT 12 就是 antithesis + synthesis（SIX FORMS. 加上完整 capability map）。

观众在这一帧 27.50s 时，应该一边听着弦乐 peak，一边视觉上 fully absorbed by typography——这是这部片最值得的 5 秒。

下一镜是收尾，让弦乐 decay，让 md 印章独自闪耀。

SHOT 13 · "SIGN-OFF"

[TIMECODE] 29.00 — 30.00s (1.0s) | FUNCTION 结尾。让所有 slogan 元素退场，留下 md 印章独自闪耀。品牌印记。

[VISUAL]

29.00s：SIX FORMS. + 6 pills + 副标开始 hold-in-place。

29.20-29.60s：ONE SOURCE. + SIX FORMS. + 6 pills + 副标缓慢 fade out（每个 400ms linear，不要 stagger，是同步淡出——形成「画面在沉淀」的感觉）。

29.40s：top-left 的 md 印章字符从 56px 缓慢放大到 88px，同时位置从 (128, 88) 滑向画面中央 (960, 540)——这是 md 的「最后回归」。

29.40-29.80s：md 字符在画面中央 settle，size 88px, color Ink + Terracotta dot。

29.80-30.00s：md 字符下方 30px 出现一条短 Terracotta rule（120×2px，比 SHOT 03 短，更精致），从 0 长成。

30.00s：所有元素到位。最后一帧是：

                                                                  ● HUASHU-MD-HTML · v2.0
                                                                                              (top-right chrome)


                                            md.                   ← Newsreader 600, 88px, Ink + Terracotta dot
                                          ───                     ← Terracotta rule, 120×2px

                                                                                CREATED BY HUASHU-DESIGN
                                                                                              (bottom-right watermark)

整个画面只有 4 个元素：md 印章、accent rule、top-right chrome、bottom-right watermark。所有其他全空。

[TYPE]

md.：Newsreader 600, 88px, Ink + Terracotta dot
accent rule: 120×2px Terracotta

[ANIM]

29.00-29.20s · 上一镜 hold（让观众完整吸收）
29.20-29.60s · ONE SOURCE. + SIX FORMS. + 6 pills + 副标同步 fade out（400ms linear, 同步）
29.40-29.80s · md 印章放大 + 滑到中央（400ms expoOut, size 56 → 88, position (128,88) → (960,540)）
29.80-30.00s · accent rule 展开（200ms expoOut, 0 → 120px）
30.00s · final hold（如果有 loop，loop 回 00.00s）

[AUDIO]

BGM: 29.00s 开始 decay 进入 L6（全部 layers 渐弱）
BGM: 29.40s 弦乐 fade，留下 piano + reverb tail
BGM: 30.00s, 一切归于 silence + room tone
SFX: final stamp / sign-off at 29.40s（ink stamp + soft reverb, -14dB）——md 落到中央时
SFX: 极轻 paper rustle at 29.80s（accent rule 入场）

[CHROME]

B: ON, 持续
D: ON, 持续
E: ON, 持续
其他全部 OFF

[ANTI-SLOP]

✅ 不用「Thank you」「Made with love」之类 sign-off 文字（廉价）
✅ 不用 logo 大放大（不需要）
✅ md 印章是这支片整个故事的真正主角，最后让它独自留在画面中央，是 resolution 的最简形式
✅ pause-and-look signature：最后一帧的 md. 在 88px Newsreader 字体下，Terracotta dot 是整个画面的视觉焦点——观众的眼睛会自然停留在这个 dot 上，然后看到下方的 accent rule，再到 top-right 的 version chip。这条「视线动线」是 visual hierarchy 设计的成功
✅ silence 在最后 0.2s 给画面留 breathing room

[WHY]

整部片始于一个空白页面，终于一个 md 印章 + 一抹赤陶橙。

这是首尾呼应（visual rhyme）：

0.0s：blank ivory page（空）
30.0s：ivory page + md（满）

观众从「空」走到「满」，但「满」其实只是一个 md. 字符——这就是「source-of-truth」的视觉宣言：一切源于一个简单的 md。

如果整部片让观众记住一帧，我希望是这一帧。

Part V · Production Manifest

5.1 字体清单 + 加载方式

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700;900&display=swap" rel="stylesheet">

实测加载时长：约 800-1500ms 取决于 CDN 状态。document.fonts.ready 等待必须等到 returns true 才启动 Stage 计时器（Stage 已实现）。

5.2 色板 CSS 变量

:root {
  --paper:       #FAFAF6;
  --mist:        #F2EDE4;
  --mica:        #E6E1D6;
  --smoke:       #6B6B6B;
  --cinder:      #3D3530;
  --ink:         #1A1A1A;
  --charred:     #2A2620;
  --terracotta:  #C2410C;
  --terra-hot:   #E55D21;
  --terra-deep:  #8B2D08;
}

5.3 BGM 来源选择标准

首选：自己用 Suno v6.0 / Udio v1.5 生成 30 秒 cinematic minimal piece，prompt 关键词：

minimal cinematic piano, slow tempo 60bpm, single piano notes,
sparse arpeggio, low cello drone, subtle sub-kick percussion,
swelling strings at climax, decay to silence,
in the style of Max Richter on the nature of daylight,
no vocals, 30 seconds duration, ivory paper mood

备选：搜索免版权库

artlist.io: "minimal cinematic"
bensound.com: "cinematic"
musicbed.com: "Jóhann Jóhannsson style"

最低标准：BGM 30 秒长度，44.1kHz 采样率，aim for -16 LUFS integrated loudness。

5.4 SFX 来源

首选：用 huashu-design skill 的 assets/sfx/<category>/*.mp3 37 个预制资源：

事件                          推荐 SFX 文件
─────────────────────────────────────────────────────
keyboard clicks            sfx/ui/keyboard-click-*.mp3
cursor blink               sfx/ui/tick-soft.mp3
md morph swell             sfx/cinematic/whoosh-bloom.mp3
file card whoosh           sfx/cinematic/whoosh-short-*.mp3
absorb / ink drop          sfx/foley/ink-drop.mp3
paper rustle               sfx/foley/paper-turn.mp3
chime capability           sfx/melodic/chime-single-*.mp3
chime NEW (double)         sfx/melodic/chime-double-warm.mp3
build sweep                sfx/cinematic/ascending-sweep.mp3
impact (slogan)            sfx/cinematic/deep-impact-*.mp3
pen flourish               sfx/foley/pen-stroke.mp3
final stamp                sfx/foley/ink-stamp.mp3

5.5 截图验证计划

实施 HTML 后必须验证以下关键帧（用 Playwright + ?t=NN URL 参数）：

t=0.5    ← SHOT 01 mid: blank ivory page (检验 paper texture 不抢戏)
t=2.5    ← SHOT 02 mid: typing in progress (检验 cursor blink + JetBrains Mono)
t=3.8    ← SHOT 03 mid: md morphing (检验 ghost residual + scale curve)
t=5.0    ← SHOT 03 end: hero md settled (检验 480px + Terracotta dot)
t=7.0    ← SHOT 04 mid: cards in flight (检验抛物线 + card 内容真实可读)
t=8.4    ← SHOT 04 tagline (检验「万物 → md」中文 italic)
t=10.5   ← SHOT 05 mid: html card complete (检验 essay 内容可读)
t=13.5   ← SHOT 06 mid: md source visible (检验 syntax highlighting)
t=16.5   ← SHOT 07 mid: docx page complete (检验 chapter title + page number)
t=19.0   ← SHOT 08 mid: PDFs fanned out (检验 crop marks 可见)
t=21.5   ← SHOT 09 mid: EPUB frame complete (检验 Apple Books chrome)
t=23.4   ← SHOT 10 mid: 6 capability orbit (检验完整 capability 全景)
t=25.0   ← SHOT 11 mid: ONE SOURCE. complete (检验字距 + Terracotta period)
t=27.5   ← SHOT 12 mid: SIX FORMS. + pills (检验完整 slogan 双行)
t=28.5   ← SHOT 12 marketing frame (检验整体 marketing-ready 一帧)
t=29.9   ← SHOT 13 final hold (检验 md 印章 + accent rule)

每帧必须满足：

没有元素溢出 1920×1080 canvas
字距、行高 visually correct
反 AI slop checklist 通过
关键 typography 细节（如 Terracotta dot, page number em-dash, chapter title small caps）可识别

5.6 录制参数

node scripts/render-video.js \
  --file file:///path/to/v5-six-forms.html \
  --duration 30 \
  --fps 25 \
  --width 1920 \
  --height 1080 \
  --out v5-final-silent.mp4

关键 codec 参数：

video codec: libx264
pixel format: yuv420p (兼容性)
bitrate: 12 Mbps (high quality, 30s 文件约 45MB)
profile: high
preset: slow (quality > speed)

后续插帧（可选，60fps 流畅版）：

bash scripts/convert-formats.sh v5-final-silent.mp4 --fps 60

5.7 音频混合

# Step 1: 加 BGM
bash scripts/add-music.sh v5-final-silent.mp4 \
  --bgm assets/bgm/cinematic-minimal-30s.mp3 \
  --bgm-volume -18dB \
  --out v5-with-bgm.mp4

# Step 2: 加 SFX cues (按 Part II.6 SFX 字典逐 cue 加)
# 用 ffmpeg 的 -filter_complex amix 多路混合
ffmpeg -i v5-with-bgm.mp4 \
  -i assets/sfx/ui/keyboard-click-1.mp3 \
  -i assets/sfx/ui/keyboard-click-2.mp3 \
  ... \
  -filter_complex "[1]adelay=500|500[s1];[2]adelay=550|550[s2];...;[0][s1][s2]...amix=inputs=N:duration=longest:dropout_transition=0[out]" \
  -map 0:v -map "[out]" \
  -c:v copy -c:a aac -b:a 192k \
  v5-final.mp4

# Step 3: 验证 audio stream
ffprobe -i v5-final.mp4 -show_streams -select_streams a 2>&1 | grep -E "(codec_type|sample_rate|channels|duration)"

期望输出：

audio codec: aac
sample rate: 44100Hz or 48000Hz
channels: 2 (stereo)
duration: 30.0s

5.8 交付物清单

v5-final.mp4              主交付（30s, 1920×1080, 25fps, with audio, ~50MB）
v5-final-60fps.mp4        高帧率版（60fps 插帧, ~80MB, 用于 X / YouTube）
v5-final.gif              社交媒体版（30s, palette 优化, < 8MB, 用于公众号嵌入）
v5-final-silent.mp4       静音版（备份，方便后续重新配音/换 BGM）
v5-poster.png             海报版（截 t=28.5s 这一帧, 用于 X 卡片 / 公众号封面）
v5-director-notes.md      本文档（导演笔记）
v5-six-forms.html         源文件（HTML 动画）
v5-shot-list.csv          shot 时间码 + 关键参数对照表（pause 验证用）

5.9 全链路时间估算

步骤	预计耗时
Director's notes 撰写	已完成
HTML 动画实施	4-6 小时
关键帧截图 + 视觉校验	1 小时
录制无声 MP4	5-10 分钟（含 Playwright 启动）
BGM 生成 / 选择	30 分钟
SFX 配 cue + 混音	2-3 小时
GIF 派生	5 分钟
海报截图 + 命名	10 分钟
最终交付 + git 提交	10 分钟
合计	8-11 小时

附录 · 这部片的 first principle

如果我作为导演只能保留这部片的一句话，那就是：

一支关于「源头」的 typographic film，主角是一个 md. 字符。

所有其他设计决策——色板、字体、节奏、SFX、chrome、anti-slop checklist——都从这一句话推导而来。

如果某个具体决策无法 trace 回这一句话，就不要做。

Director's notes — end of document Total word count: 约 11500 中文字 Next: 用户 review 通过后，进入 HTML 实施阶段

78 KiB Raw Blame History Unescape Escape

v5 · "Markdown is the new typewriter."

目录

Part I · Director's Statement

1.1 这不是一支「功能介绍片」

1.2 视觉语言的语境对话

1.3 观众画像

1.4 节奏哲学

1.5 这支片不做的事（反 AI slop 自检）

1.6 一句话定位

Part II · Visual System

2.1 完整色板

2.2 字体系统

2.3 网格系统

2.4 动画系统

2.5 Chrome 元素（贯穿全片）

2.6 音频系统

BGM 走向（30 秒分段曲线）

SFX 字典

2.7 反 AI slop 自检表（per-shot）

Part III · Story Arc

3.1 三幕结构

3.2 情绪曲线

Part IV · Shot-by-Shot Storyboard

SHOT 01 · "BLANK PAGE"

SHOT 02 · "THE CURSOR"

SHOT 03 · "THE TRANSFORMATION"

SHOT 04 · "GATHERING" (any → md)

SHOT 05 · "FIRST FLOWER · HTML" (md → html)

SHOT 06 · "REVERSE FLOW · MD" (html → md)

SHOT 07 · "PUBLISHER GRADE · DOCX" (md → docx)

SHOT 08 · "★ NEW · PRINT" (md → pdf)

SHOT 09 · "★ NEW · EBOOK" (md → epub)

SHOT 10 · "THE CONVERGENCE"

SHOT 11 · "ONE SOURCE."

SHOT 12 · "SIX FORMS."

SHOT 13 · "SIGN-OFF"

Part V · Production Manifest

5.1 字体清单 + 加载方式

5.2 色板 CSS 变量

5.3 BGM 来源选择标准

5.4 SFX 来源

5.5 截图验证计划

5.6 录制参数

5.7 音频混合

5.8 交付物清单

5.9 全链路时间估算

附录 · 这部片的 first principle

78 KiB

Raw Blame History