Sobre este template
Planetary Pulse é a referência de hero para uma marca de educação ou comunidade, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. A paleta se reduz a cinza #C2CCD3 por baixo, e a tipografia é Helvetica, Arial. A entrega é Tailwind e JavaScript puro: uma página só, sem plugin e sem ferramenta de build entre você e o design. A página mantém o movimento em transições de 300ms, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo hero para uma marca de educação ou comunidade e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Entregue Tailwind e JavaScript puro ao engenheiro com o recorte em 1826x1080 anexado e deixe que ele reconstrua.
- Tome a estrutura da hero inteira e substitua o texto linha por linha contra um breakpoint de 280px.
- Escreva o seu próprio título e depois reconstrua esta hero em Tailwind e JavaScript puro com as medidas intactas.
O que está incluído
- Navegação sem fundo próprio. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Os rótulos são curtos o bastante para caber em uma linha a 280px, e o item ativo é marcado por peso, não por uma pílula.
- O loop é o fundo. O vídeo fica na camada de baixo da composição em 1826x1080, com a tipografia organizada acima e nada entre os dois. Exporte em 1826x1080 ou mais largo e o recorte cover continua funcionando.
- Pesos nomeados por papel. A linha de display é composta em Helvetica, Arial em um tamanho que o briefing fixa, o que faz do título um elemento de composição e não um parágrafo. Substituir a família é possível, mas as proporções precisam sobreviver à troca.
- Faixa de números, não tabela. Uma faixa compacta de estatísticas carrega as afirmações que de outro modo pediriam um parágrafo, o que impede a composição de hero de virar uma lista de recursos. A fileira pertence à primeira tela e não a uma faixa separada, o que mantém a prova perto da afirmação.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O clipe de fundo roda 5,9s em 1826x1080 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Todo o orçamento de animação
Hover, clique e foco resolvem todos em 300ms, e é isso que faz a interface parecer imediata. Os estados de foco usam o mesmo valor do hover, então teclado e ponteiro recebem o mesmo feedback. Mantenha as durações quando você trocar a pele da página.
Como Planetary Pulse ordena a primeira leitura
Compare o topo desta página com uma tela de landing page típica de educação. As duas trazem um título e uma ação; aqui a navegação, a linha de estatísticas, a grade de cards, a lista de recursos e o clipe de fundo ficam em ordem fixa em vez de competir com o mesmo peso. O leitor de educação recebe a oferta antes das opções.
O tempo por trás da hero
Dá para jogar uma biblioteca de presets sobre esta composição e ela ficaria mais ocupada, não melhor. O briefing mantém transições de 300ms, um loop de mídia de 5,9s e uma revelação de linha com máscara e gasta o orçamento ali. Nada anima por si nesta hero.
Como a hero se reorganiza
Larga, a composição é densa; estreita, o layout muda em 280px, a seção fica presa a 100vh e a navegação vira um menu compacto no celular. Os dois estados estão descritos no briefing. Os dois estados estão descritos no mesmo briefing.
Perguntas frequentes
Preciso de Tailwind e JavaScript puro para reconstruir Planetary Pulse?
A referência foi construída em Tailwind e JavaScript puro por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
Como esta entrada de Planetary Pulse está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 26.446 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O prompt de Planetary Pulse é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1826x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
