Liquid Glass UI

美しいグラスモーフィズムとモダンなエフェクトを、クラス指定だけで簡単に。

Welcome

すべてのエフェクトを組み合わせたデモです。

Core Effects

基本の `.lg-glass` に、クラスを追加するだけで様々な効果を適用できます。

Glow Effect

Hover me!

// Glow on Hover

...

Parallax Effect

Move your mouse.

// 3D Parallax on Mouse Move

...

Modal Component

IDを指定するだけで動作するモーダルダイアログ。 

// 1. Trigger Button


// 2. Modal HTML (place at end of body)
 

    

      

      
      
これはLiquid Glassスタイルで表示されたモーダルウィンドウです。
ここにはフォーム、画像、追加情報など、あらゆるコンテンツを配置できます。

3D Carousel

`carousel3d.js` を利用した3Dカルーセルコンポーネント。

Adaptive Background

明るい背景の上では、パネルのスタイルが自動で切り替わります。

Adaptive Panel

This text is dark.

// Add .lg-light-section to a container

✨Modal Title

This is a modal window with the Liquid Glass style.