Motion Skills
← Skills
Premiumローンチ

UI モーフ・エフェクト

ボタンがプレーヤーに、検索窓に結果が並ぶ。ひとつのものが形を変えます。

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

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

ほかのテーマと画面比率

UI モーフ・エフェクト · ペーパー · 9:16
テーマ: ペーパー · 9:16
UI モーフ・エフェクト · エレクトリック · 1:1
テーマ: エレクトリック · 1:1

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

5つのテーマ

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

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

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

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

プロンプト例
Use the ui-morph-effects skill with the tabs effect for Ledger: tabs "Monthly | Yearly | Lifetime", second tab title "Yearly plan", rows "Every template: included | Commercial use: included | Updates: 12 months", 1:1, my accent #2563eb, no Example tag.
スタイルプロンプト(Claude Motion または Opus 5.5)
Make an 8-second 16:9 seamless loop for [who will watch, e.g. designers], playing [where, e.g. the hero of our product page]. Use only the query and three results below. Near-black background.

A small search pill with a magnifier and the gray word "Search" widens to full width, a caret appears and the query types itself. Three result cards rise into place one after another, each with a colored tile, a bold title and one metric. An orange hover outline moves from the first result to the second. End frame: at 6.6 seconds everything reverses, so the last frame matches the first.

Query: [e.g. "spring campaign"]
Three results: [title · metric] (e.g. "Spring launch email · 48% opens")

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