Char Count Ring

Create a character-count ring for a text field. A bordered text area with a footer row holding a small SVG ring (radius ~10px, 2.5px stroke): a hairline background circle plus a progress arc that fills clockwise from 12 o'clock (strokeDasharray = circumference, animate strokeDashoffset; rotate the circle -90deg so it starts at the top). The arc's fill fraction is characters-typed / limit, updated live on every keystroke with a short 0.15s linear transition. Color is the warning system: accent below 70% of the limit, amber from 70%, red from 90% (0.3s color transition between states). When the ratio crosses 70%, the remaining-characters number fades in next to the ring, in the same color, bold monospace. Before that the ring stays quietly alone. Wire it to a real textarea's input event. The ring answers keystrokes and nothing else; do not script a sentence typing itself into the field. Accessibility: the ring carries an aria-label like '82 of 100 characters'; the remaining count uses aria-live="polite" so the warning is announced. If prefers-reduced-motion is set, update the ring instantly with no transitions. 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.