swing shake wobble hover attention micro-interaction attention-grabbing hover effect on icons notification bell shake animation error state indicator on form fields playful hover on navigation items need subtle attention-grabber on hover want shake effect that dampens naturally notification or alert icon needs movement
Swing
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/swing.json Preview
Background
Customize
Quick Start
<button class="swing">🔔 Notifications</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 681 bytes · 36 lines
- Custom Properties
-
--swing-distance--swing-speed - Classes
-
.swing
swing shake wobble hover attention micro-interaction
A horizontal oscillation that starts strong and dampens to stillness — like a pendulum settling. Uses calc() with the --swing-distance token for proportional dampening across all keyframes.
Notification bell
<button class="swing inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-white">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
Notifications
</button>Wider swing on icons
<span class="swing inline-block" style="--swing-distance: 10px; --swing-speed: 0.8s;">
⚠️
</span>