Sobre este template
Data Signal resolve o problema de landing page para um produto de IA ou SaaS com um único briefing capturado. “Abstract red and blue smoke” é a linha que o layout foi construído para sustentar. A cor se limita a verde-água profundo #050606 por baixo e branco #EDEDED para a tipografia, composta em Inter. A entrega é um único arquivo HTML autocontido, capturada em 1482x1080 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 520ms, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 12.007 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Tome a estrutura da landing page inteira e substitua o texto linha por linha contra curva de aceleração cubic-bezier(.16,1.3,1).
- Feito para estúdios que precisam explicar o comportamento em 619px a um cliente sem antes construir um protótipo.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 5,9s de vídeo em loop.
O que está incluído
- Topo com uma única ação. A barra fica sobre a landing page em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Abaixo de 619px os links colapsam em vez de quebrar para uma segunda linha. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
- Mídia sem sobreposição. O vídeo em 1482x1080 roda 5,9s em loop atrás do texto, mudo e inline, sem camada de tingimento entre os dois. O loop é curto o bastante (5,9s) para o olho ler como textura e não como linha do tempo.
- Uma pílula para a única novidade. Um selo, uma mensagem: a pílula fica acima do título em Inter no menor passo da escala, e nada mais disputa esse lugar. A pílula ocupa o menor passo do briefing, então lê como etiqueta e não como um segundo título. Remova quando a novidade envelhecer.
- A barra segue a grade. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes. A referência tem captura em 1482x1080.
Movimento e interação
Um loop, não uma linha do tempo
O movimento ambiente vem do loop de 5,9s em 1482x1080, 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.
Hover, mas com parcimônia
Só os controles respondem ao ponteiro (estados de hover nos botões e links, não em todos os cards), então a página parece responsiva sem transformar cada elemento em um alvo. Hover e foco estão especificados juntos, então ponteiro e teclado recebem a mesma informação.
A landing page com a sua cara
O briefing nomeia Inter e a escala ao lado dela. Substitua por uma família com as mesmas proporções e a composição sobrevive. A composição é a parte reaproveitável, e ela sobrevive a uma marca diferente.
O argumento que esta landing page faz
Comparado a um hero de template, a diferença está no que falta. Não há grade de cards, nem carrossel, nem segunda chamada para ação: só a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards, dimensionados contra um tamanho de display fixo de 16px e seções de 19vh. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
O que se move em Data Signal
Uma biblioteca de animações prontas daria mais movimento que isto. O briefing pede menos: transições de 520ms, um loop de mídia de 5,9s e estados de hover e de clique, e nada decorativo por cima. Nada anima por si nesta landing page.
Perguntas frequentes
Por que a entrada cita um único arquivo HTML autocontido?
Data Signal 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.
O que o briefing por trás de Data Signal contém de fato?
O briefing capturado tem 12.007 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.
O que comanda o movimento em Data Signal?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 520ms usando cubic-bezier(.16,1.3,1). Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
