Confirmation states
Success checks, spinners, booked-state cards. The moment after submit.
Small floating confirmation toast used inside feature sections or as a standalone success state after a form/booking submits. Keep the copy to one line of detail; this is a glance-and-move-on element, not a receipt.
Six-box one-time-code input that auto-advances focus as digits are typed and steps back on backspace. Use for a real 3D Secure or SMS step, not as a fake trust signal, and connect it to an actual verification flow before shipping.
The moment after a form submit or booking. Circle pops from scale .4 to 1, then the tick strokes in via stroke-dashoffset, then the label rises. Three staggered moves, ~1.1s total — the confirmation reads as EARNED, not instant.
One 3px border, one keyframe, rotates forever. Nav uses it on /audit while their assessment generates. Pair with a copy line ('Building your site…') and it reads as active work, not a page hang.
Nav's /faq pattern: click the row, plus icon rotates 45deg (becomes X), answer transitions its max-height open. One-at-a-time (radio-style) — opening one closes any other. max-height is the pragmatic trick: `height: auto` can't transition.
Want your site’s confirmation states to look this good?
We build full sites with blocks like these.