Sobre este template
Interactive Discovery foi capturada em 640x474 e guardada como especificação, não como imagem de galeria. A cor se limita a preto #000000 por baixo, branco #FFFFFF para a tipografia e laranja vivo #E8702A carregando os destaques, composta em Inter. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento se resume a transições de 1.1s e cubic-bezier(0.16,1,0.3,1), mantido discreto o bastante para o texto continuar conduzindo. Trate como o briefing de uma hero para uma empresa industrial que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Times que constroem hero para uma empresa industrial e querem o detalhe medido (seções de 100vh e passos de espaçamento de 28px) em vez de uma captura de tela para copiar.
- Quem briefa um modelo para uma hero vai usar o prompt de 6.894 caracteres como ponto de partida.
- Feito para fundadores que já escolheram #E8702A e não decidiram mais nada sobre a hero.
O que está incluído
- Topo com uma única ação. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #E8702A, dimensionada para ficar discreta diante do resto da página. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os links são compostos abaixo da marca em tamanho, e a ação #E8702A é o único elemento da barra com peso.
- Toda medida está escrita. Os tamanhos foram lidos do render em 640x474: seções de 100vh, passos de espaçamento de 28px, transições de 1.1s e curva de aceleração cubic-bezier(0.16,1,0.3,1). Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo. Verifique uma reconstrução contra os mesmos números.
- Cada família com uma função. 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. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia.
- Links antes da ação. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela. A referência tem captura em 640x474.
Movimento e interação
Dá para desligar o movimento
A camada de movimento vem com um interruptor: a entrada sai sob prefers-reduced-motion. O feedback de interação continua funcionando com movimento reduzido; só as entradas saem.
Renderizado, não ilustrado
A renderização em tempo de execução é a decisão de design aqui (um canvas WebGL), e o layout é construído para dar espaço a ela. A interface em volta fica plana, o que deixa a renderização carregar a profundidade.
O que se move em Interactive Discovery
Toda transição aqui tem um número associado. É por isso que transições de 1.1s, estados de hover e de clique e um canvas ao vivo pode ser portado valor por valor em vez de reajustado no olho. Nada anima por si nesta hero.
Como Interactive Discovery ordena a primeira leitura
Compare o topo desta página com uma tela de landing page típica de indústria. As duas trazem um título e uma ação; aqui a navegação, o selo de anúncio e a linha de estatísticas ficam em ordem fixa em vez de competir com o mesmo peso. O leitor de indústria recebe a oferta antes das opções.
A hero com a sua cara
Quando você colocar a sua própria mídia, mantenha o recorte e a ordem das camadas. A mídia é um frame estático em 640x474. É esse posicionamento que mantém o texto legível. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Interactive Discovery?
O briefing capturado tem 6.894 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.
Por que a entrada cita React e Tailwind CSS?
Interactive Discovery 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.
O que comanda o movimento em Interactive Discovery?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 1.1s com cubic-bezier(0.16,1,0.3,1). Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
