# Truco A pile of photo cards where you drag the top one aside and it springs back to the bottom of the stack. > Truco is an exclusive THM Componentes component: a stack of photo cards where the top one can be dragged, tilts with the gesture and, once flung, springs back to the bottom of the pile. It works with mouse, finger, arrow keys and buttons, and suits case studies, testimonials and mobile onboarding. - Category: Interaction and physics - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/truco/ ## What it looks like It looks like a deck of photos on a table. The front card shows the full image with a dark fade at the bottom, a number and a caption; the cards behind sit slightly lower, smaller, tilted a little to alternating sides and darker. Drag the top card and it rotates toward your gesture. Let go past a certain distance or with a quick flick and it flies off, then reappears at the back of the pile, settling with a slight wobble; let go earlier and it returns to the center. Two round buttons and a counter sit below. ## You may be looking for this if you asked for something like - “cards I can swipe left and right like a dating app” - “a stack of photos you can flick away with your finger” - “show testimonials one at a time by swiping like a deck of cards” - “a case study gallery as stacked cards on mobile” - “cards that spring back when I let go after dragging” - “swipe through cards during app onboarding” - “that Tinder-style card swipe for my website” ## Also known as swipe cards, swipeable card deck, stacked cards, draggable cards, card swipe gesture, springy card pile ## When to use - Testimonials or case studies shown one at a time on a sales page - Mobile app onboarding with one idea per card - A compact showcase of plans, products or portfolio pieces - Touch-first areas, where swiping feels more natural than clicking ## When to avoid - Content people need to compare side by side, such as pricing tables - Long lists: after many cards, hardly anyone reaches the end of the stack ## How to ask your AI ```text Create a swipeable stack of draggable cards for the homepage testimonials: the top card tilts while dragged, is flung by velocity and springs back to the bottom, with arrow key navigation, screen reader announcements and instant changes without animation for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Truco ### Does Truco work on phones? Yes. Truco handles mouse and finger with the same pointer events, and the card turns off browser scrolling during the gesture, so you can drag and fling it with your finger without the page scrolling along. On small screens, adjust the card width and height through props; the default is 300 by 380 pixels. ### Can Truco be used with only a keyboard and a screen reader? Yes. Truco's deck takes focus and passes cards with the left and right arrow keys, and the two buttons below do the same. On every change, a hidden live region tells screen readers which card is in front, with its number and caption. Those built-in labels are in Portuguese, so ask your AI to translate them. ### How does Truco behave with reduced motion? When reduced motion is turned on, Truco switches off its springs: the passed card goes straight to the back of the pile and the others take their places without wobbling. Dragging, buttons and the keyboard keep working as usual. ## Related components - [Resma](https://vibecode.thmtecnologia.com/en/components/resma/): Large cards that stick to the top of the screen and pile up on each other as the page scrolls. - [Cartomante](https://vibecode.thmtecnologia.com/en/components/cartomante/): A fan of tall photos behind a large headline: each photo reveals itself on hover and the headline turns see-through. - [Coreto](https://vibecode.thmtecnologia.com/en/components/coreto/): Photos arranged in a ring, like a cylinder, that you spin by dragging, with inertia and a floor reflection. - [Tirinha](https://vibecode.thmtecnologia.com/en/components/tirinha/): Vertical cards in a phone-sized frame that advance on their own, with progress bars at the top and tap to skip. - [Furta-cor](https://vibecode.thmtecnologia.com/en/components/furta-cor/): A card with artwork that tilts in 3D under the mouse and shimmers with a rainbow sheen, like a rare trading card. - [Tombo](https://vibecode.thmtecnologia.com/en/components/tombo/): Pill-shaped tags with service names drop onto the screen, bump into each other and pile up; drag and throw them. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).