Tilt and glare card

Use it for

• Membership, pricing or collectible cards that should feel physical
• A single hero card or product shot

Avoid

• Grids of many cards, where every tile wobbling is tiring
• Cards with small text that becomes hard to read at an angle

How it works

The pointer position over the card is mapped to the range -1 to 1 on each axis. A requestAnimationFrame loop eases toward it and writes CSS variables for rotateX and rotateY (up to 14 degrees) under a 900px perspective, plus the glare position and strength. The glare is a white radial gradient blended with soft-light. On leave the target returns to zero and the loop stops once the card is flat.

Accessibility

The card content is plain text and stays readable at the small maximum angle. Touch input is ignored so scrolling works; until a mouse is used the card sways gently on its own, which covers phones. Reduced motion keeps the card flat with a fixed glare, and the loop pauses off screen.