Animated Footer w/ Float Icon using typescript and tailwind

A footer component featuring social media icons that float upward with a rotation effect when hovered, revealing their respective platform names underneath.

Demo

Source Code

footer-animation.tsx

import { Send } from "lucide-react";

export function Footer() {
  return (
    <>
        <footer className="w-full mx-auto container max-w-7xl rounded-2xl px-4 h-16 flex items-center py-3 bg-gray-100">
          <div className="w-full  flex justify-between items-center">
            {/* Email section */}
            <div className="flex items-center gap-2">
              <Send className="size-7" />
              <Link href="mailto:[e-mail]" className="text-2xl hover:underline">
                [e-mail]
              </Link>
            </div>

            {/* Social icons */}
            <div className="flex items-center relative">
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/wa3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Whatsapp</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" -rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/ig3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Instagram</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/dc3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Discord</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" -rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/ln3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Linkdln</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/tiktok3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Tiktok</span>
              </Link>
            </div>
          </div>
        </footer>
    </>
  );
}

---

Credit

•⁠ ⁠3d icon : https://www.figma.com/community/file/1015485067395949509