Depth Trail

A cinematic mouse trail leveraging Z-depth mapping, focal blur, parallax shifting, and atmospheric lighting to simulate a rich, dense 3D space.

Last Modified:Aug 17, 2026

Install

depth-trail

$pnpm dlx shadcn@latest add https://ui.satisium.com/r/depth-trail.json

Or install a specific demo variant:

depth-trail-avatars-demo

$pnpm dlx shadcn@latest add https://ui.satisium.com/r/depth-trail-avatars-demo.json

Or install a specific demo variant:

depth-trail-images-demo

$pnpm dlx shadcn@latest add https://ui.satisium.com/r/depth-trail-images-demo.json

1. Add Source Code

Note: This component utilizes pure DOM manipulation and RequestAnimationFrame logic. No external libraries are required.

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`	`2000`	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`	`90`	The base pixel size of the image cards.
`rotationRange`	`number`	`25`	Maximum random rotation (in degrees) applied to the cards.
`className`	`string`	`undefined`	Standard Tailwind classes for the fixed wrapper.
`itemClassName`	`string`	`""`	Standard Tailwind classes applied to the individual image wrappers.