Sobre este template
Portiva Hero foi capturada em 1466x1080 e guardada como especificação, não como imagem de galeria. Ela abre com “Less complexity, more impact in every project” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta é verde-água #087573 por baixo, branco #D1E5E7 para a tipografia e laranja #C25E2E carregando os destaques, com tipografia Inter. A stack é um único arquivo HTML autocontido, então dá para levar hero para um projeto sem handoff de design. O movimento se resume a transições de 120ms e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Se você está briefando uma hero de agência, parta desta composição e substitua o assunto.
Feito para
- Escreva o seu próprio título e depois reconstrua esta hero em um único arquivo HTML autocontido com as medidas intactas.
- Feito para um designer entrando em um projeto que já entrega um único arquivo HTML autocontido e só precisa do texto substituído.
- Times que reconstroem a hero de agência de um concorrente e querem um único arquivo HTML autocontido nomeada antes de escolher um framework.
O que está incluído
- A barra segue a grade. Os links ficam em uma linha só, em um único tamanho, e a ação #C25E2E fecha a fileira à direita, então o olho termina onde a navegação termina. Os links são compostos abaixo da marca em tamanho, e a ação #C25E2E é o único elemento da barra com peso.
- Nada aqui é herdado. A lista é curta (passos de espaçamento de 62px e transições de 120ms), e é por isso que o sistema inteiro pode ser conferido à mão. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
- O loop é o fundo. A mídia é um clipe de 4,5s recortado para cover na moldura em 1466x1080, então nunca aparecem faixas pretas em nenhuma largura. O loop é curto o bastante (4,5s) para o olho ler como textura e não como linha do tempo. Exporte em 1466x1080 ou mais largo para o recorte continuar honesto.
- Nada estiliza além da escala. A tipografia é o sistema de estilo aqui: Inter no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. A família vem acompanhada de tamanhos fixos, e é isso que mantém a linha de display e o texto de interface relacionados.
Movimento e interação
O tempo definido no briefing
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 120ms. Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. Nada espera por uma posição de scroll, então a página responde no instante em que você a toca. Cronometre o feedback com exatidão.
O loop faz o trabalho ambiente
Um único clipe de 4,5s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
Como Portiva Hero ordena a primeira leitura
A página tem uma ordem deliberada. A navegação apresenta o produto e dá a quem volta um caminho familiar. O título ocupa o tamanho de display, a linha de apoio explica a oferta e o destaque laranja #C25E2E marca a ação principal, então o próximo passo nunca fica em dúvida. Nada mais compete: não existe grade de cards antes da primeira decisão, e é isso que tira o peso de hero em trabalho de agência. O leitor de agência recebe a oferta antes das opções.
Os números por trás da hero
Assumir passos de espaçamento de 62px e transições de 120ms troca flexibilidade por repetibilidade. É esse o ponto da referência: a mesma página em outra marca, sem um novo conjunto de suposições. Nada nesta hero depende de um padrão.
Como a hero se reorganiza
A composição de desktop é resolvida contra 1466x1080, e o layout estreito é projetado, não herdado: a navegação vira um menu compacto no celular. O movimento tem um ramo de movimento reduzido, e a mídia traz um frame de poster para a página continuar comunicando quando a reprodução automática não está disponível. A hierarquia é o que sobrevive à reorganização.
Perguntas frequentes
O prompt de Portiva Hero é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 2.639 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 a entrada cita um único arquivo HTML autocontido?
Portiva Hero foi construído em um único arquivo HTML autocontido, 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 esta entrada de Portiva Hero está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 2.639 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
