Microinteractions

Small moments that make your UI feel alive — toggles, confirmations, ratings, and more.

15 interactions

Like Heart

Heart icon scales up then bounces on activation — satisfying click.

feedbackDetails

Toggle Switch Pop

Toggle with a satisfying spring animation when switched.

controlDetails

Checkbox Pop

Checkbox springs into view with a jelly bounce on check.

formDetails

Bell Shake

Bell icon rings with jitter animation on hover or trigger.

notificationDetails

75% complete

Progress Fill

Horizontal bar fills gradually on activation — satisfying progress.

indicatorDetails

Ripple Button

Material-style ripple effect emanates from click point.

buttonDetails
Tooltip pops in!

Tooltip Pop

Tooltip springs in with scale animation on hover.

tooltipDetails

Tab Indicator Slide

Active tab indicator smoothly slides between tabs on change.

navigationDetails
2,847

Count Up

Numeric counter animates up to target value on mount.

dataDetails

Copy Confirmation

Button text changes to "Copied!" with check, then reverts.

feedbackDetails

Star Rating

Hoverable star rating — stars fill with golden color on hover.

ratingDetails
Drag me ⠿

Drag Handle

Cursor shows grab state, item lightly pops on drag start.

interactionDetails
🔔3

Badge Pulse

Notification badge pulses with a ring — draws attention without being annoying.

notificationDetails

Error Shake

Input field shakes horizontally on validation error.

formDetails
+
📎
🖼️

Floating Action

FAB button expands to reveal action labels on hover.

buttonDetails