dimensional-drawing-motion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dimensional drawing → motion

尺寸标注图 → 动态影片

Animate a sheet made with the

dimensional-drawing

skill. The film reads like a pen drawing the sheet while a camera moves over it. Same rules as the drawing: monochrome, slots not content, variable codes, unbranded.

Start from

templates/scene-dialog.js

templates/base.css

. It is the reference film (11 s, 1920×1080, 60 fps). Adapt it; do not start blank.

为使用

dimensional-drawing

skill 制作的图纸制作动画。影片应呈现为画笔在绘制图纸、同时镜头在图纸上移动的效果。遵循与绘图相同的规则：单色、使用槽位而非实际内容、采用变量代码、无品牌标识。

从

templates/scene-dialog.js

templates/base.css

开始。它是参考影片（11 秒，1920×1080，60 fps）。在此基础上改编；不要从空白开始。

Where it runs

运行方式

You are	Use
Claude on claude.ai with the Motion artifact type	`adapters/claude-motion.md` . This is the primary, tuned target.
Any other agent / no Claude	`adapters/headless/` : Playwright draws each frame, ffmpeg encodes. `npm install` , then `node render.mjs --scene … --css … --out film.mp4` .

The scene is the same file in both. It only needs a tiny

kit

(

seg, lerp, eo, ei, eio, clamp01, stage, h, css, scene

) and must be a pure function of time:

render(t)

sets every property from

alone, never from the previous frame. That is what lets a headless renderer jump to any frame.

Other animation libraries (Remotion, Motion Canvas, GSAP, Lottie…) are not tested. Porting is possible because the scene is pure, but check the library's license first (Remotion needs a company license above 3 people).

你的运行环境	使用方式
在 claude.ai 上使用 Claude，并选择 Motion artifact 类型	`adapters/claude-motion.md` 。这是主要且经过调校的目标环境。
任何其他 agent / 不使用 Claude	`adapters/headless/` ：由 Playwright 逐帧绘制，ffmpeg 进行编码。执行 `npm install` ，然后运行 `node render.mjs --scene … --css … --out film.mp4` 。

两种方式使用同一个 scene 文件。它仅需一个轻量的

kit

（

seg, lerp, eo, ei, eio, clamp01, stage, h, css, scene

），并且必须是关于时间的纯函数：

render(t)

仅依据

设置所有属性，绝不依赖前一帧。正是这一点让 headless renderer 可以跳转到任意帧。

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

Choreography (reference timing, seconds)

动画编排（参考时间，秒）

Scene time is scaled with

t = t / 0.85

, so the numbers below run about 15 % faster on screen. Change that one factor to speed up or slow down the whole film.

0 – 2.3 · Close-up on the header. Camera at ~4.4× on the top-left of the plan. The outer border draws from the top-left corner, then the lead circle, the X-box, the title slot, the header divider, then the header dims (S1, Z1, S5, H1). Tiny drift (z 4.4 → 4.2) keeps it alive.
2.3 – 4.2 · Pull back to the plan view. Log-zoom to ~1.7×. While moving, the rest of the plan draws: trail control, body well, content slots, label/value slots, footer actions, centerlines, chained dims top/bottom/left/right, radius callouts, boxed notes, detail circles, view title.
4.2 – 7.2 · Layers lift. The camera eases left to where the exploded view lives. Copies of container → body → slots morph from the flat plan matrix to the axonometric matrix and rise to their z. Strokes first, fills after (fills fade in from
```
a+0.55
```
to
```
a+1.25
```
); without that a white fill flashes over the drawing. Static bottom layers (viewport, scrim, shadow) draw in under them; leaders and layer labels follow.
7.2 – 9.2 · Pull back to the full sheet. Zoom to 1.0. The sheet border draws, then notes, tables and the detail views (header controls, footer actions, viewport placement, nested corner, field, radius details) each draw in a 0.3–0.5 s burst.
9.2 – end · Hold. Very slow push (z 0.998 → 0.988) so the last frame is not dead.

