Stage

`<pura-stage>` is a viewport-tall, internally-scrollable box whose slotted children are full-height sections. Add the `snap` attribute and it becomes a scroll-snap container: each scroll lands on the next section, one screen at a time, the fullpage feel, driven entirely by native CSS scroll snapping (`scroll-snap-type` + `scroll-snap-align: start` + `scroll-snap-stop: always`) with no per-frame JS. Because the box is its own scroll container, any scrub child inside a section that uses `timeline="scroll"` (such as `pura-type-morph`, `pura-morph`, `pura-draw`) binds to the stage's scroll rather than the page's, so a shape can morph as its section scrolls in. `scroll(nearest)` resolves across the shadow boundary to this box. Use `axis="x"` for a horizontal section row, and `height` to size the box (default `100vh`). The element exposes `scrollToSection(i)`, `next()`, `prev()`, and an `index` getter, and fires `stage-change` when the settled section changes, so keyboard nav and agents can drive it. Each instance registers in `window.__puraStages` by `data-pura-id`.

Preview

<!-- fullpage: snap one section per scroll -->
<pura-stage snap>
  <section>Intro</section>
  <section>Features</section>
  <section>Pricing</section>
</pura-stage>

<!-- a section whose shape morphs as the stage scrolls -->
<pura-stage snap>
  <section style="display:grid;place-items:center">
    <pura-morph timeline="scroll"
                from="M 14 14 L 86 14 L 86 86 L 14 86 Z"
                to="M 50 6 L 94 50 L 50 94 L 6 50 Z"
                style="width:240px;height:240px"></pura-morph>
  </section>
  <section>Next</section>
</pura-stage>

<!-- horizontal section row, snap on proximity -->
<pura-stage snap="proximity" axis="x" height="60vh">
  <section>Panel A</section>
  <section>Panel B</section>
</pura-stage>

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

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