Framer Motion NextJs : Create a 3D Card For Your WebApp

In modern web development, creating engaging, interactive experiences is key to improving user retention and boosting SEO performance. One way to achieve this is by incorporating 3D animations into your web app. In this guide, we’ll show you how to build a 3D interactive card in Next.js using Framer Motion, a powerful React animation library. By leveraging Framer Motion with Next.js, you can create smooth, high-performance animations that improve your site’s overall user experience.

Why Use Framer Motion Nextjs?

Framer Motion is a highly flexible animation library that allows you to build complex animations with minimal code. When combined with Next.js, a popular React framework for server-side rendering, the resulting web applications can provide both an engaging user experience and optimal SEO performance.

If you’re using Next.js for your web app, Framer Motion is an ideal choice for adding interactive UI elements like hover effects, page transitions, and 3D animations. In this tutorial, we’ll focus on creating a 3D hover card effect.

Step 1: Installing Framer Motion Nextjs

To get started, you need to install Framer Motion in your Next.js project. You can do this using npm:

npm install framer-motion

Once installed, import the necessary modules into your App.jsx (or index.jsx) file:

import { motion, useMotionValue } from 'framer-motion';
import './App.css';

Step 2: Implementing the 3D Hover Effect

The core of our 3D animation relies on the useMotionValue hook from Framer Motion, which allows us to track the card’s rotation based on the user’s mouse position. This interaction is handled in the handleMouseMove function:

This code calculates the position of the mouse relative to the center of the card and adjusts the rotation along the X and Y axes accordingly.

Step 3: Adding Framer Motion Animations

Next, we use the motion.div component to apply the 3D animation to our card. The style attribute dynamically updates the rotation, while the whileHover and whileTap properties add interactivity:

The motion.div component ensures that the card tilts and scales in response to the user’s mouse movements, creating a smooth, 3D hover effect.

App.jsx

import './App.css'
import { motion, useMotionValue } from 'framer-motion'

function App() {
  const rotateX = useMotionValue(0);
  const rotateY = useMotionValue(0);

  const handleMouseMove = (e) => {
    const { clientX, clientY, currentTarget } = e;
    const { left, top, width, height } = currentTarget.getBoundingClientRect();
    const x = clientX - left - width / 2;
    const y = clientY - top - height / 2;
    const rotateXValue = (y / height) * -30;
    const rotateYValue = (x / width) * 30;
    rotateX.set(rotateXValue);
    rotateY.set(rotateYValue);
  };

  return (
    <div className="container" onMouseMove={handleMouseMove}>
      <motion.div
        className="card"
        style={{ rotateX, rotateY }}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
      >
        <div className="card-layer layer1">
          <h2>3D Card</h2>
        </div>
        <div className="card-layer layer2">
          <p>..........................................</p>
        </div>
      </motion.div>
    </div>
  )
}

export default App

Step 4: Styling the 3D Card with CSS

To enhance the 3D effect, we apply CSS properties such as perspective and preserve-3d to the card. These properties allow the card to maintain its 3D depth and animate smoothly.

App.css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 10px 20px  rgb(133, 133, 133);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
  color: black;
  position: relative;
}

.card-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.layer1 {
  transform: translateZ(20px);
}

.layer2 {
  transform: translateZ(10px);
}

.card h2, .card p {
  margin: 0;
  padding: 10px;
  text-align: center;
}

This CSS provides structure and ensures that the card’s 3D animation effect is clearly visible to the user.

Why Framer Motion is Perfect for Next.js SEO

Using Framer Motion in Next.js not only enhances user engagement but also contributes to better SEO performance. Here’s why:

1. Interactive UX: By creating engaging, interactive elements like 3D cards, users spend more time on your page, improving dwell time—a crucial factor in SEO.
2. Server-Side Rendering: With Next.js, you can leverage server-side rendering (SSR), ensuring that search engines properly index your content and interactive elements.
3. Optimized for Performance: Framer Motion provides smooth animations that are lightweight and optimized for performance, which is essential for improving page load times—another important SEO ranking factor.