Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions .claude-plugin/marketplace.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "motion-render",
"description": "motion-render: explainer videos with narration, BGM and sound effects from a theme, via Claude Motion",
"description": "motion-render: explainer videos with narration, BGM and sound effects from a theme, made with Claude Motion or as HTML",
"owner": {
"name": "umiyosh"
},
"plugins": [
{
"name": "motion-render",
"source": "./",
"description": "Make an animated explainer video from a theme with Claude Motion, add narration, BGM and sound effects, and render it to MP4."
"description": "Make an animated explainer video from a theme with Claude Motion (or as an HTML page when Motion is not available), add narration, BGM and sound effects, and render it to MP4."
}
]
}
4 changes: 2 additions & 2 deletions .claude-plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "motion-render",
"version": "0.5.0",
"description": "Make an animated explainer video from a theme with Claude Motion, add narration (Gemini TTS), BGM (Lyria) and sound effects (ElevenLabs), and render it to MP4.",
"version": "1.0.0",
"description": "Make an animated explainer video from a theme with Claude Motion (or as an HTML page when Motion is not available), add narration (Gemini TTS), BGM (Lyria) and sound effects (ElevenLabs), and render it to MP4.",
"author": {
"name": "umiyosh"
},
Expand Down
16 changes: 8 additions & 8 deletions README.ja.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
この一言で、Claude が絵コンテと原稿を書きます。続けて、ナレーション(Gemini TTS)とテーマに合う BGM(Lyria)を作ります。最後に、アニメーションを作って手元の MP4 に書き出します。アニメーションは、[Claude **Motion**](https://support.claude.com/ja/articles/17454997-claude-motion%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B) が使えるアカウントなら Motion で、使えなければ HTML で作ります。

> [!NOTE]
> motion-render はどのプランでも使えます。Claude Motion はベータ版で、Team プランと Enterprise プランでのみ使えます(2026 年 10 月時点)。ほかのプランでは、Claude がアニメーションを HTML で書きます。詳しくは「[アニメーションの 2 つの作り方](#アニメーションの-2-つの作り方)」を見てください。
> motion-render は Claude Code が動くところならどこでも使えます: Pro・Max・Team・Enterprise の各プランと、API キー(Console、Amazon Bedrock、Google Cloud、Microsoft Foundry)。無料プランには Claude Code が含まれないため使えません。Claude Motion はベータ版で、Team プランと Enterprise プランでのみ使えます(2026 年 10 月時点)。それ以外では、Claude がアニメーションを HTML で書きます。詳しくは「[アニメーションの 2 つの作り方](#アニメーションの-2-つの作り方)」を見てください。

## デモ動画

Expand All @@ -35,20 +35,20 @@ https://github.com/user-attachments/assets/eb1bf7e6-a880-4bbe-b575-7f4ec5c21672

| | Claude Motion | HTML |
| ---------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| 使えるプラン | Team・Enterprise(ベータ版) | Free・Pro・Max を含むすべてのプラン |
| 使えるプラン | Team・Enterprise(ベータ版) | Pro・Max・Team・Enterprise と API キー |
| 作り方 | Claude が Motion で作り、motion-render がそれを取得する | Claude が 1 枚の HTML を書く。土台(アニメーションのプレーヤー(GSAP)・スタイル・日本語フォント)は motion-render に入っている |
| 書き出す前の確認 | Claude が静止画を見る | 配置の自動チェック(重なり、はみ出し、隠れ、小さすぎる文字や薄すぎる文字)のあと、静止画を見る |
| 見られるもの | claude.ai 上の Motion の動画と MP4 | 手元の静止画と MP4(MP4 ができる前に共有できるリンクはない) |
| 追加の準備 | なし | なし(土台は motion-render と一緒に入る) |

## 必要なもの

| もの | 備考 |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Claude Code | プランは問いません。Team・Enterprise で [Claude Motion](https://support.claude.com/ja/articles/17454997-claude-motion%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B) が使えるときは Motion で作ります |
| Node.js 22.18 以上 | `node -v` で確認。コマンドの TypeScript を Node がそのまま実行します |
| Gemini API キー | ナレーションと BGM に使います。Google AI Studio で発行します([発行の手順](docs/api-key.ja.md)) |
| ElevenLabs API キー | 任意。効果音に使います。月額プランなしの従量課金で作れます([作成の手順](docs/elevenlabs-key.ja.md)) |
| もの | 備考 |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Claude Code | Pro・Max・Team・Enterprise のプランか API キー(無料プランは不可)。Team・Enterprise で [Claude Motion](https://support.claude.com/ja/articles/17454997-claude-motion%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B) が使えるときは Motion で作ります |
| Node.js 22.18 以上 | `node -v` で確認。コマンドの TypeScript を Node がそのまま実行します |
| Gemini API キー | ナレーションと BGM に使います。Google AI Studio で発行します([発行の手順](docs/api-key.ja.md)) |
| ElevenLabs API キー | 任意。効果音に使います。月額プランなしの従量課金で作れます([作成の手順](docs/elevenlabs-key.ja.md)) |

macOS・Linux・Windows で動きます。

Expand Down
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ An Agent Skill that turns a theme into an **animated explainer video with narrat
From that one line, Claude writes a storyboard and a narration script, generates the narration (Gemini TTS) and BGM that fits the theme (Lyria), builds the animation, and renders it to an MP4 on your machine. The animation is made with [Claude **Motion**](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion) when your account has it, and as an HTML page when it does not.

> [!NOTE]
> motion-render works on every Claude plan. Claude Motion is in beta and available only on Team and Enterprise plans (as of October 2026); on other plans Claude writes the animation as HTML instead. See [Two ways to make the animation](#two-ways-to-make-the-animation).
> motion-render works wherever Claude Code runs: the Pro, Max, Team and Enterprise plans, and API keys (Console, Amazon Bedrock, Google Cloud, Microsoft Foundry). The free Claude.ai plan does not include Claude Code. Claude Motion is in beta and available only on Team and Enterprise plans (as of October 2026); elsewhere Claude writes the animation as HTML instead. See [Two ways to make the animation](#two-ways-to-make-the-animation).

## Demo

Expand All @@ -35,20 +35,20 @@ Narration, BGM, sound effects and the MP4 are the same either way. Only the anim

| | Claude Motion | HTML |
| ---------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Plans | Team and Enterprise (beta) | All plans, including Free, Pro and Max |
| Plans | Team and Enterprise (beta) | Pro, Max, Team, Enterprise and API keys |
| How it is made | Claude builds the film in Motion, and motion-render fetches it | Claude writes one HTML page on a kit that comes with motion-render: an animation player (GSAP), styles and Japanese fonts |
| Checking before render | Claude looks at still frames | An automatic layout check (overlaps, things sticking out or hidden, text that is too small or too faint), then still frames |
| What you can look at | The Motion film on claude.ai, and the MP4 | Still frames and the MP4 on your machine (there is no link to share before the MP4) |
| Extra setup | None | None: the kit is installed with motion-render |

## Requirements

| What | Notes |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Claude Code | Any plan. On Team and Enterprise, [Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion) is used when it is available to you |
| Node.js 22.18 or later | Check with `node -v`. Node runs the command's TypeScript directly |
| Gemini API key | Used for narration and BGM. Create one in Google AI Studio ([step by step](docs/api-key.md)) |
| ElevenLabs API key | Optional, for sound effects. Pay-as-you-go works without a subscription ([step by step](docs/elevenlabs-key.md)) |
| What | Notes |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Claude Code | Pro, Max, Team or Enterprise plan, or an API key (not the free plan). On Team and Enterprise, [Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion) is used when it is available to you |
| Node.js 22.18 or later | Check with `node -v`. Node runs the command's TypeScript directly |
| Gemini API key | Used for narration and BGM. Create one in Google AI Studio ([step by step](docs/api-key.md)) |
| ElevenLabs API key | Optional, for sound effects. Pay-as-you-go works without a subscription ([step by step](docs/elevenlabs-key.md)) |

Works on macOS, Linux and Windows.

Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "motion-render-plugin",
"version": "0.5.0",
"version": "1.0.0",
"private": true,
"description": "Claude Code plugin root for motion-render. Claude Code installs these dependencies when it installs the plugin; bin/motion-render runs the CLI in skills/motion-render.",
"type": "module",
Expand Down
4 changes: 2 additions & 2 deletions skills/motion-render/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion skills/motion-render/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "motion-render",
"version": "0.5.0",
"version": "1.0.0",
"description": "Make an animated explainer video from a theme with Claude Motion (or as an HTML page when Motion is not available), add narration (Gemini TTS), BGM (Lyria) and sound effects (ElevenLabs), and render it to MP4.",
"repository": "github:umiyosh/motion-render",
"type": "module",
Expand Down
Loading