Sobre este template
Autonomous Ops foi capturada em 2028x1080 e guardada como especificação, não como imagem de galeria. O título da própria página é “Falcon AI operations overview”, e a composição é construída em volta exatamente dessas palavras. O esquema de cores é #F0F0F0 por baixo, #282828 para a tipografia e laranja #FF6900 carregando os destaques, e a página é composta em Segoe UI, Arial, Helvetica. A stack é um único arquivo HTML autocontido, então dá para levar landing page para um projeto sem handoff de design. O movimento cabe todo em transições de 3000ms, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 18.222 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se o seu time de front-end parte de um único arquivo HTML autocontido, levante seções de 100vh e uma grade de 3 colunas primeiro e deixe a paleta em paz até a grade se firmar.
- Esta landing page serve designers que precisam entregar uma construção em um único arquivo HTML autocontido a um engenheiro e querem o movimento escrito.
- Escreva o seu próprio título e depois reconstrua esta landing page em um único arquivo HTML autocontido com as medidas intactas.
O que está incluído
- Navegação em uma só linha. Uma fileira curta de links e uma única ação ficam sobre a landing page, presas a seções de 100vh e transições de 3000ms, para a barra nunca competir com a composição atrás dela. Os links são compostos abaixo da marca em tamanho, e a ação #FF6900 é o único elemento da barra com peso. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes.
- Mídia sem sobreposição. O clipe roda 9,7s em 2028x1080 e faz loop sem corte visível, então lê como superfície e não como filmagem. O loop é curto o bastante (9,7s) para o olho ler como textura e não como linha do tempo.
- A tipografia carrega o tom. A tipografia é Segoe UI, Arial, Helvetica, e o briefing dá uma função à família em vez de misturar por variedade. Peso, tracking e passos de tamanho estão todos especificados, então a hierarquia sobrevive a uma substituição. O texto de interface fica em uma família só, então a página nunca mistura duas vozes no mesmo tamanho.
- Topo com uma única ação. Os links ficam em uma linha só, em um único tamanho, e a ação #FF6900 fecha a fileira à direita, então o olho termina onde a navegação termina.
Movimento e interação
Todo o orçamento de animação
O movimento nos controles é curto e repetível: 3000ms a cada mudança de estado. Os tempos curtos são o motivo de a página parecer autoral; um padrão lento desfaria a composição.
Um canvas ao vivo no centro
A primeira tela é construída pelo navegador, não entregue como imagem: um canvas WebGL. Como a cena é ao vivo, o layout pode ser redimensionado sem um segundo conjunto de arquivos. Planeje o estado anterior ao carregamento da renderização.
O que mudar primeiro em Autonomous Ops
Enquanto um tema entrega componentes, este briefing entrega uma composição: seções de 100vh, uma grade de 3 colunas, cantos de 1.59cqw e transições de 3000ms e uma moldura de mídia, com o assunto por sua conta. A moldura e a escala são o que deixar em paz.
Como Autonomous Ops ordena a primeira leitura
Dá para embaralhar esses blocos e a página continuaria carregando. Mas deixaria de ler como argumento: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards são uma sequência, e seções de 100vh e uma grade de 3 colunas só funcionam nessa ordem. O leitor de SaaS recebe a oferta antes das opções.
O tempo por trás da landing page
Compare o movimento daqui com uma página guiada por scroll. As duas se movem; esta se move onde o briefing diz (transições de 3000ms, um loop de mídia de 9,7s e uma revelação de linha com máscara), então o texto continua na frente. Nada anima por si nesta landing page.
Perguntas frequentes
Quanto de Autonomous Ops depende de um único arquivo HTML autocontido?
Autonomous Ops 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.
Qual é o tamanho do prompt por trás de Autonomous Ops?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 2028x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso usar Autonomous Ops em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 2028x1080.
