Kinesis2.0
Esc

Try “tilt”, “reveal”, “drag”, or “reduced motion”.

← All examples

Spotlight cards

A glow follows the pointer. Kinesis writes its position, a CSS gradient draws the light.

Fast

Nothing runs while nothing moves.

Yours

Your transforms stay untouched.

Small

About 14 KB, gzipped.

Hover the cardsEdit
.spotlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-content: center;
  height: 100%;
  padding: 28px;
}

.spot-card {
  --k-track: pointer;
  --k-when: hover;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / calc(0.08 + var(--k-progress) * 0.25));
  background:
    radial-gradient(
      260px circle at calc(var(--k-pointer-x) * 100%) calc(var(--k-pointer-y) * 100%),
      rgb(120 160 255 / calc(var(--k-progress) * 0.35)),
      transparent 65%
    ),
    #0c1324;
  color: #eef2ff;
}

.spot-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.spot-card p {
  margin: 0;
  color: #a3aec8;
  font-size: 14px;
}

Uses