Pointer Parallax

`<pura-pointer-parallax>` is the Atropos-style hover parallax: each slotted layer carries a `data-depth` number and translates in its own direction and intensity as the pointer moves across the surface, so foreground layers (positive depth) chase the pointer while background layers (negative depth) drift away, creating 3D depth. Unlike `<pura-tilt>`, which rotates the whole block, nothing rotates here: the depth illusion comes purely from layered translation inside a `perspective` scene. Tracking is event-driven, `pointermove` writes `--pura-pp-x`/`--pura-pp-y` on the host and each layer applies `translate3d(calc(offset * depth * strength))` in CSS, no rAF loop. On leave the layers spring back to center with a sampled spring `linear(...)` easing, same mechanism as `<pura-tilt>` and `<pura-magnetic>`. Layers are stacked into the same grid cell, so SSR and pre-JS paint a flat, centered composition; under `prefers-reduced-motion` the pointer logic never binds. Each instance registers in `window.__puraPointerParallaxs` by `data-pura-id` with `{ strength, axis, reset }`, and `data-pura-pp-active` mirrors hover state for agents and styling.

Preview

<!-- hero card: background drifts away, title and badge chase the pointer -->
<pura-pointer-parallax strength="20">
  <img data-depth="-0.5" src="/photos/landscape.jpg" alt="Landscape" />
  <h2 data-depth="1" style="display: grid; place-items: center; pointer-events: none;">Explore</h2>
  <span data-depth="1.8" class="badge" style="pointer-events: none;">New</span>
</pura-pointer-parallax>

<!-- subtle horizontal-only parallax with a gentle spring settle -->
<pura-pointer-parallax strength="10" axis="x" preset="gentle">
  <img data-depth="-1" src="/photos/sky.jpg" alt="" />
  <img data-depth="0.6" src="/photos/foreground.png" alt="" style="pointer-events: none;" />
</pura-pointer-parallax>

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

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