Sobre este template
Visual Hero foi capturada em 996x720 e guardada como especificação, não como imagem de galeria. O título diz “Forma's AI understands context, composition, and style like a creative director would”, e o resto da hero se organiza em volta disso. A página é composta em Instrument Serif, com os tamanhos fixados no briefing. A entrega é React e Tailwind CSS, capturada em 996x720 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 8.275 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Comece por passos de espaçamento de 50px e deixe a paleta vir depois, porque é o espaçamento que faz esta hero ler.
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 6,9s de vídeo em loop.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Visual Hero.
O que está incluído
- Uma linha, sem gaveta. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a passos de espaçamento de 50px, para a barra nunca competir com a composição atrás dela. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto. Mantenha a linha de cima em uma só.
- Mídia sem sobreposição. A moldura em 996x720 é preenchida por um único loop que roda atrás do texto e não pede controles. Exporte em 996x720 ou mais largo e o recorte cover continua funcionando.
- Prova em uma fileira. Os números são compostos em Instrument Serif em um tamanho mais próximo do título do que do corpo de texto. Não há divisores dentro da fileira; só o espaçamento separa os números.
- Topo com uma única ação. A barra é uma linha de texto e uma ação, medida em passos de espaçamento de 50px, para ler como faixa e não como bloco.
Movimento e interação
Um só comportamento de scroll
Parallax é o único comportamento de scroll no briefing, o que impede a página de parecer uma sequência de efeitos separados. O layout estático por baixo não muda, o que mantém a composição legível com o efeito desligado.
Um loop, não uma linha do tempo
O clipe de fundo roda 6,9s em 996x720 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.
Ler Visual Hero como especificação
Números específicos envelhecem: um valor que serve para 996x720 pode não servir para a sua moldura. O briefing declara passos de espaçamento de 50px mesmo assim, porque um valor declarado é mais fácil de mudar que um implícito. Nada nesta hero depende de um padrão.
A ordem por trás da hero
A atenção é conduzida, não deixada ao acaso. A página diz isso em voz alta: “Forma's AI understands context, composition, and style like a creative director would”. A sequência corre por a navegação, o selo de anúncio, a linha de estatísticas e o clipe de fundo, e cada parada é dimensionada contra passos de espaçamento de 50px para que nada chegue fora de ordem. O leitor de SaaS recebe a oferta antes das opções.
O que se sustenta para IA e SaaS
Visual Hero funciona porque a hierarquia dela é decidida, não decorada. O briefing fixa passos de espaçamento de 50px, então um texto novo cai dentro da moldura em vez de reabri-la. Visual Hero enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que o briefing por trás de Visual Hero contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 996x720, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Visual Hero depende de React e Tailwind CSS?
Visual Hero 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.
Como devo tratar a mídia de Visual Hero em um projeto de cliente?
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 996x720.
