Sobre este template
AI Runtime é uma referência prática para um produto de IA ou SaaS: landing page com layout definido, medidas tiradas e tudo pronto para reconstruir. O esquema de cores é neutro #28282A por baixo e tom claro #C8C8C8 para a tipografia, e a página é composta em Inter. A entrada nomeia a stack que produziu a página (React) em vez de escondê-la. O movimento fica restrito a transições de 0.85s, cubic-bezier(0.22, 1, 0.36, 1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 9.593 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Feito para agências que apresentam trabalho de SaaS e precisam de uma moldura em 1472x1080 na primeira resposta ao cliente.
- Comece por seções de 100vh e passos de espaçamento de 28px e deixe a paleta vir depois, porque é o espaçamento que faz esta landing page ler.
- Profissionais de marketing de produto que precisam que landing page continue legível com 6,9s de vídeo em loop atrás do texto.
O que está incluído
- Navegação em uma só linha. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Inter, para a barra pertencer à página abaixo e não a um sistema separado. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa.
- Números levados para a construção. O briefing nomeia os números: seções de 100vh, passos de espaçamento de 28px, transições de 0.85s e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1). É por isso que a composição se sustenta, porque não existe um passo de espaçamento inventado entre a tipografia e a moldura. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- Mídia atrás da tipografia. A moldura em 1472x1080 é preenchida por um único loop que roda atrás do texto e não pede controles. O loop é curto o bastante (6,9s) para o olho ler como textura e não como linha do tempo.
- Colunas, não um amontoado de links. Os links se agrupam em colunas e a marca fica em um bloco próprio, o que mantém um rodapé longo legível em vez de virar uma lista corrida. Os tamanhos de tipo descem dos títulos de coluna para os links, então a hierarquia sobrevive a um rodapé denso. Agrupe os links; não despeje tudo.
Movimento e interação
Um ramo mais discreto está incluído
O briefing inclui um ramo de prefers-reduced-motion, então dá para desligar a entrada e o loop sem perder o layout. Leve esse ramo direto para o seu build. Com o movimento reduzido ativo, a composição mantém o estado final em vez de pular no meio da transição. A referência tem captura em 1472x1080.
Um loop, não uma linha do tempo
O movimento ambiente é um clipe de 6,9s em 1472x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução. Grave ou exporte em 1472x1080 ou mais largo.
Como a landing page se reorganiza
Larga, a composição é densa; estreita, a escala é fluida, não em degraus, a seção fica presa a 100vh e a navegação vira um menu compacto no celular. Os dois estados estão descritos no briefing. A ordem é a última coisa a mudar.
Como AI Runtime ordena a primeira leitura
Uma tela, uma ação e a navegação, o título, o selo de anúncio, a linha de estatísticas e a faixa de clientes entre as duas. O briefing fixa essa ordem em vez de entregar a primeira tela a uma pilha de seções. O leitor de SaaS recebe a oferta antes das opções.
O que se sustenta para IA e SaaS
9.593 caracteres de briefing produzem uma tela sem enchimento. Os valores nele são explícitos (seções de 100vh e passos de espaçamento de 28px), e é por isso que a composição continua legível quando as palavras mudam. AI Runtime enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que o briefing por trás de AI Runtime contém de fato?
O briefing capturado tem 9.593 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.
Posso reconstruir landing page do AI Runtime em outra stack?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para React, mas a mesma composição se reconstrói no que você já usa. A stack é nomeada para você saber como a referência foi feita.
Como se comportam as transições de 0.85s em AI Runtime?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.85s usando cubic-bezier(0.22, 1, 0.36, 1). O briefing registra os valores para que quem for portar a página não precise adivinhar.
