Build a 3D Tilted Card in React

Flat cards sit on a page. Tilted cards reach out from it. The moment a card responds to your cursor in three dimensions, it stops feeling like a UI element and starts feeling like an object.

The final result

Hover over the card and move your cursor around. Adjust the tilt intensity and glare:

Setting up

This component uses only React built-ins:

import { useRef, useState } from 'react';

Step 1: Define the props

interface TiltedCardProps {
  children: React.ReactNode;
  className?: string;
  maxTilt?: number;
  scale?: number;
  perspective?: number;
  glareEnable?: boolean;
  glareMaxOpacity?: number;
}

Step 2: Track the cursor angle

On mousemove, calculate where the cursor is relative to the card center, then map to rotation values. X maps to rotateY and vice versa.

Step 3: Add the glare overlay

A linear gradient rotates to follow the cursor, creating a light sweep effect. Try different tilt intensities:

Step 4: Reset on mouse leave

Both transform and glare reset smoothly thanks to CSS transitions. No spring library needed.

Key takeaways

• Putting perspective inside the transform string means each card has its own vanishing point.
• CSS transitions handle the return animation automatically.
• overflow-hidden on the wrapper keeps the glare gradient contained.