Browse commands

/impeccable overdrive

Overdrive

インターフェースを常識の限界を超えて押し出す。シェーダー、物理、60fps、シネマティックな遷移。

いつ使うか

/impeccable overdrive は印象付けたい瞬間に使います。WebGLを使うヒーロー。100万行を扱うテーブル。トリガー要素から変形するダイアログ。ストリーミングフィードバックでリアルタイムにバリデーションするフォーム。シネマティックに感じるページ遷移。プロジェクトの予算が技術的な野心を許し、結果が並外れて感じられる必要がある時に使ってください。

オペレーターツール、ダッシュボード、信頼性が見栄えに勝るものには使わないでください。Overdriveはエフェクトのために複雑さを消費し、そのトレードオフが重要な瞬間にのみ価値があります。

仕組み

スキルはインターフェース全体に努力を分散させるのではなく、1つの瞬間を並外れたものにするよう選び、コミットします。そして、ほとんどのAI生成UIが触れない技術に手を伸ばします:WebGLシェーダー、スプリング物理、Scroll Timeline、View Transitions、キャンバスアニメーション、GPU加速フィルター。すべては予算管理され、プロファイリングされ、60fpsでテストされ、reduced-motionフォールバックが組み込まれています。

Overdriveの出力は ──── ⚡ OVERDRIVE ──── で通知されるため、より野心的なモードに入っていることが分かります。より大きなdiff、新しい依存関係、他のスキルが生成するものを超える実装の深さが期待されます。

試してみる

/impeccable overdrive the landing hero

具体的な実行では、静的ヒーローがマウス位置に駆動されるWebGLシェーダー背景、Scroll Timeline APIを使用したスクロールでマスクが明らかになるディスプレイ見出し、次のページに変形するCTAのView Transitionに置き換えられるかもしれません。さらに、すべてをクリーンな静的構成に置き換えるreduced-motionフォールバック付き。

注意点

  • あらゆる場所で使うこと。 Overdriveが機能するのは、それが稀だからです。すべてのページにシネマティックな瞬間があれば、どれもシネマティックではありません。
  • reduced-motionフォールバックなしで出荷すること。 交渉の余地はありません。Overdriveは自動的に追加します。削除しないでください。
  • パフォーマンスを無視すること。 並外れた瞬間でも60fpsに到達する必要があります。エフェクトがフレームを落とすなら、カットするか最適化してください。遅いスペクタクルは、シンプルにうまくやったものより悪いです。
  • **ベースインターフェースがしっかりする前にoverdriveを実行すること。壊れた基盤の上のスペクタクルは、喜びではなく気を散らすものとして読まれます。