企业官网建设流程全解析

• AI 技能
• 媒体生成
• 视频

本文基于 video-shotcraft 仓库的标题入场镜头卡 type-entrance-moves.md，完整拆解两种标题文字入场动效：A 式乱码解码（终端黑客感的"答案从噪声里长出来"）与 B 式字符坠落（物理喜剧感的"砸落弹跳、立正归位"）。文章覆盖两式的选型依据、逐帧参数表、源码级实现原理与已知工程坑位，读者可直接据此在 Remotion 项目中复刻、调参并接入声音设计。

一、品类背景：四种标题入场性格

video-shotcraft 的标题入场库在引入这两式之前，已经拥有两种成熟方案：

• 打字机（document-typewriter-reveal）——沉稳的文档感；
• 翻牌屏（split-flap-title）——机械的仪式感。

type-entrance-moves这张卡片补上的是另外两种性格（见 gallery/source/type-entrance-moves.md 的"意图"一节）：

从源码结构看，本仓库对"标题入场"这一品类有一个明确的组合纪律（卡片原文标注为 P4 规则）：四种标题入场同片 ≤2 种。原因是这类动效都自带高注意力，多个高能量入场在同帧抢戏会互相抵消，反而削弱仪式感。

二、两式选型速查

时长与能量的卡片标注：单式 4–5s（含 hold 与静止收尾；动作段 A 约 66f / B 约 106f，@30fps），能量中高——A 偏理性推进，B 偏物理趣味。

三、A 式 ScrambleDecode：乱码解码源码拆解

参考实现位于 demos/typography/type-entrance-moves/ScrambleDecode.tsx，核心思路是：每个字符在锁定前高速跳动伪随机字符，按从左到右的顺序逐个锁定为真字符，锁定瞬间做反色闪烁。

3.1 关键帧布局

源码头部注释明确给出了三段式结构（ScrambleDecode.tsx 第 1–5 行）：

• 0–20f：全员乱跳；
• 20–86f：从左到右逐个锁定；
• 87–130f：完全静止收尾。

对应的核心常量（ScrambleDecode.tsx）：

const TEXT = 'DECODE SPEED'; const CHARSET = 'ABCDEF0123456789#$%&'; const LOCK_START = 20; // 第 0 个字符锁定帧 const LOCK_STEP = 6; // 相邻字符锁定间隔 const FLASH_LEN = 2; // 锁定反色闪持续帧数

"DECODE SPEED" 含空格共 12 个可见字符位，最后一个字符在帧20 + 11×6 = 86锁定，与注释里的 20–86f 锁定段完全对应。

3.2 跳动期：每 2f 换一个伪随机字符

跳动期逻辑在 ScrambleDecode.tsx：

const tick = Math.floor(frame / 2); // 每 2 帧换一次 const scrambleChar = CHARSET[Math.floor(h(i * 101 + tick * 7 + 13) * CHARSET.length)];

即"全员字符每 2f 跳一个随机字符"，字符集限定为 A–F / 0–9 / #$%&，与参数表一致。跳动期字色用G.mid，锁定后转G.ink。

这里有一条卡片强调的硬性工程规则：严禁使用Math.random()，跳动必须随帧确定（frame-deterministic），否则 Remotion 渲染不可复现——逐帧渲染与多机并行渲染会得到不一致的画面。伪随机用 sin hash：

const h = (n: number) => { const s = Math.sin(n * 127.3) * 43758.5453; return s - Math.floor(s); };

（见 ScrambleDecode.tsx，B 式 LetterDropPhysics.tsx 复用同一 hash。）

3.3 锁定节拍与反色闪

锁定判定（ScrambleDecode.tsx）：

const lockFrame = LOCK_START + i * LOCK_STEP; const locked = frame >= lockFrame; const flashing = locked && frame < lockFrame + FLASH_LEN;

• 第 i 个字符在帧20 + i×6锁定为真字符并转深色；
• 锁定后前 2f 反色闪（深底白字）：color: flashing ? G.card : ...; background: flashing ? G.ink : 'transparent'。

反色闪的视觉作用是把"锁定"这个瞬间钉成一个明确的节拍点，而不是让字符静悄悄地换字。

