heartbeat

Utilities for pulsing an element like a heartbeat.

60 bpm

90 bpm

140 bpm

Installation

If your project has OrganUI's utilities, you already have heartbeat. Otherwise, add them once:

bunx shadcn@4.22.1 add https://organui.com/r/utilities.json

The CLI adds them to your global CSS file, after your theme. To add them by hand, paste this instead:

:root {
  --severity-normal: oklch(0.448 0.119 151.328);
  --severity-info: oklch(0.488 0.243 264.376);
  --severity-warning: oklch(0.473 0.137 46.201);
  --severity-critical: oklch(0.505 0.213 27.518);
}

.dark {
  --severity-normal: oklch(0.792 0.209 151.711);
  --severity-info: oklch(0.707 0.165 254.624);
  --severity-warning: oklch(0.828 0.189 84.429);
  --severity-critical: oklch(0.704 0.191 22.216);
}

@theme inline {
  --color-severity-normal: var(--severity-normal);
  --color-severity-info: var(--severity-info);
  --color-severity-warning: var(--severity-warning);
  --color-severity-critical: var(--severity-critical);
}

@keyframes heartbeat {
  0%, 40%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.12);
  }
  20% {
    transform: scale(1.02);
  }
  30% {
    transform: scale(1.08);
  }
}

@utility animate-heartbeat {
  animation: heartbeat var(--heartbeat-duration, 1s) ease-in-out infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@utility heartbeat-rate-* {
  --heartbeat-duration: calc(60s / --value(integer));
}

@utility bg-ecg-grid {
  --ecg-grid-minor: color-mix(in oklch, var(--ecg-grid-color, var(--color-red-500)) 18%, transparent);
  --ecg-grid-major: color-mix(in oklch, var(--ecg-grid-color, var(--color-red-500)) 45%, transparent);
  --ecg-grid-step: var(--ecg-grid-size, 4px);
  background-image: linear-gradient(to right, var(--ecg-grid-major) 1px, transparent 1px), linear-gradient(to bottom, var(--ecg-grid-major) 1px, transparent 1px), linear-gradient(to right, var(--ecg-grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--ecg-grid-minor) 1px, transparent 1px);
  background-size: calc(var(--ecg-grid-step) * 5) calc(var(--ecg-grid-step) * 5), calc(var(--ecg-grid-step) * 5) calc(var(--ecg-grid-step) * 5), var(--ecg-grid-step) var(--ecg-grid-step), var(--ecg-grid-step) var(--ecg-grid-step);
}

@utility ecg-grid-size-* {
  --ecg-grid-size: calc(var(--spacing) * --value(number));
}

@utility ecg-grid-color-* {
  --ecg-grid-color: --value(--color-*, [color]);
}

Usage

heartbeat classes
Class	Styles
`animate-heartbeat`	animation: heartbeat var(--heartbeat-duration, 1s) ease-in-out infinite; none for people who prefer reduced motion.
`heartbeat-rate-<number>`	--heartbeat-duration: calc(60s / <number>); one beat per minute at that rate.
`--heartbeat-duration`	Set it inline for a rate that changes, such as style={{ "--heartbeat-duration": `${60 / bpm}s` }}.

<HeartIcon className="animate-heartbeat heartbeat-rate-72" />

Notes

The pulse is decorative. Show the rate as text too, and don't let the animation stand in for a monitor.