Sobre este template
Leia Fastshot como especificação de landing page: os valores foram escritos antes de a página ser construída. O título da própria página é “Describe an app. We'll build it”, e a composição é construída em volta exatamente dessas palavras. A paleta se reduz a azul profundo #0A0D12 por baixo e índigo suave #9C86CE carregando os destaques, e a tipografia é Inter. A entrega é um único arquivo HTML autocontido, capturada em 1920x1406 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 1.00s, cubic-bezier(.4,0.2,1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 15.844 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se a referência é só um ponto de partida, os designers podem manter curva de aceleração cubic-bezier(.4,0.2,1) e reconstruir o resto da landing page.
- Designers que precisam dos números antes de tudo: seções de 100vh e cantos de 4px, tudo citado do briefing.
- Profissionais de marketing de produto que precisam que landing page continue legível com 7,5s de vídeo em loop atrás do texto.
O que está incluído
- Linha de cima: marca, links, uma ação. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #9C86CE, tudo isso no topo de landing page e sem fundo próprio. Abaixo de 599px os links colapsam em vez de quebrar para uma segunda linha.
- Vídeo na camada de baixo. O clipe roda 7,5s em 1920x1406 e faz loop sem corte visível, então lê como superfície e não como filmagem. Um frame de poster em 1920x1406 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- O tracking aperta ao crescer. Os passos de tamanho e o tracking do briefing são o que dá o tom: Inter em um tamanho de display apertado, depois uma queda clara para o texto de apoio. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia.
- Navegação sem fundo próprio. Os rótulos são curtos o bastante para caber em uma linha a 599px, e o item ativo é marcado por peso, não por uma pílula.
Movimento e interação
Mudanças de estado, cronometradas
O movimento nos controles é curto e repetível: 1.00s a cada mudança de estado. A curva de aceleração é especificada junto com a duração (1.00s), então uma reconstrução não pode trocar a sensação sem aviso. Mudanças de estado rápidas, sem linha do tempo de scroll.
Um loop, não uma linha do tempo
O movimento ambiente é um clipe de 7,5s em 1920x1406, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Como a landing page se reorganiza
A composição de desktop é resolvida contra 1920x1406, e o layout estreito é projetado, não herdado: a escala é fluida, não em degraus, o layout muda em 599px e a seção fica presa a 100vh. O movimento tem um ramo de movimento reduzido, e a mídia traz um frame de poster para a página continuar comunicando quando a reprodução automática não está disponível. A largura muda as medidas, não a rota de leitura.
O que um produto de IA ou SaaS ganha aqui
A contenção custa espaço para prova acima da dobra. Este briefing aceita esse custo e gasta a primeira tela com a oferta, com seções de 100vh e cantos de 4px fixadas para que uma seção de prova seja acrescentada abaixo sem retrabalho. Fastshot enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Os números por trás da landing page
Toda relação nesta página é um valor que dá para conferir: seções de 100vh, cantos de 4px, passos de espaçamento de 18px, transições de 1.00s e curva de aceleração cubic-bezier(.4,0.2,1). É isso que torna Fastshot reconstruível, e não apenas reproduzível. Nada nesta landing page depende de um padrão.
Perguntas frequentes
Preciso de um único arquivo HTML autocontido para reconstruir Fastshot?
Fastshot 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 Fastshot é 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 1920x1406, 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 Fastshot 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 1920x1406.
