目标（产品方向）：让用户做出专业级的产品 launch 视频。 定位：和 Figma Motion / Hyperframes 错位 —— 我们做能继续编辑、开放可移植、本地开源、无水印的视频动效编辑器。 每个任务都写了：大白话是什么 · 举个例子 · 解决什么痛点 / 机遇 · 你会看到什么 · 怎么验收（你照着点就行）。 标签：🟦追平专业工具 ｜ 🔥我们的差异化。现状与约定见 PROGRESS.md / AGENTS.md。

• 怎么做的（已拍板）：视频画面渲染到一块画布(canvas)上，最后在浏览器里直接导出 mp4（用 WebCodecs + Mediabunny）。不装任何重东西、无水印、纯本地。
• 和 HTML 线的关系：两条线共用同一套"动效大脑"（关键帧 / 缓动 / 路径 / 设计系统 / 克制）。网页线把动效画到网页上，视频线把它画到视频画布上。
• 怎么打 Hyperframes：它容易出"视频版 PPT"、镜头硬切；我们用组件级关键帧 + 运动路径 + 流动过渡做出真正顺滑的片子。它的产物（mp4）还能直接拖进我们这里当一层素材。

每做完一项，我会在这儿把它打勾，并单独发给你一段「打开哪 · 点哪 · 看到什么算过」。 通用准备：先在你自己的终端启动服务（node cli/bin/motion.js serve <端口>），浏览器强制刷新一下。

• 大白话：先把"一块会按时间播放动画的画布"做出来——文字、色块、圆、图片都能按关键帧动。
• 机遇：这是整条视频线的底座；后面加导出、加图层、加轨迹都长在它上面。
• 你会看到：一个演示视频在画布上播（紫色块缩放旋转入场、绿点横移、"Launch." 标题滑入、副标淡入）。
• 怎么验收：
  1. 启动服务后，浏览器打开 http://127.0.0.1:<端口>/video/index.html（注意要带 index.html）。
  2. 点左下角 ▶ 播放，看那段 5 秒的动画能顺畅播放。
  3. 拖动下面的时间条，画面应跟着定格到任意时刻。
  • ✅ 算过：能播、能拖、画面不卡不报错。

• 大白话：给画布加一个「导出 mp4」按钮，把这段动画真的存成一个视频文件下载下来。
• 举例：做完一段 launch 动画 → 点导出 → 得到一个 launch.mp4，能发推特、能放进任何地方。
• 痛点 / 机遇：能不能真出片是整条线的命门；而且全程在浏览器里完成、不用装无头浏览器或 ffmpeg、没有水印——这是我们相对 diffusionstudio/core（带水印）的优势。顺便把一直搁置的 D3（html→mp4）也了结了。
• 你会看到：画布下方多一个「⤓ 导出 mp4」按钮 + 一个导出进度条。
• 怎么验收：
  1. 打开 /video/index.html，点「导出 mp4」。
  2. 等进度条走完，浏览器会下载一个 .mp4 文件。
  3. 用系统播放器（QuickTime 等）打开它：画面要和网页里预览的一模一样、能正常播放、没有任何水印。
  • ✅ 算过：下载的 mp4 能放、和预览一致、无水印。

注：本砖做在独立的视频工作台页（/video/index.html）；从首页「发布视频」直达的入口是收尾小任务，稍后接。

• 大白话：从首页的「发布视频」进去，能自己往画布上加文字、色块，拖到想要的位置，再用你已经很熟的那套关键帧面板让它动。
• 举例：加一行标题「介绍 XX」→ 拖到中间 → 让它从下往上滑入；再加个色块当背景，让它慢慢放大。
• 痛点 / 机遇：V0 的动画是写死在代码里的演示；这一步开始，用户能自己做视频了。而且复用 HTML 线的关键帧面板，你学一次两边都会用。
• 你会看到：首页「发布视频」→ 打开一个空画布的视频工作台；左/右边能加图层、选图层；选中图层后出现关键帧面板（和网页编辑里那个一样）。
• 怎么验收（打开 /video/index.html）：
  1. 左边「图层」面板点 ＋文字，打一行字 → 它出现在画布上、自动选中、右边「属性」出现编辑项。
  2. 先把上面的时间条拖到 2 秒左右，再在画布上拖动这行字 → 松手后再从头播放，它会在那段时间里移动（= 拖动自动打了关键帧）。
  3. 右边每条属性（X/Y/缩放/旋转/透明）：手填数值、按 ◆ 在当前时刻打点、按 × 清掉这条动画；旁边「N 帧」是这条属性现在有几个关键帧。
  4. 再加一个 色块 / 圆 试一遍；点图层右侧 🗑 能删。
  • ✅ 算过：能加/选/删图层、拖动能自动打点、属性能手调能打点能清除、播放看到自己做的动效。

