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.