Step 1: Base only

This is the plain printed card image.

If this were a real card, this is the version before any holographic laminate is added.

What is rendered

• .cardBase only (the main artwork image)

3D tilt (same on every step)

• The inner .card has data-parallax="true", so CSS applies perspective plus rotateX / rotateY, a little translate, and scale from custom properties (--rotate-x, --rotate-y, etc.).
• On pointer move, the code maps your cursor to a position inside the card (0–100%), eases those values in a requestAnimationFrame loop, then writes the variables on the element. Tilting feels smooth because the numbers catch up to the pointer instead of snapping each frame.

Stable rim

• Pointer math runs on a non-tilting wrapper (.cardHit) with a transparent border for extra hit area—so the math doesn’t wobble at the edge when the card tilts.