Como ele é
Pense num mural de cortiça em que fotos de alturas diferentes se encaixam em colunas sem deixar buracos. No topo ficam o título e filtros em formato de pílula, cada um com a contagem de fotos. Ao trocar o filtro, as fotos que saem desaparecem, as que ficam deslizam para os novos lugares e as novas surgem em sequência. Ao passar o mouse, a foto cresce de leve e o título sobe sobre um degradê escuro; em telas de toque, o título fica sempre visível. O clique amplia a foto a partir da miniatura até uma lightbox sobre fundo quase preto, com contador e botões para navegar.
Você pode estar procurando isto se pediu algo assim
- galeria de fotos tipo Pinterest, com imagens de tamanhos diferentes
- portfólio com botões para filtrar por categoria e animação ao trocar
- clicar na foto e ela abrir grande com o fundo escuro
- mural de fotos em colunas que não deixa espaço vazio
- vitrine de produtos com filtros que reorganizam as fotos com suavidade
- galeria que se adapta ao celular e abre a imagem em tela cheia
Também chamado de
- galeria masonry
- masonry gallery
- layout masonry
- grid-lanes
- lightbox
- galeria com filtros
- filterable gallery
- mural de fotos
Quando usar
- Portfólio de fotógrafo, arquiteto ou estúdio com projetos por categoria
- Acervo de cases ou de obras que precisa de filtro rápido
- Vitrine de produtos com fotos em proporções variadas
- Página de galeria de eventos, viagens ou bastidores
Quando evitar
- Conteúdo em que a ordem de leitura importa, porque o masonry alterna as colunas
- Imagens que não podem ser cortadas, a menos que desligue balance, que recorta de leve no modo de reserva
Como pedir para a sua IA
Crie uma galeria masonry para o meu portfólio, com filtros por categoria que animam a reorganização das fotos, lightbox acessível com setas e Esc, layout que se adapta ao celular, cores da minha marca e troca instantânea, sem animação, para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Cortiça
Cortiça funciona em navegadores sem grid-lanes?
Funciona. Cortiça usa display grid-lanes só quando o navegador suporta; nos demais, um cálculo em JavaScript coloca cada foto na coluna mais baixa. A troca de filtro usa View Transitions onde existe e animação FLIP como reserva. Antes da primeira medição, inclusive no HTML gerado pelo Nuxt no servidor, a grade usa colunas CSS simples.
Cortiça é acessível por teclado e leitor de tela?
É. Os filtros de Cortiça formam um grupo de opções navegável por setas, Home e End, e cada foto é um botão com rótulo. A lightbox é um dialog modal nativo: o foco vai para o botão de fechar, as setas trocam de imagem, Esc ou um clique fora fecham e o foco volta para a miniatura.
Cortiça respeita quem prefere menos movimento?
Sim. Com a preferência de reduzir movimento ativa, Cortiça troca de filtro de forma instantânea, sem View Transitions nem FLIP, e a lightbox abre e fecha sem o zoom a partir da miniatura. O aumento da foto e a subida do título ao passar o mouse também deixam de animar.
