prod-by-claude

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

prod-by-claude

Turn a Strudel track into a live-coding video. The music is rendered offline from the code, and the video is driven by Strudel's own note events, so every highlight lands on its note.

将 Strudel 曲目制作成 Live Coding 视频。音乐由代码离线渲染，视频则由 Strudel 自身的音符事件驱动，因此每个高亮都会精准落在对应音符上。

When to use

何时使用

The user wants a video of Strudel code playing: "make a video of this Strudel track", "show the code lighting up", "live-coding video", or a track the agent composed for them.
Not for other audio or DAW projects, talking-head videos, or visualizers of an existing audio file with no Strudel code (use the HyperFrames music workflow for those).

用户希望制作一段展示 Strudel 代码演奏的视频："make a video of this Strudel track"、"show the code lighting up"、"live-coding video"，或是一段由 Agent 为其创作的曲目。
不适用于其他音频或 DAW 项目、talking-head 视频，以及没有 Strudel 代码的现有音频文件可视化项目（此类情况使用 HyperFrames music workflow）。

Inputs

输入

A Strudel track (
```
.strudel.js
```
), or a brief to compose one. Compose with references/composing.md. With no track, start from assets/example/track.strudel.js (synth-only, no samples).
The arrangement: length in bars, and which bars are builds and drops.

一个 Strudel 曲目（
```
.strudel.js
```
），或一份用于创作曲目的需求说明。使用 references/composing.md 进行创作。如果没有曲目，则以 assets/example/track.strudel.js 为起点（仅使用 synth，不含 samples）。
编排方案：长度（以小节计），以及哪些小节为 build 和 drop。

Tools and dependencies

工具与依赖

Node 22 or newer, npm, and the HyperFrames CLI pinned to
```
hyperframes@0.8.70
```
(run through
```
npx --yes
```
).
```
tools/package.json
```
pins everything else:
```
@strudel/web
```
1.3.0 (AGPL-3.0, installed from npm, not bundled here),
```
puppeteer-core
```
25.12.0,
```
@puppeteer/browsers
```
3.2.3, and the OFL fonts
```
@fontsource/jetbrains-mono
```
5.3.0 and
```
@fontsource/rubik-mono-one
```
5.3.0.
Chrome for Testing 149.0.7827.22 for recording, or any Chrome given as
```
CHROME=<path>
```
.
No credentials.

Node 22 或更高版本、npm，以及固定为
```
hyperframes@0.8.70
```
的 HyperFrames CLI（通过
```
npx --yes
```
运行）。
```
tools/package.json
```
固定了其余全部依赖：
```
@strudel/web
```
1.3.0（AGPL-3.0，从 npm 安装，此处不打包）、
```
puppeteer-core
```
25.12.0、
```
@puppeteer/browsers
```
3.2.3，以及 OFL 字体
```
@fontsource/jetbrains-mono
```
5.3.0 和
```
@fontsource/rubik-mono-one
```
5.3.0。
用于录制的 Chrome for Testing 149.0.7827.22，或通过
```
CHROME=<path>
```
指定的任意 Chrome。
无需凭据。

Workflow

工作流

Create the project (plain file copies):

node <skill>/scripts/new-project.mjs <project-dir> [track.strudel.js]

Edit
```
<project-dir>/video.json
```
:
```
bars
```
,
```
builds
```
,
```
drops
```
,
```
themes
```
,
```
storm
```
parts,
```
signoff
```
(references/video.md, references/themes.md). The template already matches the example track, so skip this step when using it.
From
```
<project-dir>/tools
```
, install the pinned tools:
```
npm install
```

From

<project-dir>/tools

, if

CHROME

is not set, fetch Chrome for Testing:

npx --yes @puppeteer/browsers@3.2.3 install chrome@149.0.7827.22 --path .chrome

From
```
<project-dir>/tools
```
, record:
```
node record.mjs ..
```
It takes about 5-7 minutes for 32 bars (give it a 10 minute timeout), prints levels per 4 bars and warns on clipping. Fix the track and record again until the drops peak at or below -2 dBFS with no clipped samples.
From
```
<project-dir>/tools
```
, build the video data:
```
node build-data.mjs ..
```
It prints the snapshot command for step 7.
From
```
<project-dir>
```
, run
```
npx --yes hyperframes@0.8.70 check .
```
, then the printed snapshot command, and look at every frame (what to look for: references/video.md).
From
```
<project-dir>
```
, render locally when the user asks for the video:
```
npx --yes hyperframes@0.8.70 render . -o renders/video.mp4
```
HyperFrames cloud render (
```
npx --yes hyperframes@0.8.70 cloud render .
```
) spends credits on the user's account: use it only after the user explicitly agrees.

If the track changes, repeat steps 5-7. If

video.json

changes, repeat steps 6-7.

创建项目（直接复制文件）：

node <skill>/scripts/new-project.mjs <project-dir> [track.strudel.js]

编辑
```
<project-dir>/video.json
```
：配置
```
bars
```
、
```
builds
```
、
```
drops
```
、
```
themes
```
、各
```
storm
```
part 和
```
signoff
```
（references/video.md、references/themes.md）。模板已与示例曲目匹配，因此使用示例曲目时可以跳过此步骤。
在
```
<project-dir>/tools
```
中安装固定版本的工具：
```
npm install
```

