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

Dependencies: gsap clsx tailwind-merge

Usage

API Reference

Prop	Type	Default
`images`	`string[]` Array of image URLs to cycle through.	`[]`
`imageWidth`	`number` The width of the individual trail images (px).	`200`
`imageHeight`	`number` The height of the individual trail images (px).	`200`
`threshold`	`number` Distance in pixels the cursor must move before a new image is added.	`50`
`duration`	`number` Total duration in seconds for the entire trail animation timeline.	`1.6`

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.

Scientific Discovery

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

trail element 1

trail element 2

trail element 3

trail element 4

trail element 5

trail element 6

trail element 7

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