# Pipa Wide orange, green, yellow and cyan ribbons chase the cursor inside an area, swinging as if they hang on springs. > Pipa is a THM Componentes component that draws colored WebGL ribbons following the cursor inside an area of the page. Each ribbon hangs on a spring, arrives with a small swing and tapers at the ends. Colors, thickness and tail length are props, and the effect works with both a mouse and a finger. - Category: Buttons and cursors - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/pipa/ ## What it looks like Think of rhythmic gymnastics ribbons tied to a fingertip. By default there are four wide ribbons, orange, green, yellow and cyan, side by side, following the cursor with a springy swing: they overshoot a little and come back. Each one has a slightly different spring, so they do not move as a block and spread apart in curves. The ribbons are thicker in the middle and thin at the ends, and they gather in when the cursor stops. Two options add a fading tail and a wave. The background is transparent, and the effect fills only the element it is placed in. ## You may be looking for this if you asked for something like - “colorful ribbons following the mouse, like a gymnastics ribbon” - “a thick colorful trail behind the cursor at the top of my site” - “a streamer effect that follows a finger on mobile” - “a multicolor cursor tail for an event website” - “something eye-catching that reacts to the mouse on my portfolio” - “a paint-like trail that follows the pointer and sways” ## Also known as ribbon cursor, ribbon trail, WebGL cursor trail, cursor tail, streamer cursor effect, mouse ribbon effect ## When to use - Portfolios and immersive experiences that call for a bold effect - The top of an event, festival or youthful, colorful brand page - Short highlight areas, such as an interactive welcome section ## When to avoid - Pages that already run another WebGL effect - Sober, long-reading or form pages, where the ribbons distract - Audiences on older phones, since it is rated Heavy ## How to ask your AI ```text Create a WebGL ribbon cursor trail in my portfolio hero: ribbons in my brand colors following the mouse and finger with spring physics, paused when off screen, loaded on demand and with 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 Pipa ### Does Pipa work on phones? Yes. Pipa listens to touch and drag, so the ribbons follow a finger inside the component area. Because it uses WebGL and is rated Heavy in THM Componentes, the prompt tells your AI to load it on demand, wrap it in ClientOnly with a static fallback in Nuxt and compare LCP and INP on mobile. ### How do I change the ribbon colors in Pipa? Through the colors prop, which takes a list: Pipa creates one ribbon per color. The default has four colors, orange, green, yellow and cyan, and the demo uses a single white ribbon. Thickness, tail length, speed, fade and wave are props too, and the prompt asks for your project color tokens. ### Does Pipa cover the whole page? No. Pipa fills the element it is placed in and only reacts to the mouse inside it, with a transparent background. The original drawing loop never stops, which is why the THM Componentes prompt asks for at most one heavy WebGL effect per page and for pausing the animation outside the viewport. ## Related components - [Novelo](https://vibecode.thmtecnologia.com/en/components/novelo/): A bundle of thin colored lines chases the cursor across the screen, rippling like loose threads in the wind. - [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. - [Enguia](https://vibecode.thmtecnologia.com/en/components/enguia/): A colorful ribbon, thick at the head and thin at the tip, that chases the mouse like a snake. - [Alinhavo](https://vibecode.thmtecnologia.com/en/components/alinhavo/): Photos that pop up one after another behind the cursor and quickly fade, like a trail of images. - [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. --- 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).