Web Liquid Glass は何をしますか？
プロダクション品質のWeb用ガラス素材です。実際のNext.js + Tailwindサイトから抽出されました。完全なソースコードは reference/ にあります。
reference/liquid-glass.css：素材全体（トークン、サーフェス、バリアント、シェイプドガラス、屈折、劣化）。約2,200行。各値の詳細なコメント付き。ファイル全体ではなく、必要なセクションだけ読みましょう。reference/glass.tsx：<Glass>ReactコンポーネントとSVG屈折フィルター。reference/glass-specular.tsx：ポインターと傾きを追跡するスペキュラーハイライト。
リファレンスは2つのサイトヘルパー（cn と lite-mode モジュールの LITE_CLASS）をインポートしています。プロジェクトの独自の cn/clsx と「エフェクトオフ」用のクラス名に置き換えてください。sky-*、kiosk-*、祈り関連のセレクターはサイト固有のバリアント例です。削除するか、パターンとして利用してください。
ガラスとは
ガラスは4つの部分から成ります。Web版が最初の1つだけ実装すると、安っぽく見えます。
- マテリアル：ぼかしと彩度の向上（約200％）。約150％未満では灰色のプラスチックに見えます。明るさのリフトとコントラストのプルを追加し、背後にあるコンテンツをソフトなウォッシュに拡散させます。
- リム：明るいヘアラインで光がエッジに当たる部分。反対側のエッジは暗く。リムなしのぼかしは決してガラスに見えません。
- シーン：上部エッジ内側のソフトなスペキュラーハイライト。
- 深度：幅広で非常にソフト、低不透明度の影。タイトなカードシャドウではありません。
屈折（エッジでのコンテンツの歪み）は5番目の要素で、Webで安価に実現できない唯一のものです。backdrop-filter: url(#svg-filter) が必要で、Chromiumでのみ動作します。
ガラスを配置する場所
ガラスはナビゲーション層（バー、カプセルナビ、フローティングコントロール、シート）に配置し、本文コンテンツには配置しないでください。ガラス上のテキストコントラストは背後でスクロールするコンテンツに依存するため、保証できません。コンテンツには不透明カードをデフォルトとし、サーフェスごとにガラスをオプトイン（.lg）にします。
実際に時間を要するルール
- ガラスCSSは
@tailwind baseと同じファイル内、@layer内に置くこと。 Tailwindはファイルごとに@layerを解決するため、別のCSSファイルでは@layer baseでエラーになります。ラッパーを削除するとルールが非レイヤー化され、非レイヤールールはすべてのTailwindユーティリティよりも優先されます。.lg { position: relative }がナビのfixedを静かに上書きしてしまいます。 --x: calc(var(--x) * 0.7)と絶対に書かないこと。 これはループです。計算値の時点で無効となり、エラーなしで継承値にフォールバックします。代わりに2番目の変数（--lg-clarity-bump、--lg-press）を使用してください。- ガラスサーフェスは正確に1つのエッジを持ち、
::beforeがそれを描画します。 2つのエッジ（::beforeリムと insetbox-shadowベベル、またはボーダーボックス外側のスプレッドシャドウ）は、アルファ値をいくら調整しても修正できない「二重ボーダー」を引き起こします。 corner-shapeは継承されません。 サーフェスにcorner-shape: squircleがある場合、境界線を描画するすべての疑似要素にはborder-radius: inheritとcorner-shape: inheritの両方が必要です。そうしないとリムがボディと異なる曲線を描きます。- ガラス内のガラスに
backdrop-filterを付けないでください。 すでに着色された背景をサンプリングし、濁ってしまいます。ガラスバー内の選択チップ（.lg-chip）は、独自のぼかしを持たない着色レンズです。 :rootで継承されたカスタムプロパティをアニメートしないでください。 ドキュメント全体のスタイルが無効になります。60サーフェスのページで1フレームあたり約11.6ms、同じ値を要素ごとに書き込む場合の2msに対して。- バーはスクロールフレームごとに再ブラーします。
.lg-barに小さなブラー半径とcontain: paintを指定してください。デバイスがまだカクつく場合は--lg-blur-bar: 0pxを設定します。リムとシーンで見た目は十分保たれます。 - グリッチを修正するためにフロストガラスを平坦化しないでください。 ほぼ不透明な「ベタ塗り」バーはガラスの見た目を失います。代わりに幾何学的な原因（エッジでボディを薄くするマスク、二重リム）を見つけてください。
- SVG屈折レンズは自身のボックスを超えてサンプリングしてはなりません。 Chromeではそこが透明になり、元のコンテンツがゴーストとして透けて見えます。
SafariとiPhone
WebKitは backdrop-filter をサポートしますが、その内部のSVGフィルターを拒否するため、Safariでは屈折がまったく利用できません。Safariが屈折できるのは独自のツールバーだけです。viewportFit: "cover" を設定してページをその下で実行させ、env(safe-area-inset-*) をナビとフッターで必須にします。
アクセシビリティとフォールバック（常にこれらを同梱すること）
すべてのサーフェスは、ほぼ不透明な色合いに劣化し、見た目が近く、フレームあたりのコストがかからなければなりません。
@media (prefers-reduced-transparency: reduce)@supports not (backdrop-filter: blur(1px))@media (prefers-contrast: more)：より強い色合いとソリッドエッジ- ルートクラス（例：
.lg-off）：すべてのガラスサーフェスを一度に無効化（ユーザートグルまたは低電力モード用）
バーには独自の、より高い最大色合い（--lg-tint-max-bar）を指定し、コンテンツが下をスクロールしてもナビリンクのテキストコントラストを維持します。
適用方法
reference/liquid-glass.cssからトークンブロックとサーフェスセクションを、プロジェクトのメインCSSファイルの既存の@layerブロック内にコピーします（ルール1）。- カラートークンをプロジェクトのパレットにマッピングします。リファレンスはshadcn形式の
hsl(var(--card))トークンを使用しています。 reference/glass.tsxの<Glass>またはプレーンな.lg、.lg-bar、.lg-nav、.lg-pane、.lg-chip、.lg-refractクラスを使用します。reference/glass-specular.tsxのスペキュラーハイライトは、コストに見合う場所（ヒーローコントロール、メインナビ）にのみ追加し、prefers-reduced-motionを尊重します。- ChromeとSafariの両方で、ライトモードとダークモードの両方で、賑やかな写真上とプレーンテキスト上で確認します。
既製コントロール：Glisse
Glisse by Kelvin Zhang（npm install glisse、MIT、React 18+、依存関係なし）は、プレス・トゥ・リフトレンズ動作が組み込まれた、インタラクティブなリキッドガラスコントロールを出荷します。Button、Switch、Slider、TabBar、SegmentedControl、Menu、Input、SearchField、そしてプレーンな Glass サーフェス。そのスタイルはJSバンドルによって注入されるため、CSSファイルのインポートは不要です。
どちらをいつ使うか：
- Glisseはコントロール用：スイッチ、スライダー、タブバー、セグメントコントロール。ドラッグ中にサムがレンズに浮き上がります。手作業で構築するには数日かかります。
- この素材はサーフェス用：ナビバー、カプセルナビ、パネル、シート、写真上のカード、そして既存のデザインシステムやTailwindテーマに合わせる必要があるもの。
組み合わせる際の注意点：
- 両方とも
lg-プレフィックスを使用します。 Glisseは.lg-glass、.lg-button、.lg-tab-barと変数--lg-blur、--lg-tint、--lg-rim、--lg-filterを定義し、これらがこの素材のトークンと衝突します。両方を使用するページでは、この素材のプレフィックスを（例：ylg-に）リネームするか、Glisseをそれらの変数をリセットするラッパー内にスコープします。さもなければ、互いに静かに再調整し合います。 - Glisseのダークモードは
data-theme="dark"またはprefers-color-schemeをキーにします。 Tailwindの.darkクラスではありません。クラスベースのダークモードの場合、<html>に.darkとともにdata-themeを設定するか、Glisseはライトのままです。 - Glisseは
prefers-reduced-motionを処理しますが、prefers-reduced-transparencyやprefers-contrastは処理しません。 このスキルのアクセシビリティセクションのフォールバックをGlisseコントロールの周囲に追加してください。 - Glisseの
.lg-glassはすでにエッジをinsetbox-shadowで描画しています。 その上に::beforeリムを追加しないでください（ルール3：エッジは1つのみ）。