Sobre este template
Esta é a landing page da Agent Wave, publicada com o briefing que a produziu em vez de apenas uma captura de tela. A cor se limita a #000000 por baixo e #FFFFFF para a tipografia, composta em Inter. A entrega é um único componente, capturada em 1478x1080 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 0.28s, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 16.675 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se o seu time de front-end parte de um único componente, levante um tamanho de display fixo de 19px e seções de 100vh primeiro e deixe a paleta em paz até a grade se firmar.
- A página serve desenvolvedores front-end que reconstroem um produto de IA ou SaaS landing page em um único componente e procuram os números por trás da aparência.
- Times que reconstroem a landing page de SaaS de um concorrente e querem um único componente nomeada antes de escolher um framework.
O que está incluído
- A navegação é fina de propósito. A navegação é uma fileira só, sem um segundo nível embaixo dela. Abaixo de 901px os links colapsam em uma sobreposição de tela cheia. Os rótulos são curtos o bastante para caber em uma linha a 901px, e o item ativo é marcado por peso, não por uma pílula. Não dê à marca mais espaço do que a tipografia dela precisa.
- Mídia sem sobreposição. Um único arquivo de 6,9s carrega a primeira tela inteira, e a página não tem uma segunda mídia para manter em sincronia. Exporte em 1478x1080 ou mais largo e o recorte cover continua funcionando.
- Uma família, dois papéis. Os passos de tamanho e o tracking do briefing são o que dá o tom: Inter em um tamanho de display apertado, depois uma queda clara para o texto de apoio. O tracking aperta conforme o tamanho cresce, e é por isso que a linha de display se sustenta ao longo de 19px. Componha a linha de display por último.
- Uma barra sem excesso. Abaixo de 901px os links colapsam em vez de quebrar para uma segunda linha.
Movimento e interação
Um loop, não uma linha do tempo
Um único clipe de 6,9s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage 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. Grave ou exporte em 1478x1080 ou mais largo.
Respeita o movimento reduzido
A camada de movimento tem um interruptor. Sob prefers-reduced-motion, a entrada e o loop sai e todo o resto fica onde está. O layout é idêntico com o movimento desligado, então nada depende da animação.
Os números por trás da landing page
A página tem mais números do que parece. um tamanho de display fixo de 19px, seções de 100vh, cantos de 7px, passos de espaçamento de 22px e transições de 0.28s são os que uma reconstrução precisa manter; o resto pode mudar. Nada nesta landing page depende de um padrão.
Por que esta composição funciona para SaaS
Se a sua primeira tela hoje explica três coisas, esta é a versão que explica uma. a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards entram em ordem de leitura, com um tamanho de display fixo de 19px e seções de 100vh marcando o ritmo. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Como a landing page se reorganiza
Responsivo aqui significa que a escala muda e a sequência não. o layout muda em 901px, a seção fica presa a 100vh e o movimento tem um ramo de movimento reduzido, e a ordem de leitura fica onde o briefing a colocou. O layout estreito é uma decisão de projeto, não um espremer, e a hierarquia sobrevive a ele.
Perguntas frequentes
Quanto de Agent Wave depende de um único componente?
Agent Wave 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.
O prompt de Agent Wave é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1478x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso usar Agent Wave 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 1478x1080.
