Firefly Field
Fireflies over a plain dusk background that slowly learn to flash together, as real synchronous fireflies do, until waves of light roll across the field. The cursor is a lantern they drift in to circle, a click blinks the whole field, and they can gather into a glowing word.
Canvas 2D0 deps1 file · 22 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* FireflyField — fireflies over a plain dusk background that slowly learn to
* flash together.
*
* Every firefly is a pulse-coupled oscillator, the way synchronous fireflies
* really work: each one charges toward its next flash at its own rhythm, and
* when a neighbour flashes it is nudged closer to its own (Mirollo and
* Strogatz). Nobody leads. Out of scattered twinkling, patches fall into step
* and waves of light start to roll across the field. sync sets how strongly
* they listen to each other, from independent twinkling to a field that
* pulses as one within seconds.
*
* They drift in 3D at slow, wandering speeds, mostly low in the frame, and
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Every firefly charges toward its next flash at its own rhythm, and when a neighbour flashes it is nudged closer to its own, the way synchronous fireflies really behave. Nobody leads: scattered twinkling becomes patches in step, then waves of light rolling across the field. The sync setting runs from independent twinkling to a field that pulses as one. They drift slowly in 3D, mostly low in the frame, climb a little as they flash, keep a faint ember between flashes, and grow smaller and softer with distance. The pointer is a lantern: fireflies nearby drift in and circle it and it draws their flashes, and a click blinks everyone near it at once so the pulse spreads outward. Give it a word, on one or two lines, and the fireflies drift into it and glow in unison, breathing, before scattering back into the night. One additive glow sprite per firefly on a plain canvas; it pauses off-screen and in hidden tabs.
Curator’s note
Pro because the light is a real synchronisation model: every firefly is a pulse-coupled oscillator that nudges its neighbours, so a field of random twinkling falls into rolling waves of light on its own, with a lantern cursor that joins in.
