提示詞
<inputs>
次の3つを私に質問すること：図形が変身する8〜12個の画面部品（例：ボタン、読み込み中の表示、音楽プレーヤー、音量スライダー、オン/オフのスイッチ、タブ、グラフ、⌘Kで開く検索窓、一瞬出る通知）、色は完全な白黒か差し色1色か、そして120BPM（1分間に120拍のテンポ）前後の著作権フリーの曲（例：Mixkit、商用利用無料）。
</inputs>
<direction>
デザイナー向け作品サイト「Dribbble」に載るレベルの、洗練された画面の動き。図形は1つだけで、絶対に場面を切り替えない。すべての状態は、同じ1つの図形が大きさ・角の丸み・色を変えながら形を変えていく動きで表し、中身は短いぼかしをはさんで入れ替える。カーソルが本物のクリックとドラッグで、すべての変化を起こす。背景はあたたかみのある明るいグレー、部品は白と黒、画面の文字は日本語で、日本語フォントはNoto Sans JP、英数字と記号はGeist（1種類のフォント）。動きはすべて「ばね」のような自然な動きにし、行き過ぎ（跳ね返り）はごくわずかまで。カメラはズームして、各状態が画面いっぱいになるようにする。最後のフレームは最初のフレームと同じにして、ループさせる。
禁止：弾むような動き、粒が飛び散る演出、光るにじみ、部品へのグラデーション、線の太さが揃っていないアイコン、何も起きない無駄な間、テンプレっぽく見えるもの全般。
</direction>
<structure>
120BPM、7小節（約14秒）、毎拍なにかが起きる。
ボタン → 読み込み中の表示 → チェック → iPhoneのダイナミックアイランド風の表示 → 再生/一時停止のマークが滑らかに変わる音楽プレーヤー → 再生バーのつまみをドラッグして再生位置を動かす → 音量スライダーに変身（最大を超えてドラッグするとゴムのように伸びる） → オン/オフのスイッチが拍に合わせて切り替わる → スイッチのつまみが液体のように動くタブの選択表示になる → タブが開いて、自分で線を描いていくグラフに（カーソルを乗せると吹き出しが出る） → ⌘Kの検索窓に折りたたまれる → 入力して候補を絞り込む → Enter → 一瞬出る通知 → ボタンに戻る。
</structure>
<build>
1. HTMLファイル1つ、正方形1440x1440。すべての見た目は seek(t)（時間tを渡すと、その瞬間の画面が決まる関数）の中で、時間から計算する。CSSトランジション（自動アニメーション機能）もタイマーも使わず、フレーム間で状態を持ち越さない。
2. 「ばね」の動きは、式で直接求められる形（閉形式のステップ応答）にする。目標が何度も変わる値は、変化ごとに1つずつ計算した動きを足し合わせる。そうすれば、いつでも時間だけで値が決まる。
3. タブの選択表示は、左端と右端を別々のばねで動かし、進む方向の先端が後ろ側より先に伸びるようにする。スイッチのつまみも同じ手法。
4. ドラッグは直接操作：カーソルを押している間、値はカーソル位置から計算する。離したら、その位置からばねで戻る。
5. 曲はnumpy（計算用のツール）で解析して拍の位置を割り出し、小節の頭の拍から始める。操作音は、測定した音のピークの位置に置く。
6. Playwright（ブラウザを自動操作して画面を画像に書き出すツール）で描画する。1フレームあたり4コマ分を書き出して、ffmpeg（動画を作るツール）のtmixで重ねてモーションブラー（動きの残像）をかけ、60fpsにする。
7. 全編を書き出す前に、1拍ごとに1フレームだけ書き出して確認する。拍からズレているもの、窮屈なもの、読みにくいものを直す。
</build>
<gotchas>
カメラで拡大縮小される要素には will-change（ブラウザの描画設定）を絶対に付けない。付けると文字がぼやける。形が変わる箱の中で入れ替わる文字には、それぞれ専用の出入りのタイミングを持たせる（重なるのを防ぐ）。最後のフレームは、カーソルの位置と速度も含めて最初のフレームと完全に一致させる。そうしないと、ループがカクつく。
</gotchas>
<start>
まず入力内容を私に質問して、コードを書く前に、拍ごとの状態リストを見せて。
</start>
中文翻譯
<inputs>
向我詢問以下三件事：圖形會變身的 8〜12 個屏幕部件（例如：按鈕、加載中的指示、音樂播放器、音量滑塊、開/關切換、標籤頁、圖表、用 ⌘K 打開的搜索框、一閃而過的通知）、配色是純黑白還是加一種強調色，以及一首 120BPM（每分鐘 120 拍的速度）左右的無版權音樂（例如 Mixkit、可免費商用）。
</inputs>
<direction>
達到能登上設計師作品網站“Dribbble”水準的、精緻的畫面動效。圖形只有一個，絕對不切換場景。所有狀態都通過同一個圖形在改變大小、圓角和顏色的同時變形來表達，內容則在短暫的模糊之後完成替換。由光標用真實的點擊和拖拽引發所有變化。背景是溫暖的淺灰色，部件是白與黑，屏幕上的文字爲日語，日文字體爲 Noto Sans JP，英文字母、數字和符號爲 Geist（只使用一種字體）。所有動作都做成像“彈簧”一樣自然的運動，過沖（回彈）僅到極小程度。相機進行縮放，讓每個狀態都充滿畫面。最後一幀與第一幀相同，使其循環。
禁止：彈跳般的動作、粒子飛散的演出、發光暈染、給部件加漸變、線寬不一致的圖標、什麼也不發生的多餘停頓，以及一切看起來像模板的東西。
</direction>
<structure>
120BPM，7 小節（約 14 秒），每一拍都有事情發生。
按鈕 → 加載中的指示 → 對勾 → iPhone 靈動島風格的顯示 → 播放/暫停圖標平滑變形的音樂播放器 → 拖動播放條上的滑塊來改變播放位置 → 變身爲音量滑塊（拖過最大值時會像橡皮筋一樣拉伸） → 開/關切換隨節拍切換 → 切換的滑塊變成像液體一樣流動的標籤頁選中指示器 → 標籤頁展開，變成自己畫出線條的圖表（光標懸停時出現氣泡提示） → 摺疊成 ⌘K 搜索框 → 輸入並篩選候選 → Enter → 一閃而過的通知 → 回到按鈕。
</structure>
<build>
1. 一個 HTML 文件，正方形 1440x1440。所有視覺表現都在 seek(t)（傳入時間 t 就能確定那一瞬間畫面的函數）中根據時間計算。既不使用 CSS 過渡（自動動畫功能），也不使用定時器，幀與幀之間不攜帶狀態。
2. “彈簧”的運動做成能由公式直接求得的形式（閉式階躍響應）。目標會多次變化的值，把每一次變化各自計算出的運動疊加起來。這樣任何時候值都只由時間決定。
3. 標籤頁的選中指示器，左端和右端分別用各自的彈簧驅動，讓前進方向的先端比後側伸得更早。開關的滑塊也採用同樣的手法。
4. 拖拽即直接操作：按住光標期間，值由光標位置計算。鬆開後，從該位置用彈簧回到原位。
5. 用 numpy（計算工具）解析音樂，找出節拍位置，從小節的第一拍開始。操作音放在測得的音頻峯值位置。
6. 用 Playwright（自動操作瀏覽器、把畫面導出成圖像的工具）進行渲染。每幀導出 4 格，用 ffmpeg（製作視頻的工具）的 tmix 疊加，加上運動模糊（運動殘影），輸出 60fps。
7. 在導出全片之前，每一拍只導出 1 幀來檢查。修正偏離節拍的、侷促擁擠的、難以閱讀的地方。
</build>
<gotchas>
絕對不要給會隨相機縮放的元素加 will-change（瀏覽器渲染設置）。加上後文字會變模糊。在形變的容器中更替的文字，要讓它們各自擁有專屬的進出時機（以防重疊）。最後一幀要連同光標的位置和速度在內，與第一幀完全一致。否則循環會卡頓。
</gotchas>
<start>
先就輸入內容向我提問，並在寫代碼之前，給我看逐拍的狀態列表。
</start>
