企业官网建设流程全解析

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

本篇基于镜头卡 collab-cursor-moves 展开，讲解 video-shotcraft 如何把带身份名牌的协作光标从"操作工具"升格为"演员"：A 式 dialogue-duet 用两枚具名光标在纯暗场上完成一段无 UI 的"设计-开发交接"叙事，B 式 cast-ensemble 用五枚错峰飞入的彩色光标为画布场景铺设"团队在场"的氛围层。读完本文，你可以直接按卡内参数表复刻或调校这两个 30fps / 1920×1080 的 Remotion 组件，并理解每个缓动、频率、帧窗口取值背后的可读性判断。

意图：光标为什么能当演员

库内其他镜头（如 input-trigger-moves 的 cursor-performance 式）里，光标一直是"操作工具"——点击有 payload、按下有反馈。本卡把带名牌的协作光标升格成演员：

• A 式（dialogue-duet）：蓝/绿两枚具名光标在纯暗场用位移编排讲"设计→开发交接"——画面没有一个 UI 元素，观众照样看懂剧情，光标的位置关系就是台词；
• B 式（cast-ensemble）：五枚光标错峰入场后持续漂移，充当氛围粒子，"团队在场"感全靠它，其中一枚还会停下来在便签上打字（cameo 戏份）。

SVG 光标 + 名牌 chip 的渲染成本极低、叙事密度极高，是"协作"主题最便宜的视觉论证。两式时长均为 140 帧（约 4.7s @ 30fps），能量上一高一低：A 式叙事密度高（中能量），B 式是氛围层，低中能量，可垫在任何时长的画布镜头后面。

两式选型

A 式 dialogue-duet：纯暗场对话双人舞的帧级编排

参考实现是 CursorDialogueDuet.tsx，全片由useCurrentFrame()驱动，所有位移都是显式的三次贝塞尔或圆弧参数方程——没有任何 linear 直线，因为从卡的调节手感看，"直线 + linear 立即读作程序在挪图标，曲线 + 缓动才是人在动"。

四段位移 + 两枚角色的时间码

Designer（蓝，#4C8DF6）与 Developer（绿，#2FBF71）共享中心点CX=960, CY=520、半径R=270，各自走独立轨迹：

绕位段是"礼让"的身体语言核心：两枚各走半圆弧、上下分弧同步交换，而不是同弧同向——同弧同向会读作相撞，上下分弧才是让路。源码里蓝光标还做了 120ms 级的小衔接混合（t < 0.08时与上一段终点线性插值），避免靠近段终点与圆弧起点出现速度跳变：

// 绕位：从左侧经上方绕到右侧（60–98） const t = easeInOutCubic(clamp01((f - 60) / 38)); const a = Math.PI + t * Math.PI; // 180° → 360°(上半弧) dx = CX + Math.cos(a) * (R - 40) * (1 - t * 0.15); dy = CY + Math.sin(a) * (R - 110);

注意椭圆化参数R-40（x 半径）与R-110（y 半径）：横轴比纵轴略长，绕位轨迹读作椭圆轨道而非正圆，更自然。

名牌"灯光交接"：话语权移交的量化写法

卡里最精妙的一行是名牌亮度公式，源码实现为（CursorDialogueDuet.tsx 第 45–47 行）：

opacity: badgeOpacity * (0.28 + 0.72 * badgeLit), filter: `saturate(${0.35 + 0.65 * badgeLit})`, boxShadow: badgeLit > 0.6 ? `0 0 ${22 * badgeLit}px ${color}` : 'none',

• 压暗态并非全黑：opacity保留 0.28 底值、saturate保留 0.35 底色，暗侧名牌"在场但沉默"；
• badgeLit > 0.6才加辉光阴影（半径随badgeLit线性到 22px），避免半亮状态出现模糊光斑；
• 交接发生在绕位中段70–84f，handoff = easeInOutCubic(clamp01((f - 70) / 14))，Designer 的badgeLit为1 - handoff、Developer 为handoff，一亮一暗同时反向变化。卡的调节手感是：两个都亮读不出主从，一亮一暗才是"话语权移交"。

此外靠近对话段（26–60f）蓝光标叠加了脉冲呼吸1 + sin((f-26)·0.5)·0.05，给"说话中"的状态一个微缩放信号。

转场放大：巨箭头即前景遮挡物

100–134f，绿光标gScale = 2.8 + blow * 66（easeInCubic34f），scale 从 2.8 冲向 68，同时interpolate把位置甩向画面外左上角（-160, -140），名牌同步1 - clamp01((f-102)/12)淡出。卡里点明：easeIn 加速是甩出的关键，巨箭头成为前景遮挡物，正好接 transition-hidden-cut 的语法在遮挡帧硬切下一镜。

B 式 cast-ensemble：五光标群演的氛围层参数

参考实现是 CursorCastEnsemble.tsx。背景是灰阶点阵"无限画布" + 四张灰阶便签（环境道具），便签的固定随机旋转用mulberry32(88)确定性 RNG 生成——整个组件逐帧确定、无真随机，保证渲染可复现。

群演表：错峰入场与身份编码

五枚演员以数据表驱动（CursorCastEnsemble.tsx 第 26–32 行），这是复用时最值得抄的结构：