3.4 底部进度条：让"扫描"可读

为了强化"从左到右扫过"的推进感，源码在标题下方绘制了一条进度条（ScrambleDecode.tsx），宽度按已锁定字符占比推进，全部锁定后进度条转深色收尾。卡片参数表称之为"底部进度条同步推进"。

3.5 等宽字体与固定槽宽的硬约束

卡片"已知坑"与参数表同时强调：必须使用等宽字体 + 固定 1ch 槽宽（源码fontFamily: 'ui-monospace, Menlo, Monaco, monospace'+width: '1ch'+textAlign: 'center'）。比例字体（proportional font）下，每个字符宽度不同，每跳一下整行都会抖动——乱码解码的"信息熵"观感会被破坏。

四、B 式 LetterDropPhysics：字符坠落源码拆解

参考实现位于 demos/typography/type-entrance-moves/LetterDropPhysics.tsx，字符错峰从顶砸落，重力加速 + 两次衰减弹跳 + 落地歪斜站定，最后一拍齐整回正。

4.1 分段轨迹函数 dropY

核心是一段分段函数（LetterDropPhysics.tsx）：

const dropY = (t: number): number => { if (t <= 0) return -DROP; if (t < T_FALL) return -DROP + DROP * (t / T_FALL) ** 2; // 重力加速 if (t < T_FALL + T_B1) { const u = (t - T_FALL) / T_B1; return -DROP * 0.3 * 4 * u * (1 - u); // 弹跳 1：30% } if (t < T_FALL + T_B1 + T_B2) { const u = (t - T_FALL - T_B1) / T_B2; return -DROP * 0.09 * 4 * u * (1 - u); // 弹跳 2：9% } return 0; };

对应常量（LetterDropPhysics.tsx）：

const DROP = 720; // 下落距离 const T_FALL = 24; // 落到基线用时 const T_B1 = 16; // 第一次弹跳时长（高 30%） const T_B2 = 8; // 第二次弹跳时长（高 9%） const SNAP = 110; // 齐整回正的一拍 const SNAP_DUR = 6;

三段运动学分别是：

1. 重力加速下落：y = −DROP + DROP·(t/24)²，二次曲线模拟自由落体；
2. 一次弹跳：抛物线4u(1−u)拼段，高度衰减到下落距离的 30%；
3. 二次弹跳：同一抛物线拼段，高度衰减到 9%。

卡片参数表把 30%/9% 称为"有弹性但不闹"的甜点，并警告三跳以上读作果冻——即物理可信度崩塌，变成廉价弹性动画。

4.2 错峰起跳与歪斜站定

• 第 i 个字符从帧10 + i×5起跳（源码const start = 10 + i * 5;）；
• 落地瞬间 rotate 到 seed hash 角度：const tiltTarget = (h(i + 1) - 0.5) * 12;，即 ±6° 范围内的伪随机歪角，并在落地后保持；
• 另有落定后的 ±5px 竖向错位（restJitter），让静止画面呈"歪歪扭扭站定"的自然感。

卡片特别提示：歪角是"物理感"的一半——如果全体笔直落地，观感会退化成普通位移入场。

4.3 归位一拍：仪式感的句号

帧 110 起，6f ease-out 集体回正（LetterDropPhysics.tsx）：

const snap = easeOutCubic(clamp01((frame - SNAP) / SNAP_DUR)); // 歪角与错位齐整归零，scale 1.06→1 脉冲 const rot = tiltTarget * landP * (1 - snap); const jitter = restJitter * landP * (1 - snap); const scale = frame < SNAP ? 1 : 1 + 0.06 * (1 - snap);

即rotate→0、竖向错位→0、scale 1.06→1的集体脉冲。卡片强调：集体归位是句号——错峰归位会把"立正"的仪式感拆散，所以必须全体同一拍完成。

4.4 场景细节

场景中绘制了一条地板线（G.bar色，LetterDropPhysics.tsx）作为字符落点的视觉基线；字符通过transformOrigin: '50% 100%'以底部为轴旋转/缩放，让"站在地板上"的物理感成立。

五、参数表：调校手感总览

以下是卡片参数表的完整继承（各参数的源码位置已在上面各节标注）：

补充两点源码级细节：

• 色板来源：两式均引用 demos/_fixtures/Fixtures.tsx 的灰阶占位色板G——bg #ececea、ink #2f2f2f、mid #8f8f8d、card #ffffff、bar #c2c2c0、line #dcdcda。demo 只求把运动演清楚，全部灰阶，实战时应替换为真实品牌色。
• 收尾 R1 规则：两式动作完毕后要求真静止 ≥20f，且静止期所有属性锁死（包括 B 式歪角归零后的状态），杜绝最后一帧的隐式插值抖动。A 式静止段 87–130f（≥20f）、B 式 116–150f（≥25f），源码均满足。

六、帧确定伪随机：可复现渲染的基础

两式都依赖同一种"帧确定伪随机"技巧：以帧号、字符索引与固定盐值为输入，经 sin hash 得到 [0,1) 间的确定性伪随机数。以 A 式为例，每 2f 的字符跳变使用h(i*101 + tick*7 + 13)，其中i是字符索引、tick = floor(frame/2)是跳变计数——同一帧号在任何一次渲染中都会得到完全相同的乱码序列。

这是 Remotion 逐帧渲染（Concurrency 并行渲染、跨机器渲染、断点续渲）正确性的前提：任何基于Math.random()的动画都会导致帧间不一致。卡片将该规则标注为"严禁"，属于不可协商的工程约束。

七、声音联动：逐字钉帧让解码感翻倍

卡片"已知坑"明确把两式列为声音强依赖候选位：

• A 式锁定的"嗒"声逐字钉帧，解码感会翻倍；
• B 式落地砸声同理；
• 无声版两式都还成立，但"少一半劲"。

声音实现层面需遵守仓库 references/sound-design.md §4.5 的硬规则：钉帧一律相对 shot 起点，而非绝对帧——SFX 表写作SHOTS.<shot>.from + offset（卡点片写beatF(n)，见 references/music-beat-sync.md）。这样镜头内部节拍不变时，改前面镜头的时长只需分镜表更新一处，SFX 自动跟随。若直接钉绝对帧号，任何一个镜头改时长都会让其后所有音效条目全部失效（该文档记录了模板片因此重钉三次的返工教训，其中两次是画面返工的连带成本）。

八、已知坑与实战回验清单

1. 调校起点 ≠ 实战定稿：demo 在灰阶/占位素材上调校通过，参数是调校起点，首次实战必须以真实素材回验（真实字形、真实字重、真实页面密度都会改变观感）。
2. A 式字符集别混入与真字符太像的字形：例如 O/0 连跳会让观众误判"已经锁定"，破坏解码的节奏感。
3. B 式字符间不做真实碰撞：demo 为各字符独立轨迹，字距排开即可；想要"互相撞歪"需预烘焙轨迹，成本高收益薄。
4. 品类纪律：标题入场品类已四式（本卡两式 + split-flap-title + document-typewriter-reveal），同片 ≤2 种，且都自带高注意力——别和其他高能量入场同帧抢戏。

九、参考实现与仓库延伸

• 本卡参考实现：demos/typography/type-entrance-moves/（ScrambleDecode.tsx / LetterDropPhysics.tsx）；
• 卡片文案源文件：gallery/source/type-entrance-moves.md 及对应的 references/shots/typography/type-entrance-moves.md；
• 同品类互斥参考：gallery/source/split-flap-title.md（翻牌屏）、gallery/source/document-typewriter-reveal.md（打字机）；
• 通用占位素材与色板：demos/_fixtures/Fixtures.tsx；
• 声音钉帧规范：references/sound-design.md §4.5；节拍钉帧：references/music-beat-sync.md。

适用前提说明：以上帧号、时长与参数均为 30fps 下的 1920×1080 demo 实测值，字数为固定占位文本（A 式 "DECODE SPEED"、B 式 "GRAVITY"）；换用真实长标题、非等宽字体或不同帧率时，需按参数表的调节手感重新标定。

• AI 技能
• 媒体生成
• 视频