Gallery 3D

`<pura-gallery-3d>` arranges the slotted items (usually images) around a 3D cylinder inside a perspective scene — the awwwards ring gallery. Grab and throw it to spin: drag math runs only on pointermove events, and the release glides out with the throw's velocity via a single CSS transition on the ring transform, so there is no rAF loop. The `auto` attribute spins the ring slowly (one lap per `--pura-g3d-speed`, default 40s) until the first grab. The cylinder radius defaults to a value computed from item width and count so the faces just clear each other; override with `radius`. Before JS runs the items render in a flat row, so SSR never shows a broken ring. Reduced motion disables the auto spin and the release glide; dragging still works. Each instance registers in `window.__puraGallery3ds` by `data-pura-id` with `{ count, angle, spinTo }`.

Preview

<!-- drag to spin; auto spins until first grab -->
<pura-gallery-3d auto style="height: 60vh;">
  <img src="/work/01.jpg" alt="Project one" style="width: 240px;" />
  <img src="/work/02.jpg" alt="Project two" style="width: 240px;" />
  <img src="/work/03.jpg" alt="Project three" style="width: 240px;" />
  <img src="/work/04.jpg" alt="Project four" style="width: 240px;" />
  <img src="/work/05.jpg" alt="Project five" style="width: 240px;" />
</pura-gallery-3d>

<!-- fixed radius, faster drag -->
<pura-gallery-3d radius="520" sensitivity="0.5" style="height: 60vh;">
  …
</pura-gallery-3d>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/gallery-3d.js"></script>

import "./pura/lib/gallery-3d.js";