Transitions Builderの紹介動画｜UIエージェント
transitions.devが提供する、1つのプロンプトからUIの部品を作るエージェントです。
FablessBridgeによる自主制作の紹介動画
概要
UIの動きまで作るエージェント「Transitions Builder」の30秒の紹介動画です。エージェントがレイアウトで止まり動きのカーブを手で調整し続ける状態を、1つのプロンプトと切り替えのライブラリで解く流れを見せています。
動画の要点
- エージェントの出力が動きなしでパッと出て消える困りごとに対し、同じモーダルが1つのプロンプトで開閉の動き付きになる場面を見せました。
- カーブを何度も手で調整してもしっくりこない困りごとに対し、同じカーブが決まった値にそろい、ライブラリの見本が並ぶ様子を見せました。
- 動きの点検の4つの状態に、困りごとの場面では×、解決の場面ではチェックを付けて違いを並べました。
動画の流れ
- 00:00ロゴがぼけから寄り、「Transitions Builder」と「UI motion & craft for AI agents」の文字が出ます。
- 00:02一人で開発する利用者がエージェントに価格のモーダルを頼むと、レイアウトはできたものの動きは付いていません。
- 00:04価格のモーダルが動きなしでパッと出たり消えたりし、transitionがnoneのままであることを示します。
- 00:07カーブ編集のハンドルがふらつき、数値と時間が変わり続けても「Not yet」のままです。
- 00:11「Ships feeling unfinished」の文字とともに、動きの点検の4つの状態に×が順に付きます。
- 00:13ロゴとサイトの文言「An agent built for UI motion & craft」で製品が登場します。
- 00:15虹色の光をまとったプロンプト欄に開閉の動きを頼むと、同じモーダルが拡大とぼかしで開閉し、4つの状態にチェックが付きます。
- 00:20同じカーブがcubic-bezierと250msの値にそろい、右ではLibraryの数字やバッジ、トグルの見本が動き続けます。
- 00:25プランの案内が出て、始め方を示します。
- 00:27ロゴと「Better UI motion starts here」、transitions.devで締めます。