Browse components
Image Trail
Photos pop in along the cursor path, then drift, shrink and fade away.
Image Trail
Move your cursor around
Installation
npx shadcn@latest add @glint-ui/image-trailFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/image-trail.json
Usage
import { ImageTrail } from "@/components/ui/image-trail";
<ImageTrail images={["/a.jpg", "/b.jpg", "/c.jpg"]} className="h-96 w-full" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | — | Image URLs, spawned in order. |
| children | ReactNode | — | Content shown above the trail area. |
| threshold | number | 60 | Px of cursor travel between spawns. |
| size | number | 150 | Image width in px. |
| duration | number | 1100 | Lifetime of each image in ms. |
| rotation | number | 10 | Max random tilt in degrees. |
| className | string | — | Extra classes for the root element. |