Vibeset

Beating heart

A like is a small promise: you press and something is saved. The piece provides what you see, the heartbeat and the rolling number, and leaves what matters, saving, to whoever uses it: onCambio reports every change. It works controlled (marked and count come from outside) and uncontrolled (it keeps the count), with an input's rule: if the prop arrives, the prop wins. It is a button with aria-pressed, and the rolling number is hidden from readers, who would otherwise read "9, 10". The beat only plays on marking, not when the page loads with the button already marked.

And the React Bits original: Pulse Heart

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Pulse Heart, and this is what we saw in theirs in case you prefer to use the original.

When to use it

Where people can really mark something: favourites, quick ratings. Not as decoration.

Watch out for

A like that saves nothing is a lie with an animation: wire it to real state before showing it.

Accessibility

Reduced motion (seven references in the code), three aria signals and keyboard.