# Deriva Um mural sem fim de cartões com fotos que você arrasta em qualquer direção e abre em detalhe com um clique. > Deriva é um componente exclusivo do THM Componentes que cria um mural infinito de cartões com fotos: a pessoa arrasta em qualquer direção com inércia, usa a roda do mouse, trackpad ou setas, e um clique amplia o cartão até o detalhe. Só os cartões visíveis existem na página. Serve para portfólios, moodboards e acervos de cases. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/deriva/ ## 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 ```text 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. ## Componentes relacionados - [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. - [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. - [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. - [Tabuleiro](https://vibecode.thmtecnologia.com/componentes/tabuleiro/): Uma parede de cartões com imagem que você arrasta para qualquer lado, sem nunca chegar ao fim. - [Mutirão](https://vibecode.thmtecnologia.com/componentes/mutirao/): Quadro branco sem bordas para colar notas, desenhar formas, ligar setas e rabiscar à mão, como numa oficina ao vivo. --- 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.