# Alinhavo Photos that pop up one after another behind the cursor and quickly fade, like a trail of images. > Alinhavo is a THM Componentes component that leaves a trail of photos behind the cursor: every 80 pixels of movement, the next image in the list appears, follows the mouse for a moment and then fades away. It offers several animation variants, uses GSAP and suits photography portfolios, collections and studio pages. - Category: Buttons and cursors - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Tailwind CSS v4, GSAP - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/alinhavo/ ## What it looks like Picture a photographer scattering prints across a table while dragging a hand. Every stretch the mouse travels, a new photo with rounded corners, about 190 pixels wide, pops up where the cursor is, follows the movement for a split second and disappears while the next one lands on top. Images follow the order of the list and start over at the end. Depending on the variant, a photo grows from a point, turns in the direction of the gesture, or gets bigger, sharper and more colorful the faster the mouse moves. When the mouse stops, the trail fades. ## You may be looking for this if you asked for something like - “photos that appear behind the mouse as I move it” - “a trail of images following the cursor on my portfolio” - “pictures popping up wherever the mouse goes” - “a hover area that scatters my photos across the screen” - “a playful way to show many photos at once on a landing page” - “that effect where images pile up behind the cursor” ## Also known as image trail, photos following the cursor, cursor image trail, mouse trail images, photo trail effect, hover image trail ## When to use - A photography or illustration portfolio - A collection page for fashion, interiors or products - A studio or agency hero with a short headline - An event page that shows past editions in photos ## When to avoid - Over buttons, links or forms, since the trail layer sits on top and takes the mouse - Pages where every photo needs context, captions or alt text - Audiences that browse mostly on phones without a cursor ## How to ask your AI ```text Create an image trail effect in the hero: as the mouse moves, photos from a list appear in sequence under the cursor and fade away. Use lightweight images, load it only in the browser, stop the animation loop when leaving the page and offer a static version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Alinhavo ### How many photos does Alinhavo need? Alinhavo takes the list of photos through the images prop and shows them in order, starting over at the end. The demo uses seven photos. Since each image shows at about 190 pixels wide, light, pre-cropped photos help keep loading fast. ### Will Alinhavo slow down my site? It depends on how you use it. Alinhavo is rated Medium in THM Componentes: it uses GSAP and an animation loop that runs every frame from the first movement, and the original code does not stop that loop when you leave the page. The prompt asks for on-demand loading and ClientOnly in Nuxt; ask for that cleanup too. ### Does Alinhavo work on phones? It works with a finger: Alinhavo also listens to dragging on the screen and drops photos along the way. Without a mouse, though, the effect only shows while someone drags across the area, which feels less natural than on a computer. For reduced motion, the THM Componentes prompt asks for a static version. ## Related components - [Aquarela](https://vibecode.thmtecnologia.com/en/components/aquarela/): A trail of bright, colorful ink that flows and fades behind the mouse, drawn over the whole page. - [Planador](https://vibecode.thmtecnologia.com/en/components/planador/): Replaces the system arrow with your own cursor that glides behind the mouse and turns toward the movement. - [Pipa](https://vibecode.thmtecnologia.com/en/components/pipa/): Wide orange, green, yellow and cyan ribbons chase the cursor inside an area, swinging as if they hang on springs. - [Mergulho](https://vibecode.thmtecnologia.com/en/components/mergulho/): On hover, the photo warps like liquid and turns into a second image. - [Persiana](https://vibecode.thmtecnologia.com/en/components/persiana/): Photos side by side in vertical strips; the one under the mouse widens and the others narrow. --- 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).