Motion Skills
← Skills
Premium開発者向け

コードショーケース

シンタックスカラー付きのコード入力、ハイライト、ターミナル実行。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

必要なもの: Node.js 22+、FFmpeg、Chrome。API キー不要。

ほかのテーマと画面比率

コードショーケース · ペーパー · 9:16
テーマ: ペーパー · 9:16
コードショーケース · ノワール · 1:1
テーマ: ノワール · 1:1

同じテンプレートをテーマと画面比率を変えてレンダリングした最終フレームです。

5つのテーマ

  • インク
    ink
  • ペーパー
    paper
  • エレクトリック · デフォルト
    electric
  • ノワール
    noir
  • サンド
    sand

プロンプトでテーマ名を指定するだけで切り替わります。アクセント色・背景色・文字色を自分で指定することもできます。

インストール用プロンプト
https://claude-motion.com/skills/code-showcase/install.md を読んで手順どおりに「code-showcase」スキルをインストールし、それを使って最初の動画を作ってください。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

プロンプト例
Use the code-showcase skill with this Python snippet from our README (paste it as `code`), filename "quickstart.py", highlight "3-6", command "python quickstart.py", output "✓ Connected | ✓ 1,204 rows synced", caption "Sync any database in 6 lines".
スタイルプロンプト(Claude Motion または Opus 5.5)
Make a 14-second 16:9 code demo for [who will watch, e.g. developers], playing [where, e.g. our docs and X]. Use only the code, command and headline I give below; don't change a character. Dark navy background.

A rounded editor window with three dots and a file tab rises in. The code types out character by character with a violet block caret and syntax colors (violet keywords, teal strings, gray italic comments, orange numbers). The key lines then get a translucent violet highlight with a left border while the other lines dim. A terminal below types the command and prints green check lines. End frame: the editor fades and the headline appears.

File name and code: [your snippet, 8 to 12 lines] (e.g. deploy.ts)
Lines to highlight: [e.g. 4–8]
Command: [e.g. "$ npx northwind deploy"]
Headline: [e.g. "From prompt to production in one call"]

インストール不要:Claude Motion(Team または Enterprise)に貼り付けるか、Opus 5.5 に渡すと近い雰囲気になります。結果は実行ごとに変わります。Skill なら毎回同じ結果です。

この Skill で作った作品