Threshold Alarm Card
A metric card that escalates as its series climbs toward a drawn limit, and says which state it is in rather than only colouring it.
Build a metric card that raises an alarm when its series crosses a threshold. Structure: a header (metric name and the current value), a small bar chart, and a verdict row. The chart: one series, ONE axis. Draw the threshold as a single dashed horizontal rule with its value labelled on it ("limit 80"), sitting on the same scale as the bars. Never add a second y-axis for the threshold - a dual scale is the most common way a comparison chart lies. Only the bars ABOVE the line take the alarm colour; the rest stay neutral ink. Colouring the whole series would say the whole period was a problem. Bars arrive one at a time, about 330ms apart, each springing up (stiffness ~300, damping ~28), so the climb toward the limit is something you watch rather than a finished picture. Three states, and each one carries an ICON AND A WORD as well as a colour: "within limit" (green, check), "approaching limit" (amber, warning triangle) above about 85% of the limit, "over limit" (red, warning triangle). Status colour on its own is the most common accessibility failure in dashboards, and it fails exactly the readers who are already struggling. Note that an amber for TEXT usually needs darkening to clear 4.5:1 on a light surface. The card's border stays hairline while everything is fine and takes the status colour when it is not, so the state reads from across the room. Accessibility: the verdict sentence is aria-live="polite"; the chart is aria-hidden. Under prefers-reduced-motion, render the finished series with no climb. Colors as tokens: paper card, neutral ink bars, and a reserved status palette - green, amber, red - used for nothing else. 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.