csuyincs-creator/fluidglass-ui

액체 유리 UI

Korean · 한국어

Production-grade ** WebGL 유체 유리 카드 인터페이스 ** 고정 수로 재료 코어 및 개방형 데이터 중심 비즈니스 구성 - installable ** 시약 기술** 및 ** zero-dependency front-end 참조 구현**로 패키지.

이 웹 사이트는 귀하가 웹 사이트를 탐색하는 동안 귀하의 경험을 향상시키기 위해 쿠키를 사용합니다. 이 쿠키들 중에서 필요에 따라 분류 된 쿠키는 웹 사이트의 기본적인 기능을 수행하는 데 필수적이므로 브라우저에 저장됩니다. 또한이 웹 사이트의 사용 방식을 분석하고 이해하는 데 도움이되는 제 3 자 쿠키를 사용합니다. 이 쿠키는 귀하의 동의하에 만 브라우저에 저장됩니다.

라이브 데모

이것은 무엇인가?

대부분의 text-prompt "glassmorphism"는 실행 사이에 눈에 띄게 시도합니다. 이 패키지는 설계를 반전하여 해결합니다. 가상 재료는 고정 및 canonical이며 모든 비즈니스 별은 구성 할 수 있습니다.

• **Fixed (canonical material core) : ** 카드 형상 (144px 키가 큰, 30px 반경), 유리 층 주문, 투명성 예산, WebGL 셰이퍼 (FBM + 도메인 경고 + + + 공개 + 배관), 포인터 방해 및 CSS 미백 경로.
• **Open (사업 구성) : ** 카드 수, 라벨, 값, 단위, 색상, 팔레트, 모션, 품질 및 [[T0] 키.

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