For Tailwind CSS v3 docs, click here.

Image Trail Cursor

An interactive cursor effect that creates a dynamic trail of images following mouse movement with multiple animation variants.

API

Prop NameTypeDefaultDescription
imagesstring[][]Array of image URLs to display in the trailing effect.
variantVariantType"type1"Animation variant type ("type1" through "type7").

💡 This component creates a full-width, full-height container with high z-index for cursor tracking. Each image is 190px wide with a 1.1 aspect ratio and rounded corners.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/image-trail-cursor.json"

Install Manually

ImageTrailCursor.vue
trail-variants.ts
Features
  • Multiple animation variants: Choose from 7 different trail animation patterns and behaviors.
  • Dynamic image rendering: Displays provided images with smooth opacity transitions and transforms.
  • Responsive design: Images scale appropriately with rounded corners and overflow handling.
  • Memory management: Automatically destroys and recreates instances when variant changes.
  • Performance optimized: Uses will-change CSS property for smooth GPU-accelerated animations.
  • Flexible image support: Accepts any array of image URLs for customizable visual content.
Notes
  • The component uses a variant system with different animation classes mapped in trail-variants.ts.
  • Images are positioned absolutely with a slight overflow effect (20px larger with -10px offset) for smoother visual transitions.
  • The container maintains a high z-index (100) to ensure the trail effect appears above other content.
  • Variant instances are properly cleaned up on component unmount and variant changes to prevent memory leaks.
Credits
  • Inspired by modern cursor trail effects and image hover interactions.
  • Built with Vue 3 Composition API for optimal reactivity and performance.
  • Ported from Codrops Article
Fluid Cursor
A GPU-accelerated animated cursor trail that simulates fluid motion.
Sleek Line Cursor
A reactive animated cursor trail with smooth wave-like motion, using spring physics and dynamic color waves.