GitHub で Liquid Glass React を見る
Liquid Glass React は、Apple の Liquid Glass 効果を再現する React コンポーネントです。ボタンやカードなど、どんな内容でも中に入れればガラスの見た目になります。
これはエージェントのスキルではなくコードライブラリです。それを使うコードは AI エージェントが書きます。
MIT ライセンスで無料です。2026年10月28日時点で、リポジトリには GitHub で約6,500個のスターが付いていました。
何をするか
- 本物のガラスのように、縁で背景を曲げて屈折させます。
- すりガラスの強さ、角の丸み、彩度、色収差を設定できます。
- Apple 版と同じように、縁とハイライトが下にある光を拾います。
- ホバーやクリックに反応し、弾力の設定で「液体」のような感触を出せます。
- 屈折モードは 4 つあります。README によると、shader モードが最も正確ですが、最も安定しているわけではありません。
先に知っておきたいこと
README には、Safari と Firefox はこの効果を一部しかサポートしないという注意があります。背景を曲げるディスプレイスメントがそこでは表示されません。つまり完全な効果が見えるのは Chromium 系のブラウザで、より簡素な表示になる訪問者もいます。また、ガラスらしく見せるには、画像やグラデーションなど背後に何かが必要です。
インストール方法
npm install liquid-glass-reactあとはエージェントに、ボタンやカードを LiquidGlass コンポーネントで包んで調整するよう頼みます。たとえば、すりガラスを弱めたり、形をもっと丸くしたり。README にはライブデモへのリンクがあります。