• 大白话：把一张图片、或一段已有的视频（比如你用 Hyperframes 导出的 mp4）拖进来当成一层，叠在上面继续加动效。
• 举例：把产品截图拖进来当背景，上面叠我们做的标题动画和强调框；或者把 Hyperframes 的片段当底，加一层流动的高亮。
• 痛点 / 机遇：专业 launch 视频离不开真实素材（截图、录屏、B-roll）。这一步让我们能接住你现有的 Hyperframes 产出，而不是另起炉灶。
• 你会看到：工作台多一个「上传/拖入素材」入口；拖进来的图片/视频作为一层出现在画布和图层列表里。
• 怎么验收：
  1. 在视频工作台拖入一张图片 → 它出现在画布上。
  2. 拖动它、给它打个关键帧（比如淡入）。
  3. 再拖入一小段 mp4 → 它作为一层能在画布里播放。
  4. 导出 mp4 → 打开看素材确实在视频里、动效也在。
  • ✅ 算过：图片和视频都能当图层用、能动、能导出。

• 大白话：在画布上画一条线、一个圆，或选一个标准图形（直线/弧/圆），然后让某个元素沿着这条轨迹移动。
• 举例：让一个图标沿着一条弧线飞进来；让小圆点绕着 logo 转一圈。
• 痛点 / 机遇：专业动效里大量用到"沿路径运动"，纯靠 X/Y 关键帧做不出优雅曲线。这是 Hyperframes 那种工具很难做的细活。
• 你会看到：
  • 画轨迹：在工具栏（和评论、框选、编辑同一行）多一个「✎ 轨迹」工具，点了就能在画布上画。
  • 套轨迹：选中一个元素后，Inspector 里出现「沿轨迹运动 ▸」，挑你画的那条或一个标准图形。
• 形状引申（2026-06-29 加的，你要的）：画完一条粗略轨迹后，可以把它引申成规整形状 —— 原样 / 直线 / 平滑曲线 / 圆 / 椭圆 / 方形（都从你画的那条的几何推出来，所以位置大小贴合你画的）。画个歪歪扭扭的圈能变成正圆；随手一画能取直成直线。同一条画的可以反复换不同形状。
• 怎么验收（打开 /video/index.html）：
  1. 画布上方点 **「✎ 轨迹」**→ 在画布上按住拖一条线/圈，松手（自动切回选择、提示画好了）。
  2. 点选一个元素 → 右边「属性」最下「运动轨迹」一排：点 原样 用你画的；或点 圆/椭圆/方形/直线/平滑曲线 把你画的引申成规整形状。
  3. 从头播放 → 元素沿那条线/形状移动；选中时画布上能看到轨迹线（导出的 mp4 里没有这条线）。
  4. 同一条画的可以再点别的形状换；不想要点「取消轨迹」。
  • ✅ 算过：手画能套、能引申成圆/椭圆/方/直线/平滑、播放沿线走、导出干净。

• 大白话：一个视频通常分好几段镜头（开场 → 功能展示 → 收尾）。这一步让你能排多段镜头，镜头之间是流动地过渡，而不是生硬地切换。
• 举例：第一镜"大标题"淡出的同时，第二镜"功能卡片"从右滑入并接住——像电影转场，不是 PPT 换页。
• 痛点 / 机遇：你说的 Hyperframes 出"视频版 PPT、分镜过渡僵硬"——这一条就是直接解决它，是我们最能打的差异化。
• 你会看到：时间轴上能加第二、第三个镜头；镜头之间能选过渡方式（溶解 / 推 / 缩放等）。
• 怎么验收（打开 /video/index.html，看底部「镜头」一行）：
  1. 点 ＋加镜头 → 多出「镜头2」，两镜头之间出现一个过渡下拉（默认「溶解」，可换 推/淡黑/硬切）。
  2. 点 ▶ 预览整片 → 从头连着播两段，中间是平滑过渡（溶解/推/淡黑），不是硬切；时间显示「…（整片）」。
  3. 点 导出 mp4 → 导出的是整片（两段+过渡合成一个视频）；时长≈两段相加减过渡。
  4. 点某个「镜头N」切换去编辑那一段；镜头名旁 × 删除。
  • ✅ 算过：能加/删/切镜头、能选过渡、预览整片过渡顺滑、导出是合成好的整片。

