Immersive 3D Tilt Card Modal

We accept flatness in web interfaces as a constraint, but it is merely a habit. This component breaks the fourth wall, transforming a static modal into a tangible, digital artifact. By coupling mouse physics with deep perspective, we create an interaction that feels less like clicking a link and more like holding a rare collectable.

Core Technique

The illusion of volume is not achieved through WebGL, but through the precise orchestration of CSS transforms and GSAP optimization. We utilize transform-style: preserve-3d to maintain spatial integrity, while the “riser” elements construct a geometric bezel using CSS transforms to simulate physical thickness. Crucially, the mouse interaction relies on gsap.quickSetter, bypassing the DOM’s layout thrashing to deliver buttery smooth 60fps tracking even on high-refresh displays.

Customization

The physics engine is exposed for fine-tuning - adjusting the inertia alters the “weight” of the card. The visual logic is decoupled from the geometry; simply update the data-attributes in your HTML grid to instantly propagate distinct themes, colors, and SVG assets into the 3D view.

// Physics Configuration
// ---------------------
// Adjusts the "lag" of the card following the mouse.
// Lower value (0.05) = Heavy, slow card.
// Higher value (0.3) = Light, snappy card.
const speed = 0.125; 

// Tilt Intensity
// ---------------------
// Inside the tiltSetter function:
const tiltSetter = () => {
  // ... calculation logic ...

  // 40 is the max rotation degree.
  // Reduce to 15 for a subtle, professional effect.
  // Increase to 60 for an extreme, playful effect.
  xSet((gsap.utils.normalize(0, wW, pos.x) - 0.5) * 40);
  ySet((gsap.utils.normalize(0, wH, pos.y) - 0.5) * -40);
};

Browser Support

This code relies on standard 3D CSS transforms and the GSAP library, ensuring excellent compatibility across all modern browsers.