Liquid Glass UI: новый стандарт интерфейсов 2026 и как мы его внедряем
Apple показала, куда движется дизайн. Рассказываем, как повторить эффект на WebGL без 30 fps и лагов.
Дайджест Креастры
- Liquid Glass — это WebGL-шейдер, а не backdrop-filter
- 60 fps на mid-range Android при правильной оптимизации
- +15-30% времени на странице, +8-18% к заявке — измерено на 6 проектах
В 2020 году все делали нейморфизм. В 2023 — скевоморфизм вернулся под именем «glass». В 2026 — Apple показала visionOS, и правила снова поменялись.
Liquid Glass — это не эффект. Это новая школа. Интерфейс не просто «показан» на экране — он живёт поверх реального контента, преломляет свет, реагирует на жесты, меняет форму под курсор. И делать это нужно не `backdrop-filter: blur(20px)`, а шейдером на WebGL.
Почему обычное «стекло» больше не впечатляет
Откройте любой сайт 2021–2024. Там везде один и тот же приём:
background: rgba(255,255,255,0.08);
backdrop-filter: blur(20px);Это работает. Это выглядит ок. Но — это плоско. У такого «стекла» нет:
- Преломления (реальное стекло смещает свет позади)
- Хроматической аберрации (разложение света по краям)
- Реакции на свет и курсор
- Искажения формы при взаимодействии
Что такое настоящий Liquid Glass
Настоящий LG — это WebGL-слой, который сэмплирует то, что под ним, и применяет 4 вещи:
- Displacement map. Шум FBM смещает UV, имитируя поверхность «капли».
- Chromatic aberration. RGB-каналы сэмплируются с разным смещением → по краям светится фиолетово-зелёное, как в настоящем стекле.
- Pointer-driven lens. Там, где курсор, стекло «надавливается» — локальное преломление сильнее.
- Edge rim light. На границах элемента — тонкая светящаяся кромка.
Сколько это стоит по перформансу
Правильно написанный LG-шейдер = 1 полноэкранный draw call на элемент. 10 элементов на экране = 10 draw calls. На среднем смартфоне 2022 года это 60 fps. На десктопе — даже не заметите.
Правила, чтобы не просадить сайт
LG — мощный, но легко перестараться:
- Не больше 12 LG-карт на экране. Больше — деградация даже на топовых устройствах.
- Обязательный LOD. На мобилках → fallback на `backdrop-filter`. Не рендерим WebGL на слабых девайсах.
- IntersectionObserver. Пауза рендера, когда карта за пределами viewport.
- DPR clamping. Не рендерим в 3× pixel density — хватит 1.5×.
- Premultiplied alpha = false. Иначе кромка будет грязно-серой.
«Хороший liquid glass — это когда пользователь не говорит «вау, какое стекло». Он говорит «вау, какой приятный интерфейс». Эффект должен быть незаметен, но ощущаться».
Когда НЕ надо использовать
- Админки и B2B дашборды. Тут важна читаемость, а не вау. Оставляйте плоские карточки.
- Формы ввода. Стекло снижает контраст — пользователь не видит, что печатает.
- Текст поверх фото. Вообще без стекла нельзя, но LG тут избыточен — достаточно полупрозрачного тёмного слоя.
Где надо — 100%
Hero-секция лендинга. Карточки услуг. Модалки поверх контента. Фиксированная навигация. Floating-панели. Всё, где нужно ощущение «слой поверх мира».
Мы внедрили LG на 6 проектах в 2026 году. Во всех — измеримый эффект на вовлечённость: +15–30% к времени на странице, +8–18% к конверсии в заявку. Эффект не магия, а отстройка от конкурентов.