Fireflies
FreeSoft points of light that wander, pulse and move away from the pointer. Warm by default, white for a quiet background.
Code
Updates live with your settings.
Preparing the code…
How to use
- 1
Add the files
Copy the files from the Code section into a folder named
fireflies/in your project. They are plain TypeScript; the React wrapper is one file and the engine does not depend on it. - 2
Drop in the component
Place
<Fireflies />inside a positioned container with a size; it fills the container. Every setting is a prop, and changing a prop updates the running effect. - 3
Other frameworks
Vue, Svelte, Astro or plain HTML: use the engine directly, or copy the AI Prompt and let your assistant write the wrapper for your stack. The prompt carries this exact code.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number 5–400 | 90 | How many points of light. |
| size | number 0.5–6 px | 2 | Base radius of a point. |
| sizeJitter | number 0–1 | 0.6 | How much sizes differ between points. |
| depth | number 0–1 | 0.6 | Smaller points move slower and dimmer, as if further away. |
| speed | number 0–3 x | 1 | Overall speed. |
| direction | "drift" | "rise" | "fall" | "drift" | Which way the field tends to move. |
| wander | number 0–1 | 0.6 | How much each path curves. |
| twinkle | number 0–1 | 0.7 | Pulse of brightness. 0 keeps every point steady. |
| color | string (#hex) | "#ffd27a" | Colour of the points. |
| glow | number 0–1 | 0.6 | Soft halo around each point. |
| background | string (#hex) | "#0a0a0a" | Painted behind the points unless Transparent is on. |
| transparent | boolean | false | Paint nothing behind the points, so your page shows through. |
| pointerMode | "repel" | "attract" | "off" | "repel" | Whether points flee from the pointer or gather toward it. |
| pointer | number 0–1 | 0.5 | How strongly points react. |
| pointerRadius | number 40–400 px | 160 | Distance within which the pointer has an effect. |
| maxDpr | number 1–2 | 2 | Cap on device pixel ratio. |
Performance
- Bundle
- ~3 KB gzipped, no dependencies
- Cost
- Low
- Renders on
- CPU (Canvas 2D)
- Reduced motion
- Respected
- Canvas 2D with one pre-rendered sprite per colour; the cost scales with count, not with glow.
- Pauses when off-screen or when the tab is hidden.
- With prefers-reduced-motion a single still frame is drawn.
Related
- Halftone BloomFree
Organic & Nature
A photo rendered as a field of glowing dots that blooms open, settles to a pale stage, then warms to your colour.
- VinesSoon
Organic & Nature
Tendrils that grow along the edges of a section and curl toward the pointer.
- Ink TrailSoon
Cursor & Pointer
A soft ink line that follows the cursor and fades like a wet brushstroke.