Liquid Glass UI

主な機能

Liquid Glass UIは、AppleのvisionOSデザインシステムに着想を得たReactコンポーネントライブラリです。

• Liquid Glassエフェクト：カード、ボタン、ナビゲーション、入力欄、モーダルなどに半透明素材と動的な背景ぼかしを適用できます。
• リアルタイムレンダリング：GPUアクセラレーション対応の背景フィルターと動的な色サンプリングで、周囲のコンテンツに合わせてガラス効果を変化させます。
• スペキュラーハイライト：操作に応じてインタラクティブな反射光が移動し、実際のガラスのような表現を作ります。
• 流動的なモーション：Apple独自のイージングカーブと物理ベースの動きで、自然なインタラクションを実現します。

技術的特徴

• すべての効果をGPUで処理し、60fpsのアニメーションとバッテリー効率を目指します。
• JavaScriptランタイム不要：効果はCSSで実装され、JSランタイムのオーバーヘッドがありません。
• モバイルファーストのレスポンシブ設計で、さまざまな画面サイズとデバイスに対応。
• スクリーンリーダー、キーボード操作、動きを減らす設定に対応し、WCAG 2.1 AAに準拠。
• TypeScript定義を完全に提供し、React 18+に対応。

インストールと使い方

# npmでインストール
npm install liquid-glass-ui

# またはコンポーネントをコピー
git clone liquid-glass-ui

使用例：

import { GlassCard } from 'liquid-glass-ui'

<GlassCard variant='intense' interactive specular>
  Your content
</GlassCard>

ブラウザ対応

Chrome 76+、Firefox 72+、Safari 14+、iOS Safari 14+、Chrome for Android 76+などの最新ブラウザで動作します。古いブラウザでは段階的に機能が低下します。

カスタマイズ

CSSカスタムプロパティ、コンポーネントのprops、修飾クラスを使って幅広くカスタマイズできます。ぼかしの強さ、透明度、アニメーションのタイミング、配色を調整できます。

対象ユーザー

• React／Next.js開発者
• UI/UXデザイナー
• Apple風デザインを目指すフロントエンド開発チーム
• 高性能なグラスモーフィズム効果を必要とするプロジェクト

主なメリット

• CSSを手作業で記述せずにガラス効果を利用可能
• GPUアクセラレーションによるリアルタイムレンダリング
• Appleのデザインシステムに着想を得た高品質なコンポーネント
• 小さなCSSバンドルサイズ
• TypeScript完全対応