site-motion

site-motion 是做什么的？

标记为 Pro 的场景，或者在本文注释中提及但 scenes/ 目录中缺失的场景，是 site-motion Pro 场景。从注释中了解它们，并根据此处已有的场景进行构建（运行 site-motion list 查看）。

一个场景是一个时间的纯函数。无论之前发生过什么，render(t) 对于同一个 t 总是绘制相同的帧。正是这一规则使得同一个文件既可以在网站上实时播放，又可以逐帧精准地渲染为视频：导出器只需定位到每个帧时间并截图即可。

仓库根目录：包含此文件的文件夹（使用 git clone https://github.com/Shivraj97/site-motion ~/.claude/skills/site-motion 安装，或在该处链接近克隆）。需要 Node.js 22+、Chrome、ffmpeg。无需 npm 安装。在任意项目中，通过完整路径运行 CLI；构建和渲染的结果将放入该项目的 out/ 目录，--tokens / --content 参数接受相对于该项目的路径：

SM=~/.claude/skills/site-motion/bin/site-motion.mjs
node $SM init card-story --tokens ledger          # 从预设写入 ./brand.json 和 ./card-story.json 以供编辑
node $SM make card-story --tokens ./brand.json --content ./card-story.json --out public/motion/story.html

要将场景放入项目自己的源码中以便团队编辑，请使用 add 而非 make。它会将 scene.js、scene.css、content.json 和 tokens.json 复制到 public/motion/<scene>/（如果没有 public/ 目录则为 motion/<scene>/），将播放器和第三方库复制到 runtime/，并写入 <scene>.html（一个单文件嵌入）。复制的文件夹对于 build、render 和 make 命令来说是一个有效的场景：

node $SM add ledger-stamp --tokens ./brand.json --content ./ledger.json          # → public/motion/ledger-stamp/ + ledger-stamp.html
node $SM make public/motion/ledger-stamp --tokens public/motion/ledger-stamp/tokens.json --formats png,sheet

在仓库内部，可以使用短格式：

node bin/site-motion.mjs list                                   # 场景和令牌预设
node bin/site-motion.mjs make iso-blocks --tokens mint          # 构建并渲染 mp4、webp、poster
node bin/site-motion.mjs make card-story --tokens ./brand.json --content ./my-story.json --formats mp4,webm,webp,gif,png,sheet
node bin/site-motion.mjs build window-stack --tokens night --out public/hero.html   # 仅实时嵌入
node bin/site-motion.mjs render out/hero.html --formats mp4 --scale 2 --range loop        # 导出已有的构建

输出文件存放在 out/<content>-<tokens>/。--range loop 仅导出无缝循环部分（GIF 和 WebP 的默认值）；full 为介绍部分加一次循环（MP4 和 WebM 的默认值）。sheet 会生成一个 4×3 的联系表：始终生成一个并阅读它。

工作流程

整个站点（多个模块或页面）从计划开始，而不是从单个场景开始。 在项目中运行 node $SM plan：

• 使用 --brief brief.md 如果你了解各模块。这是最佳输入。根据站点的实际文案编写简报：

  # Acme：用一句话描述产品功能
  ## 首页
  - hero：英雄区的标题
  - feature：每个功能模块的标题及其下方的一行描述
  ## 定价
  - hero：…
  

• 或者使用 --url https://their-site.com[,https://their-site.com/pricing] 读取实时页面的自身标题；
• 或者使用 --pages home,features,pricing --about "…"（当没有其他信息时使用，会做通用选择；需告知用户）。

它会将每个模块映射到一个场景，每个场景只使用一次，所有场景具有统一的视觉风格。该风格基于首页英雄区的视觉风格，锁定在 site-motion.json 中。它将生成 site-motion-plan.png：每个模块以其场景的帧在品牌和视觉风格下展示，上方显示评分结果。在 plan apply 之前，向用户展示联系表并获得批准。

• 标记为 ? 的选择表示没有强匹配。阅读其注释（例如“ledger-stamp 更适合，但已被 home.hero 使用”），然后通过交换（plan swap <slot> <scene>）、重用更好的场景，或告知用户库中尚无适合该故事内容的场景来处理。
• 切勿在未告知用户的情况下对弱匹配应用 apply。

plan apply 会添加每个场景并打印每个模块的嵌入代码。然后，在每个场景的 content.json 中编写其文案，运行 sync，并以 score --project 结束。

对于单个场景，请按照以下步骤操作。

