Micro-Animations with SVG Paths

Micro-animations are subtle visual feedbacks that occur during user actions (such as hovering, clicking, or loading states). Adding micro-animations to SVG icons makes your interface feel interactive and polished.

1. Classic Hover Spin (Settings Gear)

A common micro-interaction is spinning a settings gear icon when the user hovers over the button. You can achieve this using Tailwind CSS transition and rotation classes:

import { Settings } from "lucide-react";

export function SettingsMenu() {
  return (
    <button className="group flex items-center gap-2 p-3 border rounded-lg hover:bg-gray-50">
      {/* Icon rotates 90 degrees smoothly on hover */}
      <Settings className="w-5 h-5 text-gray-600 transition-transform duration-500 group-hover:rotate-90" />
      <span>System Settings</span>
    </button>
  );
}

2. The Bell Wiggle Animation (Notifications)

For notification icons, a subtle wiggle or shake effect is more appropriate than a full rotation. We can define a custom CSS keyframe animation in our stylesheet:

/* src/styles/globals.css */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

.animate-wiggle {
  transform-origin: top center;
  animation: wiggle 0.5s ease-in-out;
}

Then, trigger this animation class on hover:

import { Bell } from "lucide-react";

export function NotificationBell() {
  return (
    <button className="group p-2 relative">
      <Bell className="w-6 h-6 text-gray-700 group-hover:animate-wiggle" />
      <span className="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full"></span>
    </button>
  );
}

3. Arrow Shifting (Next Steps)

For links that prompt users to take action (such as "Read More"), you can shift a nested arrow icon horizontally to draw attention:

import { ArrowRight } from "lucide-react";

export function ReadMoreLink() {
  return (
    <a href="/blog" className="group inline-flex items-center gap-1 text-blue-600 font-semibold">
      <span>Read Full Article</span>
      {/* Arrow moves to the right on hover */}
      <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
    </a>
  );
}