127 Components
Fireflies
BackgroundsEnchanted twilight forest background with bioluminescent firefly orbs drifting along smooth organic trajectories and pulsing with soft radial halos.
Twilight Bioluminescence
Fireflies
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/fireflies.json"
Props
TypeScript props supported by <Fireflies />.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 55 | Total number of glowing firefly orbs in the scene. |
| glowColor | string | "#D9F99D" | Hex color used for the firefly bioluminescent core and halo. |
| speed | number | 1.0 | Multiplier for the organic flight velocity of the fireflies. |
| pulseRate | number | 1.0 | Multiplier for individual firefly brightness pulse frequency. |
| showForest | boolean | true | Whether to render the multi-layered pine forest silhouette at the bottom. |
| interactive | boolean | true | Gently attracts nearby fireflies toward the pointer position. |
| children | React.ReactNode | — | Optional foreground content rendered above the firefly canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Smooth harmonic drift trajectories with depth-sorted parallax layers
- Non-linear bioluminescent flash curves with soft radial halos and motion trails
- Procedural multi-ridge pine forest silhouette with atmospheric horizon mist
- Gentle cursor attraction field and live interactive HUD controls
Keyboard & Accessibility
- Decorative Canvas 2D layer marked pointer-events-none so overlay content remains accessible
- High-contrast glassmorphic HUD controls with keyboard-focusable range inputs and buttons