Sobre este template
Esta é a landing page da 3D Character Studio, publicada com o briefing que a produziu em vez de apenas uma captura de tela. O título diz “Glad you stopped in. Good taste tends to find us. Now, what are we building?”, e o resto da landing page se organiza em volta disso. A paleta se reduz a vermelho #800014 por baixo e vermelho vivo #E12444 carregando os destaques, e a tipografia é HelveticaNowDisplay-Medium. A entrega é React e Tailwind CSS, capturada em 1740x1080 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 38ms e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 5.726 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Comece por tipografia de 13px a 32px e passos de espaçamento de 26px e deixe a paleta vir depois, porque é o espaçamento que faz esta landing page ler.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de agência aguenta 6,6s de vídeo em loop.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da 3D Character Studio.
O que está incluído
- A barra segue a grade. A barra carrega a marca, os links de seção e um botão #E12444, tudo medido em tipografia de 13px a 32px e passos de espaçamento de 26px para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #E12444 é o único elemento da barra com peso. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- Vídeo no quadro inteiro. A mídia é um clipe de 6,6s recortado para cover na moldura em 1740x1080, então nunca aparecem faixas pretas em nenhuma largura. O loop é curto o bastante (6,6s) para o olho ler como textura e não como linha do tempo.
- Uma barra de navegação que sai do caminho. Marca, links e a ação #E12444 compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental.
- Tamanhos fixados no briefing. O briefing fixa tipografia de 13px a 32px, passos de espaçamento de 26px e transições de 38ms e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho. Substitua a família tipográfica ou o texto, não a escala.
Movimento e interação
Rápido o bastante para parecer intencional
As transições estão especificadas em 38ms, e é esse o tempo ao qual os controles obedecem. Nada espera por uma posição de scroll, então a página responde no instante em que você a toca.
O loop faz o trabalho ambiente
O movimento ambiente vem do loop de 6,6s em 1740x1080, 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.
Como 3D Character Studio ordena a primeira leitura
Nada aqui compete com a primeira decisão. “Glad you stopped in. Now, what are we building?” já faz esse trabalho desde o primeiro frame. O material de apoio espera abaixo da dobra, e a navegação, o selo de anúncio, a linha de estatísticas e o clipe de fundo sustentam o topo da página sozinhos. O leitor de agência recebe a oferta antes das opções.
Ler 3D Character Studio como especificação
Enquanto um moodboard deixa a escala em aberto, este briefing a fecha: tipografia de 13px a 32px e passos de espaçamento de 26px, com os valores ao redor derivados dessa decisão. Nada nesta landing page depende de um padrão.
O que se move em 3D Character Studio
O movimento se limita a transições de 38ms, um loop de mídia de 6,6s e uma passada de máquina de escrever. Nada na landing page anima por mais tempo do que o briefing permite. Nada anima por si nesta landing page.
Perguntas frequentes
O prompt de 3D Character Studio é 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 1740x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir 3D Character Studio?
3D Character Studio foi construído em React e 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 3D Character Studio?
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 1740x1080.
