Credits Stepper Microinteraction

Credits Stepper Microinteraction, minimal, monochrome

Preview image. Unlock full-res

A minimal credits stepper component where the plus button features an animated chrome liquid-metal finish, making a simple quantity input feel tactile and refined.

Summary

A minimal credits stepper component where the plus button features an animated chrome liquid-metal finish, making a simple quantity input feel tactile and refined.

Visual description

A white, rounded-corner card is centered on a neutral grey background. The card displays the label "Credits" in light grey and a value of "$30.00" in bold black. A bottom control bar contains a subtle minus button, the text "2k", and a prominent, highly reflective metallic plus button.

Key takeaway

The use of a single, high-gloss metallic texture on one interactive element provides a tactile, premium accent to an otherwise minimalist UI.

Reuse notes

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

More like this