Sobre este template
Place Saver foi capturada em 1480x1080 e guardada como especificação, não como imagem de galeria. O título da própria página é “The place for all your places”, e a composição é construída em volta exatamente dessas palavras. O esquema de cores é branco #F4F4F4 por baixo e azul profundo #0C0C0E para a tipografia, e a página é composta em Playfair Display. A entrega é um único componente, capturada em 1480x1080 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 0.9s, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. Se você está briefando uma landing page de viagens, parta desta composição e substitua o assunto.
Feito para
- Cite um único componente na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Se o seu time tiver de cortar o movimento, a landing page continua legível, com cantos de 48px e passos de espaçamento de 28px fazendo o trabalho de hierarquia.
- A página serve desenvolvedores front-end que reconstroem uma marca de viagens landing page em um único componente e procuram os números por trás da aparência.
O que está incluído
- Tamanhos fixados no briefing. Toda medida do briefing é um número que dá para medir de volta: cantos de 48px, passos de espaçamento de 28px, transições de 0.9s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1). Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo. Porte os valores junto com o layout.
- Um clipe, não uma ilustração. A mídia é um clipe de 5,6s recortado para cover na moldura em 1480x1080, então nunca aparecem faixas pretas em nenhuma largura. Um frame de poster em 1480x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 1480x1080 ou mais largo para o recorte continuar honesto.
- Duas famílias, funções claras. A tipografia é Playfair Display, 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. A família vem acompanhada de tamanhos fixos, e é isso que mantém a linha de display e o texto de interface relacionados.
- Uma escala para tipo e moldura. O espaçamento é declarado do mesmo jeito (cantos de 48px, passos de espaçamento de 28px, transições de 0.9s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1)), não como uma escala que cresce sozinha.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
Um único clipe de 5,6s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O clipe é mudo e inline, então o primeiro frame está disponível sem interação.
Rápido o bastante para parecer intencional
O movimento aqui é medido em milissegundos: 0.9s com cubic-bezier(0.16, 1, 0.3, 1). Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. A curva de aceleração é especificada junto com a duração (0.9s), então uma reconstrução não pode trocar a sensação sem aviso. Mantenha as durações quando você trocar a pele da página.
Ler Place Saver como especificação
A maioria das referências mostra o resultado e guarda os números. Esta inverte isso: cantos de 48px, passos de espaçamento de 28px, transições de 0.9s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) são publicados ao lado da página, para o resultado ser reproduzido em vez de aproximado. Nada nesta landing page depende de um padrão.
Como a landing page se reorganiza
Quando o texto é longo, o layout estreito é o primeiro a quebrar. Aqui um clamp entre 66px e 28px absorve a mudança, e o movimento tem um ramo de movimento reduzido. 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 Place Saver
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 0.9s e um loop de mídia de 5,6s), então o texto continua na frente. Nada anima por si nesta landing page.
Perguntas frequentes
Quanto de Place Saver depende de um único componente?
Place Saver foi construído em um único componente, 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.
Por que o prompt do Place Saver não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 8.226 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que eu recebo ao copiar o briefing de Place Saver?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1480x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
