Tag collection

#micro-interaction

9 animated micro interaction assets — each with a live preview, copy-paste HTML/CSS/JS source and a ready-made AI prompt.

Components7 UI Elements2 All tags →

Related tags — click to cross-filter

#button+6 #click+2 #form+2 #magnetic+2 #badge+1 #bell+1 #celebration+1 #confetti+1 #confirm+1 #cta+1 #cursor+1 #destructive+1 #error+1 #feedback+1

All vaults Site Templates Components UI Elements Animations

#button 6 #click 2 #form 2 #magnetic 2 #badge 1 #bell 1 #celebration 1 #confetti 1 #confirm 1 #cta 1 #cursor 1 #destructive 1

9 assets tagged #micro-interaction

preview

Components⚛ TSX Live preview

Magnetic Button Duo

Buttons and their labels lean toward the cursor with different strength factors, then spring back on leave.

HTMLCSSJavaScriptAdvanced

7.6k42.9k9.1kOpen

preview

UI Elements Live preview

Shimmer Button with Loading → Success States

Tri-state CTA: idle, animated shimmer sweep with ellipsis dots while loading, then a morphing green ✓ success state.

HTMLCSSJavaScriptModerate

27600Open

preview

UI Elements Live preview

Spring-Pop Star Rating

Five oversized stars with overshoot spring animation, glow and live label (Terrible → Legendary).

HTMLCSSJavaScriptModerate

26300Open

preview

Featured Components Live preview

Confetti burst celebrate button

Click the button and 44 colored pieces explode outward with gravity, rotation and fade — vanilla JS physics.

HTMLCSSJavaScriptModerate

46700Open

preview

Featured Components Live preview

Magnetic cursor button

A big CTA that springs toward the cursor while hovered and snaps back on leave — 35% follow ratio.

HTMLCSSJavaScriptModerate

42100Open

preview

Components Live preview

Shake error-feedback form

Wrong password triggers a horizontal shake with red ring; correct password shows green success — instant feedback.

HTMLCSSJavaScriptModerate

29800Open

preview

Components Live preview

Notification bell with count badge

Ringing bell with a spring pop-in count badge; rings periodically, increments on click.

HTMLCSSJavaScriptModerate

28900Open

preview

Components Live preview

Liquid ripple click button

Soft white ripples expand from the exact click point on a gradient pill, animating size and fade then self-removing.

HTMLCSSJavaScriptModerate

37200Open

preview

Featured Components Live preview

Press-and-hold confirm button

Hold the destructive button for 1.2s as a red fill sweeps across — releasing early cancels the action.

HTMLCSSJavaScriptModerate

37200Open