Sobre este template
Synth Mode é uma referência prática para uma marca de e-commerce: landing page com layout definido, medidas tiradas e tudo pronto para reconstruir. O título diz “LGPSM — Future Forward Fashion”, e o resto da landing page se organiza em volta disso. A paleta é branco #EBEBED por baixo e azul suave #64748B carregando os destaques, com tipografia Plus Jakarta Sans. A entrega é React e Tailwind CSS, capturada em 1920x1396 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 3s e um loop de vídeo ao fundo. É mais útil quando a landing page de E-commerce precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Quem briefa um modelo para uma landing page vai usar o prompt de 10.533 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Synth Mode.
- Se a sua marca tem duas cores, o time de marketing deve decidir qual assume o papel de #64748B e qual assume o de #EBEBED.
O que está incluído
- Navegação em uma só linha. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #64748B, dimensionada para ficar discreta diante do resto da página. Os links são compostos abaixo da marca em tamanho, e a ação #64748B é o único elemento da barra com peso.
- Toda medida está escrita. Os valores são a especificação: transições de 3s, capturados em 1920x1396 em vez de inferidos de um print. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto.
- Cards sem bordas. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Plus Jakarta Sans em tamanho pequeno para a estrutura continuar visível. O espaçamento entre painéis é um valor só, e é isso que impede uma grade densa de parecer apertada. Um painel, uma ideia.
- Links antes da ação. Os links ficam em uma linha só, em um único tamanho, e a ação #64748B fecha a fileira à direita, então o olho termina onde a navegação termina.
Movimento e interação
Estados de ponteiro, nada mais
A camada interativa é pequena e previsível: estados de hover nos botões e links, não em todos os cards. Todo o resto fica parado, e isso mantém a ênfase na composição. Cada estado muda uma única propriedade, o que mantém o feedback legível. Mantenha os efeitos de ponteiro nos controles.
Movimento ambiente sem biblioteca de scroll
Um único clipe de 7,3s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção. Grave ou exporte em 1920x1396 ou mais largo.
Como Synth Mode ordena a primeira leitura
Quando um leitor de e-commerce cai em uma tela única, ele escaneia antes de ler. O layout responde a isso: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards são dimensionados para o escaneamento, com transições de 3s mantendo cada parada distinta. O leitor de e-commerce recebe a oferta antes das opções.
Ler Synth Mode como especificação
Enquanto um moodboard deixa a escala em aberto, este briefing a fecha: transições de 3s, com os valores ao redor derivados dessa decisão. Nada nesta landing page depende de um padrão.
O tempo por trás da landing page
Toda transição aqui tem um número associado. É por isso que transições de 3s, um loop de mídia de 7,3s e camadas em parallax pode ser portado valor por valor em vez de reajustado no olho. Nada anima por si nesta landing page.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Synth Mode?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1396, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Synth Mode depende de React e Tailwind CSS?
Synth Mode 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.
Posso publicar uma página reconstruída a partir de Synth Mode 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 1920x1396.
