Kaleidoscope Trail
A geometrically mapped mouse trail that mirrors spawned elements around the center axis, creating mesmerizing, symmetrical kaleidoscope mandalas based on cursor position.
Last Modified:Aug 17, 2026
Install
CLI
kaleidoscope-trail
Or install a specific demo variant:
kaleidoscope-trail-avatars-demo
Or install a specific demo variant:
kaleidoscope-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 cluster. |
duration | number | 2000 | The total lifespan of a spawned item in milliseconds. |
maxGroups | number | 12 | Maximum number of clusters on screen before forcing the oldest to exit. |
mirrors | number | 6 | How many reflections to create around the center (e.g., 6 = Hexagon). |
itemSize | number | 90 | 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. |