Container Scroll

`<pura-container-scroll>` is the famous 3D flatten hero: the slotted screenshot or card starts tilted back in perspective (`rotateX`) and flattens, grows and lifts until it faces the viewer as the page scrolls, tied 1:1 to a scroll-driven timeline (`animation-timeline: view()`), so no per-frame JS runs. An optional `header` slot drifts up in sync. It complements `<pura-scroll-zoom>`, which only scales the media without perspective rotation. `tilt` sets the starting rotateX, `from` the starting scale, `lift` the final upward translate, and `range` the scroll window. Tokens: `--pura-container-scroll-perspective`, `--pura-container-scroll-radius`, `--pura-container-scroll-shadow`. SSR paints the tilted starting pose; browsers without scroll-driven timelines and reduced motion render a static flat card. Each instance registers in `window.__puraContainerScrolls` by `data-pura-id` with `{ tilt, from, lift }`.

Preview

<!-- app screenshot flattens from a 20deg tilt to face-on as it scrolls in -->
<pura-container-scroll style="height: 90vh;">
  <h2 slot="header">Unleash the power of scroll</h2>
  <img src="/screenshots/dashboard.png" alt="Product dashboard" />
</pura-container-scroll>

<!-- stronger tilt, smaller start, over a longer scroll window -->
<pura-container-scroll tilt="32" from="0.75" lift="40" range="cover 0% cover 100%" style="height: 80vh;">
  <video src="/reel.mp4" autoplay muted loop playsinline></video>
</pura-container-scroll>

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

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