# Tabuleiro Uma parede de cartões com imagem que você arrasta para qualquer lado, sem nunca chegar ao fim. > Tabuleiro é um componente do THM Componentes que monta uma parede 3D infinita de cartões em WebGL: a pessoa arrasta com o mouse ou o dedo para qualquer lado, os blocos se repetem sem fim e a grade segue por inércia ao soltar. Cada cartão mostra título, imagem, etiquetas e data, o que serve bem a portfólios. - Categoria: 3D e espaço - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, GSAP, OGL - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/tabuleiro/ ## Como ele é Imagine uma mesa de luz coberta de fotos que continua para todos os lados. Sobre um fundo preto, os cartões formam um mosaico de contorno fino: título no alto, imagem no meio, etiquetas em pílulas e a data no rodapé. Ao segurar e arrastar, a câmera recua um pouco e a grade desliza; ao soltar, ela segue por inércia até parar. Passar o mouse sobre um cartão acende atrás dele uma versão desfocada da própria imagem. As bordas da tela ficam mais escuras e a grade aparece com uma leve curvatura, como vista por uma lente. ## Você pode estar procurando isto se pediu algo assim - “uma galeria de projetos que dá para arrastar para qualquer lado sem acabar” - “portfólio em grade infinita que se mexe com o mouse, tipo site de agência” - “parede de fotos em 3D que a pessoa explora arrastando” - “mostrar todos os meus trabalhos numa grade que continua para sempre” - “aquele mural infinito em que você puxa a tela e os cards vêm junto” - “galeria imersiva para a página de cases do estúdio” - “grade de cards que continua deslizando quando solto o mouse” ## Também chamado de grade infinita, grade arrastável sem fim, infinite scroll gallery, galeria infinita arrastável, draggable grid, WebGL gallery, mural infinito de projetos ## Quando usar - Portfólio de estúdio, agência ou fotógrafo com muitos projetos para explorar - Página de cases em que navegar livremente faz parte da experiência - Vitrine de coleção, arquivo ou acervo com imagens fortes - Seção de destaque em tela cheia, com a grade ocupando toda a área ## Quando evitar - Listas que precisam de busca, filtro ou ordem clara, como o catálogo de uma loja - Páginas que já carregam outro efeito pesado em WebGL - Público que navega só pelo teclado: o componente responde apenas a mouse e toque ## Como pedir para a sua IA ```text Crie uma galeria em grade 3D infinita em WebGL na página de portfólio: cartões com imagem, título e etiquetas que se arrastam para qualquer lado com inércia, pausa fora da tela, versão estática para movimento reduzido e uma forma de navegar pelos projetos com o teclado. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Tabuleiro ### Tabuleiro funciona no celular? Funciona. Tabuleiro trata eventos de toque: a pessoa arrasta a grade com o dedo, ela segue por inércia ao soltar e um toque rápido num cartão conta como clique. Como usa WebGL e pós-processamento e tem peso Pesado no THM Componentes, vale testar em aparelhos modestos e comparar o LCP e o INP antes e depois. ### Como abrir um projeto ao clicar num cartão de Tabuleiro? Tabuleiro emite o evento tileClicked com os dados do cartão clicado, e o clique só conta quando o ponteiro quase não se moveu, para não ser confundido com arrastar. Basta ouvir esse evento e abrir a página ou o modal do projeto. Os cartões vêm de uma lista com título, imagem, etiquetas e data. ### Tabuleiro respeita quem prefere menos movimento? O código original de Tabuleiro não lê essa preferência: a inércia e a animação de entrada acontecem sempre, e a cena é redesenhada quadro a quadro sem parar. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, carregamento sob demanda e pausa da animação quando a grade sai da tela. ## Componentes relacionados - [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. - [Alameda](https://vibecode.thmtecnologia.com/componentes/alameda/): Um corredor sem fim com quadros nas duas paredes, que você percorre com a roda do mouse, arrastando ou pelas setas. - [Arcada](https://vibecode.thmtecnologia.com/componentes/arcada/): Fotos em fileira sobre uma curva, que deslizam com arrasto ou rolagem e ondulam de leve ao se mover. - [Coreto](https://vibecode.thmtecnologia.com/componentes/coreto/): Fotos dispostas em roda, como num cilindro, que você gira arrastando, com inércia e reflexo no chão. - [Cortiça](https://vibecode.thmtecnologia.com/componentes/cortica/): Fotos de alturas diferentes encaixadas em colunas, com filtros por categoria que reorganizam tudo com animação. --- 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.