cardsIntermediate3d

Tilt Card

A glassy card that tilts in 3D toward the cursor.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a 3D tilt card: glassmorphism background, on mousemove rotate the card around X and Y axes proportionally to the cursor position. Use perspective and transform-style: preserve-3d so child elements parallax in depth.

Code

html

<!--
  Source: Josh W. Comeau
  https://x.com/JoshWComeau
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/tilt-card
-->
<article class="tilt"><h3>Tilt Card</h3><p>Hover and drag your mouse across to see the parallax.</p></article>