Sobre este template
Esta é a landing page da Intelligent Performance, publicada com o briefing que a produziu em vez de apenas uma captura de tela. Ela abre com “Built for Intelligent Performance” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A cor se limita a neutro #ECECEB por baixo, #222222 para a tipografia e vermelho #FF6796 carregando os destaques, composta em Inter. A entrega é um único arquivo HTML autocontido, capturada em 1920x1418 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 08s, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 26.839 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Feito para estúdios que precisam explicar o comportamento em 767px a um cliente sem antes construir um protótipo.
- A landing page é voltada a times que já conhecem um único arquivo HTML autocontido e só precisam de um único arquivo HTML autocontido escrito.
- Profissionais de marketing de produto que precisam que landing page continue legível com 3,5s de vídeo em loop atrás do texto.
O que está incluído
- Topo com uma única ação. A fileira gasta o contraste em um lugar só: a ação #FF6796, com a marca e os links recuados na cor do texto. Abaixo de 767px os links colapsam em uma sobreposição de tela cheia. Abaixo de 767px os links colapsam em vez de quebrar para uma segunda linha.
- O loop é o fundo. A composição é construída sobre o clipe em 1920x1418, não ao lado dele, então a mídia nunca ganha painel nem borda. Exporte em 1920x1418 ou mais largo e o recorte cover continua funcionando.
- Conteúdo dividido em painéis. A grade é a estrutura: painéis do mesmo tamanho, compostos em Inter, arranjados para o olho andar na horizontal em vez de descer. O destaque dentro da grade marca no máximo um elemento, então os painéis não competem entre si.
- Fluido onde precisa ser. A tipografia é dimensionada com um clamp entre 16px e 14px em vez de passos fixos, então a linha de display mantém a proporção entre breakpoints em vez de dar saltos. Os controles continuam grandes o bastante para o toque e o texto mantém a ordem de leitura em qualquer largura.
Movimento e interação
Tempos curtos e combinados
O movimento nos controles é curto e repetível: 08s a cada mudança de estado. A curva de aceleração é especificada junto com a duração (08s), então uma reconstrução não pode trocar a sensação sem aviso.
Textura em vez de preenchimento chapado
Uma camada de grain fica sobre neutro #ECECEB, então grandes áreas chapadas leem como material, não como preenchimento puro. O grain é sutil o bastante para nunca competir com a tipografia.
A ordem por trás da landing page
Nada aqui compete com a primeira decisão. A página diz isso em voz alta: “Built for Intelligent Performance”. O material de apoio espera abaixo da dobra, e a navegação, o título, a linha de estatísticas, a grade de cards e a lista de recursos sustentam o topo da página sozinhos. O leitor de SaaS recebe a oferta antes das opções.
Como a landing page se reorganiza
Responsivo aqui significa que a escala muda, não a hierarquia: a escala é fluida, não em degraus, o layout muda em 767px e a seção fica presa a 100vh. O texto fica acima da dobra, os controles continuam grandes o bastante para o toque e a preferência de movimento reduzido é respeitada. 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 que se move em Intelligent Performance
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 08s, um loop de mídia de 3,5s 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
Preciso de um único arquivo HTML autocontido para reconstruir Intelligent Performance?
Intelligent Performance 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 Intelligent Performance?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1418, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
De onde veio o design de Intelligent Performance?
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 1920x1418.
