ns-ui / loud
Area chart whose fill is a live aurora curtain — series values drive curtain height per column, a cool-to-warm hue band tracks local trend direction (falling cool, rising warm), the noise-warped top edge drifts even at rest, and data updates glide the curve to its new shape with a staggered ease.
Use when an area chart whose fill is a live aurora curtain — height tracks values, hue tracks trend direction (cool falling, warm rising); use when trend direction itself is the story and you need a real tooltip/axis, not an ambient backdrop; pick chart-ridgeline-terrain instead when the feed is ambient and the generative landscape is the point rather than a readable trend, or chart-bar-halftone when the values are separate categories rather than a continuous series.
Install
npx shadcn add https://design.helpmarq.comns-ui / chart-area-aurora
An area chart whose fill is an aurora curtain: value drives curtain height, hue tracks local trend — falling runs cool, rising runs warm — and the noise-warped top edge drifts even at rest. New datapoints glide the curve to its next shape.
| Prop | Type | Default | Description |
|---|---|---|---|
| data? | AuroraPoint[] | DEFAULT_DATA | series points, oldest → newest; updates glide the curtain to the new curve |
| height? | number | 300 | chart height in px (width is fluid) |
| yTicks? | number | 4 | horizontal gridline divisions above the baseline |
| glideMs? | number | 600 | ms for a column to glide to its new height after a data update |
| formatValue? | (v: number) => string | defaultFormat | value formatter for tick captions and the tooltip |
| showLegend? | boolean | true | show the falling/rising hue legend |
| className? | string | — | — |
| aria-label? | string | "Aurora flow chart" | — |