Total ~11 s. Keep films 8–15 s.

场景时间按

t = t / 0.85

缩放，因此下面列出的时间在屏幕上约快 15%。修改这一个系数即可整体加速或减速影片。

0–2.3 · 标题区域特写。 镜头以约 4.4× 放大并聚焦平面图左上角。外边框从左上角开始绘制，随后依次绘制引线圆、X 框、标题槽位、标题分隔线，最后绘制标题区尺寸标注（S1、Z1、S5、H1）。轻微漂移（z 4.4 → 4.2）让画面保持生动。
2.3–4.2 · 拉远至平面视图。 以对数缩放至约 1.7×。在移动过程中，平面图其余部分继续绘出：轨迹控制、主体凹槽、内容槽位、标签/数值槽位、页脚操作项、中心线、顶部/底部/左侧/右侧的链式尺寸标注、半径引出标注、带框注释、细节圈和视图标题。
4.2–7.2 · 图层升起。 镜头平滑移向左侧的爆炸视图位置。container → body → slots 的副本从平面图矩阵变形为轴测矩阵，并升至各自的 z 高度。先绘制描边，再显示填充（填充从
```
a+0.55
```
到
```
a+1.25
```
淡入）；否则白色填充会在图纸上闪烁。静态底层（viewport、scrim、shadow）先在其下方绘出；引线和图层标签随后出现。
7.2–9.2 · 拉远至完整图纸。 缩放至 1.0。图纸边框先绘出，随后注释、表格和细节视图（标题控件、页脚操作项、viewport 位置、嵌套角、字段、半径细节）分别以 0.3–0.5 秒的短促节奏绘出。
9.2–结束 · 停留。 极缓慢推近（z 0.998 → 0.988），使最后一帧不至于完全静止。

总时长约 11 秒。影片时长应保持在 8–15 秒之间。

How the template works

模板的工作方式

One SVG, one camera. The sheet is drawn once in
```
init
```
at
```
viewBox 0 0 1900 1060
```
(wider than the 1700 drawing so the final frame fills 16:9 with no side gutters). A wrapper
```
.dw-cam
```
gets
```
translate(960 − cx·z, 540 − cy·z) scale(z)
```
from camera keys
```
DW_CAM = [{t, cx, cy, z}]
```
, interpolated with ease-in-out and log zoom (
```
exp(lerp(log z0, log z1, p))
```
), so zooms feel even.
Registration. Call
```
at(start, stagger, dur)
```
before drawing a group. Every element made by
```
mk()
```
after it gets a window
```
[start + i·stagger, … + dur]
```
. Group elements in drawing order: outline → structure → slots → dims → labels.
Two kinds of element.
- ```
d
```
  (drawn): solid strokes.
```
pathLength=1
```
  ,
```
strokeDasharray: 1 2
```
  ,
```
strokeDashoffset: 1 → 0
```
  with ease-in-out; fill fades in over the last 45 %.
- ```
f
```
  (faded): text, dashed slots, centerlines, envelopes, hatches. Opacity with ease-out. Dashed lines can't use the dash trick, so they fade.
Morph groups.
```
mg(z, start)
```
makes a group that lerps its matrix from
```
flat = [k,0,0,k,PX,PY]
```
(the plan) to
```
iso = [.94s,.17s,−.34s,.47s,TX,TY]
```
and subtracts
```
z·v
```
from ty. Set
```
--u = 1/√|det M|
```
each frame so stroke widths stay constant while the group scales.
Performance. Values are quantized to 1/400 and skipped when unchanged; fills of morph groups are queried once.

