Docs·Image Trail

Image Trail

Leaves a beautiful, premium track of images behind the cursor. Powered by GSAP for buttery smooth animations.

Installation

pnpm dlx shadcn@latest add @componentry/image-trail

Usage

API Reference

PropertyTypeDefault
images

Array of image URLs to cycle through.

string[][]
imageWidth

The width of the individual trail images (px).

number200
imageHeight

The height of the individual trail images (px).

number200
threshold

Distance in pixels the cursor must move before a new image is added.

number50
duration

Total duration in seconds for the entire trail animation timeline.

number1.6

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

Scientific Discovery

Move your cursor across the space to reveal the hidden knowledge stream.

trail element 1trail element 2trail element 3trail element 4trail element 5trail element 6trail element 7trail element 8
import { ImageTrail } from "@/components/ui/image-trail"
const myImages = [
  "https://example.com/image1.jpg",
  "https://example.com/image2.jpg",
  "https://example.com/image3.jpg",
]

export function Hero() {
  return (
    <div className="relative w-full h-[600px] overflow-hidden bg-black">
      <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
        <h1 className="text-4xl font-bold text-white">DISCOVERY</h1>
      </div>
      <ImageTrail 
        images={myImages}
        imageWidth={250}
        imageHeight={320}
        threshold={50}
        duration={1.6}
      />
    </div>
  )
}