确定性部分（上传/抽帧/导入首帧/把复刻结果载入编辑器）已做并验过；AI 看图复刻那半要在你机器上跑 claude（沙箱登录不了，没法在我这验）。⚠️ 这步改了 cli/bin/motion.js（新增 /api/video-replicate），你要重启 serve。

• 大白话：在首页上传一段参考视频或 gif，AI 看懂"它大概怎么动"，帮你重建一个能继续编辑的版本（不是锁死的拷贝）。
• 举例：看到别家一个好看的 launch 片段 → 上传 → 得到一个我们这边的草稿，结构和动感接近 → 你换上自己的文字/品牌继续改。
• 痛点 / 机遇：这是"我想要那种感觉"的最低门槛入口。诚实边界：真人实拍视频没法像素级还原，AI 是"理解 + 用我们的积木近似重建"，gif（多是 UI 动效）会更准。比起"抄一个锁死的视频"，我们给的是"能继续改的草稿"——反而更好用、能换品牌。
• 你会看到：首页上传框接受视频/gif；上传后 AI 分析 → 自动生成一个画布合成，打开就能编辑。
• 怎么验收（打开 /video/index.html，看「参考复刻」一行；先重启过 serve）：
  1. 点 ⤓ 上传视频/GIF 选一个 mp4 或 gif → 旁边显示「参考：宽×高 · 秒数 · 采样N帧」（= 抽帧成功）。
  2. 点 导入首帧为背景 → 参考的第一帧作为一张图层进画布（确定性功能，一定有效）。
  3. 点 ✦ 用 AI 复刻动效 → 在你机器上跑 claude 看图 → 成功的话画布变成一段"像那个感觉"的可编辑合成（可继续改、导出）。
  • ✅ 算过（确定性部分）：上传能抽帧、首帧能导入为背景。
  • ✅ 算过（AI 部分，你机器上）：点 AI 复刻后得到一个可编辑草稿。失败会提示"需在你机器跑、已登录 claude"。

V0–V6 把"能做片→出片"打通了。阶段 W 补编辑深度、并入主 app、最后打通"选模板→给文档→生成→编辑(对话+画布)"的终极路径。

• 大白话：沿轨迹的快慢能调了——匀速/快入慢出/缓入缓出/弹，能设起止时间，还能中途停顿/变速。
• 怎么做的：给元素套轨迹后，「属性」里多出「进度」这条关键帧轨 + 速度(缓动)下拉 + 开始/结束时间。
• 怎么验收：选中已套轨迹的元素 → 「运动轨迹」下选「速度=快入慢出」看节奏变化；改「开始/结束」时间；选「进度」那条在不同时刻按 ◆ 打点做停顿。✅ 算过：能调快慢、能停顿。

• 大白话：底部多了一条真时间轴，每个图层一行，上面是它的关键帧圆点。
• 怎么验收：底部「时间轴」区——每层一行、有刻度尺和白色播放头；点圆点跳到那一刻、拖圆点改它的时间；点轨道空白处定位时间；点图层名选中它。✅ 算过：每个元素都能在时间轴里看和调关键帧。

• 大白话：加了一键入场动效（淡入/上下左右滑入/放大/弹一下）和字体、对齐。
• 怎么验收：选中元素 →「一键动效」点 淡入/弹 等，从头播放看入场；文字层能换「字体/对齐」。✅ 算过：一点就有入场动效、字体对齐能改。

• 大白话：不是另开入口。在首页对话框照常输入需求，先在那排里选「发布视频」，Send 后进同一个 workbench（左侧 AI 对话 + 设计文件 + 顶部工具条都在），只是因为做的是视频，预览区变成画布合成器（合成器自带的标题/对话/生成栏在嵌入时隐藏，由 workbench 提供）、HTML 那条时间轴自动藏起来（视频自己的时间轴在合成器里）。打开 HTML 还是原来那套编辑器。打开什么文件，workbench 就变成什么样。
• 做法：workbench 预览区里放了个 #videoFrame（嵌入 video/index.html?embed=1），主 app 与它用 postMessage 通信（load/getComp）；MA_SURFACE 跟踪选的是哪种；enterWorkbench 检测到 video 走 enterVideoWorkbench。
• 怎么验收：开主 app http://127.0.0.1:<端口>/ → 首页那排点「发布视频」→ 写一句话 → Send → 进 workbench、右侧是合成器、左侧是对话；左栏 ⌂ 回首页、再打开一个 HTML 又变回网页编辑器。✅ 算过：同一个工作台、按文件类型自适应。

