AI PROMPT · 309
UI 动效设计动画提示词
<inputs> 请向我询问以下 3 点：8-12 个相互变形的 UI 组件（例如按钮、加载器、音乐播放器、音量滑块、切换开关、标签页、图表、命令面板、通知），配色方案（严格黑白或单一强调色），以及一首约 120 BPM 的免版税音轨（例如来自 Mixkit）。 </inputs> <direction> 创作出值得在 Dribbble 上展示的精致屏幕动效。仅使用一种形状；绝不剪辑场景。通过同一形状改变大小、圆角半径和颜色来表示所有状态，并通过短暂模糊来交换内容。光标通过真实的点击和拖拽驱动所有变化。背景为暖浅灰色，组件为黑白两色。文本使用日语（Noto Sans JP）和英语/符号（Geist）。所有运动均使用带有最小过冲的自然弹簧物理效果。相机缩放以填满每个状态的屏幕。完美循环（最后一帧与第一帧匹配）。禁止事项：弹跳式运动、粒子爆炸、发光效果、组件上的渐变、不一致的图标粗细、静默间隙、模板化美学。 </direction> <structure> 120 BPM，7 小节（约 14 秒），每个节拍都有动作发生。 按钮 -> 加载器 -> 对勾 -> 灵动岛风格 -> 音乐播放器播放/暂停变形 -> 进度条拖拽 -> 音量滑块拉伸 -> 切换开关同步 -> 液态标签选择 -> 标签展开为自绘制图表 -> 折叠为命令面板 -> 输入/搜索 -> 回车 -> 通知 -> 回到按钮。 </structure> <build> 1. 单个 HTML 文件，1440x1440 正方形。所有视觉效果均在 seek(t) 内计算。不使用 CSS 过渡/计时器。帧之间无状态。 2. 弹簧作为闭式阶跃响应。叠加计算以处理目标变化。 3. 标签选择：左右边缘使用独立的弹簧，前导边缘延伸得更快。 4. 拖拽：按住时直接操作，释放时弹簧回弹。 5. 使用 numpy 分析音频以获取节拍网格。将声音同步到测量到的峰值。 6. 使用 Playwright 渲染。导出每帧 4 个子帧，并使用 ffmpeg tmix 混合以实现 60fps 的运动模糊。 7. 在完整渲染之前，预览每个节拍的一帧以修复时序/可读性问题。 </build> <gotchas> 切勿在相机缩放的元素上使用 will-change（会导致文本模糊）。为进入/退出的文本赋予独特的时间参数以防止重叠。确保最后一帧与第一帧完全匹配（包括光标位置/速度）以实现平滑循环。 </gotchas> <start> 首先询问输入信息，然后在编写代码之前向我展示逐节拍的状态列表。 </start>
VIDEO PREVIEW
视频预览
PROMPT
<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>