Liquid Glass UI

Основные возможности

Liquid Glass UI — библиотека компонентов React, вдохновлённая дизайн-системой Apple visionOS.

• Эффекты Liquid Glass: карточки, кнопки, навигация, поля ввода, модальные окна и другие компоненты с полупрозрачными материалами и динамическим размытием фона.
• Рендеринг в реальном времени: GPU-ускоренные фильтры фона и динамическая выборка цветов адаптируют эффект к окружающему содержимому.
• Блики: интерактивные отражения света реагируют на действия пользователя и перемещаются по поверхностям.
• Плавная система движения: фирменные кривые easing Apple и физически обусловленное движение создают естественные взаимодействия.

Технические возможности

• GPU-обработка эффектов для анимаций 60 fps и экономии заряда.
• Все эффекты реализованы через CSS, без нагрузки JavaScript runtime.
• Адаптивный подход с приоритетом мобильных устройств.
• Поддержка скринридеров, клавиатурной навигации и режима уменьшения движения; соответствие WCAG 2.1 AA.
• Полные определения TypeScript и совместимость с React 18+.

Установка и использование

npm install liquid-glass-ui

git clone liquid-glass-ui

Пример: <GlassCard variant="intense" interactive specular>Your content</GlassCard>

Поддержка браузеров

Работает в Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ и Chrome for Android 76+. В старых браузерах выполняется корректное упрощение эффектов.

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

CSS custom properties, props компонентов и modifier classes позволяют менять интенсивность размытия, прозрачность, время анимации и цветовые схемы. Библиотека предназначена для разработчиков React/Next.js, UI/UX-дизайнеров, frontend-команд и проектов, которым нужны производительные эффекты glassmorphism.

Преимущества

• Готовые стеклянные эффекты без ручного CSS
• GPU-ускоренный рендеринг в реальном времени
• Качественные компоненты в стиле Apple
• Минимальный размер CSS-бандла
• Полная поддержка TypeScript