Scatter Trail
A physics-based mouse trail that calculates pointer velocity to dynamically throw, slide, and spin images across the screen like dealing casino cards.
Last Modified:Aug 17, 2026
Install
CLI
scatter-trail
Or install a specific demo variant:
scatter-trail-avatars-demo
Or install a specific demo variant:
scatter-trail-images-demo
Manual
1. Add Source Code
Note: This component utilizes pure DOM manipulation and RequestAnimationFrame logic. No external libraries are required.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrls | string[] | [] | Array of image URLs to randomly spawn. |
distance | number | 40 | Distance the pointer must move (in pixels) before spawning a new item. |
duration | number | 1500 | The total lifespan of a spawned item in milliseconds. |
maxItems | number | 20 | Maximum items on screen before forcing the oldest to fade out. |
itemSize | number | 100 | The base pixel size of the image cards. |
slideMultiplier | number | 120 | Multiplier for the throw distance based on mouse velocity. Higher = further. |
maxSlide | number | 400 | Absolute maximum pixels a card can slide to prevent flying off screen. |
scatterSpread | number | 0.7 | How wide the angle of randomization is when a card is thrown (in radians). |
className | string | undefined | Standard Tailwind classes for the fixed wrapper. |
itemClassName | string | "" | Standard Tailwind classes applied to the individual image wrappers. |