Skip to content
Get Pro
Trends

Live Line

A streaming line that never ticks. Time glides left at a constant speed a beat behind the stream, like a seismograph, so batches land unseen ahead of the tip and the line simply keeps flowing; or switch to the tide, where the axis swells forward once per batch.

$149 once · every Pro piece

Customize

Either way the line is drawn up to now and never past it: new samples are revealed by the motion itself. Optional smoothing turns a noisy signal into a calm monotone curve, while the tooltip keeps reading the real samples. Heat follows recency: the newest seconds glow white-hot at the tip and cool through the accent ramp back to grey behind it, with a soft bloom under the hot stretch. A pilot light breathes on the tip, and a rolling value badge sits in the now-gap to its right. The y scale tweens as the range shifts and new labels fade in. Point at it and the stream holds still under the cursor; let go and it catches up in one swell. When the stream stops, the heat drains out and the pilot goes ash.

Install

npx shadcn@latest add @obsyde/live-line

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { LiveLine } from '@/components/obsyde/ember/live-line/LiveLine';

export function Example() {
  return (
    <LiveLine tide="glide" window={60} fill="gradient" glow badge />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/live-line/LiveLine.tsxcomponent
  • ember/live-line/live-line.cssstyles
  • ember/live-line/LiveLineDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
tideMotion'glide' | 'calm' | 'brisk''glide'
smoothingSmoothing'none' | 'light' | 'strong''light'
cadenceBatch every (ms)number1200
windowWindow (s)number60
coolingHot secondsnumber8
fillFill'gradient' | 'pattern' | 'none''gradient'
badgeValue badgebooleantrue
glowBloombooleantrue
liveLivebooleantrue
tooltipTooltip'panel' | 'corner' | 'none''panel'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
dotsDots'halo' | 'ring' | 'none''halo'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'grid' | 'dots' | 'hatch' | 'none''grid'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber260
seedSeednumber4