モーフィングUIモーションデザインコードプロンプト

私に聞いてください：その形状がモーフィングする8〜12個のUI状態（例：ボタン、ローダー、プレイヤー、スライダー、トグル、タブ、チャート、コマンドパレット、トースト）、白黒または単一のアクセントカラー、そして約120 BPMのロイヤリティフリー楽曲（例：Mixkit、商用利用無料）。 DribbbleレベルのUIモーション。ひとつの形状、カットなし：すべての状態は同じ要素がサイズ、角丸、色をモーフィングし、そのコンテンツは短いブラーで入れ替わる。 カーソルが実際のクリックとドラッグで全ての変化を駆動する。明るいウォームグレーのキャンバス、白黒のコンポーネント、ひとつのクリーンなUIフォント（Geist）。 至る所にスプリング、ほんのわずかなオーバーシュートだけ。カメラがズームして各状態がフレーム全体を満たす。最後のフレームは最初のフレームと一致し、完璧にループする。 禁止：バウンスするイージング、パーティクルのバースト、グロー、UIクローム上のグラデーション、不一致なアイコンストローク、デッドタイム、テンプレートに見えるものすべて。 120 BPM、7小節、毎ビートで何かが起こる。 ボタン → ローダー → チェック → ダイナミックアイランド → プレイ/ポーズのモーフ付きミュージックプレイヤー → プログレスバーをスクラブ → 最大を超えてドラッグすると伸びるボリュームスライダーに変形 → トグルがビートに合わせて切り替わる → ノブがリキッドタブインジケーターになる → タブが展開して自己描画するチャートになり、ホバーでツールチップ → ⌘Kに折りたたまれる → 入力してフィルター → エンター → トースト → ボタンに戻る。 ひとつのHTMLファイル、正方形1440x1440。すべてのスタイルはseek(t)内の時間から計算される：CSSトランジションなし、タイマーなし、フレーム間で状態を持ち越さない。 スプリングは閉形式のステップ応答を使用する。複数回ターゲットが変わる値は、変更ごとにひとつのスプリングの合計であり、時間の純粋関数であり続ける。 タブインジケーターの両エッジは別々のスプリングに従い、先端が後端より先に伸びる。トグルノブにも同じトリックを使う。 ドラッグは直接操作：カーソルが押されている間、値はその位置から計算される。離すとどこからでもスプリングで戻る。 numpyで楽曲を分析してビートグリッドを見つけ、ダウンビートから始める。すべてのUIサウンドを計測されたピークで揃える。 Playwrightでレンダリング：1フレームあたり4サブフレーム、ffmpegのtmixでブレンドして60fpsのモーションブラーを実現。 フルレンダリングの前に1ビートにつき1フレームをレンダリングする。グリッドから外れたもの、窮屈なもの、読みにくいものを修正する。 カメラがスケールするものにwill-changeを絶対に付けない、さもないとテキストがぼやける。 モーフィングするコンテナ内で入れ替わるテキストは、独自の進入と退出のタイミングが必要、さもないと重なる。 最後のフレームを最初のフレームと同一にする、カーソル位置と速度も含めて、さもないとループがカクつく。 入力項目を私に聞いてから、コードを書く前にビートグリッド上の状態リストを見せてください。