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
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.
