@oh-story/dsh 0.1.10 → 0.1.12

package/lib/drama/skills/short-drama-edit/SKILL.md

@@ -44,12 +44,13 @@ license: MIT
 3. **在可用区间内选叙事入出点。** 按动作、反应或停顿的需要选择入点，出点取信息完成之后、缺陷
    开始之前。逐段写清入点理由和出点理由。做法见 [入出点与镜序](references/cut-craft.md)。
 4. **排镜序并检查相邻关系。** 检查动作、空间、揭示与声音是否连贯；重复信息没有新增作用时再删。
-5. **比较相邻段的画面。** 按同场景、同光态比较可比区域；有可见偏差时在对应段写 `画面`。
-   做法见 [接镜与色彩一致性](references/generated-footage.md#接镜与色彩一致性)。
+5. **比较相邻段的画面。** render 会在同一场景内自动接镜；按同场景、同光态比较可比区域，
+   自动接镜不够或不该动的段写 `画面`。做法见 [接镜与色彩一致性](references/generated-footage.md#接镜与色彩一致性)。
 6. **处理声音接缝与响度。** 拼接后回听；需要混音时通过外部工具执行并记录。
    做法见 [声音、字幕与音乐](references/sound-and-subtitles.md)。
-7. **写字幕。** 字幕的每一个字都取自 `剧本.md` 的台词原文，不取自转写结果；标点可按字幕惯例调整，
-   字不能改。转写只用来定位时间。
+7. **写字幕、画面文字与音效。** 字幕的每一个字都取自 `剧本.md` 的台词原文，不取自转写结果；
+   标点照抄剧本，字不能改。转写只用来定位时间。画面留白给后期的 `[画面文字]` 写成 `画面文字` 行，
+   需要落在画面文字出现时的提示音写成 `音效` 行。
 8. **写出 `剪辑单.md`，再渲染。** 先有文档后有成片：文档是可审查、可修订、可复现的那一份，
    成片是它的产物。
 9. **按可测项验收成片，再交付。** 见 [交付与验收](references/delivery-verify.md)。
@@ -67,12 +68,31 @@ license: MIT
   - `- 取舍：入点=<理由>；出点=<理由>`——理由写画面上发生了什么，不写「节奏需要」。
     理由应能对应实际素材与本镜叙事需要。
   - `- 声音：<本段声音怎么处理>`——记录保留原声或外部处理。此行不驱动内置 render 的混音。
-  - `- 画面：<接镜校正>` 或 `- 画面：无`——只在这一段与相邻段明显对不上时写，
-    格式是「亮度 <数>」「饱和 <数>」「色温 <数>」三项的任意组合，用 `；` 分隔。
-    详见 [接镜与色彩一致性](references/generated-footage.md#接镜与色彩一致性)。
+  - `- 画面：<接镜校正>`、`- 画面：无` 或 `- 画面：不校`——校正是「亮度 <数>」「饱和 <数>」「色温 <数>」
+    三项的任意组合，用 `；` 分隔，写了就替代这一段的自动接镜；`无` 表示不另写校正；`不校` 表示连自动接镜
+    也不做。详见 [接镜与色彩一致性](references/generated-footage.md#接镜与色彩一致性)。
   - `- 字幕：<逐字台词原文>` 或 `- 字幕：无`。本段有多句台词时改用编号写法，
     每句自带时间：`- 字幕 1：0.20-1.50 请进`、`- 字幕 2：2.30-4.30 门没有锁`。
-    编号从 1 连续，时间相对本 CUT 入点，且不得重叠。
+    编号从 1 连续，时间相对本 CUT 入点，且不得重叠。句末可加 `（重点：<词>｜<词>）`，
+    这些词须出现在本句里，烧录时标黄。字色按 `剧本.md` 里这句的来源决定：对白白色，
+    `[VO] 系统：` 青色，其他 `[VO]` 浅青，剪辑单里不另写。
+  - `- 画面文字 N：<起>-<止> <样式> <项>｜<项>…`——视频模型写不对字，系统面板、倒计时、屏幕上的
+    粉丝数在画面里留白，由 render 叠上去。每一项都要能在 `剧本.md` 的 `[画面文字]` 行里找到。
+    单条可不编号；编号与时间规则同字幕。三种面板共用画面顶部，角标在右上角，同一位置不得重叠。
+
+    | 样式 | 各项的位置 |
+    |---|---|
+    | `卡片` | 每项一行：第一个词是名称，最后一个词是数值，中间的词是单位（`主号 粉丝 2｜小号 1`） |
+    | `系统面板` | 第一项是状态行，逐字打出；其余是奖励行 |
+    | `任务面板` | 标题、目标（逐字打出）；其后写成 `<数> / <数>` 的一项是进度，其余是奖励标签 |
+    | `角标` | 各项连成一行标签 |
+
+    奖励可在项末写稀有度 `（传说）` `（史诗）` `（稀有）`，不写按稀有；稀有度不是文字，不参与核对。
+    `任务面板` 和 `角标` 末尾可加 `（倒计时：<秒>）`，显示成 `4天 23:59:58` 并逐秒走动；
+    `（倒计时：接续）` 接着成片里上一个倒计时走。相邻两段写同一条角标且首尾相接时，
+    成片里是同一个角标，切镜时不重新入场。面板自带的 `【系统提示】` `【新任务】` `进度` 属于样式，不写进剪辑单。
+  - `- 音效 N：<起>-<止> <项目相对路径>（增益：<dB>）`——从声音文件开头取 `止 - 起` 秒，
+    混进本段该时刻的原声；增益可省，范围 -40 到 +6。单条可不编号。
 - 素材里没有被采用的镜头，在正文开头写一行 `- 未采用镜头：<MOTION-...>（理由：……）`，
   多项用 `；` 连接。理由区分两类：**文件缺失**（还没生产 / 生产失败）和**质量不可用**
   （生成结果不能用），也可说明叙事取舍。补素材前先判断需要重出还是修订上游。
@@ -102,21 +122,24 @@ python3 <本技能目录>/scripts/edit_tool.py render <剧集/EP001> --project-r
 python3 <本技能目录>/scripts/edit_tool.py verify <剧集/EP001> --project-root <project>
 ```
 
-`check` 只核对不渲染：素材是否比剪辑单新（重出之后字幕时间必须重测）、区间自洽、`MOTION-...` 解析、文件存在、区间不越过素材时长、
-同源区间不重叠、字幕文字能在 `剧本.md` 里找到。其中「区间不越过素材时长」需要 `ffprobe`，
-没有时这一项报「未测」并说明原因，不静默跳过。`render` 按剪辑单切段、拼接、烧字幕、统一响度，
-输出 `剧集/<EP>/制作成果/成片/`。`verify` 只测量已经渲染出来的成片并回报数字，不改文件、
-不给质量结论。
+`check` 只核对不渲染：素材是否比剪辑单新（重出之后字幕、画面文字与音效时间必须重测）、区间自洽、
+`MOTION-...` 解析、文件存在、区间不越过素材时长、同源区间不重叠、字幕文字能在 `剧本.md` 里找到、
+画面文字能在 `[画面文字]` 行里找到、「接续」之前确有倒计时、音效文件存在且落在本段内。
+其中「区间不越过素材时长」需要 `ffprobe`，没有时这一项报「未测」并说明原因，不静默跳过。
+`render` 按剪辑单切段、同场景自动接镜、拼接、混入音效、烧字幕与画面文字、统一响度，输出 `剧集/<EP>/制作成果/成片/`。
+`verify` 只测量已经渲染出来的成片并回报数字，另列出画面文字与音效在成片里的起止秒、切点亮度变化和疑似坏帧，
+供抽帧和回听；不改文件、不给质量结论。
 
 字幕默认由带 libass 的 ffmpeg 烧录。`--subtitles remotion` 换成一条排版可调的
 路线，代价是装一次 Node 依赖，而且叠层要**逐帧过无头浏览器**渲整部成片——慢且吃内存，
-并发默认压在 2（`--remotion-concurrency` 可调，调高前先量本机）。取舍见
-[声音、字幕与音乐](references/sound-and-subtitles.md)，装法见
-[Remotion 字幕叠层](assets/remotion/README.md)。
+并发默认压在 2（`--remotion-concurrency` 可调，调高前先量本机）。画面文字只有 Remotion 一条路线：
+剪辑单里有画面文字时，无论字幕走哪条路线 render 都需要它，没装就报错并给出安装命令；
+走 ffmpeg 的字幕压在画面文字之上。取舍见 [声音、字幕与音乐](references/sound-and-subtitles.md)，
+装法见 [Remotion 叠层](assets/remotion/README.md)。
 
-`render` 保留切好的中间文件。它只切段、硬拼接、统一字幕样式、接镜校正和整片响度，
-不执行 `声音` 行中的混音方案，也不按交付规格自动缩放或改帧率。需要混音、逐镜字幕避让、
-转场或画幅转换时用外部工具完成并记录，验收实际交付文件。
+`render` 保留切好的中间文件。它只切段、硬拼接、混入 `音效` 行、统一字幕样式、画面文字、
+接镜校正（写明的与同场景自动的）和整片响度，不执行 `声音` 行中的混音方案，也不按交付规格自动缩放或改帧率。
+需要混音、逐镜字幕避让、转场或画幅转换时用外部工具完成并记录，验收实际交付文件。
 
 ## 按需知识
 
@@ -128,7 +151,7 @@ python3 <本技能目录>/scripts/edit_tool.py verify <剧集/EP001> --project-r
 - 声音接缝、字幕与音乐落点：[声音、字幕与音乐](references/sound-and-subtitles.md)
 - 成片可测项与验收：[交付与验收](references/delivery-verify.md)
 - 剪辑单成稿样例：[剪辑单样例](assets/剪辑单.md)
-- 可选的 Remotion 字幕排版：[Remotion 字幕叠层](assets/remotion/README.md)
+- 画面文字样式与可选的 Remotion 字幕排版：[Remotion 叠层](assets/remotion/README.md)
 
 ## 修订
 

package/lib/drama/skills/short-drama-edit/assets/remotion/README.md

@@ -1,13 +1,15 @@
-# Remotion 字幕叠层
+# Remotion 叠层
 
-`$short-drama-edit` 的**可选**字幕渲染路线。默认路线是 ffmpeg + libass，零依赖；这一条排版
-更好，但要装 Node 依赖，而且慢得多、吃内存——先看下面的「代价」。
+`$short-drama-edit` 用它画两样东西：剪辑单里的**画面文字**（只有这一条路线），以及**可选的**
+字幕排版（默认字幕路线是 ffmpeg + libass，零依赖）。两者在同一遍里渲进一段透明叠层。
+它要装 Node 依赖，而且慢得多、吃内存——先看下面的「代价」。
 
-## 为什么会有第二条路
+## 为什么走这条路
 
 ASS 的字号是相对 `PlayRes` 的单位，渲染时再缩放一次，这层间接每次都要重推一遍，推错了
 在数字上看不出来（见[声音、字幕与音乐](../../references/sound-and-subtitles.md)）。这里字号、
 描边、行距、安全区、折行都是 CSS，写的是画面像素，改完在 `npx remotion studio` 当场能看。
+面板、发光、逐条入场和逐秒走动的倒计时是版面，不是字幕样式，ASS 画不了。
 
 ## 装一次
 
@@ -18,22 +20,47 @@ ASS 的字号是相对 `PlayRes` 的单位，渲染时再缩放一次，这层
 cd ~/.cache/short-drama-edit/remotion && npm install
 ```
 
-`node_modules` 不进项目也不进本仓库。
+`node_modules` 不进项目也不进本仓库。字体也在这一步装上：`@fontsource/noto-sans-sc`
+（思源黑体，用 700 与 900）和 `@fontsource/jetbrains-mono`（数字，用 800）。升级本技能后
+`package.json` 多了依赖时，render 会点名缺的包并给出同一条命令。
 
 ## 用
 
+剪辑单里有画面文字时，`render` 自动走这一遍。只想换字幕排版时：
+
 ```bash
 python3 <本技能目录>/scripts/edit_tool.py render <剧集/EP001> --project-root <project> --subtitles remotion
 ```
 
-它渲染出一段**透明**的字幕层（VP8 + alpha），再由 ffmpeg 叠到未经改动的画面上。画面本身
-不经过浏览器重绘，所以不多一次画质损失。
+它渲染出一段**透明**的叠层（VP8 + alpha），再由 ffmpeg 叠到未经改动的画面上。画面本身
+不经过浏览器重绘，所以不多一次画质损失；也不在浏览器里解码画面，帧时间不规整的拼接素材在那里
+会解出串进别的镜头画面的坏帧。字幕走 ffmpeg 路线时，这一遍只画画面文字，
+字幕在合成后烧在它上面。
+
+## 画面文字的样式
+
+每种样式是 `src/screen/` 里的一个组件，接收同样的 `{ text }`；颜色、入场、淡出、
+面板位置这些共用的值在 `src/screen/tokens.ts`，系统类面板共用的框与部件在 `src/screen/chrome.tsx`。换一种样式的外观只改它自己的文件，
+不碰剪辑单解析与时间换算。所有尺寸以画面高度的百分之一为单位。
+
+倒计时由帧号直接算出：同一帧每次渲染显示同样的数字。
+
+## 字体
+
+字体随叠层打包，不依赖本机。字体按字符区段拆成许多小文件，浏览器只在排到某段文字时才去取，
+那时这一帧可能已经截走了。所以叠层挂载时先按整部片子要画的字逐个字重调用
+`document.fonts.load`，全部就绪、组件树提交之后才放出第一帧；十秒内没加载完、某个字重没有声明、
+或加载后仍未就绪，渲染直接报错。这个等待按挂载注册并设了上限，不再是模块加载时那次
+`document.fonts.ready`——在带视频的渲染页里，那次等待曾挂住整个渲染直到超时。
+
+画每段字之前再测一次宽：把字体栈分别接在 `serif` 与 `monospace` 两个兜底之前，与只有兜底时的
+宽度相比，两边都一样才算字体没到位，这时同样报错，不悄悄换字体出片。
 
 ## 代价
 
 叠层**逐帧**渲，长度等于整部成片：一分钟竖屏片一千多帧 1080×1920，每帧一次无头浏览器
-截图，没字幕的帧照渲。透明还要求 PNG 抓帧加 VP8 编码，Remotion 的性能文档把这两样都列为
-慢环节。默认路线是一次滤镜的事，这条是分钟级。
+截图，没字的帧照渲。透明还要求 PNG 抓帧加 VP8 编码，Remotion 的性能文档把这两样都列为
+慢环节。默认字幕路线是一次滤镜的事，这条是分钟级。
 
 内存才是会出事的地方。Remotion 默认按 CPU 核数开浏览器实例，每个各持一整帧——10 核 8 GB
 的机器上内存打满，整机停止响应，本套件就这么卡死过一次。所以 `edit_tool.py` 固定传
@@ -47,14 +74,23 @@ cd ~/.cache/short-drama-edit/remotion && npx remotion benchmark
 
 Remotion 个人与小团队免费，超出规模需商业授权，条款以 [remotion.dev](https://www.remotion.dev/)
 为准。本套件是 MIT，不包含也不代理这项授权，也不会替你安装它——缺依赖时只报错并给出命令。
-默认路线不涉及这件事。
+剪辑单里没有画面文字、字幕走默认路线时，不涉及这件事。
+
+思源黑体（Noto Sans SC）与 JetBrains Mono 都是 SIL Open Font License 1.1：可以随成片使用、
+嵌入和再分发，不能单独出售字体文件。许可证文本在各自的 `node_modules/@fontsource/*/LICENSE`。
 
 ## 文件
 
 | 文件 | 作用 |
 |---|---|
-| `src/schema.ts` | 叠层的输入形状：cues、画幅、fps、字号与安全区比例 |
-| `src/Subtitles.tsx` | 排版本身。所有尺寸都是画面高度的比例，同一组数值对 768×1344 和 1080×1920 都成立 |
+| `src/schema.ts` | 叠层的输入形状：字幕（文字、来源、重点词）、画面文字（各项与稀有度）、画幅、fps |
+| `src/Overlay.tsx` | 合成本身：引入字体、等字体就绪，画面文字在下，字幕在上 |
+| `src/Subtitles.tsx` | 字幕排版。所有尺寸都是画面高度的比例，同一组数值对 768×1344 和 1080×1920 都成立 |
+| `src/screen/ScreenText.tsx` | 把每条画面文字放到成片时间上，按样式分派 |
+| `src/screen/tokens.ts` | 字幕与各样式共用的字体、颜色、稀有度色、入场、淡出与位置 |
+| `src/screen/chrome.tsx` | 系统类面板共用的框、角标括号、扫描线、标题行、打字机与奖励行 |
+| `src/screen/Card.tsx` 等 | 每种样式一个组件：卡片、系统面板、任务面板、角标 |
+| `src/rules.mjs` | 不需要浏览器的判断：要加载的字、加载结果是否可用、字体族是否缺失、打字进度、进度条、倒计时读数与脉冲。纯 JavaScript，测试直接用 Node 跑 |
+| `src/font.ts` | 在渲染页里执行上面的字体判断 |
 | `src/Root.tsx` | 合成注册；画幅、帧率、时长由调用方通过 `--props` 传入 |
-| `src/font.ts` | 渲染前等字体就绪，并验证字体族真的存在——装不上时报错，而不是悄悄换一款字体出片 |
 | `remotion.config.ts` | 固定成带 alpha 的输出，叠层必须透明 |

package/lib/drama/skills/short-drama-edit/assets/remotion/package.json

@@ -2,11 +2,13 @@
   "name": "short-drama-subtitles",
   "version": "1.0.0",
   "private": true,
-  "description": "Remotion subtitle layer for short-drama-edit. Renders a transparent overlay from cues.json.",
+  "description": "Remotion overlay for short-drama-edit: subtitles and screen text on transparent frames.",
   "scripts": {
-    "render": "remotion render Subtitles"
+    "render": "remotion render Overlay"
   },
   "dependencies": {
+    "@fontsource/jetbrains-mono": "5.3.0",
+    "@fontsource/noto-sans-sc": "5.3.0",
     "@remotion/cli": "4.0.418",
     "react": "19.0.0",
     "react-dom": "19.0.0",

package/lib/drama/skills/short-drama-edit/assets/remotion/src/Overlay.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from "react";
+import { AbsoluteFill } from "remotion";
+// Only the weights drawn: Noto Sans SC 700 and 900, JetBrains Mono 800.
+import "@fontsource/noto-sans-sc/700.css";
+import "@fontsource/noto-sans-sc/900.css";
+import "@fontsource/jetbrains-mono/800.css";
+import { OverlayProps } from "./schema";
+import { useFaces } from "./font";
+import { fontLoadPlan } from "./rules.mjs";
+import { ScreenTextLayer } from "./screen/ScreenText";
+import { Subtitles } from "./Subtitles";
+
+/**
+ * One transparent pass: screen text first, subtitles on top, over empty frames.
+ * ffmpeg composites the result onto the untouched picture.
+ */
+export const Overlay: React.FC<OverlayProps> = (props) => {
+  const plan = useMemo(
+    () => fontLoadPlan(props.cues, props.screenTexts),
+    [props.cues, props.screenTexts],
+  );
+  if (!useFaces(plan)) return null;
+  return (
+    <AbsoluteFill>
+      {props.screenTexts.map((text, index) => (
+        <ScreenTextLayer key={index} text={text} />
+      ))}
+      <Subtitles cues={props.cues} />
+    </AbsoluteFill>
+  );
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/Root.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Composition } from "remotion";
-import { Subtitles } from "./Subtitles";
-import { defaultProps, SubtitleProps } from "./schema";
+import { Overlay } from "./Overlay";
+import { defaultProps, OverlayProps } from "./schema";
 
 export const RemotionRoot: React.FC = () => {
   return (
     <Composition
-      id="Subtitles"
-      component={Subtitles}
+      id="Overlay"
+      component={Overlay}
       defaultProps={defaultProps}
       // The caller passes the real frame, fps and length through --props; these
       // stand in only when the composition is opened in the studio by hand.
@@ -15,7 +15,7 @@ export const RemotionRoot: React.FC = () => {
       fps={defaultProps.fps}
       width={defaultProps.width}
       height={defaultProps.height}
-      calculateMetadata={({ props }: { props: SubtitleProps }) => ({
+      calculateMetadata={({ props }: { props: OverlayProps }) => ({
         durationInFrames: Math.max(1, Math.round(props.durationInSeconds * props.fps)),
         fps: props.fps,
         width: props.width,

package/lib/drama/skills/short-drama-edit/assets/remotion/src/Subtitles.tsx

@@ -1,87 +1,86 @@
-import React, { useMemo } from "react";
-import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
-import { Cue, SubtitleProps } from "./schema";
-import { assertFamilyResolves, waitForFonts } from "./font";
+import React from "react";
+import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { Cue } from "./schema";
+import { assertFamilyResolves } from "./font";
+import { lineEms } from "./rules.mjs";
+import { SANS, SUBTITLE } from "./screen/tokens";
 
-waitForFonts();
+/** Splits a line into plain and highlighted runs, earliest keyword first. */
+const runs = (text: string, keys: string[]): { text: string; key: boolean }[] => {
+  const out: { text: string; key: boolean }[] = [];
+  let rest = text;
+  while (rest) {
+    const hit = keys
+      .map((key) => ({ key, at: rest.indexOf(key) }))
+      .filter((found) => found.at >= 0)
+      .sort((a, b) => a.at - b.at)[0];
+    if (!hit) {
+      out.push({ text: rest, key: false });
+      break;
+    }
+    if (hit.at) out.push({ text: rest.slice(0, hit.at), key: false });
+    out.push({ text: hit.key, key: true });
+    rest = rest.slice(hit.at + hit.key.length);
+  }
+  return out;
+};
 
 /**
- * A transparent subtitle layer, composited onto untouched picture.
- *
- * Everything here is expressed as a fraction of frame height, so the same
- * numbers hold for 768×1344 and 1080×1920. That is the whole reason this file
- * exists in pixels rather than in an ASS style: the subtitle renderer's own
- * `PlayRes` scaling was applied twice once already, and type three times too
- * large shipped in a sample film.
+ * The subtitle layer: Noto Sans SC 900, white or voice-coloured fill over a
+ * dark rim drawn beneath it, baseline about a quarter up the frame so the
+ * platform's own UI never covers it. Sizes are fractions of frame height.
  */
-export const Subtitles: React.FC<SubtitleProps> = ({
-  cues,
-  fontScale,
-  bottomScale,
-  fontFamily,
-}) => {
+export const Subtitles: React.FC<{ cues: Cue[] }> = ({ cues }) => {
   const frame = useCurrentFrame();
   const { fps, height, width } = useVideoConfig();
   const now = frame / fps;
-  const active = cues.find((cue: Cue) => now >= cue.start && now < cue.end);
-
-  const fontSize = height * fontScale;
-  // A dark rim on every side keeps white type legible over a bright frame
-  // without a caption box, which is what vertical drama expects. It depends
-  // only on the frame size, so it is built once — and it stays above the early
-  // return, because a hook may not be skipped on the frames with no line.
-  const shadow = useMemo(() => {
-    const rim = Math.max(2, height * 0.0024);
-    return [
-      `0 0 ${rim * 3}px rgba(0,0,0,0.85)`,
-      `${rim}px ${rim}px 0 rgba(0,0,0,0.92)`,
-      `-${rim}px ${rim}px 0 rgba(0,0,0,0.92)`,
-      `${rim}px -${rim}px 0 rgba(0,0,0,0.92)`,
-      `-${rim}px -${rim}px 0 rgba(0,0,0,0.92)`,
-    ].join(", ");
-  }, [height]);
-
-  // Checked against a line about to be filmed, so a missing font stops the
+  const cue = cues.find((item) => now >= item.start && now < item.end);
+  // Checked against a line about to be filmed, so a missing face stops the
   // render on the first subtitle frame rather than after the whole pass.
-  assertFamilyResolves(fontFamily, active?.text ?? "");
-  if (!active) return null;
-
-  // A short lift on entry reads as the line arriving with the delivery. It is
-  // over well before the first syllable ends, so it never delays reading.
-  const age = now - active.start;
-  const lift = Math.min(1, age / 0.12);
-  const eased = 1 - Math.pow(1 - lift, 3);
+  assertFamilyResolves(SANS, cue?.text ?? "");
+  if (!cue) return null;
 
+  const u = height / 100;
+  // One line: long lines are split upstream; what still does not fit shrinks.
+  const size = Math.min(u * 4.3, (width * 0.9) / (lineEms(cue.text) * 1.04));
+  const age = now - cue.start;
+  const pop = spring({ frame: Math.round(age * fps), fps, config: { damping: 12, stiffness: 260, mass: 0.5 } });
   return (
-    <AbsoluteFill
-      style={{
-        justifyContent: "flex-end",
-        alignItems: "center",
-        paddingBottom: height * bottomScale,
-        paddingLeft: width * 0.06,
-        paddingRight: width * 0.06,
-      }}
-    >
+    <AbsoluteFill style={{ justifyContent: "flex-end", alignItems: "center", paddingBottom: u * 24 }}>
       <div
         style={{
-          fontFamily,
-          fontSize,
-          fontWeight: 700,
-          color: "#ffffff",
+          fontFamily: SANS,
+          fontWeight: 900,
+          fontSize: size,
+          color: SUBTITLE.fill[cue.kind],
+          letterSpacing: size * 0.04,
           textAlign: "center",
-          lineHeight: 1.28,
-          letterSpacing: fontSize * 0.02,
-          textShadow: shadow,
-          opacity: eased,
-          transform: `translateY(${(1 - eased) * fontSize * 0.25}px)`,
-          // A long line wraps rather than running off the frame — the failure
-          // that made the first shipped version unreadable.
-          maxWidth: "100%",
-          wordBreak: "break-word",
-          whiteSpace: "pre-wrap",
+          lineHeight: 1.2,
+          whiteSpace: "nowrap",
+          WebkitTextStroke: `${u * 0.42}px ${SUBTITLE.rim}`,
+          paintOrder: "stroke fill",
+          textShadow: `0 ${u * 0.25}px ${u * 0.6}px rgba(0,0,0,0.55)`,
+          opacity: Math.min(1, age / 0.06),
+          transform: `scale(${0.94 + 0.06 * pop})`,
         }}
       >
-        {active.text}
+        {runs(cue.text, cue.keys).map((run, index) =>
+          run.key ? (
+            <span
+              key={index}
+              style={{
+                color: SUBTITLE.keyword,
+                display: "inline-block",
+                // A 120 ms pop as the word lands.
+                transform: `scale(${1.08 + 0.15 * Math.max(0, 1 - age / 0.12)})`,
+              }}
+            >
+              {run.text}
+            </span>
+          ) : (
+            <span key={index}>{run.text}</span>
+          ),
+        )}
       </div>
     </AbsoluteFill>
   );

package/lib/drama/skills/short-drama-edit/assets/remotion/src/font.ts

@@ -1,46 +1,56 @@
-import { continueRender, delayRender } from "remotion";
+import { useEffect, useState } from "react";
+import { cancelRender, continueRender, delayRender } from "remotion";
+import { FONT_WAIT_MS, familyIsMissing, fontLoadProblem, settleWithin } from "./rules.mjs";
+
+type Plan = { font: string; text: string }[];
 
 /**
- * Remotion captures a frame as soon as React has painted, so a font still being
- * fetched is simply absent from it. Nothing downstream reports that: the film
- * measures correct and reads wrong.
+ * Holds the first frame until every face in `plan` has the glyphs it will draw.
+ *
+ * Registered per mount rather than at module load, the way Remotion expects;
+ * bounded by `FONT_WAIT_MS`; and a face that is undeclared, fails, or never
+ * finishes cancels the render with the reason instead of shipping a fallback.
+ * Returns false until then, so nothing is drawn -- or measured -- early; the
+ * frame is released only after the ready tree has been committed.
  */
-export const waitForFonts = (): void => {
-  const handle = delayRender("等待字体就绪");
-  document.fonts.ready.then(
-    () => continueRender(handle),
-    () => continueRender(handle),
-  );
+export const useFaces = (plan: Plan): boolean => {
+  const [handle] = useState(() => delayRender("加载字体"));
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const loads = Promise.all(plan.map((entry) => document.fonts.load(entry.font, entry.text)));
+    settleWithin(loads, FONT_WAIT_MS).then((outcome) => {
+      const problem = fontLoadProblem(plan, outcome, (font, text) => document.fonts.check(font, text));
+      if (problem) cancelRender(new Error(problem));
+      else setReady(true);
+    });
+  }, [plan]);
+  useEffect(() => {
+    if (ready) continueRender(handle);
+  }, [ready, handle]);
+  return ready;
 };
 
 /**
- * `document.fonts.ready` promises that loading finished, not that the requested
- * family exists — a missing face raises nothing, the browser substitutes, and
- * the film ships in the wrong typeface. Measuring is the only reliable test:
- * identical widths against a family that cannot exist mean nothing resolved.
+ * A second guard at draw time: measuring is the only test of what the frame
+ * actually uses, so a stack whose families all fall back stops the render.
  */
-let familyChecked = "";
+const checked = new Set<string>();
 
 export const assertFamilyResolves = (fontFamily: string, sample: string): void => {
   // Runs on every frame, so measure once per family.
-  if (!sample || familyChecked === fontFamily) return;
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
+  if (!sample || checked.has(fontFamily)) return;
+  const context = document.createElement("canvas").getContext("2d");
   if (!context) return;
 
-  const measure = (family: string): number => {
-    context.font = `700 64px ${family}`;
-    return context.measureText(sample).width;
+  const measure = (stack: string, text: string): number => {
+    context.font = `700 64px ${stack}`;
+    return context.measureText(text).width;
   };
-  // A name no font can carry, so it always lands on the browser's last resort.
-  const fallbackOnly = measure('"__no_such_family__"');
-  const requested = measure(`${fontFamily}, "__no_such_family__"`);
-  if (requested === fallbackOnly) {
+  if (familyIsMissing(measure, fontFamily, sample)) {
     throw new Error(
-      `字幕字体 ${fontFamily} 在渲染环境里一个都没装上，` +
-        "画面会落到浏览器的兜底字体。装一款其中的字体，" +
-        "或给 render 传一个本机确实有的字体族。",
+      `字体 ${fontFamily} 在渲染环境里一个都没有，画面会落到浏览器的兜底字体。` +
+        "在 Remotion 工作区运行 npm install 装上字体包。",
     );
   }
-  familyChecked = fontFamily;
+  checked.add(fontFamily);
 };