title: Image Trail Cursor
description: An interactive cursor effect that creates a dynamic trail of images following mouse movement with multiple animation variants.
navBadges:
  - value: New
    type: lime
---

```vue
<template>
  <div class="flex flex-col gap-2 w-full min-h-96">
    <div class="w-full border mt-4 rounded-lg p-4 flex items-center justify-center h-96 relative">
      <span class="absolute inset-0 flex items-center justify-center text-4xl">Hover Here</span>
      <ImageTrailCursor
        :key="selectedVariant"
        :images="images"
        :variant="selectedVariant"
      />
    </div>
    <Select v-model="selectedVariant">
      <SelectTrigger class="w-[180px]">
        <SelectValue placeholder="Select Variant" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem
            v-for="variant in Object.keys(variants)"
            :key="variant"
            :value="variant"
          >
            {{ (variants as any)[variant] }}
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </div>
</template>

<script lang="ts" setup>
import type { VariantType } from "../../ui/image-trail-cursor/ImageTrailCursor.vue";

const images = [
  "https://images.pexels.com/photos/799443/pexels-photo-799443.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/16245254/pexels-photo-16245254/free-photo-of-chatgpt-a-chatbot-for-your-website.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/1910236/pexels-photo-1910236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/2832382/pexels-photo-2832382.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/2333293/pexels-photo-2333293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/604684/pexels-photo-604684.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/3308588/pexels-photo-3308588.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
];

const variants = {
  type1: "Type 1",
  type2: "Type 2",
  type3: "Type 3",
  type4: "Type 4",
  type5: "Type 5",
  type6: "Type 6",
  type7: "Type 7",
};

const selectedVariant = ref<VariantType>("type2");
</script>

```

## API

| Prop Name | Type          | Default   | Description                                            |
| --------- | ------------- | --------- | ------------------------------------------------------ |
| `images`  | `string[]`    | `[]`      | Array of image URLs to display in the trailing effect. |
| `variant` | `VariantType` | `"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

```vue
<InstallationCli component-id="image-trail-cursor" />
```

## Install Manually

::code-group

::CodeViewerTab{label="ImageTrailCursor.vue" language="vue" componentName="ImageTrailCursor" type="ui" id="image-trail-cursor"}
::
::CodeViewerTab{label="trail-variants.ts" language="typescript" componentName="trail-variants" language="ts" type="ui" id="image-trail-cursor" extension="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](https://tympanus.net/codrops/2023/10/18/ideas-for-image-motion-trail-animations/)