Treating Glass as a Living Digital Material
Not just another transparent backdrop-filter. Glass UI calculates physical diffusion, specular edge highlights, optical refraction, and micro-textures for genuine visual depth in React and Next.js.
Optics Engine v1
Depth 3 • Crystal Recipe
Glass Engine Studio
Ajuste as propriedades físicas do material em tempo real e copie o código pronto para usar em qualquer projeto React.
Controles Ópticos
crystal Surface
Depth 2 • Tint neutral
Observe como os gradientes de fundo e o texto refratam sob esta superfície. Mova o cursor para notar o brilho especular dinâmico na borda e no reflexo.
<Glass
material="crystal"
depth={2}
blur={18}
opacity={0.16}
saturation={2}
brightness={1.1}
tint="neutral"
border="specular"
specular={true}
interactiveLight={true}
noise="subtle"
rounded="2xl"
>
<div className="p-8">
<h3>Glass Digital Surface</h3>
<p>Physics-driven refractive glass</p>
</div>
</Glass>Superfícies em Ação
Glass UI não é apenas para cards isolados. Veja como ecossistemas inteiros ganham vida através da linguagem de profundidade do vidro.
Apple visionOS & macOS Glass Dock
Passe o cursor sobre os ícones para notar a magnificação elástica e o reflexo especular na cápsula de vidro.
Spatial Depth Engine
Cápsulas de vidro com profundidade física e micro-sombras integradas.
Catálogo de Componentes
Componentes acessíveis, fortemente tipados e projetados desde a base para a linguagem visual Glassmorphism.
GlassButton & Icons
Responde ao clique com contração física e ao hover com reflexo luminoso.
GlassInput & Forms
Campos com contraste óptico aprimorado e halo de foco luminoso.
GlassSwitch & Slider
Toggles deslizantes com indicador translúcido e trilhos táteis.
GlassBadge & Avatar
Badges de status translúcidos e avatares com borda de vidro polida.
GlassTabs
Abas com cápsula de destaque que desliza sob o item selecionado.
Princípio visual com bordas especulares e transmissão luminosa.
GlassModal (Depth 4)
Janelas modais em profundidade máxima com backdrop inteligente.
GlassCommand (⌘K)
Command palette com busca em tempo real, navegação por teclado (↑ / ↓ / Enter) e atalho ⌘K.
GlassToast (Notificações)
Toasts 3D imperativos (glassToast) empilhados com profundidade óptica, auto-dismiss e suporte a ações customizadas.
GlassAccordion
Painéis expansíveis com elevação tátil, física de abertura fluida e chevron animado integrado.
GlassProgress
Trilho translúcido com preenchimento líquido iluminado, reflexo especular superior e suporte a listras animadas ou modo indeterminado.
GlassSkeleton
Varredura contínua de luz sobre superfícies vítreas para estados de carregamento.
GlassTable
Tabela de dados translúcida com cabeçalho sticky, hover com iluminação especular e linhas selecionáveis.
| Pipeline | Camada | Status |
|---|---|---|
| Backdrop Filter | GPU Shader | Ativo |
| Reflexo Especular | Fresnel | Calibrado |
| Difração Prismática | Óptica | Canary |
| Cache de Ruído | Perlin Micro | Otimizado |
GlassCalendar
Grade de datas com navegação mensal, indicador de hoje e cápsula de seleção com halo vítreo.
GlassDatePicker
Campo seletor com popover flutuante translúcido, backdrop blur dinâmico e auto-fechamento ao clicar fora.