Interactive 3D Effects

Interactive 3D effects respond to what the user is doing in real time, not on scroll but on mouse movement, cursor hover, or device tilt. The site feels alive because it is reacting to the visitor directly.

This lesson covers three interactive effects: mouse-tracking parallax, 3D card tilt, and a cursor-reactive spotlight glow.

Effect 1: Mouse Tracking Parallax

What it looks like: as the user moves their mouse across the screen, multiple layers of content move at different speeds creating a sense of depth. The background moves least, a middle object moves more, and foreground elements respond the most. Your eyes interpret this as real depth, the same way a nearby window frame moves more than the distant sky when you tilt your head.

This uses CSS 3D transforms with no Three.js required.

The prompt for this effect:

• Add a mouse-tracking parallax effect to this page.
• Use pure CSS and vanilla JavaScript with no Three.js.

SETUP:

Track mouse X and Y position across the document.

Convert the position to a -1 to 1 range where 0,0 is the centre of the screen.

THREE PARALLAX LAYERS:

Layer 1 — Background (the body background or a background image):

• Moves by mouseX multiplied by 10px on X and mouseY multiplied by 10px on Y.
• This is the least movement.

Layer 2 — Mid layer (a decorative element such as a large geometric SVG or blurred shape):

Moves by mouseX multiplied by 25px on X and mouseY multiplied by 25px on Y.

Layer 3 — Foreground (the main heading text block):

• Moves by mouseX multiplied by 5px on X and mouseY multiplied by 5px on Y.
• Subtle float effect.

APPLY MOVEMENT:

Use transform: translate3d(X, Y, 0) on all layers for hardware acceleration.

Use CSS transition: transform 0.1s ease-out on all layers for slight lag that feels natural.

RESULT: As the mouse moves each layer responds at a different speed

creating an illusion of depth between the layers.

Effect 2: 3D Card Tilt

What it looks like: each card on the page tilts in three dimensions as the cursor moves across it. The card appears to be a physical object that responds to where you are looking at it from. A subtle highlight or sheen moves across the card surface to reinforce the illusion.

This uses CSS 3D transforms and a small JavaScript event listener.

The prompt for this effect:

Add a 3D tilt effect to every card on this page.

JAVASCRIPT:

Add a mousemove event listener to each element with class .card

On mouse move, calculate the cursor position relative to the card centre as a

percentage from -0.5 to 0.5.

Apply a CSS transform to the card: perspective(800px) rotateY(Xdeg) rotateX(Ydeg) where:

• rotateY is based on horizontal cursor offset: cursorX multiplied by 20 degrees,

capped at a maximum of 15 degrees in either direction

• rotateX is based on vertical cursor offset: cursorY multiplied by -20 degrees,

capped at a maximum of 15 degrees

On mouseleave, reset the card transform to perspective(800px) rotateY(0) rotateX(0)

with a transition of 0.5s ease to return it smoothly.

HIGHLIGHT EFFECT:

Inside each card add a div with class card-shine:

position: absolute, inset: 0, pointer-events: none

As the cursor moves over the card, update the shine element background:

• radial-gradient(circle at Xpx Ypx, rgba(255,255,255,0.15), transparent 60%)
• where X and Y are the cursor position relative to the card.

CSS:

• Cards need transform-style: preserve-3d and will-change: transform for smooth rendering.
• transition: transform 0.1s ease for responsive feel during movement.

Add box-shadow that increases on hover to reinforce the lift:

0 20px 60px rgba(0,0,0,0.3)

Effect 3: Cursor Glow and Spotlight

What it looks like: as the cursor moves across the page a soft radial glow follows it. The background appears dark and the glow illuminates the area around the cursor as if the visitor is holding a torch over the page.

This uses a CSS radial-gradient that updates with the cursor position with no library required.

The prompt for this effect:

Add a cursor spotlight effect to this page.

JAVASCRIPT:

Track mousemove events on the document.

On each event get the cursor X and Y position using e.clientX and e.clientY.

Update CSS custom properties on the body:

• document.body.style.setProperty('--cursor-x', e.clientX + 'px')
• document.body.style.setProperty('--cursor-y', e.clientY + 'px')

CSS:

On the body ::before pseudo-element create a full-screen overlay:

body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;

background: radial-gradient(

600px circle at var(--cursor-x) var(--cursor-y),

rgba(120, 80, 255, 0.08),

transparent 60%

);
}

Adjust the glow colour rgba(120, 80, 255, 0.08) to match your accent colour.

The 600px circle controls the size of the spotlight. Increase the value for a

larger softer glow.

Add will-change: background to the ::before element to hint to the browser that

this property changes frequently.

Combining effects

These effects can be layered on the same page. A page can have a Three.js particle background as a fixed canvas behind content, a cursor spotlight on top of the page content, and 3D tilt on the cards simultaneously.

They operate at different z-index layers and use different interaction systems so they do not conflict with each other.

If you want all three on one page, describe them all in a single prompt rather than building one and patching in the others. Claude will architect the interaction systems cleanly from the start when given the full picture.

Performance notes

Mouse interaction fires extremely frequently, up to 60 events per second as the cursor moves. Always use requestAnimationFrame inside event handlers that update 3D scene properties, or throttle the event. Claude handles this when you specify "smooth, high-performance" in your prompt.

If you notice lag after building, send Claude this: "The mouse-tracking effect is causing the page to lag. Throttle the mouse event using requestAnimationFrame so the 3D update only runs once per frame, not on every pixel of mouse movement."