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
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.
