UI モーフィングモーションデザインテンプレート
音楽と同期して要素がさまざまな状態に変形する、ループ型 UI モーションデザインを作成するための包括的なプロンプトテンプレート。
プロンプト
<inputs>
以下を私に質問してください：形状が変化する 8〜12 の UI 状態（例：ボタン、ローダー、プレイヤー、スライダー、トグル、タブ、チャート、コマンドパレット、トースト）、純粋な白黒またはアクセントカラー 1 色、そして約 120 BPM のロイヤリティフリー楽曲（例：Mixkit、商用利用可）。
</inputs>
<direction>
Dribbble レベルの UI モーション。一つの形状を途切れなく維持し、すべての状態は同じ要素がサイズ、角丸半径、色を変形させながら、内容は短いブラー効果で切り替わります。カーソルが実際のクリックやドラッグ操作で変化を駆動します。明るいウォームグレーのキャンバス、白黒のコンポーネント、クリーンな UI フォント（Geist）。全体にバネのような動きを取り入れ、わずかなオーバーシュートを許容します。カメラズームにより各状態がフレームいっぱいに映るようにします。最終フレームは最初のフレームと同一であり、シームレスにループします。
禁止事項：弾むようなイージング、パーティクルバースト、グロー効果、UI クロームへのグラデーション、アイコンストロークの不整合、無音区間、テンプレートのように見えるもの。
</direction>
<structure>
120 BPM、7 バーズ、毎ビートで何かが起こります。
ボタン → ローダー → チェックマーク → ダイナミックアイランド → 再生/一時停止がモーフィングするミュージックプレイヤー → プログレスバーをスクラブ → ドラッグで最大値を超えると伸縮するボリュームスライダーに変化 → ビートに合わせてトグルがオン → ノブがリキッドタブインジケーターに変化 → タブが開いて自己描画されるチャートになり、ホバーでツールチップ表示 → ⌘K に収束 → タイプしてフィルタリング → Enter → トースト通知 → ボタンに戻る。
</structure>
<build>
1. 単一の HTML ファイル、正方形 1440x1440。すべてのスタイルは seek(t) 内で時間から計算されます。CSS トランジション、タイマー、フレーム間の状態保持は一切使用しません。
2. スプリングアニメーションはクローズドフォームのステップ応答として実装します。ターゲットが複数回変化する値は、各変化に対するスプリングの合計として計算され、時間の純粋な関数として保たれます。
3. タブインジケーターの両端は異なるスプリングで制御され、先頭のエッジが末尾より先に伸びます。トグルノブにも同じテクニックを適用します。
4. ドラッグ操作は直接マニピュレーションです。カーソルが押されている間は、位置から値を計算します。リリース時には現在の位置からスプリングバックします。
5. numpy を使用して楽曲を分析し、ビートグリッドを取得してダウンビートから開始します。すべての UI サウンドを実測したピーク位置に配置します。
6. Playwright でレンダリング：1 フレームあたり 4 サブフレームを描画し、ffmpeg の tmix でブレンドして 60fps のモーションブラーを実現します。
7. 完全レンダリング前に、ビートごとに 1 フレームずつプレビューレンダリングします。グリッドから外れている、狭すぎる、読みにくいなどの問題を修正します。
</build>
<gotchas>
カメラがスケールする要素やテキストがぼやける可能性のある要素には will-change を絶対に設定しないでください。モーフィングコンテナ内で切り替わるテキストには、独自のエンター/エクジットタイミングが必要であり、重なりを防ぐ必要があります。最後のフレームはカーソルの位置と速度を含め、最初のフレームと完全に一致させてください。そうでないとループがガタつきます。
</gotchas>
<start>
まず入力を質問し、コードを書く前にビートグリッド上の状態リストを表示してください。
</start>
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
Claude Opus 5.5 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 動画 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 動画 プロンプトを見る
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。