Heartbeat Sync
Two heartbeats on a heart monitor, each at its own rhythm. Hold the heart and they drift together until they beat as one line, then your message appears with the days you've been in sync.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/heartbeat-syncProps
| Prop | Type | Default | Description |
|---|---|---|---|
you | string | "You" | Your name, beside your heartbeat |
them | string | "Them" | Their name, beside theirs |
yourBpm | number | 68 | Your heart rate before you're in sync, in beats per minute |
theirBpm | number | 86 | Their heart rate before you're in sync, in beats per minute |
since | string | - | The day you met (YYYY-MM-DD): counts the days you've been in sync |
holdSeconds | number | 3 | Seconds of holding the heart it takes to fall into sync |
colors | [string, string] | ["#ff5d73", "#6c8cff"] | Your line's colour, then theirs. In sync, the one line carries both |
latch | boolean | true | Stay in sync after letting go. Off, the beats drift apart again |
sound | boolean | false | A soft heartbeat with each beat once in sync. It starts with the hold, so browsers allow it |
haptics | boolean | true | Phones vibrate with each beat once in sync (Android; iPhones ignore it) |
hint | string | "Hold to sync our heartbeats" | Under the heart until you're in sync |
onSync | () => void | - | Called when you fall into sync |