Kinesis2.0
Esc

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

← All examples

Heads that turn

Heads turn to face the pointer in 3D. The eyes sit in front of the face.

Move your pointer around the headsEdit
.heads {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.heads__head {
  --k-look: 35deg;
  --k-radius: 320px;
  --k-motion: soft;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 104px;
  border-radius: 30px;
  background: linear-gradient(160deg, #ffd166, #ff9f43);
}

.heads__head span {
  --k-depth: 24px;
  width: 12px;
  height: 18px;
  border-radius: 6px;
  background: #0c1324;
}

Uses