KQ-1603 · FIREFLY/LETTERS

Firefly Letters

A headline drawn by a few hundred fireflies on a dusk panel: the words are laid out for real, sampled into home spots, and a firefly hovers at each, glowing and flashing on its own rhythm — coupled oscillators, so a settled word slowly falls into step and its flashes ripple across it together. Bring the pointer near and the ones within reach flash once and burst away from it, blinking out as they coast into the dark; after a pause they come back one by one, nearest first, weaving in on a steering force that arrives softly, and each relights its spot with a swell timed like springs.drift until the word is whole. Keyboard focus startles the whole line in a wave from the left, and Enter or Space startles it again.

KQ-1603 · FIREFLY/LETTERS

Fieldline · night walks

Summer nights

dusk · the lights are coming in

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/firefly-letters

Props

children / text: string; default —; The headline, as children or a prop.
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"; default "p"; The element that carries the headline.
count: number; default 450; How many fireflies draw the words.
blink: number; default 0.5; How often and how brightly they flash, 0 (a steady glow) to 1.
shyness: number; default 0.5; How near the pointer may come before they scatter, and how long they stay away, 0 to 1.
sync: number; default 0.4; How strongly their flashes fall into step with each other, 0 to 1.
color: string; default a warm yellow-green; Their light, any CSS colour.
glow: number; default 0.6; How far each one's halo spreads, 0 to 1.
size: number; default 1.6; The radius of a firefly's bright core, px.
wander: number; default 0.3; How much they bob in their spots, 0 to 1.
backdrop: "dusk" | "none"; default "dusk"; A dusk panel behind them, or none to put them on your own dark ground.
trigger: "mount" | "inView" | "manual"; default "inView"; When they arrive and light the words.
once: boolean; default true; Arrive once, or each time the headline comes back into view.
play: boolean; default false; With trigger "manual": true brings them in.
delay: number; default 0; Wait before they arrive, ms.
interactive: boolean; default true; The pointer, a touch and the keys startle them.
paused: boolean; default false; Hold the scene still.
seed: number; default 7; Seeds their spots, rhythms and flights.
dpr: number; default 2; The most device pixels per CSS pixel the canvas draws at (never above 2).
onScatter: (away: number) => void; default —; How many are away from their spots, whenever that changes.
onComplete: () => void; default —; The words are whole again: every firefly is back and lit.
className: string; default —; Size and layout.

Prop	Type	Default	Description
children / text	string	—	The headline, as children or a prop.
as	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "div"	"p"	The element that carries the headline.
count	number	450	How many fireflies draw the words.
blink	number	0.5	How often and how brightly they flash, 0 (a steady glow) to 1.
shyness	number	0.5	How near the pointer may come before they scatter, and how long they stay away, 0 to 1.
sync	number	0.4	How strongly their flashes fall into step with each other, 0 to 1.
color	string	a warm yellow-green	Their light, any CSS colour.
glow	number	0.6	How far each one's halo spreads, 0 to 1.
size	number	1.6	The radius of a firefly's bright core, px.
wander	number	0.3	How much they bob in their spots, 0 to 1.
backdrop	"dusk" \| "none"	"dusk"	A dusk panel behind them, or none to put them on your own dark ground.
trigger	"mount" \| "inView" \| "manual"	"inView"	When they arrive and light the words.
once	boolean	true	Arrive once, or each time the headline comes back into view.
play	boolean	false	With trigger "manual": true brings them in.
delay	number	0	Wait before they arrive, ms.
interactive	boolean	true	The pointer, a touch and the keys startle them.
paused	boolean	false	Hold the scene still.
seed	number	7	Seeds their spots, rhythms and flights.
dpr	number	2	The most device pixels per CSS pixel the canvas draws at (never above 2).
onScatter	(away: number) => void	—	How many are away from their spots, whenever that changes.
onComplete	() => void	—	The words are whole again: every firefly is back and lit.
className	string	—	Size and layout.