INTERACTION_007

Mouse Spotlight Card.

Pointer coordinates are written to CSS custom properties and a radial-gradient overlay tracks them, giving dark cards a sense of physical material.

CATEGORY: Cards
COMPLEXITY: Intermediate
TECH: CSS + JS
PLATFORM: Desktop
PERFORMANCE: Light

LIVE PLAYGROUND

SPOTLIGHT

Move the cursor across this surface.

CSS / CSS

.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 350ms ease;
  background: radial-gradient(320px circle at var(--x) var(--y),
              rgba(255, 255, 255, 0.09), transparent 70%);
}
.spotlight:hover::before { opacity: 1; }

JavaScript / JS

card.addEventListener("pointermove", (e) => {
  const r = card.getBoundingClientRect();
  card.style.setProperty("--x", `${e.clientX - r.left}px`);
  card.style.setProperty("--y", `${e.clientY - r.top}px`);
});

IF YOU LIKE THIS, STEAL THESE TOO.

All effects

CARD_01

INTERACTION_006CSS

Premium Card Lift

4px elevation with border brightening.

Cards / LightView

BORDER BEAM

INTERACTION_011CSS

Animated Border

A light travels the perimeter of the container.

Cards / MediumView

TILT / 6°

INTERACTION_008CSS + JS

3D Tilt Card

Perspective tilt that responds to pointer position.

Cards / MediumView

INTERACTION_003CSS + JS

Magnetic Button

Subtle cursor-following CTA interaction.

Buttons / LightView