# [Next.js] Creating a card component with 3D hover effect

<iframe width="560" height="315" src="https://www.youtube.com/embed/Hd1XyhQNqMI?si=eaLBSYGyZVd2pAiB"></iframe>

In today's article, we will dive deep into the process of creating a card component with an impressive 3D hover effect, as demonstrated in the video above.

First we need to create a Next.js project using `npx create-next-app` . Next, we need to create the `Card.jsx` component, which will be placed inside the `./app/components/` folder. This component will be responsible for rendering the card and applying the 3D hover effect. Below is my projects's folder structure,

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724774250882/a1ef65bc-2b1e-4868-8489-108ac84909e6.png align="center")

### Card.jsx

Here's the complete code for the card component

```javascript
"use client";
import { useState, useRef } from "react";

const Card = () => {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const cardRef = useRef(null);

  const handleMouseMove = (e) => {
    const rect = cardRef.current.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
    const y = ((e.clientY - rect.top) / rect.height - 0.5) * -2;
    setMousePos({ x: x * 15, y: y * 15 });
  };

  const handleMouseLeave = () => {
    setMousePos({ x: 0, y: 0 });
  };

  return (
    <section className="cursor-pointer group perspective-100  mt-28">
      <div
        ref={cardRef}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        style={{
          transform: `rotateY(${mousePos.x}deg) rotateX(${mousePos.y}deg)`,
          transition: "transform 0.2s ease-out",
        }}
      >
              <div className="w-[600px] h-[400px] rounded-xl shadow-lg  transition-transform duration-500 ease-out group-hover:scale-105 bg-white/10 backdrop-blur-lg border border-green-400 flex items-center justify-center">
                  <h1 className="text-white text-7xl">3D hover effect</h1>
        </div>
      </div>
    </section>
  );
};

export default Card;
```

The above code defines the `Card` component in React, utilizing `useState` and `useRef` hooks to create a 3D hover effect. The `useRef` hook initializes `cardRef`, which references the card's DOM element. The `useState`hook, `mousePos`, manages the card's rotation angles based on mouse movement.

`handleMouseMove` calculates the mouse's position relative to the card's bounding rectangle. The `x` and `y`values are computed to determine how far the cursor is from the card's center, normalized between -1 and 1, and **then multiplied by 15 to control the intensity of the effect.** This data updates `mousePos`, which dynamically adjusts the card's CSS `transform` property to create a smooth 3D tilt effect.

When the mouse leaves the card area, `handleMouseLeave` resets the rotation angles to 0, returning the card to its original position. The card itself is styled with Tailwind CSS classes, providing dimensions, rounded corners, shadows, and a blur effect. The text inside the card is centered using `flex` utilities. **The** `"use client"` **directive ensures that this component runs on the client side, enabling interactivity and dynamic visual effects like the hover transformation.**

<mark>Tip : You can adjust the intensity of the hover effect by changing the value -&gt; 15 in, </mark> `setMousePos({ x: x * 15, y: y * 15 });`

✯ ***You can also change the styles to suit your preferences.***

### page.jsx

Here's the code for the `page.jsx` .

```javascript
import Card from "@/app/components/Card";

const Blogs = () => {
  return (
    <section className="flex flex-col items-center">
      <div>       
          <Card />
      </div>
    </section>
  );
};

export default Blogs;
```

You've reached the end of the article. I hope you found the information valuable and learned something new along the way. If you have any questions or need further clarification on any of the topics discussed, please don't hesitate to reach out. Additionally, feel free to explore other articles on my site to continue expanding your knowledge. Thank you for taking the time to read.

I will look forward to sharing more insights with you in future articles. Happy Coding 😊!!!