Como ele é
Imagine uma mesa enorme coberta de fotos impressas, que você empurra com a mão. Os cartões brancos, com foto, título e uma etiqueta em letras pequenas, ficam em colunas de alturas variadas sobre um fundo claro pontilhado e se repetem sem fim para todos os lados, com as bordas se apagando na cor do fundo. Ao soltar depois de arrastar, o mural continua deslizando e desacelera aos poucos; as colunas andam em velocidades um pouco diferentes, o que dá profundidade. Parado por alguns segundos, ele passa a derivar devagar sozinho. No clique, a foto se amplia suavemente até a vista de detalhe, com o mural desfocado atrás.
Você pode estar procurando isto se pediu algo assim
- galeria de fotos infinita que dá para arrastar para todos os lados
- mural de projetos que a pessoa explora puxando com o mouse
- aquele portfólio de agência em que as imagens não acabam nunca
- moodboard da marca solto na tela, tipo mesa cheia de fotos
- grade de cards que continua deslizando quando solto o arraste
- clicar na foto e ela crescer até virar a tela de detalhe
- vitrine de produtos para explorar livremente, sem rolar a página
Também chamado de
- canvas infinito
- infinite canvas
- galeria infinita
- draggable gallery
- pan and zoom gallery
- mural de fotos para arrastar
- moodboard interativo
Quando usar
- Portfólio de agência, estúdio ou fotógrafo com muitos projetos
- Moodboard de marca ou de campanha para apresentar a clientes
- Acervo de cases em que a pessoa explora sem ordem definida
- Vitrine de produtos com foco em descoberta visual
Quando evitar
- Listas que a pessoa precisa percorrer em ordem ou filtrar
- Meio de páginas longas sem desligar captureWheel, porque a roda passa a mover o mural e não a página
- Itens que precisam de texto longo visível sem abrir o detalhe
Como pedir para a sua IA
Crie uma galeria em canvas infinito para o meu portfólio: cartões com fotos em colunas que se repetem em todas as direções, arraste com inércia no mouse e no toque, setas do teclado, zoom suave para o detalhe com Esc para fechar e sem inércia nem deriva 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 Deriva
Deriva funciona no celular?
Funciona. Deriva usa eventos de ponteiro e reserva para si o gesto de toque, então arrastar com o dedo move o mural e um toque abre o cartão. Em áreas de até 640 pixels de largura, a vista de detalhe empilha foto e título e esconde o texto. O prompt do THM Componentes pede teste em mobile comparando LCP e INP.
Deriva deixa a página pesada?
Deriva usa virtualização: só os cartões visíveis, mais uma margem, existem na página, e o movimento usa transformações, sem WebGL. A animação pausa quando o mural sai da tela. No Nuxt, o prompt do THM Componentes orienta a IA a colocar o componente dentro de ClientOnly, com uma imagem ou cor de reserva, e a carregar sob demanda.
Deriva funciona com teclado e com menos movimento?
Sim. O mural recebe foco e anda com as setas; com Tab, cada cartão é um botão, e Deriva se desloca até o cartão focado. Enter abre o detalhe como janela modal e Esc fecha, devolvendo o foco ao cartão. Com a preferência de reduzir movimento, a inércia e a deriva somem e o zoom do detalhe vira um corte direto.
