O que você recebe
- Uma primeira tela completa em um único arquivo HTML: cabeçalho, hero, chips de passo e faixa animada
- Um bloco React e Tailwind tipado, com um componente reutilizável de campo de partículas
- Um motor de partículas sem bibliotecas, com formações de esfera, anel, onda, hélice e imagem
- Tokens de tema claro e escuro em papel quente e um verificador de cores fora da paleta
- Silhueta opcional do produto gerada pelo PopNow para as partículas, cotada antes
Ideal para
- Landing pages de SaaS, apps e ferramentas
- Lançamentos que cabem em três ideias curtas
- Trocar uma imagem estática de hero por um movimento suave
Não é para
- Marcas escuras e de alta energia
- Narrativas longas guiadas pela rolagem
- Páginas já dominadas por uma foto ou um vídeo grande
Como usar
No Claude ou no ChatGPT
Use a skill da PopNow “Hero com animação de partículas” (particle-animation-hero) para isto: Adicione um hero ao meu site Next.js de um rastreador de hábitos: 'Pequenos passos, mantidos todo dia', ideias Acompanhar, Empilhar, Comemorar.
Em um agente de programação
/popnow-particle-animation-hero Adicione um hero ao meu site Next.js de um rastreador de hábitos: 'Pequenos passos, mantidos todo dia', ideias Acompanhar, Empilhar, Comemorar.
Depois tente
Faça a terceira ideia formar o nosso logotipo de folha a partir de public/leaf.png.
Me dê também a versão HTML simples para a página de lista de espera.
O que ter em mãos
- Um título, uma ou duas frases e dois links
- Três ideias curtas, cada uma com uma legenda de uma linha
- Opcional: um PNG transparente da sua marca ou do produto, ou uma chave de API do PopNow
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.
Modelo de site glassmorphism
+3Pílulas de vidro fosco sobre película quase preta, título serifado enorme e captura de e-mail.
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.
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
Pesa muito?
Não. É um único canvas 2D e algumas centenas de linhas de JavaScript puro, sem WebGL nem biblioteca de animação. A quantidade de pontos acompanha o tamanho da tela, e o loop para em abas ocultas e quando o hero sai da tela.
As partículas podem formar o meu logotipo?
Podem, se for seu. Envie um PNG transparente de uma forma forte e simples, e o motor amostra a forma em pontos. O PopNow também pode gerar uma silhueta limpa do seu produto, depois que você vir o preço.
Como os visitantes controlam a animação?
Três chips de passo abaixo dos botões transformam os pontos, por clique ou com as setas do teclado. Antes de alguém escolher, o campo avança sozinho a cada poucos segundos.
Respeita o movimento reduzido?
Sim. Com movimento reduzido ativado, os pontos ficam parados, os passos mudam sem transição, nada avança sozinho e a faixa animada para de deslizar.