ns-ui

Stat Tile ASCII Arrive

A KPI number whose arrival is ink condensing into a glyph: every dot of a 5x7 ASCII dot-matrix digit starts at a random density-ramp step and eases independently toward its true value, so the numeral visibly resolves out of noise instead of sliding or flipping into place.

Use when a KPI/stat tile whose number should visibly resolve out of noise on arrival — ASCII ink density condensing per-dot into the digit — rather than sliding digit columns; pick counter-carry-ripple instead for a live readout where the STRUCTURE of the change (carries rippling right to left) matters more than a one-time arrival.

Install

npx shadcn add https://design.helpmarq.com/r/stat-tile-ascii-arrive.json
  • stat
  • kpi
  • ascii
  • canvas
  • data-viz
  • accessibility
mrr · usdmrr · usd: 48,200
p95 latencyp95 latency: 112ms
uptimeuptime: 99.95%

Props

PropTypeDefaultDescription
valuenumber | stringformatted or raw value; numbers get toLocaleString, strings pass through
label?stringcaption above the readout
suffix?stringshown after the value, e.g. "%" or "ms"
className?string