Animated Work Card using Typescript, Tailwind and Framer Motion

Simple work card components that brings your projects to life. As users hover over the card, a subtle gradient fades in from the top corner while the image tilts slightly, creating a dynamic and engaging effect. Demo // Detect dark theme var iframe = document.getElementById('tweet-1880625972871049553-409'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1880625972871049553&theme=dark" } Source Code I used several UI libraries like shadcn for the card.tsx and 21st.dev for the Glow.tsx component. If you're curious about the glow effect, check it out on 21st.dev—it's a must-see! work-card.tsx {/* Logo and Title /} Simple {/ Description /} From classic elegance to moddern innovation, this watch are crafted to elevate your style . {/ Images Container */}

Jan 18, 2025 - 16:03

Animated Work Card using Typescript, Tailwind and Framer Motion

Simple work card components that brings your projects to life. As users hover over the card, a subtle gradient fades in from the top corner while the image tilts slightly, creating a dynamic and engaging effect.

Demo

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

Source Code

I used several UI libraries like shadcn for the card.tsx and 21st.dev for the Glow.tsx component. If you're curious about the glow effect, check it out on 21st.dev—it's a must-see!

work-card.tsx

 
          
          
            {/* Logo and Title */}
            
              
                
              
              Simple
            

            {/* Description */}
            From classic elegance to moddern innovation, this watch are crafted to elevate your style .

            {/* Images Container */}