DEV Community

Cover image for Animated Work Card using Typescript, Tailwind and Framer Motion
Bro Karim
Bro Karim

Posted on • Edited on

1 1 1 1 1

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>
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more