video-shotcraft 镜头配方实战：用 SVG feTurbulence 阶梯 seed 做出"线条沸腾"的活体静止

line-boil（线条沸腾）是 video-shotcraft 镜头库中一张典型"质感层"配方卡：它不给画面添加任何位移或内容变化，而是让文字/描边的轮廓每隔 3 帧被"重描"一次，使 3s 以上的长 hold 字卡看起来"活着"而不是卡死。读完本文，你能掌握这套手法的完整配方——feTurbulence + feDisplacementMap 的具体参数取值与可感阈值、floor(f/3) 阶梯换 seed 的节拍原理、"摘罩即真静止"的条件挂载写法，以及它的适用边界与实战回验清单；参考实现见 LineBoil.tsx，配方原文见 line-boil.md。

1. 要解决的问题：hold 帧的第三种状态——"活着的静止"

video-shotcraft 的审美判例库 aesthetic-rules.md 中，R 系（节奏）规则 R1 要求"关键信息落定后必须呼吸，品牌字标 hold 满 1 秒"。但这条规则在长字卡（3s+ 的黑场字卡、片尾定格）上会遇到一个两难：完全冻结的画面，观众会读作"片子卡了"；而任何整体位移又会破坏"落定"语义。

line-boil 配方卡给出的第三种状态是活着的静止：位置内容全然不动，只有线条边缘在极轻微地呼吸——每 3 帧轮廓被"重描"一次。这沿用的是手绘动画 hold 帧的惯例（手稿逐帧重描时边缘天然抖动）。配方卡同时划清了它与一个被否决方案 noise-drift 的边界，区别正在于"可感性"：

• noise-drift（被否决）：整体 1–3px 位移，肉眼读不出来，等于白做；
• line-boil（通过）：轮廓形变 + 阶梯跳变，每次换 seed 都是一次可见的"重描"，纸墨审美里这是"手工感"的直接来源。

配方元信息（继承自 line-boil.md frontmatter）：

字段	值
适用	标题字卡/描边元素的长 hold 段（黑场字卡升级首选）；质感层手法，寄生在别的镜头上
时长	寄生型——沸腾段随宿主 hold 长度，无自身时长
能量	低（底噪级）
标签	typography

2. 动效核心：feTurbulence 位移滤镜的完整配置

2.1 滤镜结构

参考实现 LineBoil.tsx 中，滤镜定义如下：

<svg width={0} height={0} style={{ position: 'absolute' }}>
  <defs>
    <filter id={boilId} x="-15%" y="-15%" width="130%" height="130%">
      <feTurbulence
        type="fractalNoise"
        baseFrequency={0.015}
        numOctaves={2}
        seed={seed}
        result="noise"
      />
      <feDisplacementMap
        in="SourceGraphic"
        in2="noise"
        scale={BOIL_SCALE}
        xChannelSelector="R"
        yChannelSelector="G"
      />
    </filter>
  </defs>
</svg>

各参数与配方卡的对应关系：

• feTurbulence：type="fractalNoise"（分形噪声，比 turbulence 更适合轮廓级形变）、baseFrequency={0.015}、numOctaves={2}。baseFrequency 0.015 对应的形变尺度约等于字高量级——这正是"重描"读感；配方卡明确警告 0.05+ 会变成毛边噪点，不再是"重描"。
• feDisplacementMap：scale={BOIL_SCALE}（即 8），xChannelSelector="R"、yChannelSelector="G"，用噪声纹理的红/绿通道分别驱动 X/Y 位移。
• filter 区域：x="-15%" y="-15%" width="130%" height="130%"，给形变留出溢出空间，避免边缘裁切出硬边。

2.2 为什么 displacement scale 必须是 8

这是本配方最有价值的调校结论。源码常量注释直接记录了演化过程（LineBoil.tsx）：

const BOIL_SCALE = 8; // 原案 3–6 已按可感性加码；QA 看不出再加到 12

配方卡参数表给出的完整取值区间：

displacement scale	典型值	调节手感
大字标题	8	——
小字/细线	5–6	——
>12	——	读作故障扭曲（glitch）
<4	——	不可感

