Warm fireflies wander over a dusk meadow and blink on their own rhythms. Distant ones glow behind the grass and near ones float in front of it.
Summer nights, booked
Find a campsite
npx shadcn@latest add https://hyperblur.dev/r/bg-fireflies.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-fireflies.tsx.
import { BgFireflies } from "@/components/hyperblur/bg-fireflies"
<div className="relative h-96"><BgFireflies><h1>Summer nights</h1></BgFireflies></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#ffd36b" | Firefly glow color. Hex color. |
| background | string | "#060912" | Sky color at the top. Hex color. |
| horizon | string | "#0f1c1a" | Sky color at the bottom. Hex color. |
| color | string | "#020403" | Color of the meadow silhouette. Hex color. |
| count | number | 46 | Number of fireflies, from 4 to 220. |
| meadow | boolean | true | Draws the hills and grass silhouette. |
| speed | number | 1 | Speed of the wandering and blinking. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |