Animated Credit Card with Next.js and Tailwind

I remember a good few years ago I saw an app or website where a loyalty card was displayed and it tilted and animated as you moved your cursor around. I was still new in the tech scene at that point and I was blown away! I completely forgot about it only until recently and decided to recreate it for fun. So join me in creating this small but neat animation!

Github repo can be found here

Setup

I’ll start with a new Next.js app with Tailwind and Typescript. Once that’s installed, we only need to add one dependency with the following command:

yarn add react-tilt

React-tilt is a wrapper around the Tilt.js library that’ll do the heavy lifting for us. Next we’ll be using some SVG icons that you can find in the Github repo at the bottom of this article.

Credit Card component

Now we get to the main part, we’ll create a new folder called components. In our new folder, let’s create a file called CreditCard.tsx. This is the destination of our component where we’ll insert the following snippet:

"use client";

import Image from "next/image";
import { Tilt } from "react-tilt";
import { Share_Tech_Mono } from "next/font/google";

const shareTechMono = Share_Tech_Mono({
  weight: "400",
  subsets: ["latin"],
});

export const CreditCard = () => {
  return (
    <Tilt
      className={`${shareTechMono.className} w-[425px] h-[270px] bg-gradient-to-tr rounded-2xl flex content-center items-center justify-center from-[#9C2CF3] to-[#3A49F9]`}
    >
      <div className="p-8 w-full h-full">
        <div className="relative w-full h-full">
          <Image
            className="absolute"
            alt=""
            src="/mastercard.svg"
            width={70}
            height={24}
          />
          <Image
            className="absolute right-0 bottom-0 top-0 my-auto"
            alt=""
            src="/chip.svg"
            width={60}
            height={30}
          />
          <div className="flex flex-col w-full h-full justify-end gap-4">
            <p className="text-2xl">4242 4242 4242 4242</p>
            <div className="flex gap-28">
              <p className="text-lg uppercase">John Doe</p>
              <p className="text-lg uppercase">10/24</p>
            </div>
          </div>
        </div>
      </div>
    </Tilt>
  );
};

Now there are a few things to unwrap here. First we’ll use the use client directive from Next.js because react-tilt won’t work otherwise. Next I’m importing a font of my choosing that somewhat resembles a credit card.

And then we get to our actual component. As you can see it’s pretty simple, we just use the Tilt component from react-tilt and pass in some styling. I hardcoded the width and height, but feel free to adjust it, or the colours too.

Inside the Tilt component I just added the icons for our app which are just a chip and a Mastercard logo. Below the the images in the div I just display the card details like card number, card holder name and expiration date.

Finish up

Now that we have our component created, the only thing that’s left is to import it in our page and display it. Let’s go to our pages/index.tsx file and add the following snippet:

import { CreditCard } from "./components/CreditCard";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <CreditCard />
    </main>
  );
}

This will import and display our credit card in the middle of the screen. Now all that’s left is for you to hover around and check out that animation! Pretty slick if I might say so!

And that brings the end of this short article, I hope it was useful and you enjoyed it! If you need, here is the GitHub repo.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture
• More content at PlainEnglish.io