Hover Image Trails

When the user moves their mouse across a designated canvas, a trail of images rapidly pops up and fades away following the cursor path. This effect is extremely popular on high-end photography portfolios and creative agency websites. Now with 5 animation effects and performance-capped trails.

Live Preview

Installation

Props

Effects

| Effect | Animation | Feel | |---|---|---| | pop | Scale burst in/out | Classic, snappy | | rotate | Direction-aware random rotation | Organic, playful | | stretch | Horizontal squeeze → settle | Elastic, dynamic | | glitch | Clip-path wipe reveal | Digital, edgy | | wave | Spring-based upward float | Dreamy, buoyant |

How It Works

The component tracks cursor position via onPointerMove. When the distance from the last spawn exceeds distanceThreshold, it calculates the movement angle and velocity, then spawns a new trail image at that position. Each effect uses these physics values for direction-aware animations. A maxTrails cap ensures DOM node count stays bounded. Images auto-remove after fadeDuration via setTimeout.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { HoverImageTrails } from "@/components/creative/hover-image-trails";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { HoverImageTrails } from "@/components/creative/hover-image-trails";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <HoverImageTrails
      >
        <div>Content goes here</div>
      </HoverImageTrails>
    </div>
  );
}