Смотреть урок
Большинство обещает «Apple-стиль» — но просто копируют блюр и тень. OpenGlass UI пошла дальше: настоящая SVG/SDF-рефракция и опциональный WebGL2 для медиа, при этом CSS остаётся универсальным фолбэком.
Что внутри:
🔷 Установка, три уровня импортов и минимальная интеграция на React
🔷 Настройка тем — палитры, контраст, форма углов, CSS-токены
🔷 40 готовых компонентов и правила доступности для каждого
🔷 Три рендерера (CSS, SDF/SVG, WebGL2) и работа с SSR/Next.js
💡 Ссылка на репозиторий
OpenGlass UI — React- и веб-библиотека для интерфейсов в стиле «жидкого стекла» (liquid glass). Она пока не вышла в релиз (pre-release), но уже опубликована в npm.
Библиотека объединяет несколько вещей:
- нейтральные адаптивные темы;
- сорок готовых компонентов, построенных на нативных DOM-элементах;
- CSS-материалы «из коробки»;
- явную SVG/SDF-рефракцию (эффект преломления света через стекло);
- опциональный WebGL2 для работы с медиа (видео, изображения, канвас).
Стоит иметь в виду: раз библиотека ещё в статусе pre-release, перед тем как полагаться на версионно-специфичное поведение, лучше проверять точную установленную версию.
Библиотека делит импорты на три уровня: публичный фасад, GPU-модуль и «чистый» модуль без React.
Публичный фасад — то, что использует обычный код:
import "open-glass-ui/styles.css"; import { Button, Glass, GlassSystemProvider } from "open-glass-ui";
GPU-код идёт через отдельный подпуть:
import { WebGLGlassSurface } from "open-glass-ui/webgl";
Серверные компоненты, сборщики, тесты и не-React адаптеры используют «чистый» подпуть:
import { contrastRatio, createGlassTheme, signedDistance } from "open-glass-ui/core";
Стили open-glass-ui/styles.css нужно подключить один раз, ближе к корню приложения.
Важное ограничение: импортировать напрямую из внутренних пакетов @open-glass-ui/core, @open-glass-ui/renderers, @open-glass-ui/react или @open-glass-ui/recipes нельзя — это внутренние границы реализации, а не публичный API.
Минимальная интеграция выглядит так:
import "open-glass-ui/styles.css"; import { Button, Glass, GlassSystemProvider } from "open-glass-ui"; export function App() { return ( <GlassSystemProvider renderer="auto" quality="auto" motion="system" theme={{ appearance: "system", defaultAppearance: "dark", theme: { preset: "neutral", contrast: "high", radius: "balanced" }, }} > <Glass material="regular" interactive> <Button variant="primary">Continue</Button> </Glass> </GlassSystemProvider> ); }
GlassSystemProvider — это объединяющий провайдер: он сразу настраивает рантайм, тему и глобальные toast-уведомления. Его собственные пропсы отвечают за рендерер, качество, анимацию, определение возможностей устройства и политику доступности, а вложенный объект theme конфигурирует тему через GlassThemeProvider.
Если нужен более гранулярный контроль, отдельные провайдеры — GlassProvider, GlassThemeProvider и ToastProvider — тоже доступны сами…