Sobre este template
Neuralyn mostra uma forma de construir hero para um produto de IA ou SaaS e publica as instruções que produziram o resultado. “One Clear Overview” é a linha que o layout foi construído para sustentar. A paleta se reduz a preto #000000 por baixo, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 800x590 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 0.6s. Deixe aberto enquanto escreve: o briefing de 5.257 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Neuralyn.
- Quem cuida do conteúdo e precisa encaixar um título maior vai usar a contagem de linhas de Inter como limite, não a de caracteres.
- Se o lançamento da sua equipe de produto está perto, pegue a moldura em 800x590 e a entrada de 0.6s e deixe o resto da composição como está.
O que está incluído
- Links colapsam em uma largura. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a transições de 0.6s, para a barra nunca competir com a composição atrás dela. A ação carrega o destaque enquanto os links ficam na cor do texto, então a hierarquia da barra acompanha a da página abaixo.
- A grade define a ordem. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Inter em tamanho pequeno para a estrutura continuar visível. A grade colapsa para uma coluna só sem mudar a ordem dos painéis.
- A composição é o conteúdo. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 800x590 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 800x590, e é por isso que ela se sustenta quando o texto muda.
- Links antes da ação. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Os rótulos são curtos o bastante para caber em uma linha em qualquer largura que o briefing cubra. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Revelações atreladas ao movimento
Parallax é o único comportamento de scroll da página, então o efeito tem um lugar definido na composição. O movimento reduzido remove o efeito sem mudar o estado final da composição.
Tempos curtos e combinados
As transições estão especificadas em 0.6s, e é esse o tempo ao qual os controles obedecem. A curva de aceleração é especificada junto com a duração (0.6s), 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.
Como Neuralyn ordena a primeira leitura
Assumir uma única rota de leitura significa fechar as outras. O briefing aceita isso, fixa a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards no lugar e gasta transições de 0.6s para tornar a rota óbvia. O leitor de SaaS recebe a oferta antes das opções.
O tempo por trás da hero
Movimento ambicioso costuma custar a legibilidade da primeira tela. Este briefing mantém transições de 0.6s, camadas em parallax e um elemento sticky curto o bastante para a tipografia nunca precisar esperar. Nada anima por si nesta hero.
O que mudar primeiro em Neuralyn
Um template pede que você aceite o layout dele; esta referência pede que você o mantenha e mude tudo por dentro. A diferença é que transições de 0.6s ficam fixas enquanto o assunto se move. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Perguntas frequentes
O que o briefing por trás de Neuralyn contém de fato?
O briefing capturado tem 5.257 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Quanto de Neuralyn depende de React e Tailwind CSS?
Neuralyn 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 Neuralyn?
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 800x590.
