Sobre este template
Innovation Lab entrega a uma agência ou estúdio uma primeira tela pronta e os números que a produziram. “We push past conventions, reshaping the virtual terrain with next-level technologies” é a linha que o layout foi construído para sustentar. A cor se limita a índigo profundo #080219 por baixo e branco #F8F3EF para a tipografia, composta em Inter. A entrega é React e Tailwind CSS, capturada em 1466x1080 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 0.2s, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Deixe aberto enquanto escreve: o briefing de 6.911 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de agência aguenta 6,9s 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 Innovation Lab.
- Copie a entrada de 0.2s e a cubic-bezier(0.16, 1, 0.3, 1) exatamente se você quer a mesma construção na mesma velocidade.
O que está incluído
- Links colapsam em uma largura. Uma fileira curta de links e uma única ação ficam sobre a landing page, presas a passos de espaçamento de 12px e transições de 0.2s, para a barra nunca competir com a composição atrás dela. Os rótulos são curtos o bastante para caber em uma linha em qualquer largura que o briefing cubra.
- O vídeo é o fundo, não um painel. A moldura em 1466x1080 é preenchida por um único loop que roda atrás do texto e não pede controles. O loop é curto o bastante (6,9s) para o olho ler como textura e não como linha do tempo.
- Números na linha de base. Os números são compostos como tipografia, não dentro de um card: Inter no tamanho de display com rótulos um passo abaixo. Os rótulos ficam embaixo dos números no menor passo do briefing, então a fileira lê como dado e não como decoração.
- Linha de cima: marca, links, uma ação. Mantenha a linha de cima em uma só. A referência tem captura em 1466x1080.
Movimento e interação
Um loop, não uma linha do tempo
O movimento ambiente vem do loop de 6,9s em 1466x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico. Grave ou exporte em 1466x1080 ou mais largo.
Uma superfície interativa pequena
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. Como os estados são simples, eles portam para qualquer sistema de componentes.
A landing page com a sua cara
A substituição direta tem um limite: se o seu produto precisa de outra hierarquia, passos de espaçamento de 12px e transições de 0.2s vão brigar com ela. Nesse caso, mude a ordem primeiro e os valores depois. Uma marca diferente pode reaproveitar a moldura inteira.
Ler Innovation Lab como especificação
Uma captura de tela mostra como a página é; o briefing mostra por quê. passos de espaçamento de 12px, transições de 0.2s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) fecham a distância entre os dois. Nada nesta landing page depende de um padrão.
Como a landing page se reorganiza
A tipografia é clampada, não escalonada (um clamp entre 220px e 12px), então a linha de display não dá saltos entre larguras. O layout estreito é uma decisão de projeto, não um espremer, e a hierarquia sobrevive a ele.
Perguntas frequentes
O que o briefing por trás de Innovation Lab contém de fato?
O briefing capturado tem 6.911 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.
Preciso de React e Tailwind CSS para reconstruir Innovation Lab?
Innovation Lab 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.
Quanto de Innovation Lab é animado?
As entradas e as mudanças de estado ficam na faixa de 0.2s usando cubic-bezier(0.16, 1, 0.3, 1). Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
