提示词
<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>
