Sobre este template
Intelligence Layer foi capturada em 1462x1080 e guardada como especificação, não como imagem de galeria. A cor se limita a quase preto #050505 por baixo e #FAFAFA para a tipografia, composta em Manrope. A entrega é um único arquivo HTML autocontido, capturada em 1462x1080 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 0.9s, cubic-bezier(.22, 1.36, 1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 11.825 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 arquivo HTML autocontido, levante seções de 100vh e passos de espaçamento de 25px primeiro e deixe a paleta em paz até a grade se firmar.
- Cite um único arquivo HTML autocontido na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Times que reconstroem a landing page de SaaS de um concorrente e querem um único arquivo HTML autocontido nomeada antes de escolher um framework.
O que está incluído
- Uma barra sem excesso. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Manrope, para a composição ler conteúdo primeiro e moldura depois. Nada na barra anima com o scroll; ela está presente desde o primeiro frame e depois sai do caminho.
- Números, não impressões. Os valores são a especificação: seções de 100vh, passos de espaçamento de 25px, transições de 0.9s e curva de aceleração cubic-bezier(.22, 1.36, 1), capturados em 1462x1080 em vez de inferidos de um print. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- 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 1462x1080.
- Medido contra a viewport. O espaçamento é declarado do mesmo jeito (seções de 100vh, passos de espaçamento de 25px, transições de 0.9s e curva de aceleração cubic-bezier(.22, 1.36, 1)), não como uma escala que cresce sozinha.
Movimento e interação
Um canvas ao vivo no centro
A profundidade vem da renderização, não da ilustração: um canvas WebGL. A interface em volta fica plana, o que deixa a renderização carregar a profundidade.
Uma duração para os controles
Uma única duração cobre as interações (0.9s usando cubic-bezier(.22, 1.36, 1)), e é isso que mantém hover e clique lendo como um sistema só. A curva de aceleração é especificada junto com a duração (0.9s), então uma reconstrução não pode trocar a sensação sem aviso.
Como a landing page se reorganiza
O layout estreito é desenhado, não herdado. a escala é fluida, não em degraus, a seção fica presa a 100vh e o movimento tem um ramo de movimento reduzido em cada largura, para a hierarquia sobreviver à reorganização. A ordem é a última coisa a mudar.
Os números por trás da landing page
Não dá para acertar uma composição no olho quando duas pessoas a estão reconstruindo. O briefing elimina a discussão: seções de 100vh, passos de espaçamento de 25px, transições de 0.9s e curva de aceleração cubic-bezier(.22, 1.36, 1), declaradas uma vez. Nada nesta landing page depende de um padrão.
O que mudar primeiro em Intelligence Layer
Quando você colocar a sua própria mídia, mantenha o recorte e a ordem das camadas. A mídia é um loop de 6,6s em 1462x1080. É esse posicionamento que mantém o texto legível. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa.
Perguntas frequentes
Posso reconstruir landing page do Intelligence Layer em outra stack?
Intelligence Layer 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 prompt de Intelligence Layer é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 11.825 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.
Posso manter as transições de Intelligence Layer e mudar os tempos?
As entradas e as mudanças de estado ficam na faixa de 0.9s usando cubic-bezier(.22, 1.36, 1) com um ramo de movimento reduzido no briefing. Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
