Sobre este template
Signal ID é uma referência prática para um produto de IA ou SaaS: landing page com layout definido, medidas tiradas e tudo pronto para reconstruir. O título da própria página é “YOUR VOICE ID TO THE E NETWORK”, e a composição é construída em volta exatamente dessas palavras. A paleta se reduz a azul profundo #000003 por baixo e #FFFFFF para a tipografia, e a tipografia é Sora. A entrega é React e Tailwind CSS, capturada em 1686x1080 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 70ms, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 11.588 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times internos que estendem esta landing page e precisam de seções de 100vh e passos de espaçamento de 20px levado para os novos blocos sem alteração.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 7s 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 Signal ID.
O que está incluído
- Uma linha, sem gaveta. A barra é uma linha de texto e uma ação, medida em seções de 100vh e passos de espaçamento de 20px, para ler como faixa e não como bloco. A marca é tratada como tipografia, não como um logo fechado, o que mantém a linha de cima em uma só linha de base.
- Um clipe em sangria total atrás da tipografia. O vídeo fica na camada de baixo da composição em 1686x1080, com a tipografia organizada acima e nada entre os dois. O loop é curto o bastante (7s) para o olho ler como textura e não como linha do tempo.
- A tipografia faz o estilo. Com Sora fazendo o trabalho, os tamanhos caem com força do título para o texto de apoio e o letter-spacing aperta conforme o tamanho cresce, então a hierarquia é carregada pela tipografia e não pela cor. Os pesos são especificados por papel, então a hierarquia não depende de chute na hora de construir.
- Uma barra de navegação que sai do caminho. A barra fica sobre a landing page em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Estados de ponteiro, nada mais
O trabalho de ponteiro é pequeno e especificado: estados de hover nos botões e links, não em todos os cards, aplicado aos elementos que já parecem interativos. Nada na página abre um modal ou sequestra o scroll; as interações ficam locais ao elemento. Mantenha os efeitos de ponteiro nos controles.
Rápido o bastante para parecer intencional
Uma única duração cobre as interações (70ms com cubic-bezier(0.16, 1, 0.3, 1)), e é isso que mantém hover e clique lendo como um sistema só. Nada espera por uma posição de scroll, então a página responde no instante em que você a toca.
A landing page com a sua cara
Componha o texto novo no tamanho de display que o briefing nomeia (seções de 100vh e passos de espaçamento de 20px), e o resto da escala acompanha sem um novo design. Mantenha o recorte da mídia; ele trabalha tanto quanto a tipografia.
Os números por trás da landing page
O custo de uma escala fixa é menos espaço para improvisar. seções de 100vh e passos de espaçamento de 20px mantêm a composição coerente, mas um elemento novo precisa ser encaixado, não apenas colocado. Nada nesta landing page depende de um padrão.
O que se move em Signal ID
Porte o movimento por último. O briefing o fixa como transições de 70ms, um loop de mídia de 7s e uma revelação de linha com máscara, que é mais fácil de igualar depois que o layout está de pé. Nada anima por si nesta landing page.
Perguntas frequentes
O que o briefing por trás de Signal ID contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1686x1080, 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 Signal ID?
Signal ID 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.
Como devo tratar a mídia de Signal ID em um projeto de cliente?
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 1686x1080.
