Sobre este template
Antes de reconstruir uma landing page para um produto de IA ou SaaS, leia Forecast Center: a composição e a especificação por trás dela estão as duas aqui. A cor se limita a azul profundo #04121B por baixo e #FFFFFF para a tipografia, composta em Inter. A entrega é um único arquivo HTML autocontido, capturada em 1466x1080 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 2.55s, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. Se você está briefando uma landing page de SaaS, parta desta composição e substitua o assunto.
Feito para
- A landing page é voltada a times que já conhecem um único arquivo HTML autocontido e só precisam de curva de aceleração cubic-bezier(.16,1.3,1) escrito.
- Esta landing page serve times que precisam justificar um único arquivo HTML autocontido para alguém que não estava no kickoff.
- A página serve desenvolvedores front-end que reconstroem um produto de IA ou SaaS landing page em um único arquivo HTML autocontido e procuram os números por trás da aparência.
O que está incluído
- Navegação sem fundo próprio. A navegação é uma fileira só, sem um segundo nível embaixo dela. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado.
- Nada aqui é herdado. O layout trabalha com valores absolutos, não com proporções: seções de 100vh, passos de espaçamento de 14px, transições de 2.55s e curva de aceleração cubic-bezier(.16,1.3,1). Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- O vídeo é o fundo, não um painel. A primeira tela é um único clipe em 1466x1080, e todo o resto se organiza por cima dele. Um frame de poster em 1466x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 1466x1080 ou mais largo para o recorte continuar honesto.
- Uma ideia por painel. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Inter em tamanho pequeno para a estrutura continuar visível. Os painéis se separam por espaçamento, não por bordas, o que mantém a grade discreta.
Movimento e interação
Um loop, não uma linha do tempo
Um único clipe de 5,3s é 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 1466x1080 ou mais largo.
Um ramo mais discreto está incluído
O movimento reduzido é especificado, não acrescentado depois: com ele ativo, a entrada e o loop para e a composição mantém o estado final. O ramo faz parte do briefing, não é uma reflexão tardia. Teste a página com o movimento desligado. A referência tem captura em 1466x1080.
Como Forecast Center ordena a primeira leitura
Coloque o seu próprio texto nesta landing page e a sequência continua de pé, porque os elementos não são intercambiáveis: cada um de a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards carrega uma função. O leitor de SaaS recebe a oferta antes das opções.
Como a landing page se reorganiza
Não existe um design mobile separado para manter. a seção fica presa a 100vh e o movimento tem um ramo de movimento reduzido, e a mesma hierarquia atravessa as duas. A largura muda as medidas, não a rota de leitura.
Ler Forecast Center como especificação
Um briefing de 11.253 caracteres produz uma especificação completa. A parte estrutural é curta: seções de 100vh, passos de espaçamento de 14px, transições de 2.55s e curva de aceleração cubic-bezier(.16,1.3,1). Nada nesta landing page depende de um padrão.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Forecast Center?
O briefing capturado tem 11.253 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 um único arquivo HTML autocontido para reconstruir Forecast Center?
Forecast Center 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 Forecast Center está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 11.253 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
