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

PropTypeDefault
imagesArray of image URLs to cycle through.
string[][]
imageWidthThe width of the individual trail images (px).
number200
imageHeightThe height of the individual trail images (px).
number200
thresholdDistance in pixels the cursor must move before a new image is added.
number50
durationTotal duration in seconds for the entire trail animation timeline.
number1.6

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv

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>
  )
}