Cover Flow

Apple's Cover Flow rebuilt on scroll snap and per-item view timelines — covers rotate through 3D as you scroll, no JavaScript.

scroll-driven

PreviewCode

<!-- Gradient tiles stand in for cover art — swap each inner <div> for your own <img>. -->
<ul
  class="cover-flow flex w-full max-w-2xl snap-x snap-mandatory items-center overflow-x-auto scroll-smooth overscroll-x-contain py-28 [--cover-size:10rem] [padding-inline:calc(50%-var(--cover-size)/2)] [scrollbar-width:none] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-scrollbar]:hidden"
  tabindex="0"
  aria-label="Album covers"
>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#6366f1,#d946ef)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Neon Tides</span>
      <span class="text-xs text-white/70">Halcyon</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#f59e0b,#ef4444)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Golden Hour</span>
      <span class="text-xs text-white/70">Ember</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#10b981,#0ea5e9)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Deep Current</span>
      <span class="text-xs text-white/70">Meridian</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#ec4899,#8b5cf6)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Velvet Static</span>
      <span class="text-xs text-white/70">Lull</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#f97316,#dc2626)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Signal Fire</span>
      <span class="text-xs text-white/70">Kestrel</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#06b6d4,#2563eb)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Blue Arc</span>
      <span class="text-xs text-white/70">Tessellate</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#14b8a6,#4f46e5)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Afterglow</span>
      <span class="text-xs text-white/70">Novaline</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#a855f7,#ec4899)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Midnight Bloom</span>
      <span class="text-xs text-white/70">Solace</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#22c55e,#eab308)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Fever Pitch</span>
      <span class="text-xs text-white/70">Marigold</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#0ea5e9,#6366f1)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Cold Static</span>
      <span class="text-xs text-white/70">Polar</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#f43f5e,#f97316)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Coral Reef</span>
      <span class="text-xs text-white/70">Sunder</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#8b5cf6,#06b6d4)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Glass Horizon</span>
      <span class="text-xs text-white/70">Vantage</span>
    </div>
  </li>
  <li class="w-[var(--cover-size)] shrink-0 snap-center">
    <div
      draggable="false"
      class="flex aspect-square w-full flex-col justify-end rounded-xl bg-[linear-gradient(135deg,#eab308,#84cc16)] p-4 shadow-lg select-none"
    >
      <span class="text-sm font-semibold text-white">Citrus Dream</span>
      <span class="text-xs text-white/70">Verdant</span>
    </div>
  </li>
</ul>

+ required CSS — this part genuinely can't be expressed as utilities (the page explains why)

/* The 3D flow: @keyframes + view-timeline have no utility form. Behind @supports,
   so unsupported engines keep the flat snap row. See the docs for the how and why. */

@keyframes cf-adjust-z-index {
  0% {
    z-index: 1;
  }
  50% {
    z-index: 100;
  }
  100% {
    z-index: 1;
  }
}

@keyframes cf-rotate-cover {
  0% {
    transform: translateX(-100%) rotateY(-45deg);
  }
  35% {
    transform: translateX(0) rotateY(-45deg);
  }
  50% {
    transform: rotateY(0deg) translateZ(1em) scale(1.5);
  }
  65% {
    transform: translateX(0) rotateY(45deg);
  }
  100% {
    transform: translateX(100%) rotateY(45deg);
  }
}

@supports (animation-timeline: --t) {
  .cover-flow li {
    view-timeline-name: --cf-item;
    view-timeline-axis: inline;
    perspective: 40em;
    animation: cf-adjust-z-index linear both;
    animation-timeline: --cf-item;
  }

  .cover-flow li > div {
    animation: cf-rotate-cover linear both;
    animation-timeline: --cf-item;
    -webkit-box-reflect: below 0.4em linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.25));
  }

  /* scroll-driven animations ignore the global reduced-motion duration clamp */
  @media (prefers-reduced-motion: reduce) {
    .cover-flow li,
    .cover-flow li > div {
      animation: none;
    }
  }
}

How it works

The base is utilities only: snap-x snap-mandatory overflow-x-auto on the list, snap-center shrink-0 on each cover. That scrolls, snaps, and works everywhere — swipe, trackpad, arrow keys. [padding-inline:calc(50%-var(--cover-size)/2)] gives the first and last covers enough room to reach dead-center.
Each <li> declares its own scroll-driven view-timeline (--cf-item, inline axis) that runs 0 → 100% as the cover crosses the track. Two animations bound to it via animation-timeline do the work: cf-rotate-cover on the inner cover and cf-adjust-z-index on the <li> so the centered cover stacks above its neighbors.
The 3D is perspective: 40em on the <li> plus rotateY/translateZ/scale on the cover: side covers rotate 45° away, the centered one straightens, scales up, and pulls forward.
The transform runs on the inner cover <div>, never the <li>. Rotating the <li> changes its layout box, which changes the scroller’s total length and makes the whole row flicker as it scrolls. The <li> stays a static box and only carries the perspective.
The mirror is -webkit-box-reflect — a Blink/WebKit-only, purely decorative reflection that simply doesn’t render elsewhere.

Why the CSS block

@keyframes, view-timeline, and the animation-timeline binding have no utility syntax, so they live in a CSS block. It’s scoped behind @supports (animation-timeline: --t), so the block is optional: skip it and you keep a working scroll-snap row of covers.

Accessibility

The covers are a plain scrollable list. Each tile carries a visible text label, so it has an accessible name; swap the gradient tiles for <img> with real alt text for your own art.
The track is tabindex="0" with a focus outline, so it’s keyboard-focusable and the arrow keys scroll it; snap-center keeps parking a cover in the middle.
What’s missing versus the JS original: no click-a-cover-to-center, and no drag or momentum. Those need JavaScript, so this is scroll- and keyboard-driven only.

The fallback story

Without scroll-driven animations (Firefox stable, older Safari) the covers stay in a flat, horizontal scroll-snap row — fully scrollable and still snapping to center, just without the 3D flow.
Outside Blink/WebKit the reflection is absent; nothing else changes.
Under prefers-reduced-motion: reduce the flow drops to the same flat row. The global reduced-motion rule only clamps animation duration, which a scroll-driven animation ignores, so the demo disables the rotation explicitly.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Scroll-driven animations (view-timeline / timeline-scope)Limited availability	116	116	✕	26	WebKit/Chromium show a plain secondary track with no filled portion; Firefox still fills natively via ::-moz-range-progress. The slider stays fully usable — only the progress-style fill is missing.

† The badge tests animation-timeline as a stand-in — the range fill also needs view-timeline, timeline-scope and @property, which all shipped together with scroll-driven animations in every engine that has them.