UIエージェント「Transitions Builder」の30秒紹介動画

Transitions Builderは、transitions.devが提供する、1つのプロンプトからUIの部品を作るエージェントです。サイトでは「Most AI tools stop at a layout. This one keeps going」と説明され、43以上の切り替えを集めたLibraryの知識をもとに動きまで仕上げます。ほかに動きを採点してプルリクエストで直すMotion Agentや、Builderで作った部品を共有するCommunityもあります。

0〜2秒　ロゴがぼけから寄り、「Transitions Builder」と「UI motion & craft for AI agents」の文字が出ます。

2〜4.5秒　一人で開発する利用者がエージェントに価格のモーダルを頼むと、レイアウトはできたものの動きは付いていません。

4.5〜7.75秒　価格のモーダルが動きなしでパッと出たり消えたりし、transitionがnoneのままであることを示します。

7.75〜11秒　カーブ編集のハンドルがふらつき、数値と時間が変わり続けても「Not yet」のままです。

11〜13秒　「Ships feeling unfinished」の文字とともに、動きの点検の4つの状態に×が順に付きます。

13〜15秒　ロゴとサイトの文言「An agent built for UI motion & craft」で製品が登場します。

15〜20秒　虹色の光をまとったプロンプト欄に開閉の動きを頼むと、同じモーダルが拡大とぼかしで開閉し、4つの状態にチェックが付きます。

20〜25秒　同じカーブがcubic-bezierと250msの値にそろい、右ではLibraryの数字やバッジ、トグルの見本が動き続けます。

25〜27.5秒　プランの案内が出て、始め方を示します。

27.5〜30秒　ロゴと「Better UI motion starts here」、transitions.devで締めます。

サイトの白地と黒い文字、プロンプト欄のまわりの淡い虹色の光、ビルダーのページのドット格子を背景に使いました。場面のつなぎは、縮んでぼけて消え、少し大きいところからぼけが取れて寄るモーダルの開閉の動きにして、製品が扱う切り替えそのものを見せています。ほかの利用者の名前や顔、Communityの作品、他社のロゴは使っていません。

製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。