Sobre este template
Leia Neurolink Hero Section como especificação de hero: os valores foram escritos antes de a página ser construída. O título diz “Where Memories Live Forever”, e o resto da hero se organiza em volta disso. A paleta se reduz a azul profundo #0D1017 por baixo, branco #FFFFFF para a tipografia e laranja vivo #FFB733 carregando os destaques, e a tipografia é Inter. A entrega é vanilla JS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento cabe todo em um loop de vídeo ao fundo. Trate como o briefing de uma hero para uma agência ou estúdio que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Esta hero serve times que precisam justificar uma moldura em 1526x1080 para alguém que não estava no kickoff.
- Se três pessoas vão editar esta hero, dê a quem cuida do conteúdo seções de 100vh e passos de espaçamento de 16px em vez de uma captura de tela.
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de agência aguenta 3,9s de vídeo em loop.
O que está incluído
- Links antes da ação. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #FFB733, dimensionada para ficar discreta diante do resto da página. Os links são compostos abaixo da marca em tamanho, e a ação #FFB733 é o único elemento da barra com peso.
- Tamanhos fixados no briefing. Toda medida do briefing é um número que dá para medir de volta: seções de 100vh e passos de espaçamento de 16px. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto. Porte os valores junto com o layout.
- Um elemento de mídia carrega o clima. Um único clipe mudo em loop preenche a moldura em 1526x1080 e 3,9s, com object-fit cover e o texto empilhado acima. O briefing mantém sobreposições fora do vídeo para nada acinzentar a imagem. Exporte em 1526x1080 ou mais largo e o recorte cover continua funcionando.
- O tamanho de display fala. A linha de display é composta em Inter em um tamanho que o briefing fixa, o que faz do título um elemento de composição e não um parágrafo. Os pesos são especificados por papel, então a hierarquia não depende de chute na hora de construir.
Movimento e interação
Hover, mas com parcimônia
O feedback se limita a estados de hover nos botões e links, não em todos os cards, então o resto do layout é uma composição fixa. Os estados saem da paleta da própria página, não do padrão de um componente. Mantenha a camada interativa pequena.
Um loop, não uma linha do tempo
Um único clipe de 3,9s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. 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.
O que esta hero acerta
A maioria das páginas de agência falha por acréscimo: mais seções, mais gradientes, mais promessas. Neurolink Hero Section vai pelo caminho oposto. “Where Memories Live Forever” já faz esse trabalho desde o primeiro frame. A composição fica em azul profundo #0D1017 com laranja vivo #FFB733 nas ações, e isso basta para parecer intencional. Neurolink Hero Section enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como a hero se reorganiza
Um layout estreito desenhado exige mais decisões que um espremer. O briefing paga por elas: a escala é fluida, não em degraus e a seção fica presa a 100vh, declarado em vez de descoberto na hora de construir. A ordem é a última coisa a mudar.
Como Neurolink Hero Section ordena a primeira leitura
O preço é a paciência: a página retém o detalhe que uma grade escaneável entregaria de imediato. O que ela compra é uma primeira tela em que a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo não podem ser mal interpretados. O leitor de agência recebe a oferta antes das opções.
Perguntas frequentes
O briefing de Neurolink Hero Section é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 10.336 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que o briefing por trás de Neurolink Hero Section contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1526x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de vanilla JS para reconstruir Neurolink Hero Section?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para vanilla JS, mas a mesma composição se reconstrói no que você já usa. A stack é nomeada para você saber como a referência foi feita.
