Heart Signal

A slow, ultra-smooth cardiac telemetry and pulse visualization component with 3 distinct animation variants (ecg-line, pulse-heart, and cardiac-wave), live BPM badge, and active theme color integration.

HeartSignal brings health monitoring, fitness tracking, medical telemetry, and energetic UI headers to life with 60fps HTML5 Canvas rendering.

Real-time EKG Waveform Monitor

Usevariant"ecg-line": for classic EKG P-Q-R-S-T heartbeat monitor waveform trace.

Active Color

Animation Speed0.25

Heart Rate (BPM)75

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Heart Signal

npx shadcn@latest add @algorize-ui/heart-signal

components/custom/blocks/HeartSignalBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Heart Signal to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

next-themes is an npm package.

npm install next-themes

Animation Variants

Anatomical Cardiac Heart Sweep

Usevariant"pulse-heart": for central cardiac heart silhouette with progressive left-to-right color sweep fill.

Animation Speed0.25

Heart Rate (BPM)75

Fluid Cardiac Wave Visualizer

Usevariant"cardiac-wave": for multi-lead sine wave stream with audio-visual equalizer bars.

Features

3 Ultra-Smooth Animation Variants

Includes EKG Line Trace, Cardiac Heart Sweep, and Cardiac Wave visualizers.

Slow & Calm Rhythm Flow

Features a relaxed, smooth heartbeat waveform flow perfect for clean medical dashboards.

Dynamic Theme Adaptive

Automatically resolves active theme primary color (bg-primary) across Light and Dark modes.

Full Width & Responsive Height

Scales fluidly to fill 100% of parent container width and height without expanding overflow.

Props Reference

Prop	Type	Default	Description
`variant`	`HeartSignalVariant`	`"ecg-line"`	Selects between `"ecg-line"`, `"pulse-heart"`, and `"cardiac-wave"` animation variants.
`bpm`	`number`	`75`	Heart rate pulse frequency in Beats Per Minute.
`speed`	`number`	`0.25`	Animation speed multiplier for ultra-smooth wave cycles.
`showBPM`	`boolean`	`true`	Displays floating vital statistics BPM badge overlay.
`showGrid`	`boolean`	`true`	Renders medical telemetry grid background lines.
`color`	`string`	`adaptive`	Optional custom stroke & glow color. Matches active theme primary color by default.