Sobre este template
Pixel Grid Hover resolve o problema de portfólio para uma agência ou estúdio com um único briefing capturado. Ela abre com “Brand Strategy & Product Design” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta é branco #EBEBEB por baixo e preto #1A1819 para a tipografia, com tipografia DM Sans. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento fica restrito a transições de 0.7s e cubic-bezier(0.22,1,0.36,1). É mais útil quando a portfólio de Agências e estúdios precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Pegue a moldura em 640x472 e tipografia de 12px a 14px e passos de espaçamento de 12px desta portfólio antes de pegar qualquer outra coisa.
- Quem briefa um modelo para uma portfólio vai usar o prompt de 8.672 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma portfólio cujo título precisa continuar tão longo quanto o da Pixel Grid Hover.
O que está incluído
- Passos de espaçamento citados. Nada aqui é feito no olho. A especificação fixa tipografia de 12px a 14px, passos de espaçamento de 12px, transições de 0.7s e curva de aceleração cubic-bezier(0.22,1,0.36,1), e o resto do layout deriva desses valores. A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído.
- Uma pílula para a única novidade. Um selo, uma mensagem: a pílula fica acima do título em DM Sans no menor passo da escala, e nada mais disputa esse lugar. A posição dele preserva o centro da composição para o título.
- Faixa de números, não tabela. A fileira fica no alto da portfólio como prova, não como decoração. Os rótulos são compostos em um tamanho só, então um rótulo longo não muda a altura da fileira. A referência tem captura em 640x472.
- Os tamanhos estão no briefing, não em uma escala. O espaçamento é declarado do mesmo jeito (tipografia de 12px a 14px, passos de espaçamento de 12px, transições de 0.7s e curva de aceleração cubic-bezier(0.22,1,0.36,1)), não como uma escala que cresce sozinha.
Movimento e interação
A página responde ao scroll
Parallax é o único comportamento de scroll da página, então o efeito tem um lugar definido na composição. O efeito é decorativo: desligue e a hierarquia continua funcionando.
Interação mantida local
A interação é local a cada controle aqui (estados de hover nos botões e links, não em todos os cards), então nada na página se move por efeito colateral. Os estados de pressão estão especificados junto com o hover, então tocar confirma o mesmo que clicar. Confira os estados em um dispositivo de toque.
Como a portfólio se reorganiza
Se os seus breakpoints foram escolhidos para fazer as coisas caberem, e não para mudar o layout, leia esta entrada. a tipografia é clampada entre 12px e 14px em vez de uma lista de elementos escondidos. Os dois estados estão descritos no mesmo briefing.
O que esta portfólio acerta
Comparado a um hero de template, a diferença está no que falta. Não há grade de cards, nem carrossel, nem segunda chamada para ação: só o selo de anúncio, a linha de estatísticas, a grade de cards e o rodapé, dimensionados contra tipografia de 12px a 14px e passos de espaçamento de 12px. Dá ao leitor de agência a rota honesta mais curta até a oferta.
Ler Pixel Grid Hover como especificação
Assumir tipografia de 12px a 14px, passos de espaçamento de 12px, transições de 0.7s e curva de aceleração cubic-bezier(0.22,1,0.36,1) troca flexibilidade por repetibilidade. É esse o ponto da referência: a mesma página em outra marca, sem um novo conjunto de suposições. Nada nesta portfólio depende de um padrão.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Pixel Grid Hover?
O briefing capturado tem 8.672 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?
Pixel Grid Hover 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 Pixel Grid Hover?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.7s com cubic-bezier(0.22,1,0.36,1). O briefing registra os valores para que quem for portar a página não precise adivinhar.
