Sobre este template
Antes de reconstruir uma landing page para um produto de IA ou SaaS, leia DeepThink: a composição e a especificação por trás dela estão as duas aqui. O esquema de cores é #0C0C0C por baixo e tom claro #FAFAFA para a tipografia, e a página é composta em Inter. A entrega é um único arquivo HTML autocontido, capturada em 1280x1928 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 90ms e cubic-bezier(.22,1.36,1). Deixe aberto enquanto escreve: o briefing de 13.695 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times de estúdio que estão briefando uma construção e procuram curva de aceleração cubic-bezier(.22,1.36,1) para reagir.
- Product managers que precisam estimar a construção vão ler um único arquivo HTML autocontido como o escopo do trabalho.
- Feito para agências que cobram por rodada e querem seções de 100vh e passos de espaçamento de 10px acordado antes da primeira.
O que está incluído
- Links antes da ação. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Nada na barra anima com o scroll; ela está presente desde o primeiro frame e depois sai do caminho.
- O comportamento é definido por largura. As mudanças de largura são resolvidas na própria tipografia: um clamp entre 22px e 10px leva o título do celular ao desktop sem uma composição mobile separada. Os controles continuam grandes o bastante para o toque e o texto mantém a ordem de leitura em qualquer largura. Desenhe o layout estreito, não o esprema.
- Estrutura em uma tela. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 1280x1928 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 1280x1928, e é por isso que ela se sustenta quando o texto muda.
- Navegação sem fundo próprio. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Inter, para a barra pertencer à página abaixo e não a um sistema separado. Mantenha a linha de cima em uma só.
Movimento e interação
Durações curtas e nomeadas
Uma única duração cobre as interações (90ms usando cubic-bezier(.22,1.36,1)), e é isso que mantém hover e clique lendo como um sistema só. Os valores são curtos o bastante para ler como feedback, não como animação.
Uma cena, não um frame
Um canvas ao vivo faz o trabalho visual: um canvas WebGL. O briefing mantém a interface simples em volta do canvas para a cena ser o único espetáculo.
Por que o briefing de SaaS se sustenta
DeepThink funciona porque a hierarquia dela é decidida, não decorada. O briefing fixa seções de 100vh, passos de espaçamento de 10px, transições de 90ms e curva de aceleração cubic-bezier(.22,1.36,1), então um texto novo cai dentro da moldura em vez de reabri-la. DeepThink enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
O tempo por trás da landing page
Manter o movimento tão pequeno faz a página se apoiar na tipografia e na moldura. Se transições de 90ms, uma revelação de linha com máscara e uma revelação por scroll fosse removido por completo, a composição continuaria de pé. Nada anima por si nesta landing page.
Ler DeepThink como especificação
O briefing é uma especificação. Ele declara seções de 100vh, passos de espaçamento de 10px, transições de 90ms e curva de aceleração cubic-bezier(.22,1.36,1) e nomeia a moldura da mídia em 1280x1928 antes de qualquer coisa ser desenhada em volta dela. Nada nesta landing page depende de um padrão.
Perguntas frequentes
Preciso de um único arquivo HTML autocontido para reconstruir DeepThink?
DeepThink 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 DeepThink contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1280x1928, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso usar DeepThink 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 1280x1928.
