Kinesis2.0
Esc

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

← All examples

Dock

Icons grow and rise under the pointer. A near reaction with --k-scale and --k-y.

Slide your pointer along the dockEdit
.dock-scene {
  display: grid;
  place-items: end center;
  height: 100%;
  padding-bottom: 36px;
}

.dock {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 22px;
  background: rgb(255 255 255 / 0.7);
  box-shadow: 0 20px 40px -20px rgb(12 19 36 / 0.35);
}

.dock__icon {
  --k-when: near;
  --k-axis: x;
  --k-radius: 120px;
  --k-scale: 1.65;
  --k-y: -14px;
  --k-motion: snappy;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, hsl(var(--hue) 90% 66%), hsl(calc(var(--hue) + 40) 85% 52%));
  transform-origin: 50% 100%;
}

Uses