Scroll Zoom

`<pura-scroll-zoom>` is the Apple-style scroll zoom: the slotted image or video starts small and rounded in the middle of the viewport and grows to full bleed as you scroll, tied 1:1 to a scroll-driven timeline (`animation-timeline: view()`), so no per-frame JS runs. The frame animates `scale` and `border-radius`; the slotted media just fills it with `object-fit: cover`. `from` sets the starting scale, `range` the scroll window over which the zoom happens, and `--pura-scroll-zoom-radius` the starting corner radius. SSR, browsers without scroll-driven timelines, and reduced motion all render the media at full size. Each instance registers in `window.__puraScrollZooms` by `data-pura-id` with `{ from }`.

Preview

<!-- image grows from 50% to full-bleed as it crosses the viewport -->
<pura-scroll-zoom style="height: 100vh;">
  <img src="/photos/hero.jpg" alt="Hero" />
</pura-scroll-zoom>

<!-- subtler zoom over a longer scroll window -->
<pura-scroll-zoom from="0.75" range="cover 0% cover 100%" style="height: 80vh;">
  <video src="/reel.mp4" autoplay muted loop playsinline></video>
</pura-scroll-zoom>

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

import "./pura/lib/scroll-zoom.js";