Card Number Reveal

Summary

A UI microinteraction study showing a card number field with masked and revealed states, toggled by an eye icon before copying the full number to clipboard.

Visual description

On a near-white square canvas a single rounded input field sits just above center, with a thin lavender-gray outline. Inside it, a card number is shown in dark sans-serif with the middle two groups masked as small crosses, and a rounded square button on the right holds a violet eye icon on a pale lavender fill. A black mouse cursor floats below the field in the empty space. The composition is almost entirely whitespace around the one component.

Key takeaway

Isolate a single microinteraction on an empty canvas, with one accent color on the icon button and a soft tint behind it, so the state change is the only thing the eye follows.

Reuse notes

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