# Cortiça Fotos de alturas diferentes encaixadas em colunas, com filtros por categoria que reorganizam tudo com animação. > Cortiça é um componente exclusivo do THM Componentes que monta uma galeria masonry: fotos de alturas diferentes encaixadas em colunas, filtros por categoria que reorganizam a grade com animação e uma lightbox acessível com setas e Esc. Usa o display grid-lanes do CSS quando o navegador suporta, com reserva em JavaScript, e serve para portfólios e acervos. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/cortica/ ## 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 ```text 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. ## Componentes relacionados - [Translado](https://vibecode.thmtecnologia.com/componentes/translado/): Você clica num card da galeria e a foto e o título crescem suavemente até virar a página de detalhe. - [Deriva](https://vibecode.thmtecnologia.com/componentes/deriva/): Um mural sem fim de cartões com fotos que você arrasta em qualquer direção e abre em detalhe com um clique. - [Mostruário](https://vibecode.thmtecnologia.com/componentes/mostruario/): Foto principal com lupa que amplia o detalhe ao passar o mouse, miniaturas embaixo e tela cheia com zoom. - [Escaninho](https://vibecode.thmtecnologia.com/componentes/escaninho/): Seção dividida em blocos de tamanhos diferentes, como uma marmita japonesa, para apresentar recursos ou serviços. - [Persiana](https://vibecode.thmtecnologia.com/componentes/persiana/): Fotos lado a lado em faixas verticais; a que está sob o mouse se alarga e as outras se estreitam. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.