Sobre este template
Leia JungleMind como especificação de landing page: os valores foram escritos antes de a página ser construída. A paleta é #5C5C5C por baixo e #111111 para a tipografia, com tipografia Poppins. A entrada nomeia a stack que produziu a página (vanilla JS) em vez de escondê-la. O orçamento de movimento é transições de 70ms, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 36.531 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Esta landing page é feita para agências que precisam da moldura em 1920x1422 sobrevivendo a três rodadas de edições do cliente.
- Se o seu time tiver de cortar o movimento, a landing page continua legível, com tipografia de 12px a 25px e seções de 100vh fazendo o trabalho de hierarquia.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 6,9s de vídeo em loop.
O que está incluído
- Links colapsam em uma largura. A barra é uma linha de texto e uma ação, medida em tipografia de 12px a 25px e seções de 100vh, para ler como faixa e não como bloco. Os rótulos são curtos o bastante para caber em uma linha a 340px, e o item ativo é marcado por peso, não por uma pílula. Desenhe o estado colapsado antes de acrescentar um sexto link.
- Um clipe em sangria total atrás da tipografia. O fundo é um único loop de 6,9s em 1920x1422, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Um frame de poster em 1920x1422 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Números tratados como tipografia. Os números são compostos em Poppins em um tamanho mais próximo do título do que do corpo de texto. Como os números são tipografia, eles herdam o comportamento responsivo da página em vez de escalar sozinhos.
- Navegação em uma só linha. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes. A referência tem captura em 1920x1422.
Movimento e interação
Os controles são a camada interativa
A página responde só onde dá para agir: estados de hover nos botões e links, não em todos os cards. Cada estado muda uma única propriedade, o que mantém o feedback legível. Se um estado não confirma uma ação, corte.
Uma duração para os controles
O movimento aqui é medido em milissegundos: 70ms com cubic-bezier(0.16, 1, 0.3, 1). Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. Os valores são curtos o bastante para ler como feedback, não como animação. Os tempos fazem parte do design, não são um acabamento final.
Por que o briefing de SaaS se sustenta
A maioria das páginas de SaaS acrescenta mais uma seção quando a primeira tela é fraca. Esta remove opções: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards, nessa ordem, e nada que repita a oferta. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Os números por trás da landing page
A landing page é medida, não avaliada no olho. tipografia de 12px a 25px e seções de 100vh vêm do briefing, e o layout é organizado nesses degraus em vez de ajustado no improviso. Nada nesta landing page depende de um padrão.
Como a landing page se reorganiza
A maior parte do trabalho responsivo para em esconder elementos. Aqui o layout muda de forma: a tipografia é clampada entre 12px e 25px, o layout muda em 340px e a seção fica presa a 100vh, e nada importante é descartado para a dobra caber. A versão mobile é uma decisão, não um recurso de reserva.
Perguntas frequentes
O prompt de JungleMind é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 36.531 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.
Preciso de vanilla JS para reconstruir JungleMind?
JungleMind foi construído em vanilla JS, 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.
Posso manter as transições de JungleMind e mudar os tempos?
As entradas e as mudanças de estado ficam na faixa de 70ms com cubic-bezier(0.16, 1, 0.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.
