Sobre este template
Space planet é uma hero de educação construída a partir de um único briefing escrito, e esta página documenta esse briefing. O esquema de cores é tom #071227 por baixo, #FFFFFF para a tipografia e tom claro #5FD0E1 carregando os destaques, e a página é composta em Poppins. A entrega é um único arquivo HTML autocontido, capturada em 1920x1420 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 6s, cubic-bezier(.22,1.36,1) e um loop de vídeo ao fundo. É a referência certa para hero para uma marca de educação ou comunidade que precisa parecer intencional já na primeira tela.
Feito para
- Se a referência é só um ponto de partida, os designers podem manter curva de aceleração cubic-bezier(.22,1.36,1) e reconstruir o resto da hero.
- Esta hero serve times que precisam justificar um único arquivo HTML autocontido para alguém que não estava no kickoff.
- Feito para estúdios que precisam explicar o comportamento em 500px a um cliente sem antes construir um protótipo.
O que está incluído
- Topo com uma única ação. Os links ficam em uma linha só, em um único tamanho, e a ação #5FD0E1 fecha a fileira à direita, então o olho termina onde a navegação termina. Abaixo de 500px os links colapsam em vez de quebrar para uma segunda linha. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes.
- Vídeo na camada de baixo. A primeira tela é um único clipe em 1920x1420, e todo o resto se organiza por cima dele. O loop é curto o bastante (6,9s) para o olho ler como textura e não como linha do tempo. Exporte em 1920x1420 ou mais largo para o recorte continuar honesto.
- Uma família, usada com disciplina. A tipografia é Poppins, e o briefing dá uma função à família em vez de misturar por variedade. Peso, tracking e passos de tamanho estão todos especificados, então a hierarquia sobrevive a uma substituição. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia.
- Navegação em uma só linha. Os rótulos são curtos o bastante para caber em uma linha a 500px, e o item ativo é marcado por peso, não por uma pílula.
Movimento e interação
O loop faz o trabalho ambiente
O clipe de fundo roda 6,9s em 1920x1420 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. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
Durações vindas do briefing
O movimento nos controles é curto e repetível: 6s a cada mudança de estado. A curva de aceleração é especificada junto com a duração (6s), então uma reconstrução não pode trocar a sensação sem aviso. Não entregue o padrão do navegador.
O que uma marca de educação ou comunidade ganha aqui
Dá para reconstruir isso como uma pilha de cards separados e perder só o argumento. A hero lê como uma decisão única: a navegação, o título, o selo de anúncio, a linha de estatísticas e a lista de recursos em uma sequência só. Dá ao leitor de educação a rota honesta mais curta até a oferta.
A ordem por trás da hero
Uma tela, uma ação e a navegação, o título, o selo de anúncio, a linha de estatísticas e a lista de recursos entre as duas. O briefing fixa essa ordem em vez de entregar a primeira tela a uma pilha de seções. O leitor de educação recebe a oferta antes das opções.
Os números por trás da hero
A maioria das referências mostra o resultado e guarda os números. Esta inverte isso: seções de 100vh, passos de espaçamento de 72px, transições de 6s e curva de aceleração cubic-bezier(.22,1.36,1) são publicados ao lado da página, para o resultado ser reproduzido em vez de aproximado. Nada nesta hero depende de um padrão.
Perguntas frequentes
Preciso de um único arquivo HTML autocontido para reconstruir Space planet?
Space planet foi construído em um único arquivo HTML autocontido, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
O briefing de Space planet é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 29.105 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O prompt de Space planet é 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 1920x1420, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
