Ver Liquid Glass React en GitHub
Liquid Glass React es un componente React que recrea el efecto Liquid Glass de Apple. Pones dentro cualquier contenido, como un botón o una tarjeta, y obtiene el aspecto de cristal.
Es una biblioteca de código, no una skill de agente: tu agente de IA escribe el código que la usa.
Es gratuito con licencia MIT. El 28 de octubre de 2026 el repositorio tenía unas 6.500 estrellas en GitHub.
Qué hace
- Curva y refracta el fondo en los bordes, como el cristal real.
- Permite ajustar cuánto esmerilado tiene el cristal, el radio de las esquinas, la saturación del color y la aberración cromática.
- Los bordes y los brillos toman la luz de lo que hay debajo, como en la versión de Apple.
- Reacciona al hover y a los clics, con un ajuste de elasticidad que le da un toque “líquido”.
- Tiene cuatro modos de refracción. Según el README, el modo shader es el más preciso, pero no el más estable.
Qué saber antes
El README advierte que Safari y Firefox solo admiten el efecto en parte: el desplazamiento, es decir, la curvatura del fondo, no se ve allí. Así que el efecto completo se ve en navegadores basados en Chromium, y algunos visitantes verán una versión más simple. Además, el cristal necesita algo detrás, como una imagen o un degradado, para parecer cristal.
Cómo instalarla
npm install liquid-glass-reactLuego pide a tu agente que envuelva un botón o una tarjeta con el componente LiquidGlass y lo ajuste, por ejemplo con menos esmerilado o una forma más redonda. El README enlaza una demo en vivo.