Sobre este template
Antes de reconstruir uma hero para uma empresa industrial, leia CoreOS: a composição e a especificação por trás dela estão as duas aqui. A página inteira é construída sobre preto #2E3233 por baixo. A entrega é React e Tailwind CSS, capturada em 1468x1080 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 0.5s e um loop de vídeo ao fundo. Esta referência é para uma empresa industrial que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Esta hero responde a quem constrói e quer saber o que um tamanho de display fixo de 62px e passos de espaçamento de 14px controla de fato no layout.
- Profissionais de marketing de produto que precisam que hero continue legível com 4,9s de vídeo em loop atrás do texto.
- Feito para um fundador solo lançando uma hero para uma empresa industrial, sem nenhum design system atrás.
O que está incluído
- Linha de cima: marca, links, uma ação. A navegação é uma fileira só, sem um segundo nível embaixo dela. Uma sobreposição mobile assume abaixo do breakpoint de tablet. A seção ativa é marcada por peso, não por uma pílula nem por um sublinhado.
- Uma escala para tipo e moldura. Os tamanhos são declarados, não herdados: um tamanho de display fixo de 62px, passos de espaçamento de 14px e transições de 0.5s. Troque a família tipográfica ou o texto e essas relações continuam valendo. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição. Onde o briefing se cala, ele se cala de propósito.
- Vídeo no quadro inteiro. Um clipe de 4,9s em 1468x1080 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. Exporte em 1468x1080 ou mais largo e o recorte cover continua funcionando. Exporte em 1468x1080 ou mais largo para o recorte continuar honesto.
- Uma linha, sem gaveta. A barra é uma linha de texto e uma ação, medida em um tamanho de display fixo de 62px e passos de espaçamento de 14px, para ler como faixa e não como bloco.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 4,9s em 1468x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Durações curtas e nomeadas
O orçamento de animação é pequeno e explícito: 0.5s, aplicado a mudanças de estado, não a entradas. A curva de aceleração é especificada junto com a duração (0.5s), então uma reconstrução não pode trocar a sensação sem aviso.
A hero com a sua cara
Mude o conteúdo primeiro e confira a moldura depois. um tamanho de display fixo de 62px, passos de espaçamento de 14px e transições de 0.5s são os valores a proteger enquanto você troca o texto. Reescreva o texto e a mídia antes de repintar qualquer coisa.
Como CoreOS ordena a primeira leitura
Se a sua página hoje abre com recursos, esta é a ordem a copiar: a navegação e o clipe de fundo na frente, o detalhe de apoio depois, e um tamanho de display fixo de 62px e passos de espaçamento de 14px marcando a distância. O leitor de indústria recebe a oferta antes das opções.
Os números por trás da hero
A página tem mais números do que parece. um tamanho de display fixo de 62px, passos de espaçamento de 14px e transições de 0.5s são os que uma reconstrução precisa manter; o resto pode mudar. Nada nesta hero depende de um padrão.
Perguntas frequentes
Qual é o tamanho do prompt por trás de CoreOS?
O briefing capturado tem 5.790 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Por que o prompt do CoreOS não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 5.790 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Preciso de React e Tailwind CSS para reconstruir CoreOS?
CoreOS 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.
