Liquid Glass React — это React-компонент, который воссоздаёт эффект Liquid Glass от Apple. Внутрь можно положить что угодно, например кнопку или карточку, и оно станет похожим на стекло.
Это библиотека кода, а не навык для агента: код, который её использует, пишет ваш ИИ-агент.
Компонент бесплатен, лицензия MIT. На 28 октября 2026 года у репозитория было около 6500 звёзд на GitHub.
Что он делает
- Изгибает и преломляет фон по краям, как настоящее стекло.
- Можно настроить степень матовости стекла, радиус углов, насыщенность цвета и хроматическую аберрацию.
- Края и блики подхватывают свет того, что под ними, как у Apple.
- Реагирует на наведение и клики, а настройка упругости даёт ему «жидкое» ощущение.
- Есть четыре режима преломления. По словам README, режим shader самый точный, но не самый стабильный.
Что стоит знать заранее
README предупреждает, что Safari и Firefox поддерживают эффект лишь частично: смещение, то есть изгиб фона, там не видно. Значит, полный эффект виден в браузерах на Chromium, а часть посетителей увидит упрощённую версию. Кроме того, чтобы стекло выглядело стеклом, за ним должно что-то быть, например картинка или градиент.
Как установить
npm install liquid-glass-reactЗатем попросите агента обернуть кнопку или карточку компонентом LiquidGlass и настроить его, например сделать стекло менее матовым или форму круглее. В README есть ссылка на живое демо.