dimensional-drawing-motion

尺寸图纸 → 动画

为使用 dimensional-drawing 技能制作的图纸制作动画。影片呈现出一支笔正在绘制图纸，同时镜头在图纸上移动的效果。遵循与绘图相同的规则：单色、使用槽位而非内容、使用可变代码、不带品牌。

从 templates/scene-dialog.js + templates/base.css 开始。这是参考影片（11 s，1920×1080，60 fps）。请基于它进行调整，不要从空白开始。

运行方式

你使用的是	使用
在 claude.ai 上使用 Motion 工件类型的 Claude	adapters/claude-motion.md。这是主要且经过优化的目标。
其他任何 Agent / 不使用 Claude	adapters/headless/：Playwright 逐帧绘制，ffmpeg 编码。运行 npm install，然后运行 node render.mjs --scene … --css … --out film.mp4。

两者使用相同的场景文件。它只需要一个小型 kit（seg, lerp, eo, ei, eio, clamp01, stage, h, css, scene），并且必须是时间的纯函数：render(t) 仅根据 t 设置每个属性，绝不依赖上一帧。这使无头渲染器可以跳转到任意帧。

其他动画库（Remotion、Motion Canvas、GSAP、Lottie 等）尚未经过测试。由于场景是纯函数，因此可以移植，但请先检查库的许可协议（Remotion 在团队人数超过 3 人时需要公司许可证）。

分镜（参考时间，以秒计）

场景时间按 t = t / 0.85 缩放，因此以下时间在屏幕上的播放速度约快 15%。修改这个系数即可加快或减慢整部影片。

1. 0 – 2.3 · 标题栏特写。 镜头以约 4.4× 对准图纸左上方。先从左上角绘制外边框，然后依次绘制引线圆、X 框、标题槽、标题栏分隔线，再绘制标题栏尺寸（S1、Z1、S5、H1）。轻微漂移（z 从 4.4 → 4.2）让画面保持动感。
2. 2.3 – 4.2 · 拉远至图纸视图。 对数缩放至约 1.7×。移动镜头时，绘制图纸其余部分：拖尾控制、主体凹槽、内容槽、标签/值槽、页脚操作区、中心线、顶部/底部/左侧/右侧的连续尺寸、半径引线、方框注释、细节圆、视图标题。
3. 4.2 – 7.2 · 图层抬升。 镜头平滑移向爆炸视图所在位置。容器 → 主体 → 槽位的副本从平面图矩阵变形为轴测矩阵，并上升至各自的 z 轴位置。先绘制描边，再显示填充（填充从 a+0.55 到 a+1.25 渐显）；否则白色填充会闪现并覆盖图纸。静态底层（视口、遮罩、阴影）在下方绘制；随后显示引线和图层标签。
4. 7.2 – 9.2 · 拉远至整张图纸。 缩放至 1.0。绘制图纸边框，然后依次以 0.3–0.5 s 的短促动画绘制注释、表格和细节视图（标题栏控件、页脚操作区、视口位置、嵌套拐角、字段、半径细节）。
5. 9.2 – 结束 · 定格。 极慢速推进（z 从 0.998 → 0.988），避免最后一帧显得静止。

总时长约 11 s。影片时长保持在 8–15 s。

模板的工作原理

• 一张 SVG，一个摄像机。 图纸在 init 中以 viewBox 0 0 1900 1060 绘制一次（比 1700 的绘图区域更宽，因此最终画面可填满 16:9，且两侧没有空白边）。包装组 .dw-cam 根据摄像机关键帧 DW_CAM = [{t, cx, cy, z}] 设置 translate(960 − cx·z, 540 − cy·z) scale(z)，并使用缓入缓出和对数缩放（exp(lerp(log z0, log z1, p))）进行插值，让缩放显得均匀。
• 元素登记。 绘制一组元素前调用 at(start, stagger, dur)。此后由 mk() 创建的每个元素都会获得一个时间窗口 [start + i·stagger, … + dur]。按绘制顺序对元素分组：轮廓 → 结构 → 槽位 → 尺寸标注 → 标签。
• 两种元素。
  • d（绘制）：实线描边。pathLength=1，strokeDasharray: 1 2，strokeDashoffset: 1 → 0，采用缓入缓出；填充在最后 45 % 的时间内淡入。
  • f（淡入）：文本、虚线槽位、中心线、包络线、剖面线。采用缓出改变不透明度。虚线不能使用描边技巧，因此以淡入呈现。
• 变形组。 mg(z, start) 创建一个组，使其矩阵从 flat = [k,0,0,k,PX,PY]（平面图）插值到 iso = [.94s,.17s,−.34s,.47s,TX,TY]，并从 ty 中减去 z·v。每帧设置 --u = 1/√|det M|，使组缩放时描边宽度保持不变。
• 性能。 数值按 1/400 量化，未变化时跳过；变形组的填充仅查询一次。

适配新组件

1. 将绘图图纸的几何信息（平面图原点 PX, PY、比例 k、r()/dimH()/dimV()/rad()/nb()/detailRef()/table()/notes() 调用）复制到 init 中，并保留模板的辅助函数。
2. 根据新平面图重写 at() 时间线：从最具特征的角落（标题栏、手柄、缺口）开始，然后在镜头拉远时绘制其余平面图。
3. 列出爆炸视图的各层（底部静止层使用 G(z)，抬升层使用 mg(z, start)），各层间隔 0.1 s。
4. 重新设置 DW_CAM 的目标：特写 → 平面图中心 → 爆炸视图中心 → 图纸中心（950, 530，z ≈ 1）。
5. 检查关键节拍的画面（场景时间 0、1.2、2.4、3.3、4.6、5、5.9、6.6、8、10、11 s）。留意：元素突然出现而非逐渐绘制、填充闪烁、移动过程中标签跑出画面、开头第一秒过于繁忙。
6. 渲染（Motion 导出，或使用 render.mjs）。

动效风格规则

• 一次只突出一件事：视线跟随画笔。尺寸标注在其测量的几何图形绘制后出现；标签在其引线之后出现。
• 摄像机和描边采用缓入缓出，淡入采用缓出。不弹跳、不超调、不使用颜色。
• 白色背景，墨色 #111，仅使用灰色。字母采用 Arimo/Helvetica 大写字样，字号与图纸相同。
• 除非另有要求，不添加音乐或旁白。

请用一到两句话回复，说明影片时长以及每个节拍展示的内容。