Prism Deck is a collection of interactive cards that simulate real-world physical properties—including depth, glare reflection, and magnetic pull.
3D Tilt Math
By measuring the mouse pointer's relative position inside the card container bounding box, we compute tilt angles along the $X$ and $Y$ axes:
typescript
const rect = cardRef.current.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const rotateY = ((x / rect.width) - 0.5) * 30; // Max 30 deg rotation
const rotateX = (0.5 - (y / rect.height)) * 30;This creates a highly tactile feel, especially when paired with a dynamic gloss element that slides opposite to the tilt direction, simulating realistic surface glare.