Sparkles Background for React

Q: How do I control how many sparkles appear?

density scales the far dust, from 0.25 to 2: 1 is about 330 points on a 1280×720 screen, over about 75 nearer glowing points that stay. count sets the glints, from 0 (points only) to 40.

Q: Can I make the dust bigger or smaller?

minSize and maxSize set the far dust's diameters in pixels, 1 to 2.5 by default. For finer dust try 0.5 to 1.5; for bolder points, 2 to 4.

Q: How do I change the colour or background?

sparkleColor takes any CSS colour; by default it's a warm gold, deeper on a light page and paler at night, where the glints' cores turn white-hot. The background is whatever the container has: give it a bg-* class.

Q: Can I make it twinkle faster or slower?

speed multiplies how fast the points twinkle and the glints pop, from 0.25 to 3. With many glints each one pops less often, so no more than three appear a second.

Warm golden points that twinkle in two depths, with four-point glints that pop and turn. For React with Base UI, when a festive or magical section needs sparkle without a particle engine.

Sparkles fills its box with warm golden light in two depths: fine far dust, and nearer glowing points with a soft halo, each brightening and dimming on its own. Every few seconds a four-point glint, two crossed rays around a hot core, springs in, turns and fades; two to four are usually in the air. The points are repeating tiles the browser draws once, and a soft pattern of light and dark slides under each depth, so each point twinkles as the patches pass. The glints are gradients on keyframes, so there's no particle engine, canvas or script running. The gold is deeper on a light page so it shows on paper, and paler, with white-hot glints, at night.

Use it under a headline or behind a hero for a festive or magical touch. For warm lights that wander use Fireflies; for golden motes in a shaft of light, Pollen; for a still sky crossed by streaks, Shooting Stars.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Sparkles } from "@/components/ui/sparkles";

<Sparkles className="min-h-[420px]">
  <h1>A little magic</h1>
</Sparkles>

Sparkles is a container: put your content inside and the sparkles sit behind it. It fills the box you give it, so set its height (min-h-[420px]), or className="fixed inset-0 -z-10" to cover the whole page.

Demos

Under a headline

A strip of sparkles to sit under a title, the classic layout: a 10rem box with density={1.5}, faded out from the top centre by a mask on its className.

PreviewCode

Ice

sparkleColor takes any CSS colour, here a pale icy blue; density thins the dust and count={20} adds glints. The card stays dark in both themes (the dark class with bg-background).

PreviewCode

Accessibility

The sparkles are decoration: the whole layer is hidden from screen readers and ignores the pointer, and your content inside reads as usual. With reduced motion the points hold still, each at its own brightness, and the glints stay hidden. The points change gradually, which is sparkle rather than flashing, and the glints are capped at three a second however many there are or however fast they run. Headlines in the foreground colour stay clear; behind small body text keep density at 1 or below, or fade the field with fade.

FAQ

Does it need a particle library?

No. The points are SVG tiles drawn once and used as masks, the twinkle is a soft pattern sliding under them, and the glints are gradients on keyframes. Nothing loads and no frame loop runs.

How do I control how many sparkles appear?

density scales the far dust, from 0.25 to 2: 1 is about 330 points on a 1280×720 screen, over about 75 nearer glowing points that stay. count sets the glints, from 0 (points only) to 40.

Can I make the dust bigger or smaller?

minSize and maxSize set the far dust's diameters in pixels, 1 to 2.5 by default. For finer dust try 0.5 to 1.5; for bolder points, 2 to 4.

How do I change the colour or background?

sparkleColor takes any CSS colour; by default it's a warm gold, deeper on a light page and paler at night, where the glints' cores turn white-hot. The background is whatever the container has: give it a bg-* class.

Can I make it twinkle faster or slower?

speed multiplies how fast the points twinkle and the glints pop, from 0.25 to 3. With many glints each one pops less often, so no more than three appear a second.

Does it slow the page down?

No script runs, and the browser's compositor slides the twinkle patterns and pops the glints off the main thread. Each depth is a few small tiles, painted once, so even a full-page field costs only a few layers.

API Reference

Sparkles

<div> data-slot="sparkles"

PropType

count?number

How many four-point glints pop in and out, from 0 to 40; 0 leaves only the twinkling points. With many glints each pops less often, so no more than three pop a second.