Tilt Card

<div class="nuda-tilt-card">
  <div class="nuda-tilt-card__inner">Tilt me</div>
</div>

/* Tilt Card — a 3D parallax tilt that leans toward the cursor. */
.nuda-tilt-card {
  --rx: 0deg;
  --ry: 0deg;
  perspective: 600px;
  width: 200px;
  height: 120px;
}

.nuda-tilt-card__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(228, 255, 84, 0.3);
  border-radius: 14px;
  background: linear-gradient(135deg, #16161c, #0c0c10);
  color: #e4ff54;
  font-weight: 700;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.7);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-tilt-card__inner { transform: none !important; transition: none; }
}

/* Tilt Card — vanilla JS
   Maps cursor position to rotateX/rotateY via CSS vars. */
(function () {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  var max = 14; /* max tilt in degrees */
  document.querySelectorAll(".nuda-tilt-card").forEach(function (card) {
    card.addEventListener("mousemove", function (e) {
      var r = card.getBoundingClientRect();
      var px = (e.clientX - r.left) / r.width - 0.5;
      var py = (e.clientY - r.top) / r.height - 0.5;
      card.style.setProperty("--rx", (-py * max).toFixed(2) + "deg");
      card.style.setProperty("--ry", (px * max).toFixed(2) + "deg");
    });
    card.addEventListener("mouseleave", function () {
      card.style.setProperty("--rx", "0deg");
      card.style.setProperty("--ry", "0deg");
    });
  });
})();