Interactive 3D Glassmorphism Card Component in React | Tilt Effect & Copy Button

Modern websites often use interactive UI components to make the user experience more engaging. One popular design trend is glassmorphism, where elements use transparency, blur effects, subtle borders, shadows, and gradients to create a glass-like appearance.

In this article, we will understand how to build a reusable GlassCard component in React with several interactive features, including a 3D tilt effect, dynamic glare, image presentation, author information, and a copy-code button.

1. Creating a Reusable React Component

The component is created inside GlassCard.jsx and receives its data through React props.

const GlassCard = ({
  image,
  badge,
  category,
  readTime,
  title,
  description,
  author,
  date,
  snippet,
}) => {

Instead of hardcoding values inside the component, properties such as title, description, author, and image are passed from the parent component.

This makes the component reusable. For example, the same GlassCard component can display a React article, Java article, JavaScript tutorial, or any other type of content simply by passing different props.

2. Using useRef() for DOM Manipulation

The component imports useRef from React:

import { useRef } from "react";

Three references are created:

const cardRef = useRef(null);
const glareRef = useRef(null);
const buttonRef = useRef(null);

useRef() allows us to maintain a reference to a DOM element without causing a React re-render when its value changes.

Here, the references are used for three purposes:

• cardRef → controls the card's 3D transformation.

• glareRef → controls the dynamic glare effect.

• buttonRef → changes the copy button's text and icon.

For example:

<div ref={cardRef} className="glass-card">

connects the React reference to the actual HTML element.

3. Creating the 3D Tilt Effect

One of the most interesting parts of this component is the mouse-based 3D tilt effect.

const handleMouseMove = (e) => {

Whenever the mouse moves over the card, the mouse coordinates are calculated relative to the card:

const rect = card.getBoundingClientRect();

const x = e.clientX - rect.left;
const y = e.clientY - rect.top;

The center of the card is then calculated:

const centerX = rect.width / 2;
const centerY = rect.height / 2;

The distance between the mouse position and the center determines how much the card should rotate.

const rotateX = ((y - centerY) / centerY) * -12;
const rotateY = ((x - centerX) / centerX) * 12;

Finally, the calculated values are applied using CSS transforms:

card.style.transform =
  `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

This produces the illusion that the card is physically following the user's mouse.

4. Adding the Dynamic Glare Effect

The component also contains a separate element for the glare:

<div ref={glareRef} className="card-glare"></div>

During mouse movement, the glare position follows the cursor:

glare.style.background =
  `radial-gradient(
    circle at ${x}px ${y}px,
    rgba(255,255,255,.18),
    transparent 60%
  )`;

This creates a radial light effect around the mouse pointer.

The glare is initially hidden using:

.card-glare {
  opacity: 0;
}

and becomes visible when the mouse enters the card:

glare.style.opacity = "1";

When the mouse leaves, the card returns to its original position:

cardRef.current.style.transform =
  "rotateX(0deg) rotateY(0deg)";

glareRef.current.style.opacity = "0";

5. Creating the Glassmorphism Design

The visual appearance of the card is mainly created with CSS.

.glass-card {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

The transparent background combined with backdrop-filter: blur() creates the glass-like effect.

The card also uses shadows:

box-shadow:
  0 20px 40px rgba(0, 0, 0, 0.6),
  inset 0 1px 0 rgba(255, 255, 255, 0.15);

This gives the card depth and separates it visually from the background.

The following property is particularly important for the 3D effect:

transform-style: preserve-3d;

It allows child elements to maintain their three-dimensional positioning.

For example:

.card-image-wrap {
  transform: translateZ(20px);
}

.card-content {
  transform: translateZ(30px);
}

These elements appear to move slightly closer to the user when the card tilts.

6. Making the Card Data-Driven

The component displays the values received through props:

<h2 className="card-title">{title}</h2>

<p className="card-description">
  {description}
</p>

The image is also dynamic:

<img src={image} alt={title} className="card-img" />

The badge, category, reading time, author, and date are also dynamically rendered.

This separation between data and presentation is one of the major advantages of React components.

7. Implementing the Copy Code Button

The card includes a button that copies the provided snippet to the clipboard.

await navigator.clipboard.writeText(snippet);

After copying the text, the button changes its appearance:

text.textContent = "Copied!";
icon.textContent = "✅";

btn.classList.add("copied");

After two seconds, it returns to its original state:

setTimeout(() => {
  text.textContent = "Copy Code";
  icon.textContent = "📋";
  btn.classList.remove("copied");
}, 2000);

The following line is also important:

e.stopPropagation();

It prevents the button click from propagating to parent elements that may have their own click handlers.

8. Using the Component in App.jsx

The component can now be used simply by providing its properties:

<GlassCard
  image="..."
  badge="⚡ React"
  category="📁 Components"
  readTime="⏱️ 5 min read"
  title="Reusable Glass Card"
  description="A reusable glassmorphism card component..."
  author="Rohan Kumar"
  date="Aug 5, 2026"
  snippet="npm install react"
/>

This demonstrates an important React principle: build once, reuse many times.

You could create multiple cards by simply changing the props:

<GlassCard
  title="Understanding useState"
  category="React"
  author="Rohan Kumar"
  ...
/>

<GlassCard
  title="Understanding useEffect"
  category="React"
  author="Rohan Kumar"
  ...
/>

No additional card component needs to be created.

Conclusion

This GlassCard component demonstrates several important React and frontend concepts in a single reusable UI component. It combines React props, useRef(), DOM manipulation, event handling, the Clipboard API, CSS 3D transforms, glassmorphism, gradients, transitions, and responsive UI design.

The biggest advantage of this approach is reusability. Instead of creating separate components for every article or tutorial, the same GlassCard can receive different data and display completely different content.

The component can also be extended further by adding features such as clickable cards, React Router navigation, favorite buttons, share buttons, loading states, responsive layouts, dark/light themes, and animations using libraries such as Framer Motion.

By combining React's component-based architecture with modern CSS effects, you can create interfaces that are both maintainable and visually engaging.