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

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

 <Card className="group relative w-[800px] rounded-3xl p-8 border-none overflow-hidden bg-[#f5f5f5] mb-10">
          <Glow variant="top" className="group-hover:opacity-100 opacity-0" />
          <div className="relative z-10">
            {/* Logo and Title */}
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
                <svg viewBox="0 0 24 24" className="w-5 h-5 text-white" fill="none" stroke="currentColor">
                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <span className="text-2xl font-semibold">Simple</span>
            </div>

            {/* Description */}
            <p className="text-gray-600 text-lg mb-8 max-w-2xl">From classic elegance to moddern innovation, this watch are crafted to elevate your style .</p>

            {/* Images Container */}
            <div className="flex w-full relative  justify-center gap-2 items-center transition-all duration-500 ease-in-out group-hover:translate-y-2">
              <div className=" w-2/5 aspect-[4/3] -rotate-6 grid place-items-center -bottom-28 border-4 border-white rounded-xl relative   shadow-lg ring-1 ring-border group-hover:-translate-x-5 group-hover:-rotate-12 group-hover:-translate-y-0.5 transition duration-500 group-hover:duration-200">
                <img
                  src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=2899&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  alt="Rachit Tank via unsplash"
                  className="w-full h-full object-cover rounded-xl"
                />
              </div>
              <div className="w-1/2 aspect-[4/3] grid place-items-center -bottom-20 rounded-xl border-4 border-white relative right-2.5   shadow-lg ring-1 ring-border group-hover:translate-x-5 group-hover:rotate-12 group-hover:-translate-y-0.5 transition duration-500 group-hover:duration-200">
                <img
                  src="https://images.unsplash.com/photo-1638095562082-449d8c5a47b4?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  alt="Howard Bouchevereau via unsplash"
                  className="w-full h-full object-cover rounded-xl border-4 border-white"
                />
              </div>
            </div>
          </div>
        </Card>

Author Of article : Bro Karim Read full article