KQ-1854 · SLOW/SYNC

Slow Sync

A field of soft dots, each blinking on its own rhythm, that slowly falls into step: every dot is a pulse-coupled oscillator whose flash nudges its neighbours — a late one advanced, an early one held back — so patches agree first, waves of light sweep the field, and a weak pull toward the mean dissolves the last whirling cores until it beats as one pulse, over about a minute at the default coupling. A click scatters the timing in a patch: a ring opens on the snap spring, the dots it passes are pushed out and come home on recoil, and the patch blinks out of step until its neighbours draw it back. With the field focused, the arrow keys move the patch and Enter scatters it.

KQ-1854 · SLOW/SYNC

Fieldline Sync

Every device, one beat.

sync 0% · scattered

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/slow-sync

Props

children: React.ReactNode; default —; Content above the field; it stays fully interactive.
coupling: number; default 0.5; How strongly a flash nudges its neighbours, 0 (they never agree) to 1 (they lock in seconds).
count: number; default 220; How many dots on a 720 × 208 field, 20 to 600; other sizes keep the same density.
warmth: number; default 0.5; The colour of the light, cool moon-white (0) through firefly green (0.5) to amber (1).
color: string; default —; Any CSS colour for the light; overrides warmth.
period: number; default 1.8; Mean time between one dot's blinks, s.
spread: number; default 0.35; How different the dots' own rhythms are, 0 to 1; more spread means more waves and slower agreement.
reach: number; default 1.6; How far a flash is felt, in dot spacings, 1 to 3.
glow: number; default 0.6; Size and strength of a flash's halo, 0 to 1.
dotSize: number; default 3; Dot radius at rest, px.
patch: number; default 0.2; Radius of a scatter, as a fraction of the field's width.
interactive: boolean; default true; A click on the field, or Enter, scatters a patch.
onScatter: (x: number, y: number) => void; default —; Fires when a patch is scattered, with its centre as fractions of the field.
onSyncChange: (sync: number) => void; default —; How in step the field is, 0 (scattered) to 1 (one pulse), rounded to 2 dp, at most four times a second.
paused: boolean; default false; Freeze the field.
seed: number; default 7; Seeds the layout, the rhythms and the starting phases.
label: string; default "Blinking field"; Accessible name.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default "h-52 w-full"; Sizes the field.

Prop	Type	Default	Description
children	React.ReactNode	—	Content above the field; it stays fully interactive.
coupling	number	0.5	How strongly a flash nudges its neighbours, 0 (they never agree) to 1 (they lock in seconds).
count	number	220	How many dots on a 720 × 208 field, 20 to 600; other sizes keep the same density.
warmth	number	0.5	The colour of the light, cool moon-white (0) through firefly green (0.5) to amber (1).
color	string	—	Any CSS colour for the light; overrides warmth.
period	number	1.8	Mean time between one dot's blinks, s.
spread	number	0.35	How different the dots' own rhythms are, 0 to 1; more spread means more waves and slower agreement.
reach	number	1.6	How far a flash is felt, in dot spacings, 1 to 3.
glow	number	0.6	Size and strength of a flash's halo, 0 to 1.
dotSize	number	3	Dot radius at rest, px.
patch	number	0.2	Radius of a scatter, as a fraction of the field's width.
interactive	boolean	true	A click on the field, or Enter, scatters a patch.
onScatter	(x: number, y: number) => void	—	Fires when a patch is scattered, with its centre as fractions of the field.
onSyncChange	(sync: number) => void	—	How in step the field is, 0 (scattered) to 1 (one pulse), rounded to 2 dp, at most four times a second.
paused	boolean	false	Freeze the field.
seed	number	7	Seeds the layout, the rhythms and the starting phases.
label	string	"Blinking field"	Accessible name.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	"h-52 w-full"	Sizes the field.