Sobre este template
Mind AI é a referência de landing page para um produto de saúde ou bem-estar, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. O esquema de cores é #F6EAF2 por baixo, #000000 para a tipografia e índigo #A069C9 carregando os destaques, e a página é composta em Questrial. A entrega é um único arquivo HTML autocontido, capturada em 1920x1414 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 4.042s, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. É a referência certa para landing page para um produto de saúde ou bem-estar que precisa parecer intencional já na primeira tela.
Feito para
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da landing page e deixe o prompt segurar curva de aceleração cubic-bezier(.16,1.3,1).
- Times terceirizados que assumem esta landing page e precisam de um único arquivo HTML autocontido fixado no repositório antes do primeiro commit.
- Esta landing page serve times que precisam justificar um breakpoint de 520px para alguém que não estava no kickoff.
O que está incluído
- Uma linha, sem gaveta. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #A069C9, tudo no menor passo tipográfico do briefing. Abaixo de 520px os links colapsam em vez de quebrar para uma segunda linha.
- Vídeo no quadro inteiro. O vídeo em 1920x1414 roda 5s em loop atrás do texto, mudo e inline, sem camada de tingimento entre os dois. O loop é curto o bastante (5s) para o olho ler como textura e não como linha do tempo. Exporte em 1920x1414 ou mais largo para o recorte continuar honesto.
- Fluido onde precisa ser. O topo da escala é fluido (um clamp entre 14px e 28px) e o resto é fixo, então a moldura continua composta conforme a viewport estreita. A tipografia muda de tamanho, não de papel, conforme a viewport estreita.
- A barra segue a grade. Mantenha de quatro a cinco links; a linha foi dimensionada para isso. A referência tem captura em 1920x1414.
Movimento e interação
Um loop, não uma linha do tempo
Um único clipe de 5s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico.
A cena é o visual
O visual é produzido em tempo de execução (um canvas WebGL), não carregado como imagem, então a moldura em 1920x1414 fica com um arquivo a menos. A composição precisa sobreviver à falha da renderização, porque nada mais preenche aquele espaço.
Como a landing page se reorganiza
O layout estreito é desenhado, não herdado. a tipografia é clampada entre 14px e 28px, o layout muda em 520px e a seção fica presa a 100vh em cada largura, para a hierarquia sobreviver à reorganização. A hierarquia é o que sobrevive à reorganização.
O que um produto de saúde ou bem-estar ganha aqui
A razão de isso funcionar para um produto de saúde ou bem-estar é que a página nunca pede ao leitor que monte a mensagem. Layout, tipografia e cor estão decididos (#F6EAF2 e índigo #A069C9, em Questrial), então a primeira tela lê como um argumento pronto, não como uma pilha de peças. Mind AI enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como Mind AI ordena a primeira leitura
Um layout guiado por recursos lista o que o produto faz; este encaminha o leitor para uma única decisão. A rota é visível em a navegação, o título, o selo de anúncio, a linha de estatísticas e a lista de recursos e em como tipografia de 14px a 28px e seções de 100vh os espaçam. O leitor de saúde recebe a oferta antes das opções.
Perguntas frequentes
O que o briefing por trás de Mind AI contém de fato?
O briefing capturado tem 37.004 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 um único arquivo HTML autocontido para reconstruir Mind AI?
Mind AI 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 posso fazer com o briefing de Mind AI depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 37.004 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
