javascript-animation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

JavaScript Animation (every frame drawn in code)

JavaScript动画（每一帧都用代码绘制）

Make short animated films where every pixel is computed: no images, no fonts to load, no libraries. One HTML file holds the whole piece; a headless browser seeks it frame by frame into an MP4.

制作每像素都被计算的短动画电影：没有图片，没有加载字体，没有库。一个HTML文件包含全部内容；一个无头浏览器逐帧查找并生成MP4。

Model

模型

Built and tested with Claude Opus 5.5; drawing quality depends heavily on the model. The self-check below needs image input: if the current model can't see images, say so to the user and treat visual verification as not done. Other models are untested; if the result looks crude, say that a stronger model is likely to help rather than claim it's the best possible.

使用Claude Opus 5.5构建和测试；绘图质量很大程度上取决于模型。下面的自检需要图像输入：如果当前模型无法看到图像，请告知用户并将视觉验证视为未完成。其他模型未经过测试；如果结果看起来粗糙，请说明更强的模型可能会有帮助，而不要声称这是最好的。

Default flow: don't stop to ask

默认流程：不要停下来询问

Run straight through. Pick sensible defaults and mention alternatives at delivery. Ask before starting only if there is no subject at all (e.g. "make an animation", nothing else).

Read the brief. Infer the form (story, explainer, poem, loop, interactive page), length (default 30-45 s) and aspect (default 1080x1080) from what the user said. On-screen text is in the language the user wrote the brief in; make it bilingual only if they ask or the audience clearly is.
```
references/forms.md
```
has a short structure for each form.
Write a look and sound brief from the subject and the audience. Decide each of these explicitly, with one line of why: style (ingredients in
```
references/techniques.md
```
), palette (3-5 colours with one lead), line (outlined or not,
```
LOOK.wobble
```
), ground (
```
LOOK.ground
```
), boil, type (
```
LOOK.font
```
,
```
LOOK.labelStyle
```
), framing, pace; and for sound: template (
```
groove
```
or
```
score
```
), kit, harmony, tempo. The starter's values are placeholders, not a house style. Never reuse the look or sound of a previous piece by default: two different subjects should not come out looking or sounding alike. If the user points at someone else's piece ("like that viral one"), borrow its techniques, never its characters, story or compositions.
Beat grid, storyboard and blocking, as data (
```
references/storyboard.md
```
). Tempo and sections first; then a shot list with a pace that fits the form (pace table in
```
references/storyboard.md
```
; each shot with framing, camera move, action, the beat it lands on, its sound, its transition); then the blocking tracks of one continuous world. These go into the page as
```
BPM
```
,
```
SECTIONS
```
,
```
SHOTS
```
,
```
EVENTS
```
: the scenes, camera and soundtrack all read them, so picture and sound line up by construction. Check the story logic: every beat caused by the one before, the metaphor visible in the picture.
Build from
templates/starter.html
. It is already storyboard-driven: one world drawn in world coordinates,
```
withCamera
```
per shot,
```
claim()
```
for every piece of text and every key object. Replace the placeholder palette and the demo world. Keep the contract:
```
draw(frame)
```
is a pure function of the frame number. Use
```
rng(seed)
```
/
```
hash2()
```
, never
```
Math.random
```
or
```
Date
```
.
Self-check, then render (next section). Fix and re-check until clean.
Deliver: the MP4 and the HTML (it plays live in a browser; clicking starts the sound). Then, in one or two lines, offer what can change: another look, AI music instead of synthesized, different length.

For music, use the

soundtrack

skill (default: synthesized in the page with Web Audio, no key needed).

直接执行。选择合理的默认值，并在交付时提及替代方案。仅当完全没有主题时才在开始前询问（例如“制作一个动画”，没有其他内容）。

阅读简报。 从用户所说的内容推断形式（故事、说明、诗歌、循环、交互页面）、长度（默认30-45秒）和宽高比（默认1080x1080）。屏幕文字使用用户编写简报的语言；仅当用户要求或观众明显是双语时才使其成为双语。
```
references/forms.md
```
对每种形式都有简短的结构。
根据主题和受众编写视觉和声音简报。 明确决定以下每一项，并附一行原因：风格（
```
references/techniques.md
```
中的成分）、调色板（3-5种颜色，带一个主色）、线条（是否描边，
```
LOOK.wobble
```
）、地面（
```
LOOK.ground
```
）、沸腾、字体（
```
LOOK.font
```
，
```
LOOK.labelStyle
```
）、取景、节奏；以及声音：模板（
```
groove
```
或
```
score
```
）、套件、和声、速度。起始值是占位符，不是标准风格。默认情况下永远不要重复使用以前作品的视觉或声音：两个不同的主题不应该看起来或听起来相同。如果用户指向别人的作品（“像那个病毒视频一样”），借用其技术，但绝不借用其角色、故事或构图。
拍子网格、故事板和分镜作为数据（
```
references/storyboard.md
```
）。先确定速度和章节；然后是一个符合形式节奏的镜头列表（
```
references/storyboard.md
```
中的节奏表；每个镜头带取景、相机移动、动作、落在哪个拍子上、声音、转场）；然后是一个连续世界的分镜轨道。这些以
```
BPM
```
、
```
SECTIONS
```
、
```
SHOTS
```
、
```
EVENTS
```
的形式进入页面：场景、相机和配乐都读取它们，因此画面和声音按构造对齐。检查故事逻辑：每个拍子由前一个引起，隐喻在画面中可见。
从
templates/starter.html
构建。它已经是故事板驱动的：一个在世界坐标中绘制的世界，每个镜头
```
withCamera
```
，每段文本和每个关键对象都用
```
claim()
```
。替换占位调色板和演示世界。保持契约：
```
draw(frame)
```
是帧号的纯函数。使用
```
rng(seed)
```
/
```
hash2()
```
，绝不要使用
```
Math.random
```
或
```
Date
```
。
自检，然后渲染（下一节）。修复并重新检查直到干净。
交付： MP4和HTML（它在浏览器中实时播放；点击开始声音）。然后，用一两句话提供可以更改的内容：另一种外观、AI音乐代替合成声音、不同的长度。

