ns-ui

Table Heat Shimmer

Dense ops table where rows above a heat threshold shimmer like air over asphalt — live DOM text refracts through an animated SVG displacement filter while cold rows sit dead-still behind hairline borders.

Use when a dense ops table where the rows needing attention should be findable by motion rather than by hue, hot rows refracting through a displacement filter while cold rows sit dead still; pick heatmap-calendar-tide instead when the magnitudes belong on a grid of time slots rather than in table rows, or meter-threshold-trip when one metric's trip and clear points are the question rather than which rows are hot.

Install

npx shadcn add https://design.helpmarq.com/r/table-heat-shimmer.json
  • table
  • data-viz
  • svg-filter
  • displacement
  • heat-haze
  • canvas
  • sortable
  • dashboard

ns-ui / table-heat-shimmer

THRESHOLD

Server load — last 24h

updated 09:41:07 UTC
Select
edge-gatewayiad-112,48081192
auth-servicefra-18,92164084
search-indexsfo-26,11550576
billing-apiiad-12,21018948
media-transcodeams-194015241
notificationssfo-23,3089634
feature-flagsfra-15,1702221
audit-logiad-21,2046418
static-assetsglobal22,9301211
cron-runnerams-188457
10 services · 3 above threshold · 0 selected
1 / 1

rows above the threshold shimmer like air over asphalt — hover one and it snaps still to read

Props

PropTypeDefaultDescription
rows?LedgerRow[]DEFAULT_ROWStable data — rows with heat >= threshold shimmer
threshold?number70heat score at/above which a row is hot
title?string"Server load — last 24h"card title
timestamp?string"updated 09:41:07 UTC"mono timestamp shown beside the title
className?string