About this experiment
<cursor-trail> is a self-contained custom element that
drops images along the path of the pointer. It throttles by distance, so
slow movements don't pile images up — the faster you move, the
richer the trail.
The placeholder photos here come from
picsum.photos. Swap them for any
images by editing the images attribute.
Usage
<script src="/assets/js/cursor-trail.js" defer></script>
<cursor-trail
min-distance="90"
max-images="7"
image-life="850"
image-size="260"
images='["/a.jpg","/b.jpg","/c.jpg"]'>
<div slot="overlay">Foreground content</div>
</cursor-trail>Attributes
images- JSON array (or comma-separated list) of image URLs.
min-distance- Pixels the pointer must travel before the next image spawns. Default
80. max-images- Maximum concurrent images on screen. Default
8. image-life- Milliseconds before an image starts fading out. Default
900. image-size- Width in pixels of each spawned image. Default
240.