Particles are the effect with the widest gap between one and many. A dozen drifting dots cost nothing. Two thousand interactive ones with connection lines are a continuous physics simulation running behind your headline, and the difference in code is one number.
Here is what the shapes cost, and the three ways to make the same look for far less.
The field
The ambient version: dots drifting, sometimes reacting to the pointer. Particles BG by Umair Waheed and Fluid particles background by Shadcn UI Kit are the canvas versions, and Gradient Dots by Efferd is the coloured-grid take.
The cost model is simple and worth internalising. Every particle is a position update plus a draw, every frame. At 200 particles on a 60Hz screen that is 12,000 operations a second, which is nothing. The version that kills a phone is the one with connection lines, because checking which particles are near each other is quadratic: 500 particles is 125,000 distance checks per frame. A spatial grid fixes it; most implementations do not have one.
The sparkle
Particles as emphasis rather than as background. Sparkles by Manu Arora is the most-bookmarked of them, and the shape most landing pages actually want: a small number of particles in a specific place, saying "look here".
This is the version to reach for first. A confined emitter of thirty particles behind a headline reads as intentional; a full-screen field reads as a screensaver.
Text particles
ParticleTextEffect by KainXu builds letters out of particles that scatter and reform. Covered in the animated text guide, with the same warning: the words are drawn into a canvas, so they are not text. The headline has to exist in the HTML underneath, or the most important string on the page is invisible to everything that does not have eyes.
The cheaper ways to get the same look
CSS with a handful of elements. Twenty absolutely positioned divs with staggered animation delays produce a convincing drift, cost one composite each, and need no canvas or runtime. Under about fifty particles this is the right answer.
An SVG or a repeating background. A dot pattern that does not need to move is a radial-gradient background, and it costs a single paint.
A shader. Above roughly a thousand particles, a fragment shader is cheaper than a canvas loop, because the GPU does the work per pixel instead of the CPU doing it per particle. The shader guide covers the settings.
The middle ground - a canvas with a few hundred particles - is exactly where most components sit, and it is the range where the settings below matter.
The four settings
Cap the count by screen size. A particle count tuned on a desktop is the same count on a phone with a quarter of the GPU. Scale it with viewport area, and drop it further on a coarse pointer.
Cap the pixel ratio. A canvas at devicePixelRatio 3 draws nine times the pixels of one at 1. For soft, blurred particles nobody can tell the difference at 1.5.
Stop when nobody is looking. An IntersectionObserver that halts the loop offscreen, and a visibilitychange listener for the hidden tab. Without them a hero effect keeps running while the reader is three pages away.
Honour reduced motion. Render one static frame under prefers-reduced-motion: reduce. A drifting field is exactly the kind of ambient motion the preference exists for.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| CSS keyframes | Under fifty particles, with no runtime at all | No interaction, no physics |
| tsParticles | Presets, emitters and interactivity, configured rather than written | A large dependency for decoration |
| A shader | Thousands of particles at a fixed cost | A WebGL context and a fallback |
| 21st | Fields, sparkles, dot grids and text particles | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a particle effect, get the previews inline, and let the agent write the file.
Browse background components →
Frequently asked
- How many particles is too many?
- It depends far more on whether they connect than on the count. Positions and draws scale linearly and a few hundred are fine; connection lines are quadratic, so 500 particles means 125,000 distance checks per frame unless the implementation uses a spatial grid, and most do not.
- What is the cheapest way to get a particle effect?
- Under about fifty particles, twenty absolutely positioned elements with staggered CSS animation delays produce a convincing drift with no canvas and no runtime. A static dot pattern is a radial-gradient background and one paint. Above roughly a thousand particles, a shader is cheaper than a canvas loop.
- How do you keep a particle background from draining a phone?
- Four settings: scale the count with viewport area rather than shipping a desktop number to a phone, cap devicePixelRatio around 1.5 since blurred particles hide the difference, stop the loop when the canvas is offscreen or the tab is hidden, and render one static frame under prefers-reduced-motion.
- Are particle text effects bad for SEO?
- They are when the words only exist in the canvas. Particles draw the letters as pixels, so the text is invisible to search engines, answer engines and screen readers. Keep the real headline in the HTML and let the effect sit behind or above it.