用途：motion-figure 让图表动起来或响应读者输入，分三层。第一层用于课程内，做声明式 SMIL 动画或重绘 SVG 的滑块组件，从 ```figure 围栏挂载；第二层做展示系统命名部件的 HTML 面板，读者操作一个控件并读取计算出的结论，用于独立页面、README、文章；第三层做 WebGL 有序抖动点阵带，用于页眉和分节。
主要能力：第一层支持随时间变化的动画和随数值变化的滑块；第二层展示真实名称与数字，含一个控件和结论行；第三层用纸色、强调色和墨色绘制四种带种子的运动。
使用方式：先写一句话说明图表展示的唯一变化，再选层级。第一层用 kebab 命名，放入 figures-<topic>.js，用 IIFE 包裹并读取 window.LF，写 function (host, cfg)，构建 .lf 卡片，SVG 用 viewBox="0 0 520 H"，加 title 和 desc，动画先加入场再一个慢循环，滑块先定义 state._render 再调用 LF.slider 或 LF.select，最后 LF.register。课程 Markdown 中写 ```figure 围栏，首行名称，后接可选 JSON 配置。第二层读 references/mechanism-figures.md 并从 templates/mechanism.html 起步；第三层读 references/dither-fields.md 并复制 templates/dither.js。
限制：动画只用 animate、animateTransform、animateMotion，禁用 setInterval 和 requestAnimationFrame；每图不超过 55 个 SVG 元素；循环 2.5 至 6 秒；滑块代码仅用 ES5；颜色取自 CSS 变量；需在浅色、深色、375px 宽和减少动态效果下检查。固定结构用 blueprint-figure，完整解释页用 isometric-explainer，配色字体用 course-style。具体收费、平台支持等资料暂未提供。