piruicy
The collection

Clerk MFA

after Clerk

Six code boxes that a cyan cursor walks across, a digit landing in each, before the whole row flares and clears.

Multifactor Authentication

Each user's self-serve multifactor settings are enforced automatically during sign-in.

 

Details

  • The cursor pops in on the first box (scale 1.5 to 0.9 to 1), then steps 44px a box every 0.15s, a random digit arriving 0.1s after it, on [0.7, 0, 0.3, 1].
  • At the end the frame and cursor slide off at scale 1.5 and the digits swell to 1.5 as they fade; after 0.7s it runs again with new digits, while the pointer stays.
  • 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.