Kinesis2.0
Esc

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

← All examples

Tilt card with depth

Turns toward the pointer. Its contents float at different heights.

New

Depth, not decoration

Each layer sits at its own height above the card.

Move your pointer over the stageEdit
.tilt-scene {
  display: grid;
  place-items: center;
  height: 100%;
}

.tilt-card {
  --k-tilt: 14deg;
  --k-motion: soft;
  width: min(300px, 80%);
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(140deg, #2f6bff, #7c5cff);
  color: #fff;
  box-shadow: 0 40px 60px -30px rgb(47 107 255 / 0.7);
}

.tilt-card__badge {
  --k-depth: 70px;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  color: #2f6bff;
  font-size: 12px;
  font-weight: 700;
}

.tilt-card h3 {
  --k-depth: 45px;
  margin: 16px 0 6px;
  font-size: 26px;
  line-height: 1.1;
}

.tilt-card p {
  --k-depth: 25px;
  margin: 0;
  font-size: 15px;
  color: rgb(255 255 255 / 0.85);
}

Uses