Animated Work Card using Typescript, Tailwind and Framer Motion

This project showcases dynamic work card components built with TypeScript, Tailwind CSS, and Framer Motion. The cards feature a subtle, engaging animation: a gradient subtly appears on hover, and the image tilts, enhancing user interaction.

Live 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 & Libraries

The work-card.tsx component leverages UI libraries like shadcn (for the card structure) and 21st.dev (for the impressive glow effect). The glow effect from 21st.dev is particularly noteworthy and worth exploring further on their website.

work-card.tsx Code Snippet:

<code class="language-typescript">
<card className="group relative w-[800px] rounded-3xl p-8 border-none overflow-hidden bg-[#f5f5f5] mb-10">
  <glow className="group-hover:opacity-100 opacity-0" variant="top"></glow>
  <div className="relative z-10">
    {/* Logo and </code>

The above is the detailed content of Animated Work Card using Typescript, Tailwind and Framer Motion. For more information, please follow other related articles on the PHP Chinese website!