入场用 Remotionspring({ frame: f - a.delay, fps: 30, config: { damping: 15, stiffness: 90, mass: 0.9 } })从画外弹簧减速到落位。注意Lisa 与 Niko 同为蓝色、Lucas 与 Rita 同为绿色：颜色是身份编码而非角色编码，且刻意与 A 式的主角配色（蓝 Designer / 绿 Developer）一致——卡内已知坑要求"两式同片共存时，A 的两枚主角要从 B 的群演里出（同名同色），否则读作两拨人"。

名牌 chip 在delay + 12f起用 12f 淡入并伴随translateY((1-badge)·10px)上浮：名牌跟光标同帧出现读作贴纸，随减速淡入才是"人到了自报家门"。

双频正弦漂移：为什么单频读作钟摆

落位后（settled = clamp01((f - delay - 26)/10)渐入）叠加两路正弦漂移：

const driftX = Math.sin(f * 0.055 + a.phase) * 46 + Math.sin(f * 0.021 + a.phase * 2) * 30; const driftY = Math.cos(f * 0.047 + a.phase * 1.3) * 38 + Math.cos(f * 0.017 + a.phase) * 24;

• 频率 0.055 / 0.021 rad/frame（x 轴），幅度 ±46 / ±30px，y 轴同构（0.047 / 0.017，±38 / ±24px）；
• 每枚光标phase不同且第二路频率用phase·2、phase·1.3错相——单频正弦读作钟摆，双频不同相才是"人手的随机"；
• 漂移乘在settled上，落位前不漂移，避免入场路径被污染。

打字 cameo 与结尾聚拢

Rita 的打字戏（原片出处 pitch-app 82–90s）并入中央大白便签：typedCount在 58–118f 线性吐完'Our customers love it'共 20 字符，光标条Math.floor(f / 8) % 2 === 0按 8f 周期闪、opacity 在 0.15 与 1 之间跳。卡的调节手感：装饰性打字可放到 1f/字符级，正文交互打字应回 typewriter-moves 的节奏。

结尾 92f 起 26feaseInOut聚拢到围观位（GATHER表，环绕中央便签一圈），且漂移衰减到 25% 而非归零（x = interpolate(gatherT, [0,1], [x, GATHER[i][0] + driftX * 0.25])）——完全静止的光标群读作死机，保留残余微动是"人还在"的最后证据。

参数速查表（卡片原表继承）

实战坑与协作规则

• 参数是调校起点非实战定稿：两个 demo 都在灰阶/占位素材上通过调校（B 式依赖 Fixtures.tsx 的G灰阶调色板），首次实战须以真实素材回验。
• 名牌颜色 = 身份编码，全片必须一致（蓝 = Designer 就一直蓝）；中途换色观众会以为换了人。
• 使用次数受 P4 规则约束（见 aesthetic-rules.md 的"一种动画手法全片只当一次主角"）：A 式是全片一段的"戏"，≤1 次；B 式是可全片驻场的氛围层。两式同片可共存，但 A 的两枚主角必须从 B 的群演里出（同名同色）。
• 氛围层要让戏：B 式漂移光标永远不许盖住正在阅读的主内容，漂移范围须避开主体安全区。
• 与 input-trigger-moves 的分工：那张卡的光标是"操作 UI"（点击有 payload），本卡光标是"表演给你看"（位移即剧情）；光标要点东西时回那张卡。
• 声音设计（可对照 sound-design.md）：A 绕位配轻 whoosh、交接一声柔和 chime、放大甩出一声重 whoosh；B 入场每枚一声极轻 pop，漂移段静，打字段 keyboard 轻声。

落地运行：复制、注册与验证

按 demos/README.md 的规范，这两个组件是原生 Remotion 实现，用法是 copy 进你的项目（30fps / 1920×1080）注册成 Composition 即可：

import React from 'react'; import { Composition, registerRoot } from 'remotion'; import { CursorDialogueDuet } from './CursorDialogueDuet'; import { CursorCastEnsemble } from './CursorCastEnsemble'; export const Root: React.FC = () => ( <> <Composition id="CursorDialogueDuet" component={CursorDialogueDuet} durationInFrames={140} fps={30} width={1920} height={1080} /> <Composition id="CursorCastEnsemble" component={CursorCastEnsemble} durationInFrames={140} fps={30} width={1920} height={1080} /> </> ); registerRoot(Root);

三个实操注意点：

1. 手动指定 140 帧时长：这两个组件不像 Motion 系 demo 那样导出<卡名大写蛇形>_DURATION，注册时按卡面时长 140f（约 4.7s）手动传durationInFrames。
2. B 式必须带上 Fixtures.tsx：它import { G } from '../../_fixtures/Fixtures'，copy 后需把 import 路径改成你项目里的位置；A 式仅依赖 remotion，无额外共享依赖。
3. 验证路径：新增/修改的 demo 应能通过tsc --noEmit --strict（与 CI 的 verify job 一致），并可用python3 assets/scripts/smoke-render-demos.py做渲染冒烟（自动扫描带_DURATION/_DUR导出的 demo 逐帧渲染首帧断言非空），堵住"能编译不能运行"的问题。

参考实现与原片出处

• A dialogue-duet：demos/interaction/collab-cursor-moves/CursorDialogueDuet.tsx，原片出处 figma-devmode 0:16–0:20；
• B cast-ensemble：demos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx，原片出处 figma-devmode 0:05 + miro-promo 全片 cursor-ensemble-ambience + pitch-app 82–90s 打字 cameo；
• 卡片原文（意图/选型/参数表/已知坑的完整出处）：references/shots/interaction/collab-cursor-moves.md。

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