ns-ui / chart-ridgeline-terrain
14 rps
move the cursor over the terrain, release for the rebound
ns-ui
Unknown-Pleasures ridgeline chart whose live history recedes into scrolling ambient noise terrain, dented gravitationally by the cursor.
Use when an Unknown-Pleasures ridgeline chart where live history recedes into scrolling noise terrain, dented by the cursor; use for a live/ambient data feed with a generative-landscape feel, not when trend direction is the point; pick chart-area-aurora instead when trend direction is the story and a real tooltip and axis are needed, hero-chart-recorder when the live stream is the product at hero scale, or histogram-live-grain when the question is the distribution of a sample rather than its shape over time.
Install
npx shadcn add https://design.helpmarq.comns-ui / chart-ridgeline-terrain
move the cursor over the terrain, release for the rebound
| Prop | Type | Default | Description |
|---|---|---|---|
| series? | number[] | EMPTY | data samples, oldest → newest; newest enters at the front row |
| cols? | number | 96 | vertices per ridgeline |
| rows? | number | 40 | ridgeline count (back to front) |
| ambientAmplitude? | number | 18 | ambient noise height in px at the front row |
| dataAmplitude? | number | 68 | data peak height in px at the front row |
| glideMs? | number | 600 | ms for the history to glide one row back after a push |
| dentSigma? | number | 90 | gaussian radius of the cursor dent in screen px |
| dentDepth? | number | 26 | max cursor dent depth in px |
| className? | string | "h-96" | — |
| aria-label? | string | "Live signal terrain" | — |