• 大白话：选「发布视频」+ 一句话（+ 后续可加产品文档）→ workbench 里 agent 生成一版可编辑 launch 视频；之后两种编辑并存：右侧画布/时间轴直接改 + 左侧对话说「标题改成…/节奏快一点/加个收尾镜头」让 agent 改。
• 怎么验收（先重启过 serve）：首页选发布视频 → 写「做个关于 XX 的 launch 视频」→ Send → 在你机器跑 claude 生成 → 右侧出现生成的视频可编辑；左下对话框说改动 → agent 改。
• ✅ 确定性部分（已验）：分流/进 workbench/预览区合成器/postMessage 桥 load+getComp/对话路由到 /api/video-edit 并把结果回灌、HTML↔视频切换都对、零报错。
• ⚠️ AI 那半（看懂文档生成、按话改）要在你机器跑 claude；/api/video-generate、/api/video-edit 在 cli/bin/motion.js，改过要重启 serve。
• 下一步打磨：让评论/编辑/mark 也作用到视频画布（postMessage 协调）+ 视频项目落盘可重开 + 产品文档上传入口。

• 大白话：视频模式下，顶部那条工具全能用了——Preview/Code（Code 看合成 JSON）、桌面/平板/手机（切画面比例，手机=竖屏 720×1280）、▶ Replay motion（重放）、评论/Mark（点视频里一个元素→这次对话只改它）、编辑（视频本来就能点元素直接改）。
• 做法：视频模式下这些按钮通过 postMessage 指挥嵌入的合成器；评论/Mark 进"拾取"态，点中的图层回报给 workbench，作为 /api/video-edit 的范围（对话里自动加「只修改图层 X」）。顺手修了生成的合成图层没 id 导致点选失效的 bug（VideoComp 构造补 id）。
• 怎么验收：进视频后——点 Code 看 JSON、点桌面▾选手机看变竖屏、点 ▶ Replay 重放；点「评论」或「Mark」再点画布上一个元素→出现「针对『X』」chip→下面对话说「放大点」就只改它。✅ 都通、零报错。

• 大白话：更多动法 + 可保存复用的「动效样式/模板」 + 一键把库里的配方套到视频元素；两条线共用动效库/设计系统/动效样式。体量较大，分批做。
• ① 更多动法 ✅：一键入场预设从 7 个扩到 10 个（新增 旋转入场 rotate / 弹跳入场 bounce / 脉冲 pulse；原 淡入/上下左右滑入/放大/弹）。在 applyPreset，纯关键帧、刷新即生效。
• ② 可保存复用的「动效样式」✅（对齐 HTML 线 MA_STYLES）：属性面板「动效样式（存了复用）」段——给当前图层的关键帧起名 存为样式（存 localStorage('ma:vstyles')，跨项目/会话）；下拉选已存样式 → 应用（到选中图层）/ → 本镜头（套到本镜头全部图层）/ → 所有镜头（套到整片所有图层）/ 删除。样式只存 tracks（动效），与图层内容无关 → 可跨元素类型复用。深拷贝，套用不污染原样式。
• ③ 内置「动效模板」库 ✅（类型无关：文字/图片/视频/形状都能套）：属性面板「动效模板」段——分组下拉（入场/强调/注意/退出，共 16 个）+ 应用。VTEMPLATES+tplTracks(id,l)（按图层当前位姿+镜头时长生成 tracks，退出类锚在片尾）；applyTemplate 合并 tracks（不覆盖已有入场）。这是"套库配方到视频元素"的视频原生实现（curated 内置模板，非跨 iframe 拉 226 recipe）。
• 元素编辑补全 ✅（2026-07-01）：视频/图片图层属性面板可改宽/高（位置本就能拖拽自动打点）；右侧图层列表拖拽调层级（HTML5 drag，越靠下越在上层）；图片上传接受 JPG/PNG/SVG/WebP/GIF/AVIF（SVG 按内在比例、无内在尺寸退 16:9）。
• 怎么验收：选中任意元素（含图片/视频）→「动效模板」选一个点应用；调好关键帧 →「动效样式」存为样式 → 别的图层「应用」/「→ 所有镜头」；视频/图片属性改宽高；图层列表拖 ⋮⋮ 换上下层级；上传一张 SVG/PNG。
• ④ 打通动效库 ✅（2026-07-01）：视频属性面板「动效模板」段加「⋯ 动效库」按钮（仅 embed 时显示）→ postMessage 主 app openMotionLibrary → 主 app 开 Plugins 面板动效库 tab、置 VIDEO_RECIPE_PICK → 点任一配方 applyMotionFromPlugins 拦截 → postToVideo({applyRecipe}) → 视频 applyRecipeToElement 按 CAT_TO_TPL 把配方意图映射成视频模板套到选中元素（存 recipe/recipeName provenance）。关面板自动清 flag。这样视频线也能用主 app 的 226 条动效库了（意图近似映射，同 HTML 线 RECIPE_MOTION 思路）。改了 app/index.html（主 app）+ app/video/index.html，纯前端、刷新即生效、无需重启。
• 剩（横切，多为后端 motion.js，需重启 + 你机器验）：把 58 设计系统的配色/字体 + 动效配置接进 /api/video-generate（品牌级生成）；视频项目落盘可重开；导出为 skill。

