KQ-1513 · BEAT/LIKE

Beat Like

A like button whose heart beats: a press contracts it on a near-critical spring while the colour floods up from the tip, then relaxes it on an underdamped one that carries it past its size, and at the top of that relaxation a ring of small hearts is thrown outward while the count rolls up on springs.snap. Holding the heart makes it race — it beats on its own, quicker and bigger each time, while a ring around it fills — and letting go at full charge super-likes with a big beat and a double ring; while liked it keeps a quiet resting heartbeat. It is an aria-pressed button: Space and Enter behave like the pointer (a quick press toggles, a held one charges, Escape cancels the hold).

KQ-1513 · BEAT/LIKE

Fog on the lower terraces

Ida Marsh · 4 min read

not liked · 1,284 · tap, or hold for a super-like

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/beat-like

Props

pressed / defaultPressed: boolean; default — / false; Whether the visitor has liked it, controlled or uncontrolled.
onPressedChange: (pressed: boolean, kind: "like" | "super" | "unlike") => void; default —; Fires from the press, key or hold that changed it, with the new state and how it was reached; a super-like over an existing like fires with pressed true.
count: number; default 0; Likes from everyone else; the visitor's own like is added while pressed.
format: (count: number) => string; default grouped integer; How the count is written; each digit rolls in its own column, other characters stand still.
label: string; default "Like"; The button's accessible name; the count describes it.
burst: number; default 8; Small hearts thrown by a like, 0 to 24; a super-like throws twice as many in two rings.
beat: number; default 72; The heart rate in beats per minute: how fast a beat contracts and relaxes, the resting pulse, and where a held heart starts to race.
color: "rose" | "amber" | "cobalt" | "mint" | string; default "rose"; The heart's colour: a named pigment that reads the same in both themes, or any CSS colour.
resting: boolean; default true; Keep a quiet lub-dub while liked, only while the button is on screen and the page is visible.
holdToSuper: boolean; default true; Holding the heart races it, and letting go at full charge super-likes; off, a hold is just a slow press.
superHold: number; default 1200; How long a hold takes to reach full charge, in ms.
onHoldChange: (state: "idle" | "charging" | "full") => void; default —; Fires as a hold starts charging, reaches full charge, and ends.
showCount: boolean; default true; Show the count beside the heart; off, the button is a round heart.
size: "sm" | "md" | "lg"; default "md"; Pill height 32, 40 or 48px, with the heart and text scaled to match.
sound: boolean; default false; A pop as the hearts leave (two for a super-like), soft rising pops while charging and a low one on unlike; only in answer to the visitor.
disabled: boolean; default false; Disables the button.
className: string; default —; Classes for the root inline box.

Prop	Type	Default	Description
pressed / defaultPressed	boolean	— / false	Whether the visitor has liked it, controlled or uncontrolled.
onPressedChange	(pressed: boolean, kind: "like" \| "super" \| "unlike") => void	—	Fires from the press, key or hold that changed it, with the new state and how it was reached; a super-like over an existing like fires with pressed true.
count	number	0	Likes from everyone else; the visitor's own like is added while pressed.
format	(count: number) => string	grouped integer	How the count is written; each digit rolls in its own column, other characters stand still.
label	string	"Like"	The button's accessible name; the count describes it.
burst	number	8	Small hearts thrown by a like, 0 to 24; a super-like throws twice as many in two rings.
beat	number	72	The heart rate in beats per minute: how fast a beat contracts and relaxes, the resting pulse, and where a held heart starts to race.
color	"rose" \| "amber" \| "cobalt" \| "mint" \| string	"rose"	The heart's colour: a named pigment that reads the same in both themes, or any CSS colour.
resting	boolean	true	Keep a quiet lub-dub while liked, only while the button is on screen and the page is visible.
holdToSuper	boolean	true	Holding the heart races it, and letting go at full charge super-likes; off, a hold is just a slow press.
superHold	number	1200	How long a hold takes to reach full charge, in ms.
onHoldChange	(state: "idle" \| "charging" \| "full") => void	—	Fires as a hold starts charging, reaches full charge, and ends.
showCount	boolean	true	Show the count beside the heart; off, the button is a round heart.
size	"sm" \| "md" \| "lg"	"md"	Pill height 32, 40 or 48px, with the heart and text scaled to match.
sound	boolean	false	A pop as the hearts leave (two for a super-like), soft rising pops while charging and a low one on unlike; only in answer to the visitor.
disabled	boolean	false	Disables the button.
className	string	—	Classes for the root inline box.