2026-05-24
Full AI
Liquid DOM を読んで、このページだけで液体ガラスを試した ... users
Liquid DOM は、CSS の glassmorphism ではなく、WebGPU の renderer と DOM-backed な scene graph で液体ガラスを描く実験的な UI ライブラリです。このページではサイト全体のレイアウトは変えず、この記事が表示された場合だけ @liquid-dom/core@0.1.0 を読み込み、下のデモ領域だけで Liquid DOM を起動しています。
Liquid DOM fusion:
initializing
loading @liquid-dom/core
このページで試すもの
まず背景となる普通の DOM を置き、その上に Liquid DOM の Scene、Container、Glass、Html を重ねます。ガラスの見た目は CSS では作らず、Liquid DOM の Renderer が生成する <canvas layoutsubtree> に描かせます。
Liquid DOM status:
initializing
loading @liquid-dom/core
Liquid DOM の構成
@liquid-dom/core は DOM-backed liquid-glass renderer です。低レベルの scene graph と WebGPU renderer を持ち、React を使わなくても Scene に Html や Container を追加して描画できます。React から使う場合は @liquid-dom/react、Three.js 連携には @liquid-dom/three や @liquid-dom/r3f が用意されています。