Tilt Card Spotlight

Overview

I built this component to understand how cursor position can drive multiple animations simultaneously. The goal was to create a card that feels responsive by combining 3D tilt, subtle translation, and a dynamic spotlight that follows the cursor.

Rather than treating these as separate effects, I wanted to learn how a single source of input—the mouse position—could control every animation in sync.

Learning

While building this component, I had one important realization.

Whenever I'm building an animation that depends on the cursor position, the first thing I need to do is find the center of the element I'm animating.

If the animation happens inside the element, I also need to shift the (0, 0) coordinate from the browser's default top-left corner to the center of the element.

Once I have that, I can animate almost any value using useTransform.

Here's the code I used to calculate the center:

const { clientX, clientY } = e;

const { left, top, width, height } =
  cardRef.current.getBoundingClientRect();

const mouseXBasedOnBox = clientX - left;
const mouseYBasedOnBox = clientY - top;

const xPct = mouseXBasedOnBox / width - 0.5;
const yPct = mouseYBasedOnBox / height - 0.5;

I subtract 0.5 because mouseXBasedOnBox / width gives a value between 0 and 1. By subtracting 0.5, I shift that range to -0.5 to 0.5, making the center of the element become (0, 0) instead of the browser's default top-left corner. This makes it much easier to create natural cursor-based animations.

Inspiration

I learned this technique from this lesson by Manu Arora.