Button → gooey loader

Press Pay and the label blurs away first, then the pill snaps in to a small capsule where two blobs merge and pull apart like liquid while the payment confirms. Two SVG circles and one filter.

What it is

The pay button shrinks into a small capsule where two blobs merge and pull apart like liquid while the payment goes through, then opens back up with a check. It keeps the user's eye exactly where they tapped instead of throwing up a spinner somewhere else. For checkout and payment buttons, form submissions and any action that takes a couple of seconds and needs to feel alive while it does.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

Part of “Slate: metal card order flow” (Flutter UI demo, via Douyin) · rebuilt neutral · 0:06.5–0:09