也就是说 3–6 的"原案"在实际调校中已被否决为"不可感"，8 是 1080p 大标题上肉眼可感的最小安全值。若 QA 逐帧回看仍看不出，加到 12；再往上就滑进故障特效的语义区间了。

2.3 seed 节拍：floor(f/3) 阶梯换，而不是逐帧换

seed 的推进方式决定"手绘感"与"电噪感"的边界（LineBoil.tsx）：

const boiling = f >= BOIL_START && f < BOIL_END;
// seed 每 3 帧阶梯换 → 8~10Hz 的手绘颤动感；帧确定，无随机源
const seed = Math.floor(f / 3);

• seed = Math.floor(f/3)：每 3 帧跳一次新形变，在 30fps 下相当于每 3 帧重描一次，呈现约 10fps 的手翻书（手翻书动画）质感。每次跳变是一次离散的"重描事件"，这正是配方卡说的"轮廓形变+阶梯跳变"可见性的来源。
• 逐帧换 seed 会读作电噪：形变连续无停地刷新，失去"一帧帧画"的离散感，读起来像信号故障而非手绘。
• 节拍手感（来自配方卡参数表）：floor(f/2) 太贼（抖动过密），floor(f/4) 以上读作卡顿跳帧。
• 帧确定性：seed 由帧号纯函数推出，无随机源——Remotion 渲染每帧独立、可精确回放与 diff 自检，这一点对视频模板库尤其关键。

3. 摘罩命门：条件挂载 filter，而不是 opacity 归零

配方卡把这一点标为"命门"，并引用了库内 feTurbulence 判例：沸腾段之外，filter 与 SVG defs 根本不渲染（条件挂载），而不是把 opacity 调到 0——否则滤镜永远挂在 DOM 上，收尾永远做不到"真静止"。

源码实现是两段条件（LineBoil.tsx 与 LineBoil.tsx）：

{/* 沸腾段才渲染 filter 定义——摘罩即整个 SVG def 消失，收尾天然真静止 */}
{boiling && (
  <svg width={0} height={0} ...>
    <defs>...</defs>
  </svg>
)}
...
<div
  style={{
    ...
    filter: boiling ? `url(#${boilId})` : undefined,
  }}
>

摘罩的瞬间，轮廓从"最后一次形变状态"直接归位到干净原始轮廓——这一次归位本身就是一次视觉收束，配方卡因此建议：宿主镜头收尾若需绝对静止，提前 ≥15 帧摘罩。这也让沸腾段可以合法视作 R 系规则下的 hold（"落定"语义由轮廓归位完成）。

3.1 多实例不串引的细节

滤镜 ID 按实例生成并做了清洗（LineBoil.tsx）：

