Cursor trail effect that spawns images along it's path.
npx atelier-ui add image-trailimport { ImageTrail } from "@/components/ImageTrail"const PHOTOS = ["/img/1.jpg", "/img/2.jpg", "/img/3.jpg"]
<ImageTrail
data={PHOTOS}
renderItem={(src) => (
<img src={src} className="w-20 h-20 rounded-lg object-cover" />
)}
/>const PHOTOS = ["/img/1.jpg", "/img/2.jpg", "/img/3.jpg"]
const containerRef = useRef<ComponentRef<"div">>(null)
<div ref={containerRef} className="w-100 h-100">
<ImageTrail
data={PHOTOS}
renderItem={(src) => (
<img src={src} className="w-20 h-20 rounded-lg object-cover" />
)}
/>
</div>| Name | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Array of items. |
| renderItem | (item: T) => ReactNode | — | Render function called for each items. |
| spawnDistance | number | 120 | Distance in pixels before spawning an item. |
| driftAmount | number | 60 | How far each item drifts from its spawn point in px. |
| removeDelay | number | 1.2 | Seconds before a spawned item is removed. |
touch-action: none to avoid scroll interference on mobile.spawnDistance for mobile to account for shorter drag distances.Motion
React animation library.