对于音乐，使用

soundtrack

技能（默认：在页面中使用Web Audio合成，无需密钥）。

Self-check (the agent does this; the user never sees it)

自检（代理执行；用户永远看不到）

bash

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # one frame per second, stepping off cuts
node scripts/render.mjs piece.html shot --stills 90,300,610   # specific moments
node scripts/render.mjs piece.html piece.mp4                  # full render (+ soundtrack if the page has one)
node scripts/asset-audit.mjs piece.html                       # proves zero-asset: exit 1 if anything is loaded or embedded
node scripts/layout-check.mjs piece.html                      # text colliding with text, or straddling a claimed object
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # cuts on the beat, no startle

Then two passes by eye, both in

references/qc.md

Storyboard conformance: a still at the action beat of every shot, read against its row (is the actor where the blocking says, doing what the row says?).
Director pass: the contact sheet at 2 frames per second (
```
--sheet .5
```
), scored for pace against the form, framing variety, dead frames, whether every action has its sound, and whether the look fits the audience. Do at least two rounds. Render stills of the frames you change instead of re-rendering the whole film each time.

bash

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # one frame per second, stepping off cuts
node scripts/render.mjs piece.html shot --stills 90,300,610   # specific moments
node scripts/render.mjs piece.html piece.mp4                  # full render (+ soundtrack if the page has one)
node scripts/asset-audit.mjs piece.html                       # proves zero-asset: exit 1 if anything is loaded or embedded
node scripts/layout-check.mjs piece.html                      # text colliding with text, or straddling a claimed object
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # cuts on the beat, no startle

然后通过目视检查两遍，都在

references/qc.md

中：

故事板一致性：每个镜头的动作拍子处的一个静止画面，与行对比阅读（演员是否在分镜所说的地方，执行行所说的动作？）。
导演检查：以每秒2帧的预览图（
```
--sheet .5
```
），按形式、取景多样性、死帧、每个动作是否有声音以及外观是否适合受众来评分。至少做两轮。渲染你改变的帧的静止画面，而不是每次都重新渲染整部电影。

Only if triggered

仅当触发时

When	Do
A character appears in more than one scene	Before the scenes, render the character alone (expressions + poses) and check it yourself against `references/character.md` . Characters expose anchor points (mouth, hands) so props attach to them.
The user supplied photos of real people, pets or places	Build the character from the photos with the extraction method in `references/character.md` . Photos stay local: never upload them or put them in anything published.
It's a real-person piece and the user is present	At delivery (not before), offer to use photos of key props or people to make it more theirs.
Text or a speech bubble follows a moving character	Place it with `placeFree(w, h, [above, right, left, below])` so it steps aside from anything already claimed.
On-screen text is not Latin (Chinese, Japanese...)	Use a CJK font stack; check every glyph renders (monospace fonts silently swap missing glyphs, e.g. `≈` became `=` ).
The page will be published as a web page	Deliver the HTML; keep the live preview loop and the click-to-play audio.

当	做
一个角色出现超过一个场景	在场景之前，单独渲染角色（表情+姿势）并你自己根据 `references/character.md` 检查。角色暴露锚点（嘴、手）以便道具附着。
用户提供了真人、宠物或地点的照片	使用 `references/character.md` 中的提取方法从照片构建角色。照片保持本地：永不上传或放入任何已发布的内容。
这是一个真人作品且用户在场	在交付时（不是之前），提供使用关键道具或人物的照片来使其更具个人色彩。
文本或气泡跟随移动角色	使用 `placeFree(w, h, [above, right, left, below])` 放置，使其避开任何已被声明的对象。
屏幕文本不是拉丁文字（中文、日文...）	使用CJK字体栈；检查每个字形是否渲染（等宽字体静默替换缺失字形，例如 `≈` 变成 `=` ）。
页面将作为网页发布	交付HTML；保留实时预览循环和点击播放音频。

Rules that prevent the common failures

阻止常见失败的规则

