Sobre este template
Leia Quantum Core como especificação de landing page: os valores foram escritos antes de a página ser construída. Ela abre com “Talk with the team” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. O esquema de cores é azul profundo #080A19 por baixo e branco #E9E9E9 para a tipografia, e a página é composta em Suisse Intl. A entrega é React e Tailwind CSS, capturada em 1920x1420 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 700ms, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Deixe aberto enquanto escreve: o briefing de 27.320 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Designers que precisam dos números antes de tudo: tipografia de 12px a 72px e passos de espaçamento de 20px, tudo citado do briefing.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 6,8s de vídeo em loop.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Quantum Core.
O que está incluído
- Navegação sem fundo próprio. A navegação é uma fileira só, sem um segundo nível embaixo dela. 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.
- Números, não impressões. Toda medida do briefing é um número que dá para medir de volta: tipografia de 12px a 72px, passos de espaçamento de 20px, transições de 700ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1). A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído.
- Um clipe faz todo o trabalho. O clipe roda 6,8s em 1920x1420 e faz loop sem corte visível, então lê como superfície e não como filmagem. Exporte em 1920x1420 ou mais largo e o recorte cover continua funcionando.
- Uma ideia por painel. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Suisse Intl em tamanho pequeno para a estrutura continuar visível. Os painéis se separam por espaçamento, não por bordas, o que mantém a grade discreta.
Movimento e interação
O título se monta sozinho
A animação de entrada é gasta em um único elemento (as seções se revelam ao entrar na viewport), e é isso que impede uma primeira tela cheia de parecer carregada. O tempo deriva de um único valor, então uma linha mais longa demora mais sem ajuste manual. A referência tem captura em 1920x1420.
O loop faz o trabalho ambiente
Um único clipe de 6,8s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
A landing page com a sua cara
Suponha que você só tenha uma tarde. Mude o título e o rótulo da ação, deixe tipografia de 12px a 72px e passos de espaçamento de 20px em paz, e você tem uma página que parece intencional. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
Os números por trás da landing page
É isso que torna a referência reaproveitável: tipografia de 12px a 72px, passos de espaçamento de 20px, transições de 700ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1). Nada fica a cargo do padrão, então uma substituição que mantém esses números mantém a composição. Nada nesta landing page depende de um padrão.
Por que esta composição funciona para SaaS
Uma camada de tingimento sobre a mídia teria sido a solução fácil. O briefing a deixa de fora. A mídia é um loop de 6,8s em 1920x1420. O texto continua legível porque tipografia de 12px a 72px e passos de espaçamento de 20px mantêm a moldura calma. Quantum Core enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Quantum Core?
O briefing capturado tem 27.320 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.
Quanto de Quantum Core depende de React e Tailwind CSS?
Quantum Core foi construído em React e Tailwind CSS, 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.
Como se comportam as transições de 700ms em Quantum Core?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 700ms com cubic-bezier(0.16, 1, 0.3, 1). O briefing registra os valores para que quem for portar a página não precise adivinhar.
