UIモーションデザイン モーフィングシェイプテンプレート

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