Live Usage Meters

Build a row of live resource meters for a dashboard. Structure: three rows (CPU, memory, disk), each with a label, a percentage, and a horizontal bar. Below them, a caption naming the threshold. Put every meter on ONE shared 0-100 scale. Per-row scales are what make the longest bar the least urgent, which is the quiet way a dashboard lies. Draw the threshold ON each bar: a hairline vertical tick at the threshold percentage, extending slightly above and below the bar. "High" should be something the user can see coming, not a label that appears without warning. Sampling: update on an interval and add a small sine-based wobble on top of the underlying trend. A number that rises in a perfect line reads as a page-load animation rather than as live sampling. Animate the fill width with a short ease-out (about 0.28s), NOT a spring. A spring on a live meter overshoots to a value that was never measured. When a meter crosses the threshold, change THREE things at once: the bar turns red, a warning icon appears next to the label, and the word "high" is added. Any one of them alone is missable, and colour alone fails a red-green reader entirely. Accessibility: the threshold caption is aria-live="polite". Under prefers-reduced-motion, render the meters at their settled values with no sampling and no wobble. Colors as tokens: paper surface, one accent for normal fills, a reserved status red for the exceeded state - never an accent shade. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.