O que você recebe
- Um arquivo HTML com fontes e imagens embutidas, sem requisições de rede
- Hero com captura de e-mail, prévia do produto com um gráfico ao vivo, seletor de oferta, preços, FAQ e cadastro final
- Rotas funcionais: edição de amostra com paywall, arquivo pesquisável, inscrição com assentos e presentes, login, páginas jurídicas e 404
- Um validador de links, rotas, rótulos, da receita de vidro e de textos de exemplo que sobraram
- Imagens, retratos, um loop de hero e um cartão social do PopNow, opcionais, após cotação em créditos
Ideal para
- Páginas de cadastro para newsletters e resumos
- Listas de espera, betas privados e campanhas de lançamento
- Assinaturas, cursos ou eventos que vendem vagas
Não é para
- Marcas claras, pastéis ou coloridas: a página é só preta e branca
- Lojas online com muitos produtos
- Sites de SaaS que precisam de um longo tour de recursos
Como usar
No Claude ou no ChatGPT
Use a skill da PopNow “Modelo de site glassmorphism” (glassmorphism-website-template) para isto: Faça a página de cadastro da Tidewatch, um e-mail de sexta-feira para velejadores de barcos pequenos: um gráfico de previsão, três notas do porto e uma leitura longa. Grátis, mais um plano de tripulação de US$ 5 por mês.
Em um agente de programação
/popnow-glassmorphism-website-template Faça a página de cadastro da Tidewatch, um e-mail de sexta-feira para velejadores de barcos pequenos: um gráfico de previsão, três notas do porto e uma leitura longa. Grátis, mais um plano de tripulação de US$ 5 por mês.
Depois tente
Informe o custo de uma imagem de hero de água escura à noite e de um loop de 5 segundos feito a partir dela, antes de gerar qualquer coisa.
Adapte a página para o meu site em Astro, como componentes e rotas reais.
O que ter em mãos
- O nome, o que a inscrição dá às pessoas e a promessa única do título
- De três a quatro fatos que você sustente, planos, preços e de quatro a seis respostas de FAQ
- O seu DESIGN.md, se a marca tiver um
- Opcional: uma chave de API do PopNow ou as suas próprias fotos e filmagens escuras
Skills parecidas
Ver todas →Criador de avatar 3D
+3Monte um personagem 3D fofo de pelúcia no navegador e salve como PNG transparente ou página 3D.
Calendário heatmap
+3Um ano de atividade diária em uma grade de calendário sombreada, com sequências, totais e navegação por teclado.
Landing page de SaaS com IA
+3Papel areia, trilhos finos e um quadro kanban ao vivo em que um assistente planeja tarefas.
Seção hero animada
+3Um hero de landing page com uma palavra do título que gira suavemente, dois botões e um quadro largo de imagem.
Site de agência com hero em shader
+3Hero de shader laranja ao vivo atrás de uma frase fixada, navegação em pílula e uma grade de cases.
Landing page SaaS escura
+3Um site de marketing escuro e cheio de movimento para um produto de software, entregue em um único arquivo HTML.
Site de portfólio de designer
+3Seis cartões inclinados em volta de um título sobre cinza calmo, um retrato em vermelho e cases editoriais.
Site de portfólio para desenvolvedor
+3Um site pessoal escuro para engenheiros, com cases, artigos, palestras, currículo e formulário de contato.
Site editorial de SaaS
+3Hero dividido em azul-marinho, título serifado ao lado de uma foto documental e um destaque azul-cobalto.
Site de produto de hardware
+3Nomes de modelo enormes e finos sobre fotos prateadas, cartões de especificação e linha em escala.
Diagrama de arquitetura interativo
+3Um diagrama de sistema offline e clicável, feito a partir de um modelo JSON verificado, com a evidência por trás de cada caixa.
Hero interativo com grade
+3Uma grade escura de fios finos que se curva em direção ao cursor e lança um anel luminoso a cada clique.
Explorador de grafo de conhecimento
+3Transforme anotações de projeto em um grafo offline e pesquisável, em que cada afirmação leva à linha de origem.
Modelo de dashboard de KPIs
+3Quatro cartões de KPI com variação, um gráfico de linha, detalhamento e barras de meta em papel quente.
Landing page a partir de mockups com IA
+3Veja três páginas completas antes, escolha uma, e o seu agente a constrói como código limpo e responsivo.
Template de site de revista
+3Um site de revista com qualidade de impresso, com artigos, temas, uma pequena loja e assinaturas, em um arquivo HTML.
Hero com animação de partículas
+3Texto em papel quente ao lado de uma esfera girando de pontos em tinta e azul-petróleo, que muda a cada ideia.
Site de marca pessoal
+3Um retrato esfumado sobre papel quente, sob um colchete fino, com afirmações claras e fortes de cada lado.
Página de lançamento de produto cinematográfica
+3Página quase preta com luz de cinema: título em serifa, cena noturna em letterbox e formulário de reserva.
Template de painel administrativo
+3Um painel de back-office funcional com gráficos, tabelas, kanban e calendário, em um único arquivo HTML offline.
Template de landing page SaaS
+3Um site de marketing claro e tranquilo para um produto de software, com console de produto funcional, preços e cadastro.
Site de portfólio estilo scrapbook
+3Um currículo online de várias páginas feito de objetos de papel, com cases e um currículo para imprimir.
Template de site de loja de tênis
+3Uma loja completa de calçados ou roupas, com catálogo, páginas de produto, sacola e checkout de demonstração em um arquivo HTML.
Landing page de automação de fluxos
+3Página grafite com título pequeno e um grafo de nós ao vivo que roda, tenta de novo e mostra logs.
Perguntas
O que faz o vidro parecer certo, e não uma caixa borrada?
Toda superfície elevada usa uma única receita: um interior com leve tonalidade e desfoque de fundo, um brilho suave no topo e uma borda desenhada com um anel de gradiente mascarado, para que a luz pegue nas bordas superior e inferior. O validador reprova uma página que abandone a receita.
O hero pode se mover?
Pode. Depois que você aprova a imagem do hero, o PopNow pode animá-la num clipe de 5 segundos, e o script de loop incluído transforma isso num loop contínuo, sem áudio, com pôster. Movimento reduzido e abas ocultas mantêm a imagem fixa.
Serve só para newsletters?
Não. O exemplo é um resumo noturno, mas o guia de adaptação mapeia as mesmas seções para listas de espera de apps, cursos, eventos e podcasts: a prévia do produto vira a tela do app, e o arquivo vira um changelog ou uma lista de sessões.
Preciso de uma chave de API do PopNow?
Não. A página vem com imagens neutras incluídas e substitutos em CSS para cada espaço de imagem. Uma chave acrescenta novas imagens, retratos, o loop e um cartão social, cada um cotado em créditos antes de rodar.