Slinky Trail
An interconnected, continuous spring-physics mouse trail that simulates a slinky or snake chasing the pointer.
Last Modified:Aug 17, 2026
Install
CLI
slinky-trail
Or install a specific demo variant:
slinky-trail-avatars-demo
Or install a specific demo variant:
slinky-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
Unlike the other trails that spawn and recycle items based on a timeline, the Slinky Trail pre-allocates a continuous, fixed-length chain of nodes that are permanently active on screen.
As the pointer moves, "Node 0" calculates a spring-physics lerp to chase the pointer, "Node 1" calculates a spring to chase "Node 0", and so on. This creates an uninterrupted chain reaction calculated and rendered cleanly on the GPU at 60fps.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrls | string[] | [] | Array of image URLs to render. |
maxItems | number | 12 | Total number of cards in the continuous chain. |
itemSize | number | 110 | The base pixel size of the image cards. |
stiffness | number | 0.3 | How tight the spring is. Lower = looser/longer snake, Higher = tighter/shorter snake |
className | string | undefined | Standard Tailwind classes for the fixed wrapper. |
itemClassName | string | "" | Standard Tailwind classes applied to the individual image wrappers. |