Sobre este template
Leia Network Hero como especificação de hero: os valores foram escritos antes de a página ser construída. “Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!” é a linha que o layout foi construído para sustentar. O esquema de cores é índigo profundo #070319 por baixo, branco #FFFFFF para a tipografia e índigo #A068FF carregando os destaques, e a página é composta em Inter. A referência é construída com React e Vite, e as decisões de layout estão declaradas independentemente dela. A página mantém o movimento em transições de 35ms e cubic-bezier(0.22, 1, 0.36, 1). Deixe aberto enquanto escreve: o briefing de 7.543 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Quem usa um builder de IA e quer um briefing que já traga uma moldura em 640x472 em vez de deixar isso para o modelo.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Network Hero.
- Designers que especificam movimento a partir de um site no ar vão usar o valor de 35ms e a cubic-bezier(0.22, 1, 0.36, 1) como estão escritos.
O que está incluído
- Uma barra sem excesso. Marca, links e a ação #A068FF compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental. Os links são compostos abaixo da marca em tamanho, e a ação #A068FF é o único elemento da barra com peso. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
- Medido contra a viewport. Nada aqui é feito no olho. A especificação fixa passos de espaçamento de 64px, transições de 35ms e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1), e o resto do layout deriva desses valores. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- O tracking aperta ao crescer. As famílias recebem papéis em vez de serem misturadas: Inter carrega o display e a interface juntos. Trocar a família é seguro desde que tamanhos e pesos fiquem onde o briefing os colocou.
- Topo com uma única ação. Se a sua página tiver mais seções, agrupe em vez de alargar a barra. A referência tem captura em 640x472.
Movimento e interação
Tempos curtos e combinados
As transições estão especificadas em 35ms usando cubic-bezier(0.22, 1, 0.36, 1), e é esse o tempo ao qual os controles obedecem. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada.
A faixa que nunca para
Um marquee atravessa a composição num loop sem fim, em Inter. O item ativo é marcado com #A068FF, não com uma mudança de tamanho. A velocidade importa mais que o conteúdo.
O que mudar primeiro em Network Hero
Compare com começar de uma página em branco. Aqui a moldura (640x472) e passos de espaçamento de 64px e transições de 35ms já estão decididas, então o trabalho é de substituição, não de composição. Mantenha o recorte da mídia; ele trabalha tanto quanto a tipografia.
O tempo por trás da hero
Uma biblioteca de animações prontas daria mais movimento que isto. O briefing pede menos: transições de 35ms, uma passada de máquina de escrever e título cronometrado caractere por caractere, e nada decorativo por cima. Nada anima por si nesta hero.
O que se sustenta para Agências e estúdios
Network Hero é a referência de hero para uma agência ou estúdio e responde ao problema que esse público realmente tem. “Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!” já faz esse trabalho desde o primeiro frame. A paleta se mantém disciplinada (índigo profundo #070319 e índigo #A068FF) e a tipografia é Inter, então nada na composição depende de uma tendência emprestada. Na hora de briefar uma construção, é esta a parte que vale copiar: uma promessa no tamanho de display, com o detalhe de apoio mantido abaixo dela. Dá ao leitor de agência a rota honesta mais curta até a oferta.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Network Hero?
O briefing capturado tem 7.543 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.
Preciso de React e Vite para reconstruir Network Hero?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para React e Vite, 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.
Como se comportam as transições de 35ms em Network Hero?
As entradas e as mudanças de estado ficam na faixa de 35ms usando cubic-bezier(0.22, 1, 0.36, 1). Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
