Invite Code Microinteraction

Summary

A soft-UI invite code component for iOS that animates from a ready state into a revealed code with a copy button, showcasing a clean expand microinteraction.

Visual description

On a flat light gray square, a single wide white pill with a soft shadow holds a slightly inset lighter gray track. Inside it, bold dark sans-serif text reads Your Invite Is Ready on the left and a solid green circle with a white downward arrow sits at the right end. A black cursor arrow floats below the pill, hinting at the click that triggers the interaction.

Key takeaway

Build a component as a nested pill, with a raised white shell around an inset track and one saturated green action circle, so the only accent on the screen is the control you want pressed.

Reuse notes

Reach for this as a motion still reference. Pairs with minimal, soft ui directions. Original by Nitish Khagwal.