Follow Button

Build a follow button with a live follower count under it. States: "Follow" - accent-filled pill with a plus icon and white text; "Following" - paper pill with a hairline border, ink text and a green check icon. Clicking toggles between them. Morph: animate the pill's width change smoothly (layout animation) with a spring (stiffness ~420, damping ~30). The icon swap is the star: the outgoing icon shrinks and rotates away (scale to 0.4, rotate -90deg) while the incoming one springs in from the opposite rotation (stiffness ~520, damping ~26) - a little turnstile flip. Follower count: a line like "1,284 followers" in monospace with tabular numbers. When you follow, the number increments by 1 with a rolling animation: the old number slides up and out while the new one slides up from below (12px travel, spring). The number also flips to the accent color while you're following. Unfollowing rolls it back down. Details: hover scales the pill to 1.04, press to 0.93. Background/border/color changes use a 0.3s brand ease. Accessibility: aria-pressed reflects the following state; the counter line is aria-live="polite". Under prefers-reduced-motion, swap states instantly with no roll or flip. Colors as tokens: one accent, ink, paper, one green for the check only. 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.