单一 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)
```
，关键帧以 ease-in-out 插值，并采用对数缩放（
```
exp(lerp(log z0, log z1, p))
```
），使缩放感觉均匀。
时序注册。 在绘制一个组之前调用
```
at(start, stagger, dur)
```
。此后由
```
mk()
```
创建的每个元素都会获得时间窗口
```
[start + i·stagger, … + dur]
```
。按绘制顺序对元素分组：外轮廓 → 结构 → 槽位 → 尺寸标注 → 标签。
两类元素。
- ```
d
```
  （drawn，绘制型）：实线描边。
```
pathLength=1
```
  、
```
strokeDasharray: 1 2
```
  、
```
strokeDashoffset: 1 → 0
```
  ，并使用 ease-in-out；填充在最后 45% 淡入。
- ```
f
```
  （faded，淡入型）：文字、虚线槽位、中心线、包络框、剖面线。使用 ease-out 调整不透明度。虚线无法使用描边动画技巧，因此采用淡入。
变形组。
```
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，并在值未变化时跳过更新；变形组的填充样式仅查询一次。

Adapting to a new component

适配新组件

Copy the drawing sheet's geometry (plan origin
```
PX, PY
```
, scale
```
k
```
, the
```
r()/dimH()/dimV()/rad()/nb()/detailRef()/table()/notes()
```
calls) into
```
init
```
, keeping the template's helpers.
Rewrite the
```
at()
```
timeline for the new plan: open on its most characteristic corner (header, handle, notch), let the rest of the plan draw while pulling back.
List the layers for the exploded view (bottom static ones with
```
G(z)
```
, lifting ones with
```
mg(z, start)
```
), 0.1 s apart.
Retarget
```
DW_CAM
```
: close-up → plan center → exploded center → sheet center (
```
950, 530
```
, z ≈ 1).
Check frames at the key beats (0, 1.2, 2.4, 3.3, 4.6, 5, 5.9, 6.6, 8, 10, 11 s scene time). Look for: elements popping instead of drawing, fills flashing, labels outside the frame mid-move, a busy first second.
Render (Motion export, or
```
render.mjs
```
).

将图纸的几何结构（平面图原点
```
PX, PY
```
、缩放
```
k
```
，以及
```
r()/dimH()/dimV()/rad()/nb()/detailRef()/table()/notes()
```
调用）复制到
```
init
```
中，同时保留模板的辅助函数。
为新平面图重写
```
at()
```
时间线：开场聚焦最有辨识度的角部（标题、把手、缺口），并在拉远的同时绘制平面图其余部分。
列出爆炸视图中的图层（底部静态图层使用
```
G(z)
```
，升起图层使用
```
mg(z, start)
```
），各图层相隔 0.1 秒。
重新设定
```
DW_CAM
```
：特写 → 平面图中心 → 爆炸视图中心 → 图纸中心（
```
950, 530
```
，z ≈ 1）。
检查关键节拍处的帧（场景时间 0、1.2、2.4、3.3、4.6、5、5.9、6.6、8、10、11 秒）。重点排查：元素突然出现而非绘出、填充闪烁、移动途中标签超出画面，以及第一秒过于繁忙。
渲染（Motion 导出，或
```
render.mjs
```
）。

Style rules for motion

动态风格规则

One thing leads at a time: the eye follows the pen. Dims come after the geometry they measure; labels after their leaders.
Ease-in-out for camera and strokes, ease-out for fades. No bounce, no overshoot, no color.
Background white, ink
```
#111
```
, grays only. Arimo/Helvetica caps lettering, same sizes as the sheet.
No music or voice unless asked.

Reply in one or two sentences with the film's length and what each beat shows.

一次只让一个元素引导视线：视线跟随画笔。尺寸标注应出现在其所测量的几何结构之后；标签应出现在引线之后。
镜头运动和描边使用 ease-in-out，淡入淡出使用 ease-out。不得使用回弹、过冲或彩色。
背景为白色，墨色为
```
#111
```
，仅使用灰阶。Arimo/Helvetica 全大写字型，字号与图纸保持一致。
除非用户要求，否则不要添加音乐或旁白。

用一到两句话回复影片长度以及每个节拍所展示的内容。