Sobre este template
Planor entrega a um produto de IA ou SaaS uma primeira tela pronta e os números que a produziram. A cor se limita a laranja #634635 por baixo e branco #E5E7EB para a tipografia, composta em Inter. A entrega é um único arquivo HTML autocontido, capturada em 1964x1402 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 0.2s e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 3.036 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times que constroem hero para um produto de IA ou SaaS e querem o detalhe medido (um tamanho de display fixo de 58px e passos de espaçamento de 30px) em vez de uma captura de tela para copiar.
- Profissionais de marketing de produto que precisam que hero continue legível com 6,4s de vídeo em loop atrás do texto.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Planor.
O que está incluído
- A barra segue a grade. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a um tamanho de display fixo de 58px e passos de espaçamento de 30px, para a barra nunca competir com a composição atrás dela. A marca é tratada como tipografia, não como um logo fechado, o que mantém a linha de cima em uma só linha de base. Uma ação por barra.
- Um clipe faz todo o trabalho. O clipe roda 6,4s em 1964x1402 e faz loop sem corte visível, então lê como superfície e não como filmagem. Exporte em 1964x1402 ou mais largo e o recorte cover continua funcionando. Exporte em 1964x1402 ou mais largo para o recorte continuar honesto.
- Links colapsam em uma largura. 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 barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes.
- Nada aqui é herdado. O briefing fixa um tamanho de display fixo de 58px, passos de espaçamento de 30px e transições de 0.2s e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 6,4s em 1964x1402, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é mudo e inline, então o primeiro frame está disponível sem interação.
Mudanças de estado, cronometradas
O briefing fixa o valor da transição em 0.2s, então uma reconstrução não pode cair em um padrão mais lento. A curva de aceleração é especificada junto com a duração (0.2s), então uma reconstrução não pode trocar a sensação sem aviso.
A ordem por trás da hero
Enquanto uma página de marketing empilha prova abaixo da dobra e torce, esta hero coloca a navegação, o título e o clipe de fundo na frente do leitor e segura o resto. O leitor de SaaS recebe a oferta antes das opções.
Como a hero se reorganiza
Responsivo aqui significa que a escala muda, não a hierarquia: a navegação vira um menu compacto no celular. O texto fica acima da dobra, os controles continuam grandes o bastante para o toque e a preferência de movimento reduzido é respeitada. Um espremer teria sido mais barato e não se sustentaria.
O que mudar primeiro em Planor
Repintar a paleta primeiro é o erro de sempre. Isso muda o clima sem tocar na composição, e um tamanho de display fixo de 58px e passos de espaçamento de 30px continuam sustentando o layout; faça o texto e a mídia primeiro e a paleta por último. Reescreva a linha de display antes de tocar na cor.
Perguntas frequentes
Quanto de Planor depende de um único arquivo HTML autocontido?
Planor 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 prompt de Planor é 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 1964x1402, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso publicar uma página reconstruída a partir de Planor sem dar os créditos?
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 1964x1402.
