Image Trail Effect
Interactive mouse trail effect that follows cursor movement with image elements. Features smooth lerp animations, dynamic z-index management, and GSAP-powered transitions.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | unsplashImages | Array of image URLs for the trail. |
| trailDistance | number | 100 | The distance in pixels between trail items. |
| className | string | undefined | Additional CSS classes for styling. |
When to Use
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an interactive 'Mouse Trail' aesthetic. Now supports custom image sets and adjustable trail distances via props.
Best Practices
Maintain consistent design by passing your own work through the `images` prop. Use the `trailDistance` prop to control how 'thick' or 'sparse' the mouse trail feels. Optimize for performance by using efficient GSAP lerp animations.
Why This Component Matters
Mouse-triggered image trails create a sense of direct engagement and playfulness. This production-ready UI template helps you build an interface that feels responsive and unique, turning a standard cursor into a tool for visual discovery.
FAQ
QHow were the images customized?
Use the `images` prop to pass an array of your own URLs. The component will cycle through them as the user moves their cursor.
QWhat does trailDistance do?
The `trailDistance` prop (default 100) sets the pixel delta required to trigger a new image spawn, allowing you to control the trail's density.
QCan I add custom styling?
Yes, use the `className` prop to apply additional CSS for positioning, borders, or specific z-index overrides within your layout.
Related Components
404 Page
Interactive 404 error page featuring a cinematic canyon layout with multi-layered parallax cacti. Built with SVG and custom mouse-tracking logic for a deep 3D immersive feel.
Dig Hole
Interactive video-based website with scroll-triggered reveals and smooth transitions. Features a cinematic video background with menu items that reveal content on scroll.
Image Slider
Advanced WebGL-powered image slider with shader-based transitions. Features smooth displacement effects, Three.js rendering, and GSAP animations for seamless image transitions.