Motion Skills
← Skills
無料SNS

ビフォー / アフター

仕切り線がスイープするワイプ比較。

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/before-after/install.md を読んで手順どおりに「before-after」スキルをインストールし、それを使って最初の動画を作ってください。

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

プロンプト例
Use the before-after skill with assets/old.png and assets/new.png, title "Checkout, rebuilt", labels "v1" and "v2". 16:9.
スタイルプロンプト(Claude Motion または Opus 5.5)
Make an 8-second 16:9 before-and-after comparison for [who will watch, e.g. customers], playing [where, e.g. the redesign announcement]. Use only the two screenshots and the title I give. Dark background.

The title fades in above a large rounded frame showing the before screenshot in grayscale, labeled "BEFORE". A white vertical divider with a round handle sweeps from right to left, revealing the after screenshot in full color with an orange "AFTER" tag. End frame: the divider swings back to about three quarters and settles in the middle.

Title: [e.g. "The redesign"]
Attach: [a before screenshot and an after screenshot, same size]

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