Cursor ImageTrail

mouse trail component with animated image effects on hover.

previewcode

v2

Hover me

Installation

npx scrollx-ui@latest add 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

• children (ReactNode, required)
  Content that triggers the image trail effect when hovered.

• images (string[], required)
  Array of image paths to use in the trail.

• renderImageBuffer (number, required)
  Minimum pixel distance between consecutive image renders (controls trail density).

• rotationRange (number, required)
  Maximum rotation angle (in degrees) applied to images.

• animationStyle ("dynamic" | "minimal", default: "dynamic")
  Animation variant:

  • "dynamic": Complex animations .
  • "minimal": Simpler animations without complex transforms.