Cursor ImageTrail

mouse trail component with animated image effects on hover.

Installation

npx shadcn@latest add @scrollxui/cursorimagetrail

Usage

import CursorImageTrail from '@/components/ui/cursorimagetrail';

<CursorImageTrail
  renderImageBuffer={50}
  rotationRange={25}
  animationStyle='dynamic'
  images={Array.from({ length: 16 }, (_, i) => `/images/active/${i + 1}.jpg`)}
>
  <section className='grid h-screen w-full place-content-center bg-white text-black dark:bg-black dark:text-neutral-200 antialiased'>
    <p className='flex items-center gap-2 text-5xl font-extrabold uppercase tracking-wide transition-colors duration-500'>
      <MousePointer className='w-10 h-10' />
      <span>Hover me</span>
    </p>
  </section>
</CursorImageTrail>

API Reference

CursorImageTrail

The CursorImageTrail component creates an interactive mouse trail effect with animated images. It tracks mouse movement and renders images along the cursor path with configurable animation styles.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	Trigger content for the image trail on hover.
`images`	string[]	`required`	Array of image URLs used in the trail.
`renderImageBuffer`	number	`required`	Minimum pixel distance between image renders.
`rotationRange`	number	`required`	Maximum rotation (in degrees) for trail images.
`animationStyle`	"dynamic" \| "minimal"	`"dynamic"`	Controls animation complexity of the trail.