Sobre este template
Peakflow Footer preserva o rastro das decisões: o briefing que produziu esta rodapé tem 3.693 caracteres. A paleta é preto #111111 por baixo e branco #FAFAFA para a tipografia, com tipografia Inter. A stack é Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. Tudo o que se move cabe em transições de 100ms, cubic-bezier(0.5, 0, 0, 1) e um loop de vídeo ao fundo. É a referência certa para rodapé para um produto de IA ou SaaS que precisa parecer intencional já na primeira tela.
Feito para
- Times que constroem um produto de IA ou SaaS rodapé e precisam de uma moldura em 1920x1470 registrado antes de o orçamento sair.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta rodapé como o padrão que todas as outras páginas copiam.
- Profissionais de marketing de produto que precisam que rodapé continue legível com 7,9s de vídeo em loop atrás do texto.
O que está incluído
- Os tamanhos estão no briefing, não em uma escala. O layout trabalha com valores absolutos, não com proporções: passos de espaçamento de 30px, transições de 100ms e curva de aceleração cubic-bezier(0.5, 0, 0, 1). As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto.
- Um elemento de mídia carrega o clima. O fundo é um único loop de 7,9s em 1920x1470, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. O loop é curto o bastante (7,9s) para o olho ler como textura e não como linha do tempo.
- A tipografia define a hierarquia. As famílias recebem papéis em vez de serem misturadas: Inter carrega o display e a interface juntos. Os pesos são especificados por papel, então a hierarquia não depende de chute na hora de construir. Uma família com papéis claros vence duas que competem.
- O formulário é a primeira tela inteira. Há uma única decisão aqui: preencher o formulário ou sair. Todo o resto da tela sustenta essa decisão. Os campos se empilham em uma coluna, então a ordem de tabulação acompanha a ordem de leitura. Uma coluna, uma ação.
Movimento e interação
O scroll conduz a composição
O conteúdo está atrelado à posição de scroll (as seções se revelam ao entrar na viewport), então a composição muda conforme o leitor avança em vez de animar por timer. O comportamento de scroll é medido contra o mesmo layout da página estática, então nada se desloca quando ele sai.
Movimento ambiente sem biblioteca de scroll
O movimento ambiente vem do loop de 7,9s em 1920x1470, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório.
O que se sustenta para IA e SaaS
Uma tela significa uma decisão para o leitor, e esse é o custo deste layout: todo o resto vai para baixo da dobra. O briefing declara passos de espaçamento de 30px, transições de 100ms e curva de aceleração cubic-bezier(0.5, 0, 0, 1) para que as seções de baixo mantenham o mesmo ritmo. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Os números por trás da rodapé
Uma reconstrução normalmente começa com uma captura de tela e uma suposição. Aqui ela começa com 3.693 caracteres de especificação: a moldura, o espaçamento e o movimento estão escritos antes da primeira linha de código. Nada nesta rodapé depende de um padrão.
O tempo por trás da rodapé
O movimento se limita a transições de 100ms, um loop de mídia de 7,9s e uma revelação por scroll. Nada na rodapé anima por mais tempo do que o briefing permite. Nada anima por si nesta rodapé.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Peakflow Footer?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1470, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Peakflow Footer depende de Tailwind CSS?
Peakflow Footer foi construído em Tailwind CSS, 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.
De onde veio o design de Peakflow Footer?
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 1920x1470.
