Rate Limit Cooldown
A rate limit that owes you two numbers: how long the wait is, and what the limit actually was.
Slow down
Too many requests. Try again in 12s.
Build a rate-limit cooldown that tells the user everything they need. Structure: a card with a circular countdown on the left, a heading and status line on the right, and a quota bar underneath. A rate limit is a wait with a KNOWN END, so the screen owes the user two numbers, and most implementations give neither: 1. How long. A ring that empties in real seconds with the count in its middle. Drive the arc and the number from the SAME counter so they can never tell different stories, and animate the arc LINEARLY between ticks - an eased second runs fast then slow, which is exactly what a clock must not do. 2. What the limit was. A quota bar reading "this minute - 60 / 60". Without it the user cannot tell whether they were unlucky or are using the thing wrong. A bare "too many requests" turns a twelve-second pause into an unbounded outage in the user's head, and that is the moment they start reloading. End the wait visibly: when the counter hits zero, the ring, the card border and the quota bar all turn green together and the number becomes a word ("go"). A countdown that simply stops leaves people waiting longer than they had to. Accessibility: the status line is aria-live="polite" so both the remaining seconds and the release are announced; the ring is aria-hidden. Under prefers-reduced-motion, render the ready state with no countdown. Colors as tokens: paper card, one accent for the running ring, a reserved status red for the exhausted quota, semantic green for the release. 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.