Firefly Sync

Backgrounds

About

An animated canvas background of fireflies drifting over a meadow at dusk, each blinking on its own clock and gradually falling into sync with its neighbours, with the pointer acting as a lantern that pulls nearby fireflies off-beat.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Firefly Sync to your project and fits it to your theme.

Code

How Firefly Sync is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { FireflySync } from "@/components/ui/firefly-sync";
import { useState } from "react";

export default function Demo() {
  const [r, setR] = useState(0);
  return (
    <div className="w-full h-screen">
      <FireflySync theme="dusk" onSync={setR} className="h-full w-full">
        <div className="pointer-events-none flex h-full flex-col justify-between p-6 text-white">
          <div>
            <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-white/55">
              Wadi Bani Khalid · 19:40
            </p>
            <h2 className="mt-3 max-w-[14ch] text-[clamp(1.8rem,4.6vw,3.2rem)] font-semibold leading-[1.05] tracking-[-0.03em]">
              Some evenings are worth staying out for.
            </h2>
          </div>
          <p
            className="font-mono text-[11px] uppercase tracking-[0.16em] text-white/45 tabular-nums"
            aria-live="off"
          >
            In step · {Math.round(r * 100)}%
          </p>
        </div>
      </FireflySync>
    </div>
  );
}