Tilt Spotlight Card

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="tilt-card">
  <div class="tilt-card__spotlight"></div>
  <div class="tilt-card__avatar">JS</div>
  <h3 class="tilt-card__name">Jordan Sky</h3>
  <p class="tilt-card__role">Product Designer</p>
</div>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.tilt-card {
  position: relative;
  width: 240px;
  padding: 32px 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, #191925, #101018);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  overflow: hidden;
  transform: perspective(600px) rotateX(0deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
}
.tilt-card:hover {
  transform: perspective(600px) rotateX(6deg) rotateY(-4deg) translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(139, 92, 246, 0.35);
}
.tilt-card__spotlight {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.18), transparent 60%);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tilt-card:hover .tilt-card__spotlight {
  opacity: 1;
}
.tilt-card__avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 8px 20px -6px rgba(139, 92, 246, 0.6);
}
.tilt-card__name {
  margin: 0 0 4px;
  font-family: system-ui, sans-serif;
  font-size: 18px;
  color: #f4f4f5;
}
.tilt-card__role {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  color: #9a9aa5;
}