Pure function of time. No
```
requestAnimationFrame
```
state, no CSS animations, no accumulated physics: compute each frame from
```
t
```
alone, or the render and the preview disagree.
Boil, don't jitter. Change the wobble seed every 4 frames (
```
BOIL
```
), not every frame. Every frame reads as noise; ~7.5 changes a second reads as hand-drawn.
Rounded forms for bodies. Build figures from ellipses and rounded rectangles. Raw polygons with few points read as signs (a pentagon hand, a box torso).
Pick the angle that makes the pose read. A long body with stubby limbs from the side reads as a caterpillar; the same pose from the front (foreshortened) reads as a baby on its tummy.
Draw back to front, explicitly. Back hair, then body, then neck, then face, then front hair. Most "something covers the face" bugs are draw order.
Hit points on cuts and actions. Every cut and every visible action is in
```
EVENTS
```
/
```
CUES
```
; the soundtrack lands on them (see
```
soundtrack
```
).
Text never collides. Claim every text box and key object;
```
layout-check
```
must print CLEAN. A caption overlapping a monitor edge or a face looks careless, and eyes on a contact sheet miss it.

时间的纯函数。 没有
```
requestAnimationFrame
```
状态，没有CSS动画，没有累积物理：仅从
```
t
```
计算每个帧，否则渲染和预览不一致。
沸腾，而不是抖动。 每4帧改变抖动种子（
```
BOIL
```
），而不是每帧。每帧变化会被视为噪声；每秒大约7.5次变化会被视为手绘。
身体使用圆角形状。 用椭圆和圆角矩形构建图形。少点的原始多边形看起来像标志（五边形手、盒子躯干）。
选择使姿势清晰的角度。 从侧面看，长身体和短肢看起来像毛毛虫；同样的姿势从正面（透视缩短）看起来像趴着的婴儿。
从后到前明确绘制。 后发，然后身体，然后脖子，然后脸，然后前发。大多数“某物遮住脸”的bug是绘制顺序。
在剪辑和动作上击中节点。 每个剪辑和可见动作都在
```
EVENTS
```
/
```
CUES
```
中；配乐落在它们上面（见
```
soundtrack
```
）。
文本永不碰撞。 声明每个文本框和关键对象；
```
layout-check
```
必须打印CLEAN。字幕与显示器边缘或人脸重叠看起来草率，而预览图上的眼睛会漏掉它。

Files

文件

```
templates/starter.html
```
: drawing library (ink, illustration, flat/blueprint primitives, labels, paper, filtered layers),
```
withCamera
```
,
```
claim
```
/
```
placeFree
```
, and a storyboard-driven two-shot skeleton.
```
scripts/render.mjs
```
: MP4 / stills / contact sheet.
```
window.CUES
```
and
```
window.SCORE
```
are optional: on a full render it writes
```
<out>.cues.json
```
and muxes the SCORE soundtrack (no SCORE = silent MP4). Needs an even canvas size.
```
scripts/asset-audit.mjs
```
: static scan + live network check for anything loaded or embedded.
```
scripts/layout-check.mjs
```
: reads
```
window.LAYOUT
```
over the whole film and lists text collisions with their times.
```
references/storyboard.md
```
: beat grid, shot list, blocking, continuity and story logic.
```
references/techniques.md
```
: tested drawing techniques (ink, spot-color print, single-line engraving, words as shapes, marker fills, illustration shapes).
```
references/forms.md
```
: structure notes per form.
```
references/character.md
```
: only when there's a character.
```
references/qc.md
```
: the self-check list.

Requirements: Node 18+, ffmpeg, Chrome (or

npx playwright install chromium

), and

npm i playwright-core

in the folder you run the scripts from (your project, not the skill folder).

```
templates/starter.html
```
：绘图库（墨水、插图、平面/蓝图图元、标签、纸张、滤镜层），
```
withCamera
```
，
```
claim
```
/
```
placeFree
```
，以及一个故事板驱动的双镜头骨架。
```
scripts/render.mjs
```
：MP4 / 静止画面 / 预览图。
```
window.CUES
```
和
```
window.SCORE
```
是可选的：在完整渲染时写入
```
<out>.cues.json
```
并混合SCORE配乐（无SCORE = 静音MP4）。需要偶数画布尺寸。
```
scripts/asset-audit.mjs
```
：静态扫描 + 实时网络检查任何加载或嵌入的内容。
```
scripts/layout-check.mjs
```
：读取整个影片的
```
window.LAYOUT
```
并列出文本碰撞及其时间。
```
references/storyboard.md
```
：拍子网格、镜头列表、分镜、连续性和故事逻辑。
```
references/techniques.md
```
：经过测试的绘图技术（墨水、专色印刷、单线雕刻、文字作为形状、标记填充、插图形状）。
```
references/forms.md
```
：每种形式的结构说明。
```
references/character.md
```
：仅当有角色时。
```
references/qc.md
```
：自检清单。

要求：Node 18+、ffmpeg、Chrome（或

npx playwright install chromium

），以及在你运行脚本的文件夹中

npm i playwright-core

（你的项目文件夹，不是技能文件夹）。