Story Ring

Build a story avatar with the classic gradient ring, in two states: new and seen. Structure: three stacked circles - an outer ring layer, a paper gap ring, and the avatar disc (dark ink with initials) on top. Total size about 104px. New state: the outer layer is a conic gradient built from your accent color and 2 lighter siblings of it. Rotate this gradient layer continuously (360deg every 5s, linear, infinite) - since only the ring shows around the avatar, you get a slowly turning gradient halo. The gap between ring and avatar is ~3.5px. A small caption under it says "new story" in the accent color. Seen state (on click): the gradient snaps to a flat 16% ink ring, the rotation stops, the gap tightens to 2px, the avatar does a quick scale dip (1 -> 0.88 -> 1 over 0.4s) like it was tapped, and gets a subtle grayscale(0.4) filter. Caption fades to "seen" in muted ink. Clicking again returns to the new state. Details: hover scales the whole thing to 1.05, press to 0.92. Background and filter changes use a 0.4s brand ease. Accessibility: it's a button with aria-pressed and a label that says what clicking does; caption is aria-live="polite". Under prefers-reduced-motion the ring never rotates and the dip is skipped. Colors as tokens: accent family for the gradient, ink, paper. 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.