Image Trail

`<pura-image-trail>` is the awwwards image-trail hero: sweep the pointer across the zone and copies of the slotted images spawn under the cursor, pop in, hold, then drift up and fade out, cycling through the set in order. Slot the source `<img>` elements directly (they stay hidden and are only read for their `src`); put the visible content (the big headline) in `slot="content"` and the trail floats over it. Each spawned copy runs one WAAPI animation and removes itself, so nothing runs per frame — only pointermove events. Spawn cadence is distance-based (`step` px of pointer travel), each copy lives `life` ms, and at most `max` copies exist at once. Tilt and drift vary deterministically per spawn (no randomness). Reduced motion disables the trail entirely. Each instance registers in `window.__puraImageTrails` by `data-pura-id` with `{ images }`.

Preview

<pura-image-trail step="110" life="900" style="height: 80vh;">
  <!-- source images: hidden, cycled in order -->
  <img src="/work/01.jpg" alt="" />
  <img src="/work/02.jpg" alt="" />
  <img src="/work/03.jpg" alt="" />

  <!-- what the visitor sees; the trail floats over it -->
  <div slot="content">
    <h1>Studio Name</h1>
  </div>
</pura-image-trail>

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

import "./pura/lib/image-trail.js";