Apple Liquid Glass UIモーションデザインプロンプト

<role> あなたはシニアUIモーションデザイナー兼クリエイティブテクノロジストです。コードでUIアニメーションを構築し、フレーム正確に、自身でビデオにレンダリングします。 </role> <inputs> スタイル: Apple Liquid Glass。参照プラットフォーム: iOS 26、iPadOS 26、macOS Tahoe 26。 フォーマット: 1440x1440、60fps、シームレスループ。 曲: 「Digital Clouds」by Alejandro Magaña (A. M.)、Mixkit提供、Mixkitライセンスの下で無料。ファイルが添付されていない場合は、それを私に求め、それ以外は何も求めないでください。 テンポ: 約120 BPM、8小節、各ビートで何かが起こります。ファイルから実際のテンポを測定してください。120と異なる場合は、ビートマップをビート単位で維持し、すべての時間を測定されたグリッドから導出してください。 パレット: ライトモードのシステムマテリアル。 - ラベル: #1D1D1F。セカンダリラベル: #6E6E73。不透明サーフェス: 白。 - アクセントカラー1つ、#0A84FF、オン、アクティブ、選択状態のみに使用。 - Dynamic Islandのみが純粋な黒の要素です。 キャンバス: macOS Tahoeスタイルの壁紙。 - 大きな、柔らかなカラーフィールド: ディープブルー #1B3A8C、ティール #2BB3B1、バイオレット #7B5CFF、そして温かいピーチハイライト #FFB38A。 - ゆっくりとしたパララックスドリフト: 1小節あたり最大12px。 - ガラスがそれをはっきりと屈折させるのに十分な彩度、テキストの背後に落ち着いて配置されるのに十分な落ち着き。 フォント: 20px以上はSF Pro Display、20px未満はSF Pro Text、ローカルにインストールされている場合。それ以外の場合はFontsourceのInterを使用: タイトルは600、ラベルは500、ボディは400。ディスプレイサイズでは-1%のトラッキングを使用し、変化する数字には表形式の数字を使用。 アイコン: SVGで描かれたSF Symbols風のセット、隣接するテキストに合わせたミディアムウェイト、状態ごとに一貫した光学サイズ。必要なシンボル: play、pause、3つの波を持つスピーカー、house、heart、チャートバー、person、虫眼鏡、note、チェックマーク。 ポインター: iPadOSアダプティブポインター。 - 22pxの半透明グレーサークル (#8E8E93 45%)。 - ホバーしたコントロールにスナップ(マグネティズム)し、そのコントロールのハイライトシェイプになります。 - テキストフィールドではIビームになります。 - 押下時には10%縮小します。 </inputs> <direction> AppleキーノートおよびWWDC Liquid GlassセッションレベルのUIモーション。1つの要素、決してカットしない。すべての状態は、同じ要素がサイズ、角半径、マテリアル、カラーをモーフィングし、そのコンテンツが短いぼかしで入れ替わるものです。ポインターが実際のクリック、ホールド、ドラッグで全ての変更を駆動します。 マテリアル: - Liquid Glassはレンズであり、曇りガラスプラスチックではありません。壁紙を屈折させ、曲がりはリムで最も強くなります。 - 軽い曇りと10〜16%の白いティント。 - 左上からの1pxのスペキュラリムと、右下のより淡いカウンターハイライト。要素が動くにつれてハイライトがシフトします。 - 柔らかなコンタクトシャドウ: 0 10 30、12%ブラック。 - ガラスはガラスの上に置かれません。ガラス上のコンテンツは、ビビッドまたはソリッドフィルを使用します。 - 角は同心円状: 内側の半径 = 外側の半径 − パディング。 - ガラスシェイプが分割または結合するときは、液滴のように結合し(スムーズユニオン)、クロスフェードはしません。 モーション言語: - どこでもAppleライクなスプリング: - モーフ: 応答 0.45、減衰 0.86。 - 押下: 応答 0.25、減衰 0.72。 - ポインタースナップ: 応答 0.3、減衰 0.9。 - オーバーシュートは最大3%。 - 押下時、ガラスは持ち上がり膨張します(スケール 1.06〜1.12、リムが明るくなる)。決して縮小しません。 - ホールド中のトグルノブは、移動方向に伸びるクリアで拡大されたガラスレンズに変わります。 - タブバーの選択は、ドラッグ中にその下のアイコンを拡大するガラス液滴です。 - スライダーは掴まれると厚くなり、限界を超えるとゴムバンドのように伸びます。 カメラ: - 各状態はフレームの約60%を占め、壁紙は常にガラスの周りに見えます。 - カメラの動きは応答 0.6、減衰 1.0 を使用します。 - 壁紙は、奥行きのためにカメラズームの70%でスケーリングされます。 最後のフレームは最初のフレームであり、ポインターの位置と速度も含まれます。 禁止: 弾むようなまたは伸縮性のあるイージング、3%を超えるオーバーシュート、パーティクルバースト、ネオングロー、UIクローム上のカラーグラデーション(ガラスのスペキュラリムのみが唯一のグラデーション)、重いドロップシャドウ、ガラス上のガラス、不一致の角半径、不一致のアイコンウェイト、絵文字、状態間のクロスフェード、半拍より長いデッドタイム、テンプレートやDribbbleクローンのように見えるもの。 </direction> <structure> 120 BPM、8小節、32ビート。ビートマップ、ビートごとに1行: 1. ガラスカプセルボタン「Continue」が壁紙に浮かんでいます。ポインターが滑り込んできます。 2. ポインターがボタンにスナップし、そのハイライトになります。 3. クリック: ガラスが持ち上がり膨張し、リムが明るくなります。 4. カプセルが円に収縮し、回転するアクティビティリングになります。 5. リングが完了し、アクセントカラーで満たされます。 6. チェックマークにモーフィングし、それが描画されます。 7. 円が黒いDynamic Islandに伸び、コンパクト: 左にアルバムアート、右にライブ波形。 8. クリック: 島がNow Playingに拡張されます(「Digital Clouds」、「A. M.」、進行状況 0:42 / 1:41)。 9. 再生をクリック: パスモーフ(スワップではなく)で、再生アイコンが一時停止アイコンにモーフィングします。 10. プログレスバーを掴む: 厚くなり、時間ラベルが邪魔にならないように移動します。 11. 直接操作で前方にスクラブします。時間は表形式の数字でカウントされます。 12. リリース: バーがスプリングで薄くなり、再生は新しい位置から続行されます。 13. 島がスピーカーアイコン付きのガラスボリュームスライダーに溶解します。 14. 上にドラッグ: フィルがポインターに追従し、スピーカーの波が1つずつ表示されます。 15. 最大値を超えてドラッグ: スライダー全体がゴムバンドのように伸び、先端が最初に伸びます。 16. リリース: 100%の長さにスプリングで戻ります。 17. スライダーがトグル(トラックとノブ)にモーフィングし、オフ。ラベルは「Focus」です。 18. ホールド: ノブがクリアで拡大されたガラスレンズに変わり、トラックが透けて見えます。 19. ビートでオンにフリップ: レンズが移動方向に伸び、トラックがアクセントカラーで満たされます。 20. ノブが液滴として分離し、4つのタブ(Home、Health、Activity、Profile)を持つフローティングガラスタブバーの選択レンズになります。 21. タブ間でレンズをドラッグします。先端が後端より先に伸び、アイコンがレンズの下で拡大されます。 22. レンズが「Activity」に落ち着き、そのアイコンがアクセントカラーに変わります。 23. タブバーが上に成長して、同心円状の半径を持つ「Activity」というタイトルのガラスウィジェットカードになります。 24. 7日間の棒グラフ(M T W T F S S)が左から右へスタッガーで上昇します。 25. 木曜日にホバー: ガラスツールチップバブルが「8,412 steps」を表示し、バーに固定されます。 26. 金曜日にホバー: ツールチップがスライドして移動し、「11,036 steps」にカウントアップします。 27. ⌘Space: カードが虫眼鏡アイコン付きのTahoe Spotlightバーに収縮します。 28. 「ne」と入力: 結果リストがフィルタリングされ(New Note、Network、News)、行がスプリングで出入りします。 29. 「w」と入力: 「New Note」が選択されたアクセント行として一番上に上昇します。 30. Enter: 行が押され、持ち上がります。 31. Spotlightバーが上部からガラス通知バナーにドロップします: Notesアイコン、「Note created」、「now」。 32. バナーが「Continue」カプセルに収縮します。ポインターはフレーム1の位置と速度に戻ります。 </structure> <build> 1. 1440x1440の1つのHTMLファイル。すべてはseek(t)内の時間から計算されます: CSSトランジションなし、タイマーなし、フレーム間で保持される状態なし。 2. スプリングは、Appleパラメータ(ω = 2π/応答、ζ = 減衰比)を使用した閉形式の減衰ステップ応答です。 - 何度もリターゲットされる値は、リターゲットごとに1つのスプリングの合計であり、純粋な時間の関数のままです。 - リリースは現在の値と現在の速度から開始されます。 3. 非対称エッジ: タブレンズ、トグルノブ、スライダーのストレッチはそれぞれ、先端が応答 0.28、後端が応答 0.42 です。 4. ドラッグは直接操作です。 - ホールド中、値はポインター位置の関数であり、限界を超えるとゴムバンド効果があります: offset = limit + (1 − 1/(x·0.55/d + 1))·d。 - リリース時には、どこからでもスプリングで戻ります。 5. ガラスはCSSのbackdrop-filterではなく、WebGL2パスでレンダリングされます: - 壁紙は、事前計算されたぼかしミップチェーンを持つテクスチャに描画されます。 - すべてのガラスシェイプは角丸長方形SDFです。結合と分割には、k = 24pxのスムーズミンを使用します。 - 屈折はSDF勾配に沿ってサンプルをオフセットします。オフセットはエッジから14px以内で最も強く、レンズの厚みでスケーリングされます。 - 曇りはミップレベルバイアスです。 - 色収差はリムのみで最大1pxです。 - スペキュラリムは、左上のライトに対するSDF法線から得られます。 - Dynamic Islandは、同じパス内の不透明なSDFです。 - テキスト、アイコン、チャート、ポインターは、キャンバスの上のシャープなSVG/DOMレイヤーであり、同じカメラマトリックスの下にあります。 6. モーフィングコンテナ内のコンテンツスワップ: - 終了は120msかかります: ぼかし6px、スケール0.96、フェード。 - 開始は60ms後に独自のスプリングで始まります。 - 終了と開始のテキストが重なることはありません。 7. オーディオ: - numpy(オンセットエンベロープと自己相関)で曲を分析してビートグリッドを取得し、測定されたダウンビートで開始します。 - numpyでApple風の控えめなUIサウンドを合成: クリック用のソフトタップ、スクラブディテント用のティック、最大音量時の低いディテント、入力された文字ごとのキーボードクリック、通知用の優しい2音チャイム。 - 各サウンドを測定されたピークに配置し、トラックの約18dB下でミックスします。 8. Playwrightで1440x1440、フレームあたり4サブフレーム(240fps)でレンダリングします。 - ffmpegで60fpsにブレンド: tmix=frames=4、select='not(mod(n\,4))'、setpts=N/60/TB。 - H.264 yuv420p、crf 16、AAC 192k、faststartでエンコードします。 9. フルレンダリングの前に、ビートごとに1枚のスチル(32枚)をコンタクトシートとしてレンダリングします。グリッドから外れているもの、窮屈なもの、壁紙の上で判読できないもの、または非同心円状の半径のものを修正します。 </build> <gotchas> - ガラスとDOMレイヤーは、フレームごとに1つのカメラマトリックスを共有する必要があります。そうしないと、コンテンツがガラスからずれます。 - 明るい壁紙パッチの上のガラスは可読性を損ないます。より重いティントではなく、サンプリングされた壁紙の輝度に基づいて、テキストの下にアダプティブディムを追加します。 - Dynamic Islandは決してガラスではありません。 - モーフィングを横切るアイコンは、その光学サイズを維持します。グリフではなくコンテナをスケーリングします。 - ツールチップは、カメラの動きを通してバーに固定されたままです。画面には固定されません。 - Spotlightで入力された文字は、ポインターのIビームで入力されます。キャレットは半拍で点滅します。 - カメラがスケーリングするものにwill-changeを決して置かないでください。テキストがぼやけてレンダリングされます。 - 最後のフレームを最初のフレームと同一にします(ポインターも含めて)。そうしないとループが途切れます。 </gotchas> <start> 曲ファイルがない場合は、それを要求してください。次に、BPMとダウンビートを測定し、ビートマップをテーブル(ビート、時間、状態、ポインターアクション、サウンド)として、測定されたグリッドにスナップして、コードを書く前に見せてください。私のOKを待ってください。 </start>