よくある「すりガラス風」は、実はただのぼかしフィルタです。この素材は背後の光を 実際に屈折させているので、本物のレンズと同じ色のにじみ（虹）が縁に出ます。
背後の同心円がカードの縁で曲がって、赤と青ににじんでいます。 カーソルを縁に沿って動かすと、虹色の光が追いかけてきます。 指で押さえている間、縁に虹色の光が点きます。
ぼかしの重ね塗りではなく、屈折の実計算です。
押すと潰れ、離すとぷるんと戻り、触れると光が応える。 でも誰も触っていないときは、完全に静止しています。 勝手に動き続ける装飾はひとつもありません — 動きはぜんぶ、操作への返事です。
このページの色合い・光の角度・動きのクセは、ブラウザごとに少しずつ違う値で 生成されています。いまあなたが見ている画面は、正確には、あなたにしか見えていません。 隣の人が開くと、光の色が違います。
単なる見た目の研究ではなくあらゆるサービスに応用可能な新しい形のデザインシステムとして、 415個のトークン、53個のコンポーネントが用意されています。生成AIを用いたサービスの UI/UXデザインに利用することができるよう全パーツ利用ルールが定まっており、 ルール違反は ClaudeCode のチェックで弾けます。
npm もビルドツールも要りません。3つのファイルを読み込んで、 クラス名を書けば、その要素はガラスになります。
ファイルを置く
css/ と js/ をプロジェクトにコピーして、HTML から3行で読み込みます。依存はゼロです。
クラス名を書く
部品は HTML のクラス名だけで組めます。lg-glass を付けた要素が、屈折するガラスになります。
カタログからコピペ
53部品の実物とコードはカタログに。部品ごとに「いつ使うか」の文書が付いています。
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/liquid-glass.css">
<script src="js/liquid-glass.js"></script>
<button class="lg-glass lg-button lg-button--primary" data-lg-gel>
送信する
</button>MIT ライセンス（商用利用自由・無保証）。zip は GitHub リポジトリと同じ構成で、 部品・トークン・ドキュメント・各部品の使い方文書まですべて入っています。 カスタマイズして導入したい方は taikihanaoka.com からご連絡ください。