Glassmorphism

Vidro modelado fisicamente: refração de Snell numa borda fosca, um único sol e um solver que mede o ambiente atrás de cada painel e define sua tinta, para o texto manter 4.5:1 sobre qualquer fundo.

Feito para: Mídia, consumo, fintech e quem teve a UI de vidro falhando numa foto clara

Gravação de Glass, 16 s. O código pago não roda neste site.

Páginas

  1. Glass Componentes, WebUma bancada ao vivo onde mudar o ambiente, o sol ou o fosco resolve cada painel de novo, e o H1 informa o que o solver acabou de medir
  2. Tidewater Dashboard, WebUma janela de torre de porto: os painéis seguram as bordas da vista, o crepúsculo cai num controle deslizante, e cada painel muda de tinta com o céu enquanto o plano de berços recalcula o H1
  3. Sidecut Dashboard, WebUma mesa de gravadora atrás de uma janela molhada: cada lançamento reilumina a rua lá fora, e as divisões que você arrasta recalculam quanto cada um recebe
  4. Tintline Landing page, WebUm painel real numa parede ensolarada: rolar é o dia, o sol guia as sombras, a borda e o tom, e o H1 é o que o prédio decidiu
  5. Verso Landing page, IAUma lupa de vidro sobre uma carta real em alemão: a borda curva o texto ao vivo, a frase sob o vidro está no seu idioma, e o H1 é o que você estiver segurando a lupa sobre
  6. Slackwater App mobile, MobileUm app de natação em águas abertas flutuando na água: o celular é vidro sobre o mesmo mar da página, e a curva de maré que você percorre define o sol, a água e o H1

O que vem dentro

  • 6 páginas, um arquivo cada, sem props
  • 8 componentes próprios, escritos para este kit
  • 4 motores por trás do comportamento característico
  • Fontes com suas licenças OFL: Gl Sans, Gl Serif
  • README com os passos de instalação para Next.js e Tailwind v4 e os termos da licença

Como comprar

Todos os kits estão no goodui Pro: $99 uma vez, com atualizações vitalícias. O Team custa $249 para até 10 desenvolvedores.

O checkout ainda não abriu. Entre na lista e enviaremos o link de pré-venda uma vez.

O checkout abre em breve. Enviamos um único e-mail, com o seu link de lançamento.

Comparar planos

Incluído no goodui Pro. Cole sua chave de licença; ela fica só neste navegador.

Ainda sem licença? Veja os preços

Com uma chave de licença, pelo seu terminal:

curl -H "Authorization: Bearer $GOODUI_LICENSE_KEY" -o goodui-glass.zip https://goodui.dev/kits/glass.zip