csuyincs-creator/fluidglass-ui

Жидкостное стекло UI

Английский язык · 中

Интерфейсы жидкостной стеклянной карты производственного класса WebGL с фиксированным каноническим ядром материала и открытой бизнес-конфигурацией, основанной на данных, — упакованы в качестве устанавливаемого агента и ** фронтальной эталонной реализации с нулевой зависимостью**.

Откройте демо-версию одного файла непосредственно в любом современном браузере, чтобы увидеть результат: прозрачные стеклянные карты с жидкостью, помехи указателя и изящный запасной вариант CSS.

Live демо

Что это такое

Большинство текстовых попыток «стекломорфизма» визуально дрейфуют между прогонами. Этот пакет решает эту проблему, инвертируя дизайн: визуальный материал является фиксированным и каноническим, в то время как все, что касается бизнеса, остается настраиваемым.

** Фиксированный (ядро канонического материала): ** геометрия карты (144px высотой, радиусом 30px), порядок слоя стекла, бюджет прозрачности, шейдер WebGL (FBM + деформация домена + раскрытие + шлейфы), возмущение указателя и обратный путь CSS. ** Открытая (бизнес-конфигурация): ** количество карт, ярлыки, значения, единицы, цвета, палитры, движение, качество и ключ 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