OpenGlass UI: библиотека компонентов со стеклянным интерфейсом и доступным DOM

Каждый раз, когда дизайнер приносит в спринт макеты с модным матовым стеклом (Glassmorphism), у фронтенд-разработчика невольно дергается глаз. И на то есть веские причины. Как правило, попытка воссоздать эффект «жидкого стекла» скатывается в одну из двух крайностей: либо команда берет тяжелый Canvas или WebGL, в котором напрочь ломается доступность (текст нельзя выделить, скринридеры его не читают, а фокус с клавиатуры исчезает), либо верстает каскад из backdrop-filter: blur(), от которого вентиляторы мобильных устройств начинают выть, а текст на пестрых фонах становится совершенно нечитаемым. Мы уже разбирали чистые приемы верстки на современных стандартах в статье про стилистику Liquid Aqua, но собрать полноценную систему компонентов — задача принципиально иного масштаба.

Именно эту дилемму взялся решить разработчик Мо Люкер (Moe Lueker), выпустив архитектурно переработанную версию открытой библиотеки OpenGlass UI (open-glass-ui под лицензией MIT).

Текст в DOM и гибридный рендеринг

Главный принцип OpenGlass UI сформулирован жестко: «компоненты на первом месте». Визуальный материал стекла подчинен доступности, а не верстка натягивается на трехмерный графический эффект.

Все 40 готовых компонентов библиотеки (кнопки, диалоговые окна, аккордеоны, бейджи, поля ввода и меню) рендерят в браузер нормальные семантические узлы DOM. Пользователь может скопировать текст мышью, программа экранного доступа читает его без костылей, а клавиша Tab привычно переключает интерактивные элементы.

Вместо принудительного запуска шейдеров движок по умолчанию работает в режиме renderer="auto". Вся базовая геометрия и световые контуры (lit edge) вычисляются на чистом CSS. Сложные оптические преломления через SVG displacement maps или контекст WebGL2 подключаются строго опционально — для фоновых медиа-элементов, где это действительно оправдано визуально.

Настройка и пример использования

Подключение библиотеки не требует внешних рантайм-зависимостей: пакет полагается только на React и React DOM в качестве peer dependencies. Сначала оборачиваем корневое приложение в провайдер стилей и подключаем глобальный CSS:

// app/providers.tsx — Подключение дизайн-системы OpenGlass UI
import React from 'react';
import { GlassSystemProvider } from 'open-glass-ui';
import 'open-glass-ui/styles.css';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <GlassSystemProvider defaultTheme="dark" blurRadius={16}>
      <main className="min-h-screen bg-gradient-to-br from-slate-900 to-indigo-950 p-8">
        {children}
      </main>
    </GlassSystemProvider>
  );
}

А вот как выглядит практическое использование стеклянных компонентов с контролем прозрачности и поддержкой адаптивного рендера:

// components/DashboardAction.tsx — Интерактивная карточка и кнопка со стеклянным эффектом
import React from 'react';
import { GlassCard, GlassButton } from 'open-glass-ui';

export function DashboardAction() {
  return (
    <GlassCard variant="frosted" elevation="medium" className="p-6 max-w-md">
      <h3 className="text-lg font-semibold text-white">Управление сессиями</h3>
      <p className="mt-2 text-sm text-slate-200">
        Активные фоновые воркеры продолжают синхронизацию файлов.
      </p>
      <div className="mt-4 flex gap-3">
        <GlassButton variant="primary" onClick={() => console.log('Синхронизация')}>
          Обновить статус
        </GlassButton>
        <GlassButton variant="ghost">Настройки</GlassButton>
      </div>
    </GlassCard>
  );
}

Забота о доступности «из коробки»

Что меня искренне подкупило в архитектуре библиотеки — это уважение к системным настройкам пользователя:

• prefers-reduced-motion: автоматически гасит динамический трекинг курсора и анимацию скользящих световых бликов на кнопках.
• prefers-reduced-transparency: заменяет полупрозрачное стекло на плотные высококонтрастные подложки, гарантируя читаемость людям с нарушениями зрения.
• forced-colors: передает контроль над контрастными рамками палитре операционной системы.

Библиотека отлично оптимизирована для сборки: импорт отдельного компонента подтягивает через tree-shaking лишь около 28% общего объема кода, а модуль open-glass-ui/core не импортирует React напрямую и протестирован на совместимость с Server Components в Next.js 16. Если тебе нужен современный стеклянный стиль без деградации доступности, к OpenGlass UI определенно стоит присмотреться.