Pulse Line

Points arrive on an interval and the line scrolls left under a head that never leaves the plot: in glide it runs at the stream’s own pace about one point behind the newest, like a seismograph; in step it eases one point left as each lands. The y scale eases and axis ticks fade rather than jump, and the head breathes like a pilot light while points keep coming and goes ash and still when they stop. The newest stretch carries a heat trail that cools with age. A crosshair glides between points under the pointer, a finger or the arrow keys, reaching every point from the first to the newest; while you read, the picture holds on a real point and catches up in one swell when you let go, and the header rolls to the value and how long ago it was. Optional extras: dashed min, max, average and median lines that either glide with the visible window or ease once per point, with pills that never overlap; a threshold past which the line runs hot over a hatched zone, draggable along the axis or with the arrow keys; a stream that holds while you read it; a floating tooltip; dotted or hatched backgrounds; and loading and empty states. It pauses off screen and in hidden tabs and steps without motion under reduced motion.

npx shadcn@latest add @obsyde/pulse-line

import { PulseLine } from '@/components/obsyde/ember/pulse-line/PulseLine';

export function Example() {
  return (
    <PulseLine live />
  );
}