Sobre este template
Rare Gallery mostra uma forma de construir portfólio para uma agência ou estúdio e publica as instruções que produziram o resultado. “A carefully curated collection beyond compare” é a linha que o layout foi construído para sustentar. A paleta é lima profundo #222518 por baixo, com tipografia Instrument Serif. A entrega é React e Tailwind CSS, capturada em 1920x1414 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 400ms, 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. É a referência certa para portfólio para uma agência ou estúdio que precisa parecer intencional já na primeira tela.
Feito para
- Profissionais de marketing de produto que precisam que portfólio continue legível com 6,9s de vídeo em loop atrás do texto.
- Feito para um fundador solo lançando uma portfólio para uma agência ou estúdio, sem nenhum design system atrás.
- Quem briefa um modelo para uma portfólio vai usar o prompt de 4.964 caracteres como ponto de partida.
O que está incluído
- A navegação é fina de propósito. Uma fileira curta de links e uma única ação ficam sobre a portfólio, presas a passos de espaçamento de 64px e transições de 400ms, para a barra nunca competir com a composição atrás dela. 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 elemento de mídia carrega o clima. O clipe roda 6,9s em 1920x1414 e faz loop sem corte visível, então lê como superfície e não como filmagem. Um frame de poster em 1920x1414 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 1920x1414 ou mais largo para o recorte continuar honesto.
- Uma pílula para a única novidade. Um selo, uma mensagem: a pílula fica acima do título em Instrument Serif no menor passo da escala, e nada mais disputa esse lugar. Existe um único anúncio, e é isso que faz o selo parecer notícia. Remova quando a novidade envelhecer.
- O formulário é a primeira tela inteira. Há uma única decisão aqui: preencher o formulário ou sair. Todo o resto da tela sustenta essa decisão. Os rótulos ficam acima dos campos e o texto de apoio permanece acima do primeiro deles. Uma coluna, uma ação.
Movimento e interação
O loop faz o trabalho ambiente
O clipe de fundo roda 6,9s em 1920x1414 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. O clipe é mudo e inline, então o primeiro frame está disponível sem interação.
Uma superfície interativa pequena
A camada interativa é pequena e previsível: estados de hover nos botões e links, não em todos os cards. Todo o resto fica parado, e isso mantém a ênfase na composição. Hover e foco estão especificados juntos, então ponteiro e teclado recebem a mesma informação. Mantenha os efeitos de ponteiro nos controles.
A portfólio com a sua cara
Uma linha, uma fonte, um destaque: essas três substituições são as que mais mudam o design. passos de espaçamento de 64px, transições de 400ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) são os valores que não devem se mover. A moldura e a escala são o que deixar em paz.
O tempo por trás da portfólio
A contrapartida é que nada aqui recompensa uma segunda olhada pela animação. O que ela recompensa é a ordem de leitura, com transições de 400ms, um loop de mídia de 6,9s e estados de hover e de clique confirmando estado em vez de decorá-lo. Nada anima por si nesta portfólio.
Como Rare Gallery ordena a primeira leitura
Leia a primeira tela de uma vez e a oferta já está clara. a navegação, o título, o selo de anúncio, o formulário e o clipe de fundo chegam em sequência, separados por passos de espaçamento de 64px e transições de 400ms em vez de divisores decorativos. O leitor de agência recebe a oferta antes das opções.
Perguntas frequentes
O que o briefing por trás de Rare Gallery contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1414, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir portfólio do Rare Gallery em outra stack?
Rare Gallery 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 Rare Gallery 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 1920x1414.
