Coverflow Carousel

`<pura-coverflow>` is a coverflow carousel: a horizontal scroll-snap row where the side slides rotate, scale and recede in 3D perspective around the centered slide. Each slotted slide is tied 1:1 to its own inline view progress (`animation-timeline: view(inline)`), so the 3D pose updates live while you drag, with zero per-frame JS. `rotate`, `scale`, `depth` and `perspective` shape the pose; `--pura-coverflow-slide` sets the slide width (default 62%) and `--pura-coverflow-gap` the spacing. The viewport is keyboard navigable (Left/Right when focused) and exposes `seek(i)`, `next()` and `prev()`; `change` fires with the active index. SSR, browsers without scroll-driven timelines, and reduced motion all degrade to a flat, fully usable scroll-snap carousel. Each instance registers in `window.__puraCoverflows` by `data-pura-id`.

Preview

<!-- image coverflow: drag or use Left/Right keys, side slides tilt in 3D -->
<pura-coverflow label="Gallery">
  <img src="/photos/one.jpg" alt="One" />
  <img src="/photos/two.jpg" alt="Two" />
  <img src="/photos/three.jpg" alt="Three" />
</pura-coverflow>

<!-- card deck with a stronger pose: more tilt, deeper push-back, smaller sides -->
<pura-coverflow rotate="60" depth="220" scale="0.75" perspective="800"
  style="--pura-coverflow-slide: 45%; --pura-coverflow-gap: 0.25rem;">
  <article class="card">Slide 1</article>
  <article class="card">Slide 2</article>
  <article class="card">Slide 3</article>
  <article class="card">Slide 4</article>
</pura-coverflow>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/coverflow.js"></script>

import "./pura/lib/coverflow.js";