Social Auth Row

Create a social sign-in button stack. Three full-width provider buttons (Google, GitHub, Apple) with icon + "Continue with X" label, bordered, 10px radius. On mount they cascade in: each from 10px lower and 0 opacity with a spring (stiffness 380, damping 26) and a 0.09s stagger. On hover a button lifts 2px and its border darkens to ink; on press it dips to 97%. Clicking swaps the button's content through three states with quick crossfades (150ms out, spring in): label → a spinning loader icon (360deg per 0.9s, linear) → after about 1.1s, a check icon plus "Signed in" in the accent color, the check springing in from scale 0 with a small rotation (stiffness 500, damping 22). Keep the button size fixed through all states. In production, trigger the real OAuth flow on click and drive the states from it. Accessibility: buttons keep their accessible name while loading (aria-busy="true" during the loading state). If prefers-reduced-motion is set, skip the cascade and swap states instantly (static loader text instead of a spinner). 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.