1. 首先获取设计系统。 令牌是颜色和字体的唯一来源。按以下顺序查找它们：项目中的令牌/主题文件（CSS 变量、Tailwind 配置、tokens.json），然后是实时网站（测量计算后的样式），最后再询问。将它们写入 tokens/<brand>.json（格式如下）。一旦存在调色板，切勿发明新颜色；使用 h.mix(a, b, p) 从令牌派生色调。
2. 选择能够讲述产品故事的原型场景，或编写一个新场景：

   场景	讲述的故事	渲染器
   iso-blocks	基础设施、平台、“多个部分协同工作”：带有实时数据的块状图放置在瓷砖地板上	SVG
   card-story	一个消除工作的流程：功能列表驱动产品卡片在不同状态间转换	DOM
   window-stack	“在你工作的地方工作”：应用窗口叠加在 Canvas 绘制的背景上，一个代理执行步骤	Canvas + DOM
   live-room Pro	多人协作：命名光标在应用窗口上移动，提案、投票通过、变更发布、活动滚动条	Canvas + DOM
   leaderboard	信誉与排名：贡献落在行上，积分开始计数，行重新排序	DOM
   bloom-flow	自动化：一个事件流经工作流图，每个步骤绽放为生成式花朵	Canvas + SVG
   signal-field	杂乱 → 有序：嘈杂的线条通过一个闸门后变成整洁的通道	p5.js
   drop-pile	多 → 一：工作项在真实物理效果下落入一个托盘，计数器统计数量	Matter.js（烘焙）
   galton-router	路由、审批、A/B 测试：支付款项通过钉板下落；一个规则切换开关，流量流向最佳容器	SVG（种子随机游走）
   receipt-printer	杂乱 → 有序：文档送入插槽，收据打印每个提取的字段及其置信度	DOM + SVG
   score-sheet	编排、多智能体：一次运行被写成乐谱，每个智能体工作时谱线振动	SVG
   css3d-stack	架构、层级：CSS 3D 中的真实 HTML 盒子在请求通过时分离	CSS 3D
   loom	多 → 一、集成：每个工具是一组经线，编织成一种斜纹织物，卷到产品的卷轴上	Canvas 2D
   domino-run	自动化、触发器：一个球触发一系列多米诺骨牌，分组为步骤，波浪到达时每个步骤亮起	Matter.js（烘焙）
   weather-board	可靠性、故障转移：风暴（着色器云层、雨、闪电）在状态图的一个区域形成，流量重新路由，风暴消散，零失败请求	WebGL 着色器 + DOM
   ledger-stamp	审批、合规、信任：支付款项在索引带上经过策略扫描器，APPROVED 印章和签名印章压入审计追踪；超过限额的款项被标记为 HELD，等待第二审批人	SVG + DOM
   grain-tally	指标、规模：数千粒谷物（每粒代表一批固定真实事件）以尘埃环形式呼吸，倾倒入总数的数字中，然后按来源排序为每个来源的柱状图及其精确计数；数字由数据构建，而非累加	Canvas 2D（粒子，纯 t）
   lens-of-order	杂乱 → 有序、分类、AI 视觉：一个1位抖动的漂移斑点场（尚未理解）；放大镜将每个斑点填充为其类别颜色，勾勒轮廓并标记置信度，留下一条褪色的彩色轨迹	Canvas 2D（逐细胞场，Bayer 抖动）
   water-slide-funnel	转化漏斗：骑手滑下每个阶段的滑道；每个滑道口的水池捕获该阶段的流失用户	SVG
   gold-pan Pro	即搜即得：每次按键都使淘金盘旋转，直到剩下三个定价的金块	Canvas 2D
   museum-heatmap Pro	产品分析：访客足迹使人们停留的功能周围的地板变暖；排名来自热度	Canvas 2D
   cell-division	数据库分支：主数据库分为分支，其中一个被丢弃，另一个合并回主数据库并带有更改	Canvas 2D（metaballs）
   scratch-off Pro	预测：在航空公司公告板追上之前，刮刮箔揭示真实出发时间	Canvas 2D
   sieve-tray Pro	早期检测：标记物穿过精细网筛；少数被捕获的标记物被提起并标记	Matter.js（烘焙）
   rube-goldberg Pro	之前/之后：一枚收据弹珠在五个旧装置中卡住，然后在第二个装置中从一个滑道落下	SVG
   language-balloons Pro	本地化：八种脚本的文字气泡升起并组合每个地区的句子，支持从右到左	Matter.js（烘焙）
   balloon-deploy Pro	部署：每个构建步骤给气球充气；达到100%时，释放升空	SVG
   pufferfish Pro	自动伸缩：河豚膨胀以匹配每个流量波，而固定容量的鱼被抛来抛去	SVG
   gear-tiers Pro	定价：计划绘制为露营装备，从帐篷到基地营地，带有月度/年度切换	SVG
   permission-chessboard Pro	角色与权限：每个角色棋子落在棋盘上，仅点亮其允许使用的方格	SVG
   tree-rings	年度回顾：每年一个环，宽度代表该年的忙碌程度，用凹口标记第一次	SVG
   parchment-changelog	变更日志：卷轴一次发布一个版本地展开，每个版本在发布时以墨水书写	SVG + DOM
   moving-boxes	迁移：手推车将每个旧工具盒子搬入新楼，无一丢失	SVG + DOM
   privacy-pebbles Pro	PII 脱敏：刮板将每个个人详细信息变成相同的鹅卵石；句子仍可阅读	SVG + DOM
   ant-trail Pro	自动分类：蚂蚁携带每次刷卡的收据、备忘录和审批到正确的分类账插槽	Canvas 2D
   sunrise-payroll Pro	全球薪资：日出跨越八个时区，在每个城市当地上午9点支付	SVG
   whiteout Pro	平静：繁忙的仪表板消散成雾，只留下一个重要的数字	WebGL 着色器 + DOM
   ink-flood Pro	主题、白标：色板将整个产品淹没在新的配色方案中	SVG
   integration-deck Pro	集成：每个工具是一个等轴测宏键盘上的按键；工作流以和弦形式播放，运行日志打印每个步骤	Three.js
   margin-rails Pro	来源：备忘录自行书写，同时从先前文件继承的段落从命名来源的轨道滑入	SVG + DOM
   pigeonhole-wall	记忆：文档文件放入带标签的鸽笼中，请求拉取所需的三个来源	SVG + DOM
   redline-front Pro	合同审查：审查前端扫过文档，并将其以完成修订的形式返回，带有已验证的权限	SVG + DOM
   step-rail	运作方式、入门引导：一个令牌经过编号的步骤；每个卡片打开以显示其步骤产生的内容，最后一步展示结果	SVG + DOM
   pipeline-board	工作流、流水线：卡片在看板板上逐列前进，计数和总数跟随它们	DOM
   account-health	留存、客户成功：健康表重放当月情况；一个账户滑动到“有风险”，一个行动手册触发并使其恢复	SVG
   split-wipe	之前/之后、整合：分隔线扫过分散的手动工作，每个碎片卡入一个产品表面	DOM
   roadmap-rail	路线图、里程碑：一个“今天”标记沿时间轴移动；已发布的里程碑填写完毕，关键发布打开成一个卡片	SVG
   trust-rings	安全、合规：请求通过数据周围的同心控制环；未经授权的请求被阻止并记录	SVG
   balance-scale	定价、质量与成本：三个天平，每个倾斜角度由分数计算得出；我们的天平倾向于质量	SVG
   crate-discrepancy	对账：托盘从板条箱中取出并核对装箱单；缺货的托盘浮起并带有注释	SVG + DOM
   press-qa	测试、CI：构建从印刷机中产出；一个机械臂将测试失败的构建弹出到滑道中，并在重新运行时通过	SVG
   radar-sweep	可观测性：每个正在运行的作业是雷达屏幕上的一个亮点；光标伸入并暂停失败的作业	Canvas 2D + DOM
   agent-checkout	产品UI演示，代理支付：购买请求，自动填写虚拟卡号，额度计量器移动购买金额，收据加入列表	DOM + ui-kit
   click-to-done	产品UI演示，任何单一操作功能（邀请、发送、批准、发布）：浏览器框架内的真实屏幕，光标输入、选择并点击，相机推近并拉远以显示结果	DOM + ui-kit
   dashboard-push	产品UI演示，分析与报告：标题数字随着图表绘制而构建，光标擦洗工具提示，相机推近到关键时刻，范围切换改变所有系列	DOM + SVG + ui-kit
   phone-stack	产品UI演示，移动端与通知：带有信号环的提醒到达锁屏，点击打开最新通知到应用屏幕，滑动返回主页清除通知	DOM + ui-kit
   shot-demo	从截图进行的产品UI演示：框架内客户自己的截图；光标在其真实字段中输入并点击其真实按钮，值在品牌外观下变化，聚光灯和标注落在结果上	DOM + 截图 + ui-kit

integration-deck 是3D标准：一个触感物体，一个物理动作，平面卡通色带，墨水轮廓，真实的等轴测相机和品牌字体标签。其他 Three.js 对象场景（轨道中心、排序墙、挤出 Logo、glTF 展示）在重新编写之前不包含在公开集中；3D 工具（vendor/three-full.min.js、ve

…

[为翻译而截断]