// 滤镜 ID 按实例生成，多实例同场不串引（useId 的 «:» 在 url() 里非法，需清洗）
const boilId = `boil-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;

React 的 useId() 会产出含 «:/» 字符的 ID，这些字符在 CSS url(#...) 引用中非法，必须替换掉——同场两个沸腾元素时，不清洗会互相串引用。

4. Demo 关键帧结构：用"对比"自证可感

配方卡指出 demo 的结构完全靠对比成立：先静止（干净版）→ 沸腾 → 摘罩回静止，三段之间形成"可感差"；实战中沸腾段则直接铺满宿主 hold。参考实现的完整时间轴（画布 1920×1080）：

帧区间	时长	状态	说明
0–35	35f	完全静止（boil off）	干净轮廓基准帧
35–105	70f	沸腾（boil on）	seed 每 3 帧一换
105 帧	——	摘罩	条件卸载 filter，轮廓归位
105–140	35f	真静止（boil off）	逐帧完全相同

常量定义见 LineBoil.tsx：

const BOIL_START = 35;
const BOIL_END = 105;
const BOIL_SCALE = 8; // 原案 3–6 已按可感性加码；QA 看不出再加到 12

画面角落用 "boil on" / "boil off" 两枚角标做状态指示，透明度互逆补间（LineBoil.tsx）：

const onOp = interpolate(f, [35, 40, 100, 105], [0, 1, 1, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const offOp = 1 - onOp;

注意所有过渡都在 105f 前完成，保证 105–140 区间逐帧像素相同——这是配方卡"105f 起真静止 ≥35f"判例在代码里的落点。被沸腾的对象是一整层：大标题 "ALIVE"（170px/800）+ 520×300 的 3px 描边卡片，整层挂 filter: url(#boilId)，验证了"大标题 + 描边框"两类适用对象。

5. 完整参数表与适用边界

配方卡参数表全量继承如下，配合第 2 节的取值区间理解：

参数	典型值	调节手感
displacement scale	8（大字标题）；小字/细线 5–6	>12 读作故障扭曲；<4 不可感
seed 节拍	floor(f/3)，即每 3 帧重描	/2 太贼、/4 以上读作卡顿跳帧
baseFrequency	0.015（形变尺度约字高级）	0.05+ 变成毛边噪点，不是"重描"
适用对象	大标题、描边框、手绘圈注	实心小元素（图标/头像）沸腾读作模糊
与 R 系关系	沸腾段视作合法 hold；宿主镜头收尾若需绝对静止则提前 ≥15f 摘罩	摘罩瞬间轮廓归位本身就是一次收束

适用对象的判断逻辑：有清晰轮廓线的元素才"沸腾得对"——大标题、描边框、手绘圈注的边缘在位移形变下每次换 seed 都产生可见差异；而实心小元素（图标、头像）位移后只读作模糊/发虚，因为它们的轮廓没有足够的边缘细节承载形变。

6. 已知坑：实战前的五条自检

以下五条全部继承自配方卡"已知坑"，是本手法最容易翻车的地方：

1. 参数是调校起点，非实战定稿。demo 在灰阶/占位素材上完成调校——首次实战必须以真实素材回验（真实字体、真实字重、真实底色下的可感阈值可能与灰阶 demo 不同）。
2. 全片同时沸腾的元素 ≤1 组。标题在沸腾、卡片框也在沸腾时，观众找不到该看哪。这是 aesthetic-rules.md 中 P4"一种动画手法全片只当一次主角"的具体化执行。
3. 与 speed-lines 的"沸腾"同族不同职。集中线/速度线的沸腾（impact-feedback C 式，每 2 帧换形态）是冲击帧的高能沸腾，本卡是 hold 帧的底噪沸腾，能量档位差两级，参数不可互换。两者对比见 impact-feedback。
4. SVG filter 有渲染开销，且语义要对。1920 全幅文字层套 boil 渲染时间可接受；但对整页截图层套 boil，渲染时间翻倍，而且语义不对——页面不是手绘物，沸腾它读作故障。
5. 首选宿主是字卡类镜头，且沸腾要在入场动作完成后再起。paper-title-card（逐词压印上纸）和黑场字卡（shot-transitions D 式）是首选宿主：先让字卡的打字机/压印入场做完，落定后才挂沸腾，避免入场动画与轮廓形变叠加读作失控。宿主配方见 paper-title-card 与 shot-transitions。

7. 工程要点小结与延伸阅读

从 LineBoil.tsx 的完整实现看，这张配方卡落地时的工程要点可归纳为四条：seed 是帧号纯函数（帧确定、可 diff 自检）；filter 定义与 url(#id) 引用都挂同一个 boiling 布尔（摘罩即整棵子树卸载）；滤镜 ID 走 useId() 清洗（多实例安全）；被沸腾的是"整层"而非单元素（文字 + 描边框同层共享一个滤镜实例，也控制了滤镜数量）。

库内同样基于 feTurbulence 噪声滤镜的还有 grain-dissolve（片尾颗粒溶解，噪声用于遮罩溶解而非位移形变）等镜头，可按"噪声生成 → 用途（遮罩/位移）→ 节拍（逐帧/阶梯）"三个维度与 line-boil 对照取舍。

该卡片在公开镜头库中的索引与多语言描述见 library.json、gallery/source/line-boil.md（英文摘要："Typography and outlines subtly redraw every few frames so a held image retains a handmade, living texture."）。

复制该手法的最低清单：feTurbulence(fractalNoise, 0.015, 2 octaves, seed=floor(f/3)) + feDisplacementMap(scale=8, R/G 通道)，条件挂载于"文字/描边整层"，沸腾段覆盖宿主 hold、收尾提前 ≥15f 摘罩，全片沸腾元素 ≤1 组，首帧以真实素材回验 scale 的可感性。