Sobre este template
ClarionAI é uma landing page de SaaS construída a partir de um único briefing escrito, e esta página documenta esse briefing. O título diz “The intelligence layer \n for clear decisions”, e o resto da landing page se organiza em volta disso. A página inteira é construída sobre preto #000000 por baixo. A stack é React e Tailwind CSS, então dá para levar landing page para um projeto sem handoff de design. O movimento se resume a transições de 1000ms e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Trate como o briefing de uma landing page para um produto de IA ou SaaS que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Times de estúdio que estão briefando uma construção e procuram uma moldura em 1952x1440 para reagir.
- Comece por um tamanho de display fixo de 16px e passos de espaçamento de 20px e deixe a paleta vir depois, porque é o espaçamento que faz esta landing page ler.
- Feito para product managers que precisam da landing page limitada a uma sprint e sem novos assets.
O que está incluído
- Links antes da ação. A barra fica sobre a landing page em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Os rótulos são curtos o bastante para caber em uma linha em qualquer largura que o briefing cubra. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Os tamanhos estão no briefing, não em uma escala. Nada no layout fica por sensação: o briefing cita um tamanho de display fixo de 16px, passos de espaçamento de 20px e transições de 1000ms e a construção precisa atingir esses valores. Os valores são citados do prompt capturado em vez de inferidos, então sobrevivem a uma nova renderização. Mude o assunto, não os passos.
- O loop é o fundo. O fundo é um único loop de 18,4s em 1952x1440, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Um frame de poster em 1952x1440 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma ideia por painel. A grade de cards é o recurso de organização: painéis iguais, uma ideia cada, sem hierarquia entre eles. Cada painel combina uma ideia com um ícone, então o caminho de leitura continua horizontal. Alinhe os títulos dos painéis à escala da página.
Movimento e interação
O loop faz o trabalho ambiente
O clipe de fundo roda 18,4s em 1952x1440 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
Um marquee carrega o ritmo
Um ticker percorre o layout em velocidade constante e faz loop sem intervalo, e é o único movimento ambiente de que o briefing precisa. O marquee usa a mesma família da interface, então lê como conteúdo, não como ornamento. Pause no hover se o conteúdo for legível.
A landing page com a sua cara
Componha o texto novo no tamanho de display que o briefing nomeia (um tamanho de display fixo de 16px e passos de espaçamento de 20px), e o resto da escala acompanha sem um novo design. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
Como a landing page se reorganiza
O layout estreito é desenhado, não herdado. a navegação vira um menu compacto no celular em cada largura, para a hierarquia sobreviver à reorganização. A reprodução automática e o movimento são tratados com honestidade, então a página continua comunicando quando eles não estão disponíveis.
O tempo por trás da landing page
O movimento se limita a transições de 1000ms, um loop de mídia de 18,4s e estados de hover e de clique; ele roda uma vez na entrada e depois sai da frente, que é o orçamento certo para landing page continuar legível. Nada anima por si nesta landing page.
Perguntas frequentes
Por que o prompt do ClarionAI não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 6.807 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O prompt de ClarionAI é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1952x1440, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
ClarionAI 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.