• 大白话：不仅每个镜头能加视频图层，还能一键上传一个视频当整片背景，再勾选它出现在哪几个镜头里。一个素材、跨镜头连续播。
• 做法：引擎新增 video 图层类型（drawLayer 画 <video> 当前帧；预览时播放、scrub/暂停时 seek；导出时逐帧 seekMedia 精确取帧）。Movie 新增共享图层 shared:[{...,scenes:[镜头下标],z:'back'|'front'}]——scenes:null=全部镜头；renderFrame 用 _drawScene 把共享层按全局时间合成在镜头内容下方（有共享背景时跳过该镜头自带底色，让视频透出来）；过渡帧两侧镜头各自带自己的共享背景做混合。共享视频按整片全局时间采样 → 跨镜头连续。addShared/removeShared/setSharedScenes、toJSON 含 shared、loadMovie 回灌都打通；导出（Movie.renderFrame+seekMedia）自动含背景。
• 编辑器：镜头区下方「整片视频背景」栏——「⤓ 上传视频背景」→ 加为共享 back 层、按比例 cover 适配画布；出现 每镜头勾选框 + 透明度滑块 + 删除。编辑某镜头时该镜头的共享背景会在画布上预览（applyEditShared 把共享层挂到正在编辑的 comp 上、withEditShared 渲染，且不会在整片合成路径上重复绘制）。
• 怎么验收：进视频 → 加 1~2 个镜头 →「整片视频背景」上传一个 mp4 → 画布出现背景 → 取消勾选「镜头2」则只在镜头1出现 → ▶ 预览整片背景连续播 → 调透明度 → 导出 mp4 含背景。
• 状态：引擎 + 导出 + 编辑器全做完；纯前端（app/video/ + engine.js），刷新即生效、无需重启 serve*。引擎核心逻辑 7 项 Node 确定性测试全过（成员归属/逐镜头合成/底色跳过/toJSON 回环/播放暂停同步/移除/编辑预览不重复绘制）。⚠️ 浏览器端 UI 点测受限（chrome-devtools 浏览器配置被占用、无法连）——请在自己的实例刷新后实点一遍上传/勾选/导出。

• 品牌 & 品味 ✅ (2026-07-01)：设计系统（配色/字体）+ 动效配置（克制/活泼/电影感）已接进 /api/video-generate+/api/video-edit（拼 DESIGN.md + PACING 那句）；前端带 WB_DS||MA_DS / WB_MOTION||MA_MOTION。AI 效果需真机验。（克制提醒的可视化警告尚未搬进视频，待做。）
• 可移植 ✅ (2026-07-01)：视频合成就是一份 JSON —— 落盘可重开（/api/video-project/save→comp.json，Projects 页重开）+ 导出为 skill（exportVideoSkill 出便携 SKILL.md 内嵌 comp JSON）。⚠️ 改了 motion.js 需重启。

• Hyperframes / 多数模板视频工具：拼镜头、硬切、产物是成片，不好二次编辑。
• Figma Motion：设计稿里做、产物是交接物、付费 beta。
• 我们：可继续编辑的图层 + 关键帧 + 运动路径 + 流动过渡，浏览器内出片、无水印、本地开源、可移植。