Skip to main content

​
Installation

npx inspira-ui@latest add image-trail-cursor

​
Usage

<template>
  <ImageTrailCursor
    :images="[
      '/image1.jpg',
      '/image2.jpg',
      '/image3.jpg'
    ]"
    variant="type1"
  />
</template>

<script setup lang="ts">
import ImageTrailCursor from "@/components/inspira/ui/cursors/ImageTrailCursor.vue";
</script>

​
Props

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.

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us