Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect.

As the pointer moves across the area, images are emitted along its path — each pops in, tilts toward the direction of travel, then drifts up and fades. Move your cursor across the frame below.

Playground

Move your cursor

Images trail the pointer and drift away.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/image-trail.json"

ImageTrail keeps a fixed, recycled pool of <img> elements and drives every spawn with the Web Animations API and direct style writes — no React re-render per pointer move, so it stays smooth even at high cursor speed. A new image is only emitted once the pointer has travelled threshold pixels from the last one, which gives even spacing regardless of speed.

Usage

tsx

import { ImageTrail } from "@/components/godui/image-trail";

tsx

<ImageTrail images={images} className="grid h-[26rem] place-items-center">
  <h2>Move your cursor</h2>
</ImageTrail>

Tuning the trail

tsx

<ImageTrail
  images={images}
  threshold={48} // tighter spacing
  duration={900} // longer-lived images
  size={220}
  max={16} // larger pool for fast cursors
/>

Accessibility

When prefers-reduced-motion is set, the trail is disabled and a calm static gallery of the images is shown instead. Trail images are decorative (aria-hidden), so place real content as children.

Props

Prop	Type	Default	Description
`images`	`string[]`	—	Images cycled through as the pointer moves.
`threshold`	`number`	`64`	Minimum pointer distance (px) between two spawned images.
`duration`	`number`	`750`	Lifespan of each trail image, in ms.
`max`	`number`	`12`	Maximum images alive at once (the recycled DOM pool size).
`size`	`number`	`180`	Width/height of each trail image, in px.

ImageTrail also forwards every standard <div> attribute to the root element.

Image Trail