Sobre este template
Quantum Lucid foi capturada em 1920x1412 e guardada como especificação, não como imagem de galeria. O esquema de cores é neutro #F2F2F2 por baixo, quase preto #000000 para a tipografia e tom escuro #38C6EC carregando os destaques, e a página é composta em Figtree. A entrega é um único arquivo HTML autocontido, capturada em 1920x1412 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 1200ms, cubic-bezier(.22, 1.36, 1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 20.249 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Product managers que precisam estimar a construção vão ler curva de aceleração cubic-bezier(.22, 1.36, 1) como o escopo do trabalho.
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da landing page e deixe o prompt segurar um único arquivo HTML autocontido.
- Feito para agências que apresentam trabalho de SaaS e precisam de um breakpoint de 216px na primeira resposta ao cliente.
O que está incluído
- Navegação sem fundo próprio. A fileira gasta o contraste em um lugar só: a ação #38C6EC, com a marca e os links recuados na cor do texto. Abaixo de 216px os links colapsam em uma sobreposição de tela cheia. Abaixo de 216px os links colapsam em vez de quebrar para uma segunda linha.
- Um clipe, não uma ilustração. A primeira tela é um único clipe em 1920x1412, e todo o resto se organiza por cima dele. O loop é curto o bastante (6,7s) para o olho ler como textura e não como linha do tempo.
- Nada estiliza além da escala. Os passos de tamanho e o tracking do briefing são o que dá o tom: Figtree em um tamanho de display apertado, depois uma queda clara para o texto de apoio. O passo de legenda é pequeno o bastante para ficar sob um número sem mudar o ritmo da página.
- Uma linha, sem gaveta. Uma ação por barra. A referência tem captura em 1920x1412.
Movimento e interação
Tempos em milissegundos
O orçamento de animação é pequeno e explícito: 1200ms com cubic-bezier(.22, 1.36, 1), aplicado a mudanças de estado, não a entradas. As durações são curtas o bastante para o feedback parecer resposta, e não animação.
Interação mantida local
O trabalho de ponteiro é pequeno e especificado: estados de hover nos botões e links, não em todos os cards e abas ou um acordeão que troca o conteúdo no lugar, aplicado aos elementos que já parecem interativos. Os estados de pressão estão especificados junto com o hover, então tocar confirma o mesmo que clicar. Menos estados, todos especificados.
O que se sustenta para IA e SaaS
A razão de isso funcionar para um produto de IA ou SaaS é que a página nunca pede ao leitor que monte a mensagem. Layout, tipografia e cor estão decididos (neutro #F2F2F2 e tom escuro #38C6EC, em Figtree), então a primeira tela lê como um argumento pronto, não como uma pilha de peças. Quantum Lucid enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como Quantum Lucid ordena a primeira leitura
O preço é a paciência: a página retém o detalhe que uma grade escaneável entregaria de imediato. O que ela compra é uma primeira tela em que a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards não podem ser mal interpretados. O leitor de SaaS recebe a oferta antes das opções.
A landing page com a sua cara
A substituição direta tem um limite: se o seu produto precisa de outra hierarquia, seções de 100vh e cantos de 26px vão brigar com ela. Nesse caso, mude a ordem primeiro e os valores depois. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Perguntas frequentes
Posso reconstruir landing page do Quantum Lucid em outra stack?
Quantum Lucid 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.
Qual é o tamanho do prompt por trás de Quantum Lucid?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1412, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Quantum Lucid é animado?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 1200ms com cubic-bezier(.22, 1.36, 1). O briefing registra os valores para que quem for portar a página não precise adivinhar.
