Kinesis2.0
Esc

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

← All examples

Arrows that point

Every needle points at the pointer and turns the short way.

Move your pointer across the gridEdit
.needles {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 18px;
  place-items: center;
  height: 100%;
  padding: 36px;
}

.needles__needle {
  /* The artwork points up. */
  --k-point: 0deg;
  --k-motion: bouncy;
  width: 6px;
  height: 36px;
  border-radius: 3px;
  background: linear-gradient(#2f6bff 50%, #c7d3ee 50%);
}

Uses