Clerk passwords
after Clerk
A password field that fills with dots one by one, then a keyhole that turns to unlock.
Passwords
Simple and secure password authentication, complete with breach detection and recovery options.
Details
- The stack rises 2rem and the field drops 1rem into focus over 1s (ease-out expo); ten dots come out of a blur 0.1s apart from 0.75s.
- After 2s the keyhole turns 90° over 1s (ease-in-out expo) as its edges light and a sheen crosses it.
- At rest, set in Clerk's own fonts for the check, it matches the card on clerk.com pixel for pixel; hovered, its motion was compared with clerk.com's at the same instants after the pointer arrives.
- With a mouse it plays while hovered and plays through; on a phone, cards in a HoverAnimationGroup take turns playing, as clerk.com's do.
- Set in Geist and Geist Mono where clerk.com has Suisse Intl and Söhne Mono: matched in ink, cap height and line breaks.
© 2026 Dhaval Khandhadia. Use it in anything you build; don’t resell it. MIT with the Commons Clause.