Image trail

Use it for

• Portfolio or listing heroes that should preview many images at once
• Campaign pages with a strong photo set

Avoid

• Over copy people need to read, since photos stack on top
• Image sets that are slow to load, which makes the trail stutter

How it works

A pool of twelve image tiles is reused round robin. On pointermove the distance from the last drop is measured and a tile is placed only once the pointer has travelled about a ninth of the stage width, so the spacing stays even at any speed. Each drop plays a Web Animations keyframe set (scale in, hold, drift down and fade) on transform and opacity, and a rising z-index keeps the newest on top.

Accessibility

Tiles are aria-hidden and ignore pointer events. Touch moves are ignored so pages still scroll; with no pointer input a virtual pointer sweeps a wave across the stage, which also covers phones. Reduced motion shows a still fan of photos and runs no loop.