ns-ui / loud
A chart-recorder hero: ruled paper feeds left at fixed px/s while a mechanical pen chases the live value through a deliberately underdamped spring, so a spike overshoots, quivers, and settles — and that tremor is stamped permanently into the trace.
Use when the live stream itself is the product — a status-page or dashboard hero where a strip-chart recorder's honest mechanical lag (spike overshoots, quivers, settles, and the quiver stays inked forever) IS the point; pick sparkline-automaton for a compact inline KPI tile instead, chart-ridgeline-terrain for an ambient receding ridgeline landscape rather than a legible time-series, and voice-recorder-meter for a voice-capture amplitude meter with no time axis at all — hero-chart-recorder is the only one of the four that is a recorder watching itself write, not a finished chart or a meter.
Install
npx shadcn add https://design.helpmarq.comns-ui / hero-chart-recorder
It never teleports to the true value — it chases it through an underdamped spring, overshoots, quivers, and settles. Whatever the pen actually drew is what stays stamped on the paper, tremor included.
focus the strip, then use ← / → to scrub the trace — hover does the same with a pointer
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | the true, unlagged live value the pen chases |
| min? | number | — | fixed vertical scale — recorder paper is calibrated, not auto-ranging |
| max? | number | — | — |
| unit? | string | — | — |
| label? | string | — | used in the mono readout and the aria-live summary |
| speed? | number | — | paper feed speed, px/s |
| rangeMs? | number | — | window used for the aria-live range/trend summary |
| formatValue? | (value: number) => string | — | — |
| className? | string | — | — |