AutoZoom 演示视频
你位于用户的项目中。阅读该功能的真实代码，将其屏幕重建为 Remotion 项目中的 React 组件，并以 AutoZoom 录制屏幕的方式“拍摄”：摄像机自动缩放聚焦于每个操作。代码构建的屏幕优于截图：文字键入真实输入框，行滑动进入，按钮改变状态，且在任何缩放级别下都保持清晰。
此技能包含的文件：
scripts/setup.mjs创建 Remotion 项目并安装（Remotion + React）。assets/remotion-template/是它复制的内容：自动缩放摄像机、窗口、光标、聚光灯、覆盖层以及一个示例屏幕和故事。每个演示只需修改src/story.tsx和src/screens/*。references/story-api.md记录了每个故事字段、屏幕钩子以及如何测量位置。在编写故事前请阅读它。references/style.md是 AutoZoom 的外观：帧、动画和覆盖层。
工作流程
1. 确定故事
就观看者应学到的一个要点达成一致，用一句话概括（"搜索任意指标，然后一键分享"）。时长保持在 6–15 秒 和 2–4 个节拍。一个视频只讲一个想法：如果有两个功能，请制作两个视频。仅当要展示的功能不明确时才询问；否则选择最令人印象深刻的流程。
2. 阅读项目
找到演示要展示的内容：
- 路由、页面或组件及其子组件；
- 设计令牌：Tailwind 配置、CSS 变量、主题文件；
- 字体、图标库、Logo；
- 真实的示例数据：fixtures、seeds、Storybook stories、mocks、tests。
永远不要发明不同的外观。演示必须像他们的产品。
3. 设置 Remotion
node <skill-dir>/scripts/setup.mjs demo # 创建 ./demo 并安装它
重复运行是安全的。将 demo/ 添加到项目的工作区，或将其独立放置。
4. 构建屏幕（demo/src/screens/<Name>.tsx）
在故事视口（默认 1440 × 900，类似浏览器窗口）中绘制它。根据项目情况选择合适的方式：
- A. 导入真实组件（React 项目）。 保真度最高。适用于组件是展示性组件的情况。给它们静态的 props 和数据，并用桩值包裹它们所需的任何 providers（主题、路由、查询客户端、i18n）。永远不要让它们从网络获取数据或读取认证信息。确保别名解析并加载它们的样式；参见
references/story-api.md› "使用项目自己的组件"。 - B. 重新构建（任何技术栈：Svelte、Vue、Angular、原生，或具有较重运行时依赖的 React）。 将页面移植到 React，使用相同的结构、类名或值、颜色、圆角、间距、字体、图标和副本，直接从源代码读取。只包含屏幕上可见的内容。
无论哪种方式：
- 使用项目中的真实数据（名称、数字、状态），永远不使用 lorem ipsum。
- 让故事目标元素处于已知位置。布局好它们以便可以描述其框，或使用调试网格（步骤 6）测量。
- 使屏幕使用
src/lib/hooks.ts中的钩子（useTyped、useAfter、useProgress、usePop、useCount）自我动画。将帧号作为 props 从故事传入，这样时间线就位于一个地方。src/screens/MockDashboard.tsx是实例。
5. 编写故事（demo/src/story.tsx）
以帧为单位（fps 60）用注释开始时间线：
0–60 概览；光标移到搜索框，点击（58）
60–130 摄像机缩放到搜索框
140–260 查询自行输入；字幕 1
268 ↵；结果更新
280–345 摄像机拉回到结果
... 摄像机 + 光标移动 → 点击 → 结果 → 提示；字幕 2
520–600 摄像机平滑拉远
然后填充 camera、cursor、clicks、keys、captions、toasts 和 spotlights，全部以屏幕像素为单位。关闭 rec：角落的覆盖层在缩放时位于应用上方。字段参考见 references/story-api.md。
6. 检查静态帧，然后渲染
cd demo
npx remotion still Demo out/f.png --frame=150 # 查看关键帧（读取 PNG）
npm run studio # 为用户提供实时预览
npm run render # → out/demo.mp4
在故事中设置 debug: true 以在屏幕上绘制带标签的 100px 网格，以便从静态帧中读取位置。在渲染前关闭它。在每个节拍检查静态帧：缩放时主题完整在帧内，光标尖端位于目标上，文字可读，覆盖层不遮挡操作。
7. 交付
给用户 MP4 路径并显示一两个帧。可选地使用 @remotion/player 将实时组合嵌入到他们的站点上（参见 references/story-api.md）。
动画规则（AutoZoom 风格）
- 自动缩放摄像机： 要么是整个窗口（1×），要么是清晰的近景（1.6–2.2×），绝无中间状态：1.1–1.5× 的缩放只会裁剪窗口并看起来破碎。缩放到重要区域，保持，直接移动到下一个目标，最后回到 1×。移动持续 60–100 帧；保持至少持续 50 帧。使用
ease: 'smooth'（默认）用于移动，'snap'仅用于快速到达。无运动模糊。 - 光标： 先到达，然后点击（按下凹陷 + 波纹，在
clicks中的每一帧自动发生），然后结果在 2–6 帧后显示。打字时，将其稍微移开，使其不覆盖文字。 - 节拍顺序： 摄像机开始移动 → 光标到达 → 点击 → 状态变化 → 提示或按键 → 字幕传达含义。
- 字幕： 像讲解员会说的话，每行 3–6 个词，每个视频最多两行。
- 覆盖层（字幕、按键、提示、REC）保持在摄像机外部：它们不缩放，且从不遮挡操作。
- 克制： 使用一种强调色，没有彩纸、旋转、弹跳文字。产品是主角。
质量检查清单
- 看起来像他们的产品：相同的字体、颜色、副本和数据。
- story.tsx 顶部有时间线注释；帧号来自一个统一位置。
- 每个节拍都用静态帧检查过；缩放时无重要内容被裁剪或被覆盖层遮挡。
- 光标准确落在目标上；点击发生在结果之前。
- 文字在 1080p 下可读；字幕简短。
-
debug已关闭，渲染无错误完成。