Sobre este template
Esta é a landing page da Scaling Platform, publicada com o briefing que a produziu em vez de apenas uma captura de tela. O esquema de cores é branco #F2F1F0 por baixo, preto #3A3A3A para a tipografia e verde-água vivo #15BCDF carregando os destaques, e a página é composta em Quantico. A stack é um único componente, então dá para levar landing page para um projeto sem handoff de design. O movimento fica restrito a transições de 1s e um loop de vídeo ao fundo. É a referência certa para landing page para um produto de IA ou SaaS que precisa parecer intencional já na primeira tela.
Feito para
- Product managers que precisam estimar a construção vão ler um único componente como o escopo do trabalho.
- Se o seu time de front-end parte de um único componente, levante seções de 100vh e passos de espaçamento de 20px primeiro e deixe a paleta em paz até a grade se firmar.
- Esta landing page é feita para agências que precisam da moldura em 1916x1080 sobrevivendo a três rodadas de edições do cliente.
O que está incluído
- Uma linha, sem gaveta. A barra carrega a marca, os links de seção e um botão #15BCDF, tudo medido em seções de 100vh e passos de espaçamento de 20px para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #15BCDF é o único elemento da barra com peso.
- Um clipe em sangria total atrás da tipografia. O briefing especifica o vídeo em 1916x1080 com um loop de 5,1s, e cada elemento de texto é posicionado contra essa moldura. Um frame de poster em 1916x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 1916x1080 ou mais largo para o recorte continuar honesto.
- A escala cai com força. No topo da escala está Quantico, com o texto de apoio bem abaixo, para a hierarquia não precisar de cor para ser lida. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia. Mantenha os passos, troque a família.
- A navegação é fina de propósito. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #15BCDF, tudo no menor passo tipográfico do briefing.
Movimento e interação
Uma duração para os controles
O briefing fixa o valor da transição em 1s, então uma reconstrução não pode cair em um padrão mais lento. A curva de aceleração é especificada junto com a duração (1s), então uma reconstrução não pode trocar a sensação sem aviso. Se mudar a curva de aceleração, mude em todos os lugares.
Um loop, não uma linha do tempo
O movimento ambiente vem do loop de 5,1s em 1916x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
O que se move em Scaling Platform
Copie o padrão, não os valores: mantenha transições de 1s, um loop de mídia de 5,1s e uma revelação de linha com máscara e deixe a sua própria marca definir as durações. Nada anima por si nesta landing page.
A ordem por trás da landing page
Leia a primeira tela de uma vez e a oferta já está clara. a navegação, o título, a linha de estatísticas, o clipe de fundo e o rodapé chegam em sequência, separados por seções de 100vh e passos de espaçamento de 20px em vez de divisores decorativos. O leitor de SaaS recebe a oferta antes das opções.
O que mudar primeiro em Scaling Platform
Mude o texto e a mídia primeiro, a cor depois, o layout por último. A moldura em 1916x1080 e a escala em Quantico são o que mantém a página coesa, então substitua em volta deles, não através deles. Reescreva o texto e a mídia antes de repintar qualquer coisa.
Perguntas frequentes
Quanto de Scaling Platform depende de um único componente?
Scaling Platform 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.
Como esta entrada de Scaling Platform está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 5.231 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O prompt de Scaling Platform é 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 1916x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
