Fireflies Background for React

Q: How many fireflies should I use?

count defaults to 48, a third of them far. 15 to 25 is sparse and calm, 60 a dense meadow; it stops at 100. On a light page one in six stays dark, so the meadow looks a little calmer.

Q: Can I change the colour?

fireflyColor takes any CSS colour. By default it's pale yellow-green with white-hot cores in dark mode and deep amber in light mode, so it shows on both. intensity sets how far the halo reaches: subtle, medium or strong.

Q: How do I slow them down?

speed={0.5} halves both the wander and the pulse, 1.5 livens them up. The motion always stays gentle: a glow never brightens in under half a second.

Warm lights that wander on slow curves and switch on and off at their own pace, like fireflies at dusk. For React with Base UI, when a calm, storytelling section needs a touch of summer night.

Fireflies fills its box with warm lights that wander on slow curves and switch on and off at their own pace. They live in two depths: near fireflies are bigger and brighter and roam further, and every third one is far away, a small dim glow that drifts more slowly. Each firefly is a soft gradient, from a bright core to a wide faint halo, with no blur filter. Three CSS animations move it: a sideways and an up-down sway whose timings never line up, so its path is a loop that rarely repeats, and a slow pulse that leaves it dark about a third of the time. At night the glows are pale yellow-green with white-hot cores over a navy dusk; on a light page they're deep amber with larger, softer halos and a few fewer of them, so each reads as a glow rather than a speck. No script runs in the browser.

Use it for calm, storytelling sections, portfolios or a summer campaign. For a still twinkle use Sparkles; for soft out-of-focus circles, Bokeh; for a night-sky glow, Aurora.

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 { Fireflies } from "@/components/ui/fireflies";

<Fireflies className="min-h-[420px]">
  <h1>Summer evening</h1>
</Fireflies>

Fireflies is a container: put your content inside and the fireflies wander 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

Cool glow

fireflyColor takes any CSS colour, here a fantasy cyan, and sets one colour for both themes. Pick a mid-strength colour: a very pale glow disappears on a light page.

PreviewCode

A few fireflies

count={12} and intensity="strong" for a sparse meadow with wide halos, in a card that stays dark in both themes (the dark class with bg-background), where the glows turn pale yellow-green with white-hot cores over a navy dusk.

PreviewCode

Accessibility

The fireflies are decoration: the whole layer is hidden from screen readers and ignores the pointer, and your content inside reads as usual. With reduced motion every firefly stops where it is, some lit and some dark, so a still meadow of glows stays. The pulses are not flashes: each glow is a soft gradient that never rises in less than half a second, whatever the speed. Text in the foreground colour stays readable in both themes; a glow passing behind a letter lowers its contrast for a moment, so keep body text on a solid panel.

FAQ

How is the glow made?

Each firefly is one radial gradient, from a bright core through its colour to a wide faint halo, sized and brightened by how close it is. There's no blur filter, so the browser paints each glow once. On a light page the halo is larger and fainter, so it reads against paper.

How does the depth work?

Every third firefly is far: small, dim and slower, so the near ones seem to pass in front of a deeper meadow. Each firefly's depth also sets how far it roams.

Why do the paths curve?

Each firefly sways sideways and up and down on two timings that never line up, and every swing has its own reach, so its path traces a smooth loop that rarely repeats. Near fireflies roam further than far ones.

How many fireflies should I use?

count defaults to 48, a third of them far. 15 to 25 is sparse and calm, 60 a dense meadow; it stops at 100. On a light page one in six stays dark, so the meadow looks a little calmer.

Can I change the colour?

fireflyColor takes any CSS colour. By default it's pale yellow-green with white-hot cores in dark mode and deep amber in light mode, so it shows on both. intensity sets how far the halo reaches: subtle, medium or strong.

How do I slow them down?

speed={0.5} halves both the wander and the pulse, 1.5 livens them up. The motion always stays gentle: a glow never brightens in under half a second.

Does it slow the page down?

No script runs: the fireflies are placed when the page renders and the browser's compositor moves them, off the main thread. Each loop holds many swings or pulses, so the browser rarely has to step in.