Sobre este template
Cast and Render é uma landing page de 3D construída a partir de um único briefing escrito, e esta página documenta esse briefing. O esquema de cores é neutro #F2F0EC por baixo e quase preto #0A0908 para a tipografia, e a página é composta em Inter. A entrega é um único arquivo HTML autocontido, capturada em 1920x1432 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 3s, cubic-bezier(.22.61.36,1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo landing page para uma marca de 3D, games ou entretenimento e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- A landing page é voltada a times que já conhecem um único arquivo HTML autocontido e só precisam de curva de aceleração cubic-bezier(.22.61.36,1) escrito.
- Se o seu time de front-end parte de um único arquivo HTML autocontido, levante tipografia de 12px a 15px e seções de 560vh primeiro e deixe a paleta em paz até a grade se firmar.
- A página serve desenvolvedores front-end que reconstroem uma marca de 3D, games ou entretenimento landing page em um único arquivo HTML autocontido e procuram os números por trás da aparência.
O que está incluído
- Uma linha, sem gaveta. A navegação é uma fileira só, sem um segundo nível embaixo dela. Abaixo de 280px os links colapsam em uma sobreposição de tela cheia. Abaixo de 280px os links colapsam em vez de quebrar para uma segunda linha.
- Um clipe faz todo o trabalho. A primeira tela é um único clipe em 1920x1432, e todo o resto se organiza por cima dele. O loop é curto o bastante (4,9s) para o olho ler como textura e não como linha do tempo.
- Nada estiliza além da escala. A tipografia é Inter, 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. O tracking aperta conforme o tamanho cresce, e é por isso que a linha de display se sustenta ao longo de 12–15px.
- Números tratados como tipografia. Uma faixa compacta de estatísticas carrega as afirmações que de outro modo pediriam um parágrafo, o que impede a composição de landing page de virar uma lista de recursos. Os rótulos são compostos em um tamanho só, então um rótulo longo não muda a altura da fileira. Corte um número antes de encolher o rótulo.
Movimento e interação
Tempos em milissegundos
Os tempos são curtos e consistentes (3s com cubic-bezier(.22.61.36,1)), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. A curva de aceleração é especificada junto com a duração (3s), então uma reconstrução não pode trocar a sensação sem aviso.
O loop faz o trabalho ambiente
Um único clipe de 4,9s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
Ler Cast and Render como especificação
A tipografia é o primeiro número: tipografia de 12px a 15px e seções de 560vh. O espaçamento decorre dele, e todo o resto da página é posicionado contra esses dois valores. Nada nesta landing page depende de um padrão.
Como Cast and Render ordena a primeira leitura
Aqui, a ordem é o projeto em si. a navegação, o selo de anúncio, a linha de estatísticas, a lista de recursos e a contagem regressiva estão posicionados para a oferta chegar antes da prova, e tipografia de 12px a 15px e seções de 560vh definem a distância entre os dois. O leitor de 3D recebe a oferta antes das opções.
Por que esta composição funciona para 3D
Um hero de estoque e esta landing page usam as mesmas peças. Aqui elas são ordenadas por a navegação, o selo de anúncio, a linha de estatísticas, a lista de recursos e a contagem regressiva e medidas com tipografia de 12px a 15px, seções de 560vh, cantos de 999px e passos de espaçamento de 14px, então a tela lê como sequência, não como contêiner. Cast and Render enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
Por que a entrada cita um único arquivo HTML autocontido?
Cast and Render 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 briefing de Cast and Render é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 18.074 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que o briefing por trás de Cast and Render contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1432, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
