Sparkles Bg
A twinkling starfield background with configurable density and color.
A starfield background drawn on a 2D canvas, where every star twinkles on its own sine wave. Density and color are both adjustable, and the star count is derived automatically from the container's area.
Loading preview…
npx shadcn@latest add https://webberui.com/r/sparkles-bg.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
1
1
1.6
<SparklesBg />
Installation
npx shadcn@latest add https://webberui.com/r/sparkles-bg.jsonOr, once registries are configured in components.json, install it as @webberui/sparkles-bg.
Usage
import { SparklesBg } from "@/components/ui/sparkles-bg";
<SparklesBg density={1.4} color="#ffffff" background="#050506" className="h-[320px] w-full rounded-xl">
<div className="flex h-full items-center justify-center text-white">
Sparkles
</div>
</SparklesBg>Props
| Prop | Type | Default | Description |
|---|---|---|---|
density | number | 1 | Star density multiplier; the total is derived from the container's area |
color | string | "#ffffff" | Star color; accepts any CSS color value |
minSize | number | 0.6 | Minimum star radius (px) |
maxSize | number | 1.6 | Maximum star radius (px) |
speed | number | 1 | Twinkle speed multiplier; 1 is the default cadence |
background | string | "transparent" | Background color; set transparent to layer it over an existing base color |
children | ReactNode | — | Foreground content layered above the stars |
Accessibility
- When the user has "reduce motion" enabled at the system level, the stars are drawn statically once and no longer twinkle
- The canvas carries
aria-hiddenandpointer-events-none— decorative only, so it interferes with neither interaction nor announcement