Sobre este template
Agent Grove mostra uma forma de construir landing page para um produto de IA ou SaaS e publica as instruções que produziram o resultado. A paleta é preto #2B2B2B por baixo, com tipografia Geist. A entrega é React e Tailwind CSS, capturada em 1484x1080 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 300ms, cubic-bezier(0.16,1,0.3,1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo landing page para um produto de IA ou SaaS e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 5,4s de vídeo em loop.
- Quem briefa um modelo para uma landing page vai usar o prompt de 7.959 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 Agent Grove.
O que está incluído
- Linha de cima: marca, links, uma ação. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Geist, para a barra pertencer à página abaixo e não a um sistema separado. Nada na barra anima com o scroll; ela está presente desde o primeiro frame e depois sai do caminho.
- O briefing nomeia os passos. O layout é resolvido sobre valores fixos (passos de espaçamento de 24px, transições de 300ms e curva de aceleração cubic-bezier(0.16,1,0.3,1)), e é isso que mantém a primeira tela composta em qualquer largura. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- O loop é o fundo. O fundo é um único loop de 5,4s em 1484x1080, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Um frame de poster em 1484x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma barra de navegação que sai do caminho. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Geist, para a composição ler conteúdo primeiro e moldura depois. Uma sobreposição mobile assume abaixo do breakpoint de tablet.
Movimento e interação
O tempo definido no briefing
Os controles resolvem em 300ms, rápido o bastante para a página responder ao toque, e não depois dele. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada. Se mudar a curva de aceleração, mude em todos os lugares.
O loop faz o trabalho ambiente
O clipe de fundo roda 5,4s em 1484x1080 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção. Grave ou exporte em 1484x1080 ou mais largo.
Como Agent Grove ordena a primeira leitura
A atenção é conduzida, não espalhada. O olho cai primeiro na linha de display, depois no texto de apoio, depois na ação. A prova, onde aparece, fica como faixa ou linha, e não como parede de depoimentos. Essa sequência é o design. Nada acima da dobra compete com essa primeira decisão: nem grade de cards, nem parede de depoimentos, nem dashboard.
Os números por trás da landing page
O briefing é uma especificação. Ele declara passos de espaçamento de 24px, transições de 300ms e curva de aceleração cubic-bezier(0.16,1,0.3,1) e nomeia a moldura da mídia em 1484x1080 antes de qualquer coisa ser desenhada em volta dela. Nada nesta landing page depende de um padrão.
O que se move em Agent Grove
O movimento se limita a transições de 300ms, um loop de mídia de 5,4s e estados de hover e de clique. Nada na landing page anima por mais tempo do que o briefing permite. Nada anima por si nesta landing page.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Agent Grove?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1484x1080, 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 Agent Grove?
Agent Grove 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 Agent Grove?
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 1484x1080.
