Velocity Trail
An intense, kinetic mouse trail that calculates real-time pointer speed to deform, stretch, and squeeze items along their trajectory.
Last Modified:Aug 17, 2026
Install
CLI
velocity-trail
Or install a specific demo variant:
velocity-trail-avatars-demo
Or install a specific demo variant:
velocity-trail-images-demo
Manual
1. Add Source Code
Note: This component utilizes pure DOM manipulation and RequestAnimationFrame logic. No external libraries are required.
Performance Architecture
The Velocity Trail operates by constantly tracking the pointer's pixel-per-millisecond displacement. By locking the rotation to the mouse trajectory curve and applying decoupled scaleX and scaleY transforms proportional to the pointer's speed, it creates a highly convincing "squash and stretch" kinetic effect entirely on the GPU.
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 | 800 | The total lifespan of a spawned item in milliseconds. |
maxItems | number | 15 | Maximum items on screen before forcing the oldest to fade out. |
itemSize | number | 96 | The base pixel size of the image cards. |
className | string | undefined | Standard Tailwind classes for the fixed wrapper. |
itemClassName | string | "" | Standard Tailwind classes applied to the individual image wrappers. |