motion-figure 用于制作会运动或响应读者输入的图表，支持 Claude、Cursor、Codex、OpenClaw、Hermes 和所有读取 SKILL.md 的 agent。
用途与分层 技能分为三层产物：第 1 层是课程图，用声明式 SMIL 动画或重绘 SVG 的滑块组件实现，通过 figure 围栏挂在课程内；第 2 层是机制图，用 HTML 面板展示真实系统部件，读者操作一个控件并阅读计算结论，用于独立页面、README、文章、课程外站点页面；第 3 层是抖色场，用纸张、强调色和墨色的 WebGL 有序抖点条带，支持四种固定种子运动，用于页头和节间分隔。课程运行时限制严格，第 1 层规则最多，第 2、3 层有独立参考文件。
适用场景 当课程需要解释随时间变化的过程（如 token 经过阶段、队列填充、循环重复），或一个输入改变公式输出（如学习率、温度、分块大小、批大小），或作者要求图表动画、滑块或交互时适用。需要读者改变条件观察缓存、队列、上下文窗口或路由器行为时用第 2 层；需要缓慢动态页头时用第 3 层。固定结构无时间轴与输入应改用 blueprint-figure；有独立状态模型的完整讲解页用 isometric-explainer；只需配色、字体或写作规则用 course-style。
第 1 层使用方法 先用一句话说明图中唯一的变化，需要两句话时拆成两张图。需要时间变化时用动画，数值变化时用滑块。图表名称用 kebab-case（如 request-path），先查注册表避免同名替换。代码放进 figures-<topic>.js，用 IIFE 包裹，读取 window.LF，不存在则立即返回。图函数签名为 function (host, cfg)，向 host 添加 .lf 卡片（含 .lf-head、.lf-body、.lf-cap），可返回清理函数。SVG 使用 viewBox="0 0 520 H"，通常 H 为 200 至 250。添加 title 和 desc，ID 只创建一次。动画先入场再进入慢循环；滑块先定义 state._render，再调用 LF.slider 或 LF.select，最后调用一次 state._render()。模块末尾用 LF.register 注册，课程 Markdown 加 figure 围栏并在首行写名称，后面可带 JSON 配置。学生完成检查清单，并在深浅色、375px 宽度和减少动态效果设置下查看。
页面挂载机制 Markdown 解析器把围栏转为 div.lesson-figure 并带 data-figure；构建器扫描图名找到相应模块并写清单，找不到提供者则停止构建；页面按固定顺序只加载该课需要的模块；挂载函数把第一个词作为名称、其余解析为 JSON；图函数抛错时清空宿主并记录 warning；挂载后补充 title、desc、role=img 和控件标签，有 SMIL 时加暂停按钮，一次性动画加重播按钮；离开视口、标签页隐藏或点击暂停时停止动画；减少动态效果或打印时显示静态帧。
关键规则 动画图只用 animate、animateTransform、animateMotion，不用 setInterval 或 requestAnimationFrame；每图最多 55 个 SVG 元素；入场从 opacity 0、scale 0.95 到 1，时长 0.5 至 0.6 秒，错开 0.05 至 0.4 秒；循环 2.5 至 6 秒，repeatCount=indefinite，不设 fill=freeze；keyTimes 与 values 项数相同，keySplines 比 keyTimes 少一项；循环只改变 opacity、transform、stroke-dashoffset 或路径运动。滑块只写 ES5，用 var、函数表达式和字符串拼接；state._render 中移除全部 SVG 子元素再重建；条形用长度或 stroke-dasharray 增长，不用 scale。共用规则包括颜色来自 CSS 变量、主体最多一个强调色、SVG 字至少 12 单位、图注说明每种颜色。
第 2 层机制图要求展示真实文件名、键名等，提供一个主控件，最后以文字输出根据图中数值计算的结论；35% 可见时播放一次并提供重播，只动画 transform 和 opacity；列表项错开 30 至 70ms；320px 时单列、触摸目标 40px。第 3 层抖色场读取 bg、blueprint、ink，主题改变时重绘，最多每秒 30 帧且只在可见时绘制，减少动态效果时绘制静态帧，无 WebGL 时显示静态斜线填充，条带设 aria-hidden=true。
参考资料与限制 文件包括 references/smil-rules.md、toolkit.md、tokens.md、mechanism-figures.md、dither-fields.md，以及 templates/mechanism.html 和 templates/dither.js；仓库内另有 site/lesson-figures.js 运行时与 site/figures-*.js 图表示例。收费、价格与平台支持范围暂未提供。