Sobre este template
Cyber Layer mostra uma forma de construir landing page para um produto de IA ou SaaS e publica as instruções que produziram o resultado. A paleta se reduz a vermelho #B01617 por baixo e tom claro #E6E6E6 para a tipografia, e a tipografia é Space Grotesk. A entrega é um único arquivo HTML autocontido, capturada em 1460x1080 para a moldura estar fixada antes de qualquer linha de código. O movimento fica restrito a transições de 1000ms, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 14.235 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times que constroem um produto de IA ou SaaS landing page e precisam de curva de aceleração cubic-bezier(.16,1.3,1) registrado antes de o orçamento sair.
- Tome a estrutura da landing page inteira e substitua o texto linha por linha contra um único arquivo HTML autocontido.
- A landing page é voltada a times que já conhecem um único arquivo HTML autocontido e só precisam de um breakpoint de 599px escrito.
O que está incluído
- A navegação é fina de propósito. A barra é uma linha de texto e uma ação, medida em seções de 100vh e passos de espaçamento de 82px, para ler como faixa e não como bloco. Abaixo de 599px os links colapsam em vez de quebrar para uma segunda linha.
- Vídeo no quadro inteiro. Um clipe de 7s em 1460x1080 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. Um frame de poster em 1460x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma família, dois papéis. A linha de display é composta em Space Grotesk em um tamanho que o briefing fixa, o que faz do título um elemento de composição e não um parágrafo. Trocar a família é seguro desde que tamanhos e pesos fiquem onde o briefing os colocou. Confira a escala em tons de cinza.
- Linha de cima: marca, links, uma ação. Não dê à marca mais espaço do que a tipografia dela precisa. A referência tem captura em 1460x1080.
Movimento e interação
O canvas segura a primeira tela
A primeira tela é construída pelo navegador, não entregue como imagem: um canvas WebGL. Como é uma renderização e não um frame estático, o elemento focal se sustenta em qualquer tamanho.
Todo o orçamento de animação
O orçamento de animação é pequeno e explícito: 1000ms com cubic-bezier(.16,1.3,1), aplicado a mudanças de estado, não a entradas. Os tempos curtos são o motivo de a página parecer autoral; um padrão lento desfaria a composição. Leve as durações para o seu build.
Como Cyber Layer ordena a primeira leitura
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 82px em vez de divisores decorativos. O leitor de SaaS recebe a oferta antes das opções.
O que mudar primeiro em Cyber Layer
A substituição direta tem um limite: se o seu produto precisa de outra hierarquia, seções de 100vh e passos de espaçamento de 82px vão brigar com ela. Nesse caso, mude a ordem primeiro e os valores depois. O assunto é a parte que deve mudar.
Ler Cyber Layer como especificação
Uma captura de tela mostra como a página é; o briefing mostra por quê. seções de 100vh, passos de espaçamento de 82px, transições de 1000ms, curva de aceleração cubic-bezier(.16,1.3,1) e um breakpoint de 599px fecham a distância entre os dois. Nada nesta landing page depende de um padrão.
Perguntas frequentes
Quanto de Cyber Layer depende de um único arquivo HTML autocontido?
Cyber 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 que o briefing por trás de Cyber Layer contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1460x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Cyber Layer é animado?
As entradas e as mudanças de estado ficam na faixa de 1000ms com cubic-bezier(.16,1.3,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.
