Account Switcher

An avatar chip that opens a springy menu and swaps identities

Create an account switcher. A trigger chip showing the active account: a small gradient avatar with initials, name and email (truncated with ellipsis), and a chevron. Clicking opens a dropdown panel of accounts; the chevron rotates 180deg with a spring (stiffness 400, damping 26) and the trigger's border tints accent while open. The panel springs down from the trigger (from 8px above at 97% scale and 0 opacity, stiffness 420, damping 30, transform-origin top), with a soft shadow (0 12px 30px at 14% opacity). Rows cascade in with a 0.06s stagger from 8px left. Each row: avatar, name, and a check icon in the accent color on the active account, with the active row on a light accent-tinted background. Selecting a row swaps the trigger's identity and closes the panel; closing reverses quickly (150ms). Accessibility: the trigger uses aria-expanded and aria-label "Switch account"; the panel is a list, rows are buttons; close on Escape and on outside click in production. If prefers-reduced-motion is set, open and close instantly with no springs or stagger. 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.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data