Skip to content

feat: shorten a run from a request to the MP4 #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
umiyosh merged 6 commits into from
Nov 5, 2026
Merged

feat: shorten a run from a request to the MP4 #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1721503
feat(cli): run API calls in parallel, log step times and assemble sce…
umiyosh Nov 5, 2026
176d47e
feat(kit): add parts for step rows, cards, time lanes, rulers and cap…
umiyosh Nov 5, 2026
294e942
docs(skill): write scenes in parallel from a shared plan and run BGM …
umiyosh Nov 5, 2026
c4f3867
fix(kit): keep ruler ticks and lit card text measurable, and write sc…
umiyosh Nov 5, 2026
6f4f02c
ci: pin the runner to ubuntu-24.04 for the Chromium install
umiyosh Nov 5, 2026
abd6a20
fix(cli): show page errors in check and round step times to whole sec…
umiyosh Nov 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ permissions:

jobs:
node-suite:
runs-on: ubuntu-latest
# ubuntu-latest moved to 26.04, which playwright-core 1.56.1 has no Chromium for (#46).
runs-on: ubuntu-24.04
timeout-minutes: 15
steps:
- name: Checkout
Expand Down
28 changes: 16 additions & 12 deletions README.ja.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,17 +137,18 @@ auto mode を使っていて、それでも実行が拒否される場合は、`

動画 1 本ごとに作業フォルダ（`<work>`）を 1 つ使います。中身と `script.json` の書き方は [SKILL.md](skills/motion-render/SKILL.md) にあります。

| コマンド | やること |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| `motion-render narrate <work>` | `script.json` の原稿からナレーションを作り、場面の秒数を `timing.json` に書く |
| `motion-render bgm <work>` | `script.json` の `bgm` の指示から BGM を作る |
| `motion-render sfx <work>` | `script.json` の `sfx` から効果音を作り、全部を順に聞ける `preview.m4a` を書く |
| `motion-render prepare <storeDir> <work>/film` | Motion: Motion から取得した映像データを、描画できる形に展開する |
| `motion-render kit <work>` | HTML: `<work>/film` にプレーヤー・スタイル・GSAP・日本語フォント・場面の秒数を置く。Claude はそのあと `film/index.html` を書く |
| `motion-render check <work>/film` | HTML: 0.1 秒ごとに配置を調べ、重なり、箱や画面からのはみ出し、ほかのものの下に隠れたもの、小さすぎる文字や薄すぎる文字を報告する |
| `motion-render stills <filmDir> <outDir> 0,5,12` | 確認用の静止画を書き出す（HTML の映像は先に配置を調べる） |
| `motion-render build <work> [out.mp4]` | ナレーション・BGM・効果音を合成し、映像と合わせて MP4 にする。どれかが足りないとき、HTML の映像が配置のチェックに通らないときは止まる |
| `motion-render --version` | 版を表示する |
| コマンド | やること |
| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `motion-render narrate <work>` | `script.json` の原稿からナレーションを作り、場面の秒数を `timing.json` に書く |
| `motion-render bgm <work>` | `script.json` の `bgm` の指示から BGM を作る |
| `motion-render sfx <work>` | `script.json` の `sfx` から効果音を作り、全部を順に聞ける `preview.m4a` を書く |
| `motion-render prepare <storeDir> <work>/film` | Motion: Motion から取得した映像データを、描画できる形に展開する |
| `motion-render kit <work>` | HTML: `<work>/film` にプレーヤー・スタイル・GSAP・日本語フォント・場面の秒数を置く。Claude はそのあと `film/index.html` を書く |
| `motion-render check <work>/film [<場面のファイル>…]` | HTML: 0.1 秒ごとに配置を調べ、重なり、箱や画面からのはみ出し、ほかのものの下に隠れたもの、小さすぎる文字や薄すぎる文字を報告する。場面のファイル（`film/scenes/` の名前）を渡すと、そのファイルの場面だけを調べる |
| `motion-render stills <filmDir> <outDir> 0,5,12` | 確認用の静止画を書き出す（HTML の映像は先に配置を調べる） |
| `motion-render build <work> [out.mp4]` | ナレーション・BGM・効果音を合成し、映像と合わせて MP4 にする。どれかが足りないとき、HTML の映像が配置のチェックに通らないときは止まる |
| `motion-render times <work>` | 工程ごとにかかった時間を表にする（各コマンドの時間と、その間の Claude の作業の時間） |
| `motion-render --version` | 版を表示する |

| 環境変数 | 効果 |
| ----------------------- | ------------------------------------------------------------------------------------------ |
Expand Down Expand Up @@ -233,14 +234,17 @@ skills/motion-render/ # スキル本体（skills CLI とプラグインの
SKILL.md # Claude が読む手順（準備、絵コンテ・原稿・BGM の決め方を含む）
package.json # motion-render コマンドと、依存の版（playwright-core, ffmpeg-static, gsap, @fontsource/noto-sans-jp, @fontsource/klee-one）
references/html-film.md # Claude が HTML の映像を書くときの決まり（配置、動き、配置のチェックの読み方）
kit/ # kit が HTML の映像に写すプレーヤーと基本のスタイル、作風のスタイル
references/pipeline.md # 工程のつながり（何を待ち、何を裏で動かすか）と、工程を足すときの決まり
kit/ # kit が HTML の映像に写すプレーヤーと基本のスタイル、作風のスタイル、部品（parts.css）
scripts/cli.ts # motion-render コマンド
scripts/audio.ts # ナレーションと BGM の生成、音声の合成
scripts/sfx.ts # 効果音の生成（ElevenLabs）、音量のそろえ方、試聴用ファイル
scripts/work.ts # script.json の検証と場面の秒数の計算
scripts/render.ts # Motion と HTML の映像をブラウザで描画する部分
scripts/kit.ts # HTML の映像のフォルダを用意する
scripts/layout.ts # HTML の映像の配置のチェック
scripts/scenes.ts # 場面のファイル（film/scenes/*.html）を index.html に差し込む
scripts/steps.ts # 各コマンドの時間を残し、工程ごとの時間の表にする（times）
scripts/snapshot.js # 配置のチェックのため、映像のページの中で箱と文字を測る
scripts/json.ts # ファイル・API・プレーヤーから来る JSON を、形を確かめながら読む
scripts/store.ts # Motion の store を映像データのフォルダに展開する
Expand Down
28 changes: 16 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,17 +137,18 @@ On the first run, Chromium (about 210 MB) and ffmpeg are downloaded automaticall

Each video uses one work directory (`<work>`). Its layout and the `script.json` format are in [SKILL.md](skills/motion-render/SKILL.md).

| Command | What it does |
| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `motion-render narrate <work>` | Generates narration from `script.json` and writes scene lengths to `timing.json` |
| `motion-render bgm <work>` | Generates the BGM from the `bgm` prompt in `script.json` |
| `motion-render sfx <work>` | Generates the sound effects in `script.json` and a `preview.m4a` of them in order |
| `motion-render prepare <storeDir> <work>/film` | Motion: expands a Motion film's data into a directory it can render |
| `motion-render kit <work>` | HTML: sets up `<work>/film` with the player, styles, GSAP, the Japanese fonts and the scene times. Claude then writes `film/index.html` |
| `motion-render check <work>/film` | HTML: checks the layout every 0.1 s for overlaps, things sticking out of their box or the frame, things hidden under others, and text that is too small or too faint |
| `motion-render stills <filmDir> <outDir> 0,5,12` | Writes still frames for checking (an HTML film is checked first) |
| `motion-render build <work> [out.mp4]` | Mixes narration, BGM and sound effects and renders the MP4. Stops if any is missing, or if an HTML film fails the layout check |
| `motion-render --version` | Prints the version |
| Command | What it does |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `motion-render narrate <work>` | Generates narration from `script.json` and writes scene lengths to `timing.json` |
| `motion-render bgm <work>` | Generates the BGM from the `bgm` prompt in `script.json` |
| `motion-render sfx <work>` | Generates the sound effects in `script.json` and a `preview.m4a` of them in order |
| `motion-render prepare <storeDir> <work>/film` | Motion: expands a Motion film's data into a directory it can render |
| `motion-render kit <work>` | HTML: sets up `<work>/film` with the player, styles, GSAP, the Japanese fonts and the scene times. Claude then writes `film/index.html` |
| `motion-render check <work>/film [<scene file>…]` | HTML: checks the layout every 0.1 s for overlaps, things sticking out of their box or the frame, things hidden under others, and text that is too small or too faint. Given scene files (names in `film/scenes/`), checks only their scenes |
| `motion-render stills <filmDir> <outDir> 0,5,12` | Writes still frames for checking (an HTML film is checked first) |
| `motion-render build <work> [out.mp4]` | Mixes narration, BGM and sound effects and renders the MP4. Stops if any is missing, or if an HTML film fails the layout check |
| `motion-render times <work>` | Shows how long each step took, as a table (each command, and Claude's work between them) |
| `motion-render --version` | Prints the version |

| Environment variable | Effect |
| ----------------------- | ------------------------------------------------------------------------------------------------------- |
Expand Down Expand Up @@ -233,14 +234,17 @@ skills/motion-render/ # The skill (read by both the skills CLI and the plugi
SKILL.md # Instructions for Claude (setup, storyboard, script and BGM choices)
package.json # The motion-render command and pinned dependencies (playwright-core, ffmpeg-static, gsap, @fontsource/noto-sans-jp, @fontsource/klee-one)
references/html-film.md # How Claude writes an HTML film: layout, motion, and reading the layout check
kit/ # The player, base styles and drawing styles that `kit` copies into an HTML film
references/pipeline.md # How the steps depend on each other (what waits, what runs in the background), and how to add a step
kit/ # The player, base styles and drawing styles that `kit` copies into an HTML film, and the parts (parts.css)
scripts/cli.ts # The motion-render command
scripts/audio.ts # Narration and BGM generation, audio mixing
scripts/sfx.ts # Sound effect generation (ElevenLabs), leveling and the listening file
scripts/work.ts # script.json validation and scene timing
scripts/render.ts # Rendering Motion and HTML films in the browser
scripts/kit.ts # Setting up an HTML film directory
scripts/layout.ts # The layout check of HTML films
scripts/scenes.ts # Putting the scene files (film/scenes/*.html) into index.html
scripts/steps.ts # Logging each command's time and making the per-step table (times)
scripts/snapshot.js # Measures boxes and text inside the film page for the layout check
scripts/json.ts # Reading JSON from files, APIs and the player without trusting its shape
scripts/store.ts # Expanding a Motion store into a film directory
Expand Down
Loading
Loading