Sobre este template
Esta é a hero da Aetheris Voyage, publicada com o briefing que a produziu em vez de apenas uma captura de tela. O título da própria página é “Venture Past Our Sky Across the Universe”, e a composição é construída em volta exatamente dessas palavras. A cor se limita a preto #181719 por baixo e laranja suave #ECD9C1 para a tipografia, composta em Instrument Serif. A entrega é React e Tailwind CSS, capturada em 800x570 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 100ms e um loop de vídeo ao fundo. É a referência certa para hero para uma marca de viagens que precisa parecer intencional já na primeira tela.
Feito para
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de viagens aguenta 8,8s de vídeo em loop.
- Quem briefa um modelo para uma hero vai usar o prompt de 10.190 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Aetheris Voyage.
O que está incluído
- A barra segue a grade. A barra é uma linha de texto e uma ação, medida em passos de espaçamento de 10px e transições de 100ms, para ler como faixa e não como bloco. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte.
- Um clipe, não uma ilustração. A mídia é um clipe de 8,8s recortado para cover na moldura em 800x570, então nunca aparecem faixas pretas em nenhuma largura. Exporte em 800x570 ou mais largo e o recorte cover continua funcionando.
- Uma família, dois papéis. No topo da escala está Instrument Serif, com o texto de apoio bem abaixo, para a hierarquia não precisar de cor para ser lida. O passo de legenda é pequeno o bastante para ficar sob um número sem mudar o ritmo da página. Uma família com papéis claros vence duas que competem.
- Uma barra sem excesso. Uma barra fina ocupa o topo de hero, com a marca à esquerda e os links em Instrument Serif, para a composição ler conteúdo primeiro e moldura depois.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O clipe de fundo roda 8,8s em 800x570 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. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório.
Todo o orçamento de animação
Os controles resolvem em 100ms, rápido o bastante para a página responder ao toque, e não depois dele. Como os valores são curtos, uma reconstrução que os deixe mais lentos fica visível na hora. Se mudar a curva de aceleração, mude em todos os lugares.
A ordem por trás da hero
Quando um leitor de viagens cai em uma tela única, ele escaneia antes de ler. O layout responde a isso: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards são dimensionados para o escaneamento, com passos de espaçamento de 10px e transições de 100ms mantendo cada parada distinta. O leitor de viagens recebe a oferta antes das opções.
Como a hero se reorganiza
A hero é composta em 800x570 e recomposta para larguras estreitas. a escala é fluida, não em degraus, então a versão de celular é uma decisão, não um espremer. A hierarquia é o que sobrevive à reorganização.
A hero com a sua cara
Mude o texto e a mídia primeiro, a cor depois, o layout por último. A moldura em 800x570 e a escala em Instrument Serif são o que mantém a página coesa, então substitua em volta deles, não através deles. Reescreva a linha de display antes de tocar na cor.
Perguntas frequentes
O prompt de Aetheris Voyage é 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 800x570, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
Aetheris Voyage foi construído em React e Tailwind CSS, 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.
De onde veio o design de Aetheris Voyage?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 800x570.
