Liquid Glass UI

Funciones principales

Liquid Glass UI es una biblioteca de componentes React inspirada en el sistema de diseño visionOS de Apple.

• Componentes con efecto Liquid Glass: tarjetas, botones, navegación, campos, modales y más, con materiales translúcidos y desenfoque dinámico del fondo.
• Renderizado en tiempo real: filtros de fondo acelerados por GPU y muestreo dinámico del color para adaptar el efecto de cristal al contenido circundante.
• Reflejos especulares: las reflexiones interactivas responden a las acciones del usuario y se desplazan por las superficies como en un cristal real.
• Sistema de movimiento fluido: curvas de easing características de Apple y movimiento basado en física para interacciones naturales.

Características técnicas

• Todos los efectos se ejecutan en la GPU para ofrecer animaciones a 60 fps y eficiencia de batería.
• Sin runtime de JavaScript: los efectos se implementan mediante CSS, sin sobrecarga de ejecución de JS.
• Diseño responsive con enfoque mobile-first para todos los tamaños de pantalla y dispositivos.
• Accesibilidad prioritaria: lectores de pantalla, navegación con teclado y preferencias de reducción de movimiento; cumple WCAG 2.1 AA.
• Definiciones completas de TypeScript y compatibilidad con React 18+.

Instalación y uso

# Instalar mediante npm
npm install liquid-glass-ui

# O copiar los componentes
git clone liquid-glass-ui

Ejemplo de uso:

import { GlassCard } from 'liquid-glass-ui'

<GlassCard variant='intense' interactive specular>
  Your content
</GlassCard>

Compatibilidad con navegadores

Funciona en navegadores modernos: Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ y Chrome para Android 76+. En navegadores antiguos, degrada sus funciones de forma gradual.

Personalización

Ofrece amplias opciones mediante propiedades personalizadas de CSS, props de componentes y clases modificadoras. Ajusta la intensidad del desenfoque, la transparencia, los tiempos de animación y los esquemas de color.

Usuarios objetivo

• Desarrolladores de React y Next.js
• Diseñadores de UI/UX
• Equipos frontend que buscan un diseño inspirado en Apple
• Proyectos que requieren efectos de glassmorphism de alto rendimiento

Ventajas principales

• Efectos de cristal integrados sin escribir CSS manualmente
• Renderizado en tiempo real acelerado por GPU
• Componentes de alta calidad inspirados en el sistema de diseño de Apple
• Tamaño reducido del paquete CSS
• Compatibilidad completa con TypeScript