在

<project-dir>/tools

中，如果未设置

CHROME

，则获取 Chrome for Testing：

npx --yes @puppeteer/browsers@3.2.3 install chrome@149.0.7827.22 --path .chrome

在
```
<project-dir>/tools
```
中录制：
```
node record.mjs ..
```
32 小节大约需要 5-7 分钟（请设置 10 分钟超时）；录制过程每 4 小节输出一次电平，并警告削波问题。调整曲目并重新录制，直到各 drop 的峰值不高于 -2 dBFS，且没有削波采样。
在
```
<project-dir>/tools
```
中构建视频数据：
```
node build-data.mjs ..
```
它会输出第 7 步所需的 snapshot 命令。
在
```
<project-dir>
```
中运行
```
npx --yes hyperframes@0.8.70 check .
```
，然后运行打印出的 snapshot 命令，并逐帧检查画面（检查要点见 references/video.md）。
当用户要求提供视频时，在
```
<project-dir>
```
中进行本地渲染：
```
npx --yes hyperframes@0.8.70 render . -o renders/video.mp4
```
HyperFrames cloud render（
```
npx --yes hyperframes@0.8.70 cloud render .
```
）会消耗用户账户中的 credits，仅在用户明确同意后使用。

如果曲目发生变化，请重复步骤 5-7；如果

video.json

发生变化，请重复步骤 6-7。

Outputs

输出

```
assets/bgm.wav
```
(the mix),
```
assets/stem-<part>.wav
```
(the scope part),
```
data/events.json
```
(every note with its code locations),
```
data/events.js
```
(what the composition reads).
```
renders/video.mp4
```
, 1080×1080, 30 fps, about
```
pre + bars × 240 / bpm + 4.6
```
seconds with a sign-off.

```
assets/bgm.wav
```
（混音）、
```
assets/stem-<part>.wav
```
（对应的 scope part）、
```
data/events.json
```
（每个音符及其代码位置）、
```
data/events.js
```
（供 composition 读取）。
```
renders/video.mp4
```
，1080×1080，30 fps；带片尾字幕时，时长约为
```
pre + bars × 240 / bpm + 4.6
```
秒。

Side effects

副作用

Files: writes only inside
```
<project-dir>
```
.
```
build-data.mjs
```
rewrites the
```
data-duration
```
and audio
```
data-start
```
attributes in
```
index.html
```
.
Network:
```
npm install
```
(npm registry), the Chrome for Testing download (about 150 MB from Google's storage), and GSAP from cdn.jsdelivr.net when the composition loads.
```
snapshot
```
uploads frames to a hosted captioning model unless given
```
--describe false
```
, so always pass it. Recording runs on 127.0.0.1 only and fetches nothing unless the track itself loads samples (then from the sample URLs the track names).
Audio: recording is headless and muted; nothing plays out loud.
Cost: none, unless the user approves a cloud render.

文件：仅在
```
<project-dir>
```
内写入文件。
```
build-data.mjs
```
会重写
```
index.html
```
中的
```
data-duration
```
和音频
```
data-start
```
属性。
网络：
```
npm install
```
（npm registry）、Chrome for Testing 下载（从 Google 的存储下载约 150 MB），以及 composition 加载时从 cdn.jsdelivr.net 获取 GSAP。除非提供
```
--describe false
```
，否则
```
snapshot
```
会将帧上传到托管的字幕模型，因此始终传入
```
--describe false
```
。录制仅在 127.0.0.1 上运行，不会获取任何内容，除非曲目自身加载了 samples（此时从曲目指定的 sample URL 获取）。
音频：录制以 headless 模式运行且保持静音，不会外放声音。
成本：无费用，除非用户同意使用 cloud render。

Verify

验证

```
record.mjs
```
exits 0, lists every part, and reports no clipping.
```
check
```
passes with 0 errors.
```
canvas_overflow
```
info notes for code lines below the frame are expected.
In the snapshots: line 1 typing at 0.6 s, the first part blooming and highlighted after
```
pre
```
, graffiti in each drop, the decode after each drop, the sign-off at the end.
In the render: the first sound lands at
```
pre
```
seconds, and the video ends in black.

```
record.mjs
```
的退出码为 0，列出所有 part，并且未报告削波。
```
check
```
通过检查，0 个错误。超出画面的代码行所产生的
```
canvas_overflow
```
信息提示属于预期情况。
在 snapshots 中：第 1 行在 0.6 秒时输入，第一个 part 在
```
pre
```
之后绽放并高亮，每个 drop 中都有涂鸦效果，每个 drop 之后都有 decode 效果，末尾有片尾字幕。
在最终渲染中：第一个声音在第
```
pre
```
秒响起，视频以黑屏结束。

Rights

权利

The music written in Strudel belongs to its author; Strudel's AGPL covers the software, not the tracks. Built-in synths need no clearance. Samples loaded by a track are other people's recordings: use only sounds the user owns or has cleared.

在 Strudel 中编写的音乐归其作者所有；Strudel 的 AGPL 许可适用于软件，而不适用于曲目。内置 synth 无需获得额外授权。曲目加载的 samples 是他人的录音：仅使用用户拥有或已获授权的声音。