Skip to content

No.218 · Authentication

Account Chooser

“Choose an account”, where the account you pick stays the same object: its avatar, name and email lift out of the list and travel up into the password step's header while the other accounts step away, and Back runs it in reverse. Accounts can be removed from the device, with an undo.

The prompt

The design brief behind this component — reuse it to regenerate, remix, or explain it.

Build an account chooser whose chosen account animates as a shared element into the password step. Views: list → password → done, plus "Use another account" (an email step that adds the account and continues to password). The list shows saved accounts as full-width row buttons: a gradient initials avatar (hue per account), name, email (ellipsised) and "last used", with ArrowUp/ArrowDown/Home/End moving focus between rows and an accessible name like "Maryam Al-Harthy, maryam@gutech.edu.om, last used 3 days ago". Rows fade up in sequence (45ms apart). Shared element (FLIP): the identity block (avatar + name + email) is the same component in both views. On choose, the other rows fade and slide 10px away (170ms); then record the chosen block's getBoundingClientRect, switch view, and in a layout effect measure the new header block and animate it with the Web Animations API from translate(dx, dy) scale(oldHeight / newHeight) (transform-origin top left) to none over 460ms with a slight overshoot. The header avatar is larger, so it visibly grows on the way. Back ("Not you?" or "← All accounts") captures the header block and plays the same move back into its row, and returns focus to that row. Password step: "Welcome back", the identity, a password field with a Show/Hide toggle (aria-pressed) and text errors, Sign in, Forgot password. It is focused after the move. Done shows "You're in." with the account. Remove: "Remove an account" (aria-pressed) turns the rows into remove actions ("Remove … from this device", red label); removing shows an Undo toast for 6 seconds that restores the account at its index. Paper and Night; reduced motion swaps views without the move.

Notes

Interaction
Pick an account to watch it travel into the password step; press “Not you?” to send it back. Try “Remove an account” and Undo, or “Use another account”.
Motion
Rows fade up 320ms, 45ms apart; the others step away 160–200ms; the shared element moves and scales over 460ms with a slight overshoot; steps fade 300ms.
Accessibility
Rows are real buttons with full spoken names and arrow-key navigation; focus moves to the password field after the move and back to the row on return; errors are text tied to the field; the remove mode is a pressed toggle and the undo toast is a status. Reduced motion changes views instantly.
Responsive
A single 25rem card, fluid on phones; long names and emails ellipsise.
On touch
Identical on touch.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
81Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.93Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.94Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
95Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.106IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
151Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.157Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
205Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
212Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.222Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
275Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
279Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
301 components