Image Trail
Pro
Moving the pointer drops a trail of tiles that pop in, then fade and fall away.
Move across the canvas
Each stretch of the path drops a new tile.
Customize
80px
1s
10
Variant
Installation
Image Trail is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy image-trail.tsx into components/ui and run npm install motion.
Usage
import { ImageTrail } from "@/components/ui/image-trail";
<ImageTrail items={["/shots/1.jpg", "/shots/2.jpg", "/shots/3.jpg"]} variant="tilt" className="h-96">
<h2>Our work</h2>
</ImageTrail>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | (ReactNode | string)[] | — | Tiles to drop along the path, in order. Strings are read as image URLs; anything else is rendered as is. |
| spacing | number | 80 | Pointer travel between two tiles, in pixels. |
| lifetime | number | 1 | How long each tile lives, in seconds. |
| maxVisible | number | 10 | Most tiles on screen at once. The oldest fades out early. |
| size | number | 120 | Tile size, in pixels. |
| variant | "pop" | "tilt" | "pop" | Flat tiles, or tiles that lean toward the direction of travel. |
| children | ReactNode | — | Content of the area, drawn under the tiles. |
| className | string | — | Extra classes for the area, such as its size. |
Dependencies: motion