Smart Stack

.widget {
  width: 160px;
  height: 160px;
  overflow: clip;
  background: red;
  border-radius: 2rem;
}

.smart-stack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: 100%;
  scroll-snap-type: x mandatory;

  & .slide {
    view-timeline: --slide inline 30%;

    & .slide-content {
      animation: slide cubic-bezier(0, 0.5, 1, 0.5) both;
      animation-timeline: --slide;
      animation-range: cover;
    }
  }
}

.slide {
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.slide-content {
  width: 100%;
  height: 100%;
  background: blue;
  border-radius: 2rem;
}

@keyframes slide {
  0% {
    scale: 0.8;
  }
  50% {
    scale: 1;
  }
  100% {
    scale: 0.8;
  }
}

<div class="widget">
  <BlossomCarousel class="smart-stack">
    <div class="slide">
      <div class="slide-content"></div>
    </div>
    <div class="slide">
      <div class="slide-content"></div>
    </div>
    <div class="slide">
      <div class="slide-content"></div>
    </div>
    ...
  </BlossomCarousel>
</div>

.smart-stack {
  & .slide {
    view-timeline: --slide inline 30%;

    & .slide-content {
      animation: slide cubic-bezier(0, 0.5, 1, 0.5) both;
      animation-timeline: --slide;
      animation-range: cover;
    }
  }
}

@keyframes slide {
  0% {
    scale: 0.8;
  }
  50% {
    scale: 1;
  }
  100% {
    scale: 0.8;
  }
}

<div class="size-40 aspect-square overflow-clip bg-primary/30 rounded-xl">
  <BlossomCarousel
    class="smart-stack snap-x snap-mandatory grid! grid-flow-col auto-cols-[100%] h-full"
  >
    <div class="size-full snap-center snap-always">
      <div class="size-full rounded-lg bg-primary rounded-xl"></div>
    </div>
    <div class="size-full snap-center snap-always">
      <div class="size-full rounded-lg bg-primary rounded-xl"></div>
    </div>
    <div class="size-full snap-center snap-always">
      <div class="size-full rounded-lg bg-primary rounded-xl"></div>
    </div>
    ...
  </BlossomCarousel>
</div>