Sparkles field

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

Motion Effectsgradienthoverparticlessparklesbackgroundherodecorative

NEXUS-UI

Build great products

Playground

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"
/>

gradienthover

Copy-paste ready

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