Sobre este template
Stories in Light é a referência de hero para uma agência ou estúdio, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. A paleta se reduz a azul profundo #2B3342 por baixo e branco #FFFFFF para a tipografia, e a tipografia é Archivo. A stack é um único componente, então dá para levar hero para um projeto sem handoff de design. O movimento cabe todo em transições de 0.4s e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 4.462 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se a referência é só um ponto de partida, os designers podem manter um único componente e reconstruir o resto da hero.
- Times terceirizados que assumem esta hero e precisam de um breakpoint de 560px fixado no repositório antes do primeiro commit.
- Times que constroem uma agência ou estúdio hero e precisam de uma moldura em 2502x1730 registrado antes de o orçamento sair.
O que está incluído
- A barra segue a grade. A navegação é uma fileira só, sem um segundo nível embaixo dela. Abaixo de 560px os links colapsam em uma sobreposição de tela cheia. Os rótulos são curtos o bastante para caber em uma linha a 560px, e o item ativo é marcado por peso, não por uma pílula.
- Um clipe faz todo o trabalho. A composição é construída sobre o clipe em 2502x1730, não ao lado dele, então a mídia nunca ganha painel nem borda. O loop é curto o bastante (13,3s) para o olho ler como textura e não como linha do tempo.
- Cada família com uma função. A família é citada com os seus tamanhos (Archivo ao longo de 15px), e é isso que torna a tipografia portável entre construções. O tracking aperta conforme o tamanho cresce, e é por isso que a linha de display se sustenta ao longo de 15px.
- Fluido onde precisa ser. As mudanças de largura são resolvidas na própria tipografia: um clamp entre 55px e 40px leva o título do celular ao desktop sem uma composição mobile separada. O menu mobile faz parte do mesmo briefing, então o estado colapsado também foi desenhado.
Movimento e interação
Durações vindas do briefing
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 0.4s. Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. A curva de aceleração é especificada junto com a duração (0.4s), então uma reconstrução não pode trocar a sensação sem aviso.
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 13,3s em 2502x1730, rodando em loop discreto atrás do texto em vez de reagir 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.
A hero com a sua cara
A composição é a parte reaproveitável e o assunto é seu. Mantenha um tamanho de display fixo de 15px e seções de 100vh e substitua as palavras, a mídia e as marcas. Mantenha o recorte da mídia; ele trabalha tanto quanto a tipografia.
O tempo por trás da hero
Conte os elementos animados e a lista continua curta: transições de 0.4s, um loop de mídia de 13,3s e estados de hover e de clique. Nada anima por si nesta hero.
A ordem por trás da hero
Um layout guiado por recursos lista o que o produto faz; este encaminha o leitor para uma única decisão. A rota é visível em a navegação, o título, o selo de anúncio e a linha de estatísticas e em como um tamanho de display fixo de 15px e seções de 100vh os espaçam. O leitor de agência recebe a oferta antes das opções.
Perguntas frequentes
Por que a entrada cita um único componente?
Stories in Light foi construído em um único componente, 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.
Qual é o tamanho do prompt por trás de Stories in Light?
O briefing capturado tem 4.462 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.
Posso usar Stories in Light 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 2502x1730.
