Sobre este template
AI Designer Portfolio entrega a uma agência ou estúdio uma primeira tela pronta e os números que a produziram. A paleta é branco #F6FCFF por baixo e verde-água profundo #051A24 para a tipografia, com tipografia Neue Montreal. A entrega é React e Tailwind CSS, capturada em 604x476 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 0.1s, cubic-bezier(0.4, 0, 0.2, 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 11.458 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times internos que estendem esta hero e precisam de tipografia de 22px a 80px e passos de espaçamento de 40px levado para os novos blocos sem alteração.
- Profissionais de marketing de produto que precisam que hero continue legível com 17,2s de vídeo em loop atrás do texto.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da AI Designer Portfolio.
O que está incluído
- Navegação em uma só linha. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a tipografia de 22px a 80px e passos de espaçamento de 40px, para a barra nunca competir com a composição atrás dela. O espaçamento entre links vem de padding, não de divisores, então a fileira lê como um objeto só.
- Vídeo no quadro inteiro. Um clipe de 17,2s em 604x476 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. Um frame de poster em 604x476 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 604x476 ou mais largo para o recorte continuar honesto.
- Varrer vence ler aqui. A grade é a estrutura: painéis do mesmo tamanho, compostos em Neue Montreal, arranjados para o olho andar na horizontal em vez de descer. O destaque dentro da grade marca no máximo um elemento, então os painéis não competem entre si. Um painel, uma ideia.
- Links antes da ação. A navegação é uma fileira só, sem um segundo nível embaixo dela. Se a sua página tiver mais seções, agrupe em vez de alargar a barra.
Movimento e interação
Hover, mas com parcimônia
O trabalho de ponteiro é pequeno e especificado: estados de hover nos botões e links, não em todos os cards e um carrossel que pagina o conteúdo sob demanda, aplicado aos elementos que já parecem interativos. Os estados interativos não mexem no layout, então nada salta sob o ponteiro. Não anime o layout no hover.
Movimento horizontal contínuo
Um marquee atravessa a composição num loop sem fim, em Neue Montreal, para a página ter movimento mesmo onde nada anima no scroll. Como a faixa é decorativa, dá para pausar ou remover sem mudar o layout.
O tempo por trás da hero
Conte os elementos animados e a lista continua curta: transições de 0.1s, um loop de mídia de 17,2s e uma revelação por scroll. Nada anima por si nesta hero.
Por que esta composição funciona para agência
A contrapartida é a densidade: esta hero diz menos na primeira tela do que um layout guiado por recursos diria. O que ela mantém é a ordem de leitura, e a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards fazem o trabalho que uma página mais longa espalharia. Dá ao leitor de agência a rota honesta mais curta até a oferta.
Os números por trás da hero
A página tem mais números do que parece. tipografia de 22px a 80px, passos de espaçamento de 40px, transições de 0.1s e curva de aceleração cubic-bezier(0.4, 0, 0.2, 1) são os que uma reconstrução precisa manter; o resto pode mudar. Nada nesta hero depende de um padrão.
Perguntas frequentes
O que o briefing por trás de AI Designer Portfolio contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 604x476, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir hero do AI Designer Portfolio em outra stack?
AI Designer Portfolio 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.
Posso usar AI Designer Portfolio 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 604x476.
