bala-signature/dist/BalaSignature.jsx

A reusable animated signature component by Bala

import { useEffect, useState } from "react";

export default function BalaSignature() {
  const [show, setShow] = useState(true);
  let lastScrollY = 0;

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      setShow(currentScrollY < lastScrollY);
      lastScrollY = currentScrollY;
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <a
      href="https://github.com/balawpugazh11"
      target="_blank"
      rel="noopener noreferrer"
      className={`fixed bottom-4 left-4 z-50 group flex items-center space-x-2 transition-all duration-300 ${
        show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10 pointer-events-none"
      }`}
    >
      {/* SVG Logo */}
      <svg
        viewBox="0 0 60 60"
        className="w-10 h-10 rounded-full drop-shadow-md transition-transform duration-300 group-hover:scale-105 animate-fade-scale"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="30" cy="30" r="28" fill="#0F172A" stroke="#38BDF8" strokeWidth="4" />
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          dy=".35em"
          fontFamily="monospace"
          fontSize="18"
          fill="#38BDF8"
          fontWeight="bold"
          className="animate-glow-text"
        >
          BM
        </text>
      </svg>

      {/* Tooltip Text */}
      <span className="bg-zinc-900 text-sky-400 text-xs px-3 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap shadow-md font-mono">
        Designed & Built by Bala ❤️‍🔥
      </span>
    </a>
  );
}