demos: 补 shot-transitions 卡 B/C/D 三式转场参考实现

[skyzhao1223]

背景

references/shots/transition/shot-transitions.md 六式转场里,B(穿暗场直航)、C(虚焦接力)、D(黑场字卡)三式此前标着 "暂无库内实现，按参数表自行实现"。其余 A/E/F 式已有参考实现。本 PR 补齐这三式。

新增 demo

式	demo	复刻要点
B 穿暗场直航	demos/transition/shot-transitions/DarkTunnelTransition.tsx	前景 10f 顺运动方向推出 → 暗场 6f(保留微渐变+尘点让 still-moving 可感,不纯黑死场)→ 后景从 scale 0.6 + blur 迎面放大收焦入场;出与入同向、速度连续
C 虚焦接力	demos/transition/shot-transitions/FocusHandoffTransition.tsx	前景 blur 0→8px 淡出推出,同时后景 8→0px 收焦淡入反向滑入;错开 2f 起跑(同帧起跑读作整屏糊掉),焦点当剪辑点
D 黑场字卡	demos/transition/shot-transitions/BlackCardTransition.tsx	前镜淡入黑场 → 暗底字卡逐词 letterpress(正文用页面底色浅色字而非强调色,不像报错弹窗)+ 等宽小字副行 → 淡入后镜

全部用 _textures 真实页面纹理(projects-full.png / wbr-full.png)演示 A→B 双场景转场,与现有 WhipPanReal/MaskWipeReal 的组织方式一致。

验证

• 三个 demo 通过 tsc --noEmit --strict。
• 各用 remotion still 渲染关键帧成功(暗场过渡段 / 交叉窗口 / 字卡段),运行时无错、纹理正常。

备注

• 均纯 CSS filter 实现,不依赖 @remotion/motion-blur。
• 卡文档"参考实现"已更新,移除"暂无库内实现"标注。

[Vincentwei1021]

三种转场确实是本 PR 新增到库内的可复制源码，但当前实现还没有准确复现卡片定义/已有 shot-transitions-4/5/6.mp4 预览，合并前请修正：

1. DarkTunnelTransition：A 画面向右离场，而 B 基本停在中心只做缩放/模糊，没有形成同方向、连续的“穿过暗场直航”。请让 B 从同一运动轴和方向接续，并保留明确的暗场遮蔽段。
2. FocusHandoffTransition：当前从 projects-full 切到 wbr-full，是两个不同页面；镜头定义要求同一页面内的区块接力。模糊焦点的错峰本身成立，但请改成同一页面/同一空间语义。另外本 PR 自身没有加入 demos/_textures/wbr-full.png，独立合并后资源会缺失；请把依赖资源纳入本 PR，或移除这项跨 PR 隐式依赖。
3. BlackCardTransition：A 的淡出约 20 帧，超出定义的 6–10 帧；最后一个字约 f61 才完成，而字卡约 f58 已开始退场，完整标题没有 hold。请压缩淡出并把字卡退场放到标题完整出现之后。

请以已有三条 Gallery 视频为验收基准，对开场、中点、结尾逐帧比对。这里没有发现代码执行/依赖方面的安全问题，阻塞点是实现语义和独立可复制性。

[skyzhao1223]

已按 review 意见修正,请复核:

1. DarkTunnelTransition — B 景现在沿与 A 相同的运动轴(向右)从右缘滑入 + 迎面放大 + 收焦,出与入同向、速度连续,读作真正的穿暗场直航(此前 B 只在中心缩放/模糊)。

2. FocusHandoffTransition — 改为同一张 projects-full 长页内的区块接力:A 对准上部网格区(y≈180),B 对准同一页下半部 sections 区(y≈900)。不再依赖 wbr-full.png,并把 wbr-full.png 纳入本 PR(demos/_textures)消除跨 PR 隐式依赖。

3. BlackCardTransition — A 淡出压缩到 8 帧(定义 6-10);字卡 delay 改为 20+i·3 使完整标题 47f 落定,hold 到 62f 再退场(保留约 15 帧完整展示)。

均通过 tsc strict + remotion still 关键帧验证。