Kinesis2.0
Esc

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

← All examples

Repel field

96 dots move away from the pointer, grow, and turn blue. One CSS rule.

Sweep your pointer through the dotsEdit
.dots {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  place-items: center;
  height: 100%;
  padding: 28px;
}

.dots i {
  --k-repel: 26px;
  --k-radius: 110px;
  --k-when: near;
  --k-scale: 1.8;
  --k-background: #2f6bff;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b4bfd6;
}

Uses