Sparkles field — React Component

Configurable animated particle field for hero highlights, card backgrounds, and decorative UI layers with optional pointer interaction.

Motion Effectsgradienthoverparticlessparklesbackgroundherodecorative

Sparkles field

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

count

Base number of particles before density scaling.

color

Particle and glow color.

minSize

Minimum particle size in pixels.

maxSize

Maximum particle size in pixels.

speed

Overall animation speed multiplier.

opacity

Global opacity multiplier for particles.

background

If true, mounts as a full-layer absolute background.

density

Density preset that scales particle count.

Generated JSX

Copy this into your page.

<Sparkles
  count={36}
  color="#e5f4ff"
  minSize={0.9}
  maxSize={2.8}
  speed={1}
  opacity={0.9}
  background={false}
  density="medium"
/>

Animation effects

gradienthover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Sparkles field

The Sparkles component renders a field of randomly positioned, rotating star particles around its children. Particle positions, sizes, rotations, and colors are individually randomized on mount and re-randomized on a configurable timer using CSS animation. The effect creates a celebratory or magical visual context around headings, buttons, or icons. Zero JavaScript animation overhead during steady state — particles run on CSS keyframes after mount.

Common use cases

Hero heading decorative effects
CTA button visual emphasis
Achievement and reward UI displays
Promotional banner decorations