ns-ui

Sparkline Automaton

Inline KPI sparkline grown over an elementary cellular-automaton texture — the Wolfram rule is picked by the series' volatility, one generation column per data point.

Use when a compact inline KPI tile whose backdrop should read the series rather than decorate it, with the cellular-automaton rule chosen by the data's own volatility; pick sparkline-ascii instead when the sparkline must be characters (monospace layout, copyable, keyboard-walkable), hero-chart-recorder when the live stream itself is the product at hero scale, or meter-quota-rule when the reading is a single fraction rather than a series.

Install

npx shadcn add https://design.helpmarq.com/r/sparkline-automaton.json
  • canvas
  • data-viz
  • sparkline
  • cellular-automaton
  • generative
  • scrub
  • kpi

ns-ui / sparkline-automaton

The texture reads the data

Each sparkline grows an elementary cellular automaton beneath its line — one generation per data point, rule picked by volatility. Calm revenue stays sparse (rule 4); jittery latency knits (rule 108); chaotic errors boil (rule 30).

REVENUERULE 4 · CV 0.03 · CALM
$51.5k+11.5%
LATENCY P95RULE 108 · CV 0.09 · MODERATE
130 ms+16.1%
ERRORS / MINRULE 30 · CV 0.73 · VOLATILE
44+1366.7%
scrub a strip, or arrow-key it while focused

identical data reproduces identical texture — the seed row is the first value's bits

Props

PropTypeDefaultDescription
data?number[]DEFAULT_DATAseries values, oldest → newest; one CA generation per point
cellSize?number3CA cell height in px
entranceMs?number900entrance sweep duration in ms
strokeWidth?number1.5polyline stroke width in px
formatValue?(value: number, index: number) => stringdefaultFormatscrub readout formatter
className?string"h-14"—
aria-label?string"KPI sparkline"—
Back to the catalog