Kinesis2.0
Esc

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

← All examples

Parallax layers

Each layer drifts by a different amount, which creates depth.

Somewhere quiet

Move your pointer over the sceneEdit
.layers {
  --k-motion: soft;
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#bcd4ff, #f1f5ff);
}

.layers > * {
  position: absolute;
}

.layers__sun {
  --k-parallax: -12px;
  top: 40px;
  right: 18%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ffcf5a;
}

.layers__far {
  --k-parallax: 18px 6px;
  inset: auto -10% 40px -10%;
  height: 150px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #8fb0f7;
}

.layers__near {
  --k-parallax: 44px 12px;
  inset: auto -15% -30px -15%;
  height: 130px;
  border-radius: 45% 55% 0 0 / 100% 100% 0 0;
  background: #3d6fe0;
}

.layers__title {
  --k-parallax: -26px -10px;
  inset: 34% 0 auto 0;
  margin: 0;
  text-align: center;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: #0c1324;
}

Uses