Microinteraction

Pulse Microinteractions

A motion language exploration defining when and how UI elements move — building a vocabulary of interactions that feel physical without being distracting.

Year2023

CategoryMicrointeraction

FigmaProtopieFramer

MotionInteraction designPrototyping

Pulse is a personal exploration into motion as a design material rather than decoration. The goal was to document a small, coherent vocabulary of interactions that could serve as references when deciding whether, and how, an element should move.

Each pattern was tested at three easing presets — ease-out, spring, and linear — to see which felt most honest to the action it represented.

Button press uses an asymmetric spring — fast compress, slow release — mimicking physical material behavior.

Card hover elevation — Hover state lifts cards 2px with a shadow expansion — directional enough to signal interactivity without overselling.

Toast notification entrance — Toast slides in from the edge of attention, not the center — avoids covering primary content on mobile.

Skeleton shimmer moves left-to-right at 1.5s — slow enough to feel calm, fast enough to signal progress.

Next work

Aurora Mobile Banking