# Truco Pilha de fotos em que você arrasta o cartão de cima para o lado e ele volta para o fundo com efeito de mola. > Truco é um componente exclusivo do THM Componentes: uma pilha de cartões com foto em que o de cima pode ser arrastado, inclina conforme o gesto e, ao ser arremessado, volta para o fundo da pilha com mola. Funciona com mouse, dedo, setas do teclado e botões, e serve para cases, depoimentos e onboarding no celular. - Categoria: Interação e física - 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/truco/ ## Como ele é Parece um maço de fotos sobre a mesa. O cartão da frente mostra a imagem inteira, com um degradê escuro embaixo, o número e a legenda; os de trás aparecem um pouco mais abaixo, menores, levemente tortos para um lado e para o outro e mais escuros. Ao arrastar o cartão de cima, ele gira na direção do gesto. Se você solta depois de certa distância ou com um movimento rápido, ele voa para fora e reaparece no fundo da pilha, assentando com um leve balanço; se solta antes, ele volta ao centro. Embaixo ficam dois botões redondos e um contador. ## Você pode estar procurando isto se pediu algo assim - “cards que eu arrasto para o lado igual aplicativo de namoro” - “pilha de fotos que dá para jogar para o lado com o dedo” - “mostrar depoimentos um por vez, passando como cartas de baralho” - “galeria de cases em formato de cartas empilhadas no celular” - “cartões com efeito de mola quando solto depois de arrastar” - “deslizar cartões para a esquerda e a direita no onboarding do app” - “aquele swipe de cartas estilo Tinder para o meu site” ## Também chamado de pilha de cartões, swipe cards, swipeable cards, cartas deslizáveis, deck de cartões, stacked cards, cartões arrastáveis com mola ## Quando usar - Depoimentos ou cases mostrados um de cada vez numa página de vendas - Onboarding de app no celular, com uma ideia por cartão - Vitrine de planos, produtos ou portfólio numa seção compacta - Áreas pensadas para o dedo, em que arrastar é mais natural que clicar ## Quando evitar - Conteúdo que a pessoa precisa comparar lado a lado, como tabelas de preço - Listas longas: depois de muitos cartões, quase ninguém chega ao fim da pilha ## Como pedir para a sua IA ```text Crie uma pilha de cartões arrastáveis no estilo swipe para os depoimentos da página inicial: o cartão de cima inclina ao arrastar, é arremessado pela velocidade e volta ao fundo com mola, com navegação pelas setas do teclado, anúncio para leitor de tela e troca sem animação para movimento reduzido. ``` 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 Truco ### Truco funciona no celular? Sim. Truco trata mouse e dedo com os mesmos eventos de ponteiro, e o cartão desativa a rolagem do navegador durante o gesto, então dá para arrastar e arremessar com o dedo sem a página rolar junto. Em telas pequenas, ajuste a largura e a altura pelas props; o padrão é 300 por 380 pixels. ### Dá para usar Truco só com o teclado e com leitor de tela? Sim. A pilha de Truco recebe foco e passa os cartões com as setas para a esquerda e para a direita, e os dois botões abaixo fazem o mesmo. A cada troca, uma região invisível anuncia ao leitor de tela qual cartão está na frente, com número e legenda. ### Como Truco se comporta com movimento reduzido? Quando a pessoa ativa a preferência de movimento reduzido, Truco desliga as molas: o cartão passado vai direto para o fundo da pilha e os outros assumem suas posições sem balanço. Arrastar, botões e teclado continuam funcionando normalmente. ## Componentes relacionados - [Resma](https://vibecode.thmtecnologia.com/componentes/resma/): Cartões grandes que grudam no topo da tela e se empilham um sobre o outro conforme a página rola. - [Cartomante](https://vibecode.thmtecnologia.com/componentes/cartomante/): Leque de fotos altas atrás de um título grande: cada foto se revela no hover e o título fica vazado no meio. - [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. - [Tirinha](https://vibecode.thmtecnologia.com/componentes/tirinha/): Cartões verticais em tela de celular que passam sozinhos, com barrinhas de progresso no topo e toque para avançar. - [Furta-cor](https://vibecode.thmtecnologia.com/componentes/furta-cor/): Cartão com arte que inclina em 3D sob o mouse e brilha com reflexo arco-íris, como uma carta colecionável rara. - [Tombo](https://vibecode.thmtecnologia.com/componentes/tombo/): Pílulas com nomes de serviços despencam na tela, batem umas nas outras e empilham; dá para arrastar e jogar. --- 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.