Parallax Columns

`<pura-parallax-columns>` lays the slotted images out as a grid and splits them into columns that translate in opposite directions as you scroll, the Aceternity Parallax Scroll move done with native scroll-driven animations: the host carries a named view timeline and each column (selected by nth-child math) scrubs its own `translateY` drift on it, so the multi-track orchestration that `<pura-parallax>` (one element, one speed factor) cannot express runs with zero per-frame JS. Drift magnitude cycles through fixed per-column factors, so neighbouring columns also move at slightly different speeds. The `hero` attribute switches on the Hero Parallax variant: a perspective wrapper tilts the whole grid with `rotateX` and fades it in over the entry range. `columns` sets the track count, `shift` the drift distance, `range` the scroll window. SSR, browsers without scroll-driven timelines, and reduced motion all render a static grid. Each instance registers in `window.__puraParallaxColumnss` by `data-pura-id` with `{ columns, hero, shift }`.

Preview

<!-- three columns drifting in opposite directions as the grid scrolls by -->
<pura-parallax-columns columns="3" shift="140px">
  <img src="/gallery/01.jpg" alt="Studio" />
  <img src="/gallery/02.jpg" alt="Process" />
  <img src="/gallery/03.jpg" alt="Detail" />
  <img src="/gallery/04.jpg" alt="Texture" />
  <img src="/gallery/05.jpg" alt="Light" />
  <img src="/gallery/06.jpg" alt="Material" />
</pura-parallax-columns>

<!-- hero variant: the grid enters tilted in perspective and fades in -->
<pura-parallax-columns hero columns="4" shift="100px"
  style="--pura-parallax-columns-tilt: 18deg; --pura-parallax-columns-perspective: 1000px;">
  <img src="/work/a.jpg" alt="Project A" />
  <img src="/work/b.jpg" alt="Project B" />
  <img src="/work/c.jpg" alt="Project C" />
  <img src="/work/d.jpg" alt="Project D" />
  <img src="/work/e.jpg" alt="Project E" />
  <img src="/work/f.jpg" alt="Project F" />
  <img src="/work/g.jpg" alt="Project G" />
  <img src="/work/h.jpg" alt="Project H" />
</pura-parallax-columns>

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

import "./pura/lib/parallax-columns.js";