Scroll Pin

`<pura-pin>` is a ScrollTrigger pin. The section pins itself with `position: sticky` while you scroll past it and scrubs its panels horizontally as it stays pinned, the gsap horizontal-scroll move done entirely with native scroll-driven animations: a `view-timeline` on the outer container drives a `translateX` keyframe on the track. There is no IntersectionObserver, no scroll listener, no per-frame JS. Each slotted child is one full-viewport panel; the number of panels sets the scroll length and the horizontal travel maps scroll progress to `translateX(0 .. -(n-1) * 100vw)`. Where scroll timelines are unsupported, or reduced motion is set, the panels fall back to a snap-scrollable horizontal row that stays fully usable. SSR-safe. Each instance registers in `window.__puraPins` by `data-pura-id` with `{ panels, native }`.

Preview

<pura-pin>
  <section>Panel 1</section>
  <section>Panel 2</section>
  <section>Panel 3</section>
</pura-pin>

<!-- The section pins and the three full-viewport panels scrub left as you
     scroll. No JS config: the panel count drives the scroll length. -->

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

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