What it looks like
It looks like a swarm of neon fireflies following invisible wind currents. By default, 700 glowing dots in blue, violet and magenta appear in a horizontal band across the middle and stream along curving paths that rise, dip and arc like smoke, each one fading in and out over its short life. A blur around the dots creates the neon glow over the black background. The animation is continuous and does not react to the mouse. Whatever you place inside sits on top, centered in the demo.
You may be looking for this if you asked for something like
- a black background with neon particles snaking behind the button
- glowing dots that form currents and swirls in the background
- an energy or glowing smoke effect for the checkout section
- a neon firefly background for the final call to action
- something eye-catching behind the buy button, like a galaxy
- colorful particles flowing like a stream across the middle of the screen
- a dark animated background with blue and purple light for a launch
Also known as
- vortex background
- flow field particles
- noise particles
- neon particles
- particle streams
- swirling particles
When to use
- A call to action or conversion section at the end of a landing page
- A dark hero for a tech product, game or event
- A launch page with a short headline and purchase buttons
- An opening screen for an app or online event
When to avoid
- Light-themed sites, since the effect needs a dark background to glow
- Pages that must run smoothly on basic phones, unless you lower the particle count
- Areas with small text on top, where the glow gets in the way of reading
How to ask your AI
Add a neon flow field particle background in canvas to my call to action section: streams of dots in my brand colors, a canvas sized to the section, paused off screen, a static version for reduced motion and fewer particles on mobile.
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 Vortex Background
Is Vortex Background heavy on phones?
It can be. Vortex Background moves 700 particles by default and, every frame, runs two blur passes over the whole canvas to create the neon glow; that canvas matches the window size even in a smaller section, and it does not pause off screen. The THM Componentes prompt asks for on-demand loading and LCP and INP checks; lowering particleCount helps.
How do I change the Vortex Background colors?
Vortex Background particles use a 100-degree hue range starting at the baseHue prop: the default 220 runs from blue to magenta, while 120 gives greens to blues, as in the full page demo. The backdrop comes from backgroundColor, black by default. The THM Componentes prompt asks your AI to align these values with your project color tokens.
Where does my content go in Vortex Background?
Your content goes inside Vortex Background through the slot, in a layer above the canvas, and the class prop styles that layer; in the demo a headline, text and two buttons sit centered. Because the canvas is drawn at window size and centered, use overflow hidden on the container, as the demo does. For reduced motion, the prompt asks your AI for a static version.
