Fireflies
Glowing fireflies drift, blink in near-sync and come closer to your cursor; move fast and they scatter.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Each firefly has its own blink rhythm, and neighbours share phase buckets, so groups occasionally flash together like real ones. Drawn on one canvas with a screen blend.
Installation
$ npm i @guetix/fireflies
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { fireflies } from "@guetix/fireflies";
fireflies({ count: 50, color: "214,255,120" });Usage
example.tsx
import { Fireflies } from "@/components/guetix/fireflies";
<section className="relative bg-black">
<Fireflies count={40} />
…
</section>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 40 | Fireflies. |
| color | string | "214,255,120" | "r,g,b". |
| size | number | 1 | Glow size multiplier. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Decorative layers are aria-hidden and never block clicks.
- prefers-reduced-motion: frozen or disabled.