# Alvoroço Thousands of bright, colorful particles swirl as a swarm around a point that follows the mouse. > Alvoroço is a 3D background from THM Componentes where thousands of colored particles swirl like a whirlpool around a point that follows the mouse or a finger. Built with Three.js and a bloom glow, it creates immersive openers for concept pages, web keynotes and launches on a dark backdrop. - Category: Backgrounds and atmospheres - 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, postprocessing, Three.js - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/alvoroco/ ## What it looks like Picture a swarm of neon fireflies circling a lamp. On a black backdrop, 2000 small colored sticks, each with a random color, fly toward a point, overshoot, turn and come back, always pointing where they are heading. Where many gather, the glow builds a nearly white core; around the edges you see pink, green, blue and yellow streaks. When the mouse or a finger moves, the whole cloud chases the pointer with a slight lag and wraps around the new spot. Your content sits on top, and an optional prop blurs the backdrop. ## You may be looking for this if you asked for something like - “colorful particles swirling behind the headline that follow the mouse” - “a background with a swarm of neon lights around the cursor” - “that swirling 3D particle effect for a keynote opener” - “an immersive dark background for a product concept page” - “a glowing confetti galaxy that moves with your finger on mobile” - “something like a swarm of fireflies at the top of the site” ## Also known as particle swarm, neon firefly swarm, particle vortex, Three.js particles, 3D particle background, bloom particles ## When to use - An immersive opener for an event, keynote or launch - A concept or manifesto page for a tech product - A dark hero with a short, large headline where motion is the star - A creative portfolio that wants to show interaction right away ## When to avoid - Brands with a restrained palette, unless the random colors become brand colors - Pages that already run another WebGL effect - Audiences that browse mostly on old phones ## How to ask your AI ```text Create a Three.js 3D background where a swarm of glowing particles swirls around the cursor in the hero: colors from my palette instead of random ones, fewer particles on mobile, pausing when off screen and 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 Alvoroço ### Does Alvoroço work with touch on phones? Yes. Alvoroço listens to mouse movement and finger drags over the component area, and the swarm starts swirling around the touched point. Since it is rated Heavy in THM Componentes, it is worth lowering the particleCount prop on phones; the demo also shows a version with 500 particles. ### Can Alvoroço use my brand colors? Yes, with one change. In the original code, Alvoroço picks a random color for each particle. The THM Componentes prompt asks your AI to use your project color tokens, which means replacing the random pick with your own palette while keeping the glow that makes the effect. ### Will Alvoroço make my page heavy? It is rated Heavy in THM Componentes: Alvoroço uses Three.js, 2000 particles by default and a bloom post-processing pass, and the animation does not stop by itself off screen. The prompt tells your AI to load it on demand, pause it outside the viewport and keep one heavy WebGL effect per page. ## Related components - [Vaga-lume](https://vibecode.thmtecnologia.com/en/components/vaga-lume/): Hundreds of neon dots in blue, violet and magenta flowing along curving currents over a dark background. - [Piracema](https://vibecode.thmtecnologia.com/en/components/piracema/): Hundreds of thin arrows fly together like a flock of birds and scatter when the cursor comes close. - [Limalha](https://vibecode.thmtecnologia.com/en/components/limalha/): Hundreds of thousands of fine grains run in filaments, like ink spreading on paper, and swirl around the cursor. - [Réstia](https://vibecode.thmtecnologia.com/en/components/restia/): Tiny dots that float slowly across the background and drift gently toward the mouse, like dust in the air. - [Fronteira](https://vibecode.thmtecnologia.com/en/components/fronteira/): A science fiction portal with a core of light, rings, floating crystals and stardust, turning in deep space. --- 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).