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 // Detect dark theme var iframe = document.getElementById('tweet-1881554286825689489-253'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1881554286825689489&theme=dark" } Source Code footer-animation.tsx import { Send } from "lucide-react"; export function Footer() { return ( {/* Email section /} hello@brokariim.space {/ Social icons */} Whatsapp Instagram Discord Linkdln Tiktok ); } Credit •⁠ ⁠3d icon : https://www.figma.com/community/file/1015485067395949509

Jan 21, 2025 - 05:23

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

// Detect dark theme var iframe = document.getElementById('tweet-1881554286825689489-253'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1881554286825689489&theme=dark" }

Source Code

footer-animation.tsx

import { Send } from "lucide-react";

export function Footer() {
  return (
    <>
        
          
            {/* Email section */}
            
              
              
                hello@brokariim.space
              
            

            {/* Social icons */}
            
              
                
                  
                
                Whatsapp
              
              
                
                  
                
                Instagram
              
              
                
                  
                
                Discord
              
              
                
                  
                
                Linkdln
              
              
                
                  
                
                Tiktok
              
            
          
        
    
  );
}