Shrinking Sticky Header

<!-- Sticky header title shrinks as the body scrolls beneath it -->
<div class="nuda-sd2-shrink__scroller">
  <header class="nuda-sd2-shrink__header">
    <span class="nuda-sd2-shrink__title">Dashboard</span>
  </header>
  <div class="nuda-sd2-shrink__body">
    <p>Row one</p>
    <p>Row two</p>
  </div>
</div>

.nuda-sd2-shrink {
  height: 160px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
  background: #09090b;
}

.nuda-sd2-shrink__scroller {
  height: 100%;
  overflow: auto;
}

.nuda-sd2-shrink__header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .7rem 1rem;
  background: #09090b;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nuda-sd2-shrink__title {
  display: inline-block;
  color: #fafafa;
  font-weight: 800;
  font-size: 1.05rem;
  transform-origin: 0 50%;
  animation: nuda-sd2-shrink-title linear;
  animation-timeline: scroll(nearest);
}

.nuda-sd2-shrink__body {
  padding: .4rem 1rem 1.4rem;
  color: #a1a1aa;
  font-size: .78rem;
  line-height: 1.8;
}

.nuda-sd2-shrink__body p {
  margin: 0 0 .9rem;
}

@keyframes nuda-sd2-shrink-title {
  to {
    transform: scale(.7);
  }
}

@supports not (animation-timeline:scroll()) {
  .nuda-sd2-shrink__title {
    transform: scale(.85);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sd2-shrink__title {
    animation: none;
    animation-timeline: none;
    transform: scale(1);
  }
}