Liquid Glass UI

Principais recursos

Liquid Glass UI é uma biblioteca de componentes React inspirada no sistema de design visionOS da Apple.

• Componentes com efeito Liquid Glass: cards, botões, navegação, campos, modais e mais, com materiais translúcidos e desfoque dinâmico do plano de fundo.
• Renderização em tempo real: filtros de fundo acelerados por GPU e amostragem dinâmica de cores adaptam os efeitos ao conteúdo ao redor.
• Reflexos especulares: reflexos interativos respondem às ações do usuário e percorrem as superfícies como a luz em um vidro real.
• Sistema de movimento fluido: curvas de easing características da Apple e movimento baseado em física criam interações naturais.

Recursos técnicos

• Todos os efeitos são executados na GPU para animações a 60 fps e eficiência da bateria.
• Sem runtime de JavaScript: os efeitos são implementados em CSS, sem sobrecarga de execução de JS.
• Design responsivo com abordagem mobile-first para todos os tamanhos de tela e dispositivos.
• Acessibilidade em primeiro lugar: suporte a leitores de tela, navegação por teclado e preferências de redução de movimento, em conformidade com WCAG 2.1 AA.
• Definições completas de TypeScript e compatibilidade com React 18+.

Instalação e uso

# Instalar via npm
npm install liquid-glass-ui

# Ou copiar os componentes
git clone liquid-glass-ui

Exemplo de uso:

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

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

Suporte a navegadores

Funciona em navegadores modernos: Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ e Chrome para Android 76+. Em navegadores antigos, os recursos são reduzidos de forma gradual.

Personalização

Oferece amplas opções de personalização por meio de propriedades personalizadas de CSS, props de componentes e classes modificadoras. Ajuste a intensidade do desfoque, os níveis de transparência, o tempo das animações e os esquemas de cores.

Usuários-alvo

• Desenvolvedores React/Next.js
• Designers de UI/UX
• Equipes de frontend que buscam um design inspirado na Apple
• Projetos que precisam de efeitos de glassmorphism de alto desempenho

Principais vantagens

• Efeitos de vidro integrados sem CSS manual
• Renderização em tempo real acelerada por GPU
• Componentes de alta qualidade inspirados no sistema de design da Apple
• Bundle CSS reduzido
• Suporte completo a TypeScript