csuyincs-creator/fluidglass-ui

流体ガラスUI

日本語 English

生産等級WebGLの流動ガラス カード インターフェイスは固定正弦材料の中心および開いた、データ主導のビジネス構成と–取付け可能なagentのスキルおよびのゼロ依存のフロントエンドの参照の実装として包まれた。。

結果を見るために、任意の近代的なブラウザで単一ファイルデモを直接開きます: 透明な流体ガラスカード, ポインター障害, 優雅なCSSフォールバック.

ライブデモ

これは何ですか?

ほとんどのテキストプロンプト “glassmorphism” は、実行間で視覚的にドリフトを試みます。 このパッケージは、設計を反転することで解決します。visual材料は固定され、canonicalです。

-**Fixed(canonical材料コア):**カードジオメトリ(144px、30px半径)、ガラスレイヤーオーダー、透明予算、WebGLシェーダー(FBM +ドメインワープ+表示+プラス)、ポインター障害、およびCSSフォールバックパス。 -**Open(ビジネス構成):**カードカウント、ラベル、値、単位、色、パレット、モーション、品質、および[localStorage]キー.

Fluid Glass UI

English · 中文

Production-grade WebGL fluid glass card interfaces with a fixed canonical material core and an open, data-driven business configuration — packaged as an installable agent skill and a zero-dependency front-end reference implementation.

Open the single-file demo directly in any modern browser to see the result: transparent fluid glass cards, pointer disturbance, and graceful CSS fallback.

Live demo

What this is

Most text-prompt “glassmorphism” attempts drift visually between runs. This package solves that by inverting the design: the visual material is fixed and canonical, while everything business-specific stays configurable.

• Fixed (canonical material core): card geometry (144px tall, 30px radius), glass layer order, transparency budget, the WebGL shader (FBM + domain warp + reveal + plumes), pointer disturbance, and the CSS fallback path.
• Open (business configuration): card count, labels, values, units, colors, palettes, motion, quality, and the localStorage key.

Any downstream project — or any Agent that loads this skill — gets the same visual DNA, guaranteed by hashed core assets and an automated QA gate.

Features

• WebGL1 fluid shader — FBM + domain warp, alpha:true transparent canvas, gl.clearColor(0,0,0,0)
• Pointer disturbance — push and curl the fluid with mouse/touch
• Quality profiles — auto / high / balanced / eco / fallback
• CSS fallback — automatic when WebGL is unavailable or the context budget is reached
• WebGL context budget — max 8 live contexts (iOS-Safari-safe); extra cards render via CSS fallback
• Zero dependencies — no CDN, no external fonts, no network requests; works from file://
• Data-driven cards — up to 12 cards, arbitrary keys, optional chart extension (default off)
• Runtime control — window.FluidGlassMaterial.* API for palette, quality, motion, export
• localStorage persistence and single-click HTML export
• Performance hygiene — shared RAF manager, visibility pause, ResizeObserver, IntersectionObserver, prefers-reduced-motion

Quick start

1. Just look at it