ImageTrail
image-trailSpawns a fading sequence of images along fast pointer movement.
Usage
Basic usage
Pass in the images list, drag the cursor inside the container, and the pictures will be thrown out along the trajectory and then fade out.
<div className="relative h-72 overflow-hidden rounded-xl">
<ImageTrail images={images} />
</div>Dense tailing
Adjust the size of threshold to make the image output more frequent, and use the size of imageWidth to produce dense tailing.
<ImageTrail
images={images}
threshold={40}
imageWidth={120}
/>Large sparse image · Slow fade out
Increase the size of threshold and imageWidth to create a larger picture, and lengthen fadeDuration to stay longer.
<ImageTrail
images={images}
threshold={140}
imageWidth={240}
fadeDuration={1.2}
/>When to Use
Use it to place a sequence of supplied images along the pointer path, such as portfolio thumbnails or product shots in a landing-page hero. Use GhostCursor for an abstract smoke trail instead. The root is a relative overflow-hidden capture region, and images is required.
Import
import { ImageTrail } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| images* | string[] | — | A list of image URLs that appear in sequence (recycled); at least 1 image, 6–12 images recommended |
| threshold | number | 80 | The threshold (px) of the cursor cumulative displacement to trigger the next picture, the smaller, the denser and more frequent |
| imageWidth | number | 190 | Single picture width (px), height is automatically derived according to the aspect ratio of 1.1 |
| followStrength | number | 0.5 | Following interpolation coefficient 0–1, the larger it is, the tighter it is, and the smaller it is, the stickier it is |
| fadeDuration | number | 0.8 | The duration of a single picture from appearing to fading out (seconds) |
| className | string | — | Root container (relative+overflow-hidden capture layer) additional className |
| style | CSSProperties | — | Forward the root container inline style |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content covered above the trailing layer (such as title copy) |
Usage Guidelines
imagesmust contain at least one URL; an empty array produces no trail.- Remote images may be restricted by cross-origin policies. The library showcase uses inline SVG data URIs; prefer local or same-origin assets in production.
- The root container needs to have a clear height +
overflow-hidden, otherwise the thrown image will overflow the container.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative h-72 overflow-hidden rounded-xl"
style={{ background: "oklch(0.16 0.02 255)" }}>
<ImageTrail
images={images}
threshold={80}
imageWidth={190}
followStrength={0.5}
fadeDuration={0.8}
className="border-0 bg-transparent"
/>
</div>