Heartbeat

A looping ECG trace with a bright leading edge.

Bed 4 · AdultII · 25 mm/s

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/heartbeat.json

import { Heartbeat } from "@/components/ui/heartbeat"

<Heartbeat bpm={72} />

The sweep fits a whole number of beats on screen, so the rhythm stays true to bpm at any width.

Change bpm on the fly and the dot carries on from where it was.

A small strip as an is-it-alive signal. bpm={0} flatlines.

Renders a div with role="img" and accepts its attributes; the ref points at it. It fills its container's width.

Prop	Type	Default
`bpm`	`number` Beats per minute. 0 draws a flat line.	`72`
`height`	`number` Height in pixels.	`96`
`onBeat`	`() => void` Called as each R peak passes the leading dot. Not called under reduced motion.	None
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

Screen readers hear "Heart rate 72 beats per minute". Pass aria-label for other meanings, such as a service being up.
The strip is one SVG path drawn once; each frame only moves a gradient window and the dot, so nothing re-renders while it runs.
It pauses while off screen or in a hidden tab, and keeps its place when it resumes.
With reduced motion, the trace holds still with the dot near the right edge.