From e3b5ed171739a7578d15e8aacdb81e9f9b1283a5 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Mon, 14 Jul 2025 20:06:26 +0530
Subject: [PATCH] Added <ImageTrail /> animation

---
 src/constants/Categories.ts                   |    1 +
 src/constants/Components.ts                   |    1 +
 .../code/Animations/imageTrailCode.ts         |   30 +
 .../Animations/ImageTrail/ImageTrail.vue      | 1222 +++++++++++++++++
 src/demo/Animations/ImageTrailDemo.vue        |   96 ++
 5 files changed, 1350 insertions(+)
 create mode 100644 src/constants/code/Animations/imageTrailCode.ts
 create mode 100644 src/content/Animations/ImageTrail/ImageTrail.vue
 create mode 100644 src/demo/Animations/ImageTrailDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index db902d6..a3c00c7 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -45,6 +45,7 @@ export const CATEGORIES = [
       'Magnet',
       'Cubes',
       'Blob Cursor',
+      'Image Trail',
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 286ed82..d026786 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -13,6 +13,7 @@ const animations = {
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
   'noise': () => import('../demo/Animations/NoiseDemo.vue'),
   'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
+  'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),
 };
 
 const textAnimations = {
diff --git a/src/constants/code/Animations/imageTrailCode.ts b/src/constants/code/Animations/imageTrailCode.ts
new file mode 100644
index 0000000..0721cc6
--- /dev/null
+++ b/src/constants/code/Animations/imageTrailCode.ts
@@ -0,0 +1,30 @@
+import code from '@/content/Animations/ImageTrail/ImageTrail.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const imageTrail: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ImageTrail`,
+  installation: `npm i gsap`,
+  usage: `<template>
+  <div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}">
+    <ImageTrail
+        :key="key"
+        :items="[
+            'https://picsum.photos/id/287/300/300',
+            'https://picsum.photos/id/1001/300/300',
+            'https://picsum.photos/id/1025/300/300',
+            'https://picsum.photos/id/1026/300/300',
+            'https://picsum.photos/id/1027/300/300',
+            'https://picsum.photos/id/1028/300/300',
+            'https://picsum.photos/id/1029/300/300',
+            'https://picsum.photos/id/1030/300/300',
+        ]"
+        :variant="1"
+    />
+    </div>
+</template>
+
+<script setup lang="ts">
+  import ImageTrail from "./ImageTrail.vue";
+</script>`,
+  code
+};
diff --git a/src/content/Animations/ImageTrail/ImageTrail.vue b/src/content/Animations/ImageTrail/ImageTrail.vue
new file mode 100644
index 0000000..c2200ba
--- /dev/null
+++ b/src/content/Animations/ImageTrail/ImageTrail.vue
@@ -0,0 +1,1222 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { gsap } from 'gsap';
+
+function lerp(a: number, b: number, n: number): number {
+  return (1 - n) * a + n * b;
+}
+
+function getLocalPointerPos(e: MouseEvent | TouchEvent, rect: DOMRect): { x: number; y: number } {
+  let clientX = 0,
+    clientY = 0;
+  if ('touches' in e && e.touches.length > 0) {
+    clientX = e.touches[0].clientX;
+    clientY = e.touches[0].clientY;
+  } else if ('clientX' in e) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  }
+  return {
+    x: clientX - rect.left,
+    y: clientY - rect.top
+  };
+}
+
+function getMouseDistance(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
+  const dx = p1.x - p2.x;
+  const dy = p1.y - p2.y;
+  return Math.hypot(dx, dy);
+}
+
+class ImageItem {
+  public DOM: { el: HTMLDivElement; inner: HTMLDivElement | null } = {
+    el: null as unknown as HTMLDivElement,
+    inner: null
+  };
+  public defaultStyle: gsap.TweenVars = { scale: 1, x: 0, y: 0, opacity: 0 };
+  public rect: DOMRect | null = null;
+  private resize!: () => void;
+
+  constructor(DOM_el: HTMLDivElement) {
+    this.DOM.el = DOM_el;
+    this.DOM.inner = this.DOM.el.querySelector('.content__img-inner');
+    this.getRect();
+    this.initEvents();
+  }
+
+  private initEvents() {
+    this.resize = () => {
+      gsap.set(this.DOM.el, this.defaultStyle);
+      this.getRect();
+    };
+    window.addEventListener('resize', this.resize);
+  }
+
+  private getRect() {
+    this.rect = this.DOM.el.getBoundingClientRect();
+  }
+}
+
+class ImageTrailVariant1 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = this.container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = this.container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
+
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    if (this.isIdle && this.zIndexVal !== 1) {
+      this.zIndexVal = 1;
+    }
+    requestAnimationFrame(() => this.render());
+  }
+
+  private showNextImage() {
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+
+    gsap.killTweensOf(img.DOM.el);
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .fromTo(
+        img.DOM.el,
+        {
+          opacity: 1,
+          scale: 1,
+          zIndex: this.zIndexVal,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        {
+          duration: 0.4,
+          ease: 'power1',
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        0
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 0.4,
+          ease: 'power3',
+          opacity: 0,
+          scale: 0.2
+        },
+        0.4
+      );
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+    if (this.activeImagesCount === 0) {
+      this.isIdle = true;
+    }
+  }
+}
+
+class ImageTrailVariant2 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
+
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    if (this.isIdle && this.zIndexVal !== 1) {
+      this.zIndexVal = 1;
+    }
+    requestAnimationFrame(() => this.render());
+  }
+
+  private showNextImage() {
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+
+    gsap.killTweensOf(img.DOM.el);
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .fromTo(
+        img.DOM.el,
+        {
+          opacity: 1,
+          scale: 0,
+          zIndex: this.zIndexVal,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        {
+          duration: 0.4,
+          ease: 'power1',
+          scale: 1,
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        0
+      )
+      .fromTo(
+        img.DOM.inner,
+        { scale: 2.8, filter: 'brightness(250%)' },
+        {
+          duration: 0.4,
+          ease: 'power1',
+          scale: 1,
+          filter: 'brightness(100%)'
+        },
+        0
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 0.4,
+          ease: 'power2',
+          opacity: 0,
+          scale: 0.2
+        },
+        0.45
+      );
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+    if (this.activeImagesCount === 0) {
+      this.isIdle = true;
+    }
+  }
+}
+
+class ImageTrailVariant3 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
+
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    if (this.isIdle && this.zIndexVal !== 1) {
+      this.zIndexVal = 1;
+    }
+    requestAnimationFrame(() => this.render());
+  }
+
+  private showNextImage() {
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+
+    gsap.killTweensOf(img.DOM.el);
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .fromTo(
+        img.DOM.el,
+        {
+          opacity: 1,
+          scale: 0,
+          zIndex: this.zIndexVal,
+          xPercent: 0,
+          yPercent: 0,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        {
+          duration: 0.4,
+          ease: 'power1',
+          scale: 1,
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        0
+      )
+      .fromTo(
+        img.DOM.inner,
+        { scale: 1.2 },
+        {
+          duration: 0.4,
+          ease: 'power1',
+          scale: 1
+        },
+        0
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 0.6,
+          ease: 'power2',
+          opacity: 0,
+          scale: 0.2,
+          xPercent: () => gsap.utils.random(-30, 30),
+          yPercent: -200
+        },
+        0.6
+      );
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+    if (this.activeImagesCount === 0) {
+      this.isIdle = true;
+    }
+  }
+}
+
+class ImageTrailVariant4 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
+
+    if (this.isIdle && this.zIndexVal !== 1) this.zIndexVal = 1;
+    requestAnimationFrame(() => this.render());
+  }
+
+  private showNextImage() {
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+    gsap.killTweensOf(img.DOM.el);
+
+    let dx = this.mousePos.x - this.cacheMousePos.x;
+    let dy = this.mousePos.y - this.cacheMousePos.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance !== 0) {
+      dx /= distance;
+      dy /= distance;
+    }
+    dx *= distance / 100;
+    dy *= distance / 100;
+
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .fromTo(
+        img.DOM.el,
+        {
+          opacity: 1,
+          scale: 0,
+          zIndex: this.zIndexVal,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        {
+          duration: 0.4,
+          ease: 'power1',
+          scale: 1,
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        0
+      )
+      .fromTo(
+        img.DOM.inner,
+        {
+          scale: 2,
+          filter: `brightness(${Math.max((400 * distance) / 100, 100)}%) contrast(${Math.max(
+            (400 * distance) / 100,
+            100
+          )}%)`
+        },
+        {
+          duration: 0.4,
+          ease: 'power1',
+          scale: 1,
+          filter: 'brightness(100%) contrast(100%)'
+        },
+        0
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 0.4,
+          ease: 'power3',
+          opacity: 0
+        },
+        0.4
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 1.5,
+          ease: 'power4',
+          x: `+=${dx * 110}`,
+          y: `+=${dy * 110}`
+        },
+        0.05
+      );
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+    if (this.activeImagesCount === 0) {
+      this.isIdle = true;
+    }
+  }
+}
+
+class ImageTrailVariant5 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+  private lastAngle: number;
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+    this.lastAngle = 0;
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
+    if (this.isIdle && this.zIndexVal !== 1) this.zIndexVal = 1;
+    requestAnimationFrame(() => this.render());
+  }
+
+  private showNextImage() {
+    let dx = this.mousePos.x - this.cacheMousePos.x;
+    let dy = this.mousePos.y - this.cacheMousePos.y;
+    let angle = Math.atan2(dy, dx) * (180 / Math.PI);
+    if (angle < 0) angle += 360;
+    if (angle > 90 && angle <= 270) angle += 180;
+    const isMovingClockwise = angle >= this.lastAngle;
+    this.lastAngle = angle;
+    const startAngle = isMovingClockwise ? angle - 10 : angle + 10;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance !== 0) {
+      dx /= distance;
+      dy /= distance;
+    }
+    dx *= distance / 150;
+    dy *= distance / 150;
+
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+    gsap.killTweensOf(img.DOM.el);
+
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .fromTo(
+        img.DOM.el,
+        {
+          opacity: 1,
+          filter: 'brightness(80%)',
+          scale: 0.1,
+          zIndex: this.zIndexVal,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2,
+          rotation: startAngle
+        },
+        {
+          duration: 1,
+          ease: 'power2',
+          scale: 1,
+          filter: 'brightness(100%)',
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2 + dx * 70,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2 + dy * 70,
+          rotation: this.lastAngle
+        },
+        0
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 0.4,
+          ease: 'expo',
+          opacity: 0
+        },
+        0.5
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 1.5,
+          ease: 'power4',
+          x: `+=${dx * 120}`,
+          y: `+=${dy * 120}`
+        },
+        0.05
+      );
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+    if (this.activeImagesCount === 0) this.isIdle = true;
+  }
+}
+
+class ImageTrailVariant6 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.3);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.3);
+
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    if (this.isIdle && this.zIndexVal !== 1) {
+      this.zIndexVal = 1;
+    }
+    requestAnimationFrame(() => this.render());
+  }
+
+  private mapSpeedToSize(speed: number, minSize: number, maxSize: number) {
+    const maxSpeed = 200;
+    return minSize + (maxSize - minSize) * Math.min(speed / maxSpeed, 1);
+  }
+
+  private mapSpeedToBrightness(speed: number, minB: number, maxB: number) {
+    const maxSpeed = 70;
+    return minB + (maxB - minB) * Math.min(speed / maxSpeed, 1);
+  }
+
+  private mapSpeedToBlur(speed: number, minBlur: number, maxBlur: number) {
+    const maxSpeed = 90;
+    return minBlur + (maxBlur - minBlur) * Math.min(speed / maxSpeed, 1);
+  }
+
+  private mapSpeedToGrayscale(speed: number, minG: number, maxG: number) {
+    const maxSpeed = 90;
+    return minG + (maxG - minG) * Math.min(speed / maxSpeed, 1);
+  }
+
+  private showNextImage() {
+    const dx = this.mousePos.x - this.cacheMousePos.x;
+    const dy = this.mousePos.y - this.cacheMousePos.y;
+    const speed = Math.sqrt(dx * dx + dy * dy);
+
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+
+    const scaleFactor = this.mapSpeedToSize(speed, 0.3, 2);
+    const brightnessValue = this.mapSpeedToBrightness(speed, 0, 1.3);
+    const blurValue = this.mapSpeedToBlur(speed, 20, 0);
+    const grayscaleValue = this.mapSpeedToGrayscale(speed, 600, 0);
+
+    gsap.killTweensOf(img.DOM.el);
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .fromTo(
+        img.DOM.el,
+        {
+          opacity: 1,
+          scale: 0,
+          zIndex: this.zIndexVal,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        {
+          duration: 0.8,
+          ease: 'power3',
+          scale: scaleFactor,
+          filter: `grayscale(${grayscaleValue * 100}%) brightness(${brightnessValue * 100}%) blur(${blurValue}px)`,
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        0
+      )
+      .fromTo(
+        img.DOM.inner,
+        { scale: 2 },
+        {
+          duration: 0.8,
+          ease: 'power3',
+          scale: 1
+        },
+        0
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 0.4,
+          ease: 'power3.in',
+          opacity: 0,
+          scale: 0.2
+        },
+        0.45
+      );
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+    if (this.activeImagesCount === 0) {
+      this.isIdle = true;
+    }
+  }
+}
+
+function getNewPosition(position: number, offset: number, arr: ImageItem[]) {
+  const realOffset = Math.abs(offset) % arr.length;
+  if (position - realOffset >= 0) {
+    return position - realOffset;
+  } else {
+    return arr.length - (realOffset - position);
+  }
+}
+
+class ImageTrailVariant7 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+  private visibleImagesCount: number;
+  private visibleImagesTotal: number;
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+    this.visibleImagesCount = 0;
+    this.visibleImagesTotal = 9;
+    this.visibleImagesTotal = Math.min(this.visibleImagesTotal, this.imagesTotal - 1);
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.3);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.3);
+
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    if (this.isIdle && this.zIndexVal !== 1) this.zIndexVal = 1;
+
+    requestAnimationFrame(() => this.render());
+  }
+
+  private showNextImage() {
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+    ++this.visibleImagesCount;
+
+    gsap.killTweensOf(img.DOM.el);
+    const scaleValue = gsap.utils.random(0.5, 1.6);
+
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .fromTo(
+        img.DOM.el,
+        {
+          scale: scaleValue - Math.max(gsap.utils.random(0.2, 0.6), 0),
+          rotationZ: 0,
+          opacity: 1,
+          zIndex: this.zIndexVal,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        {
+          duration: 0.4,
+          ease: 'power3',
+          scale: scaleValue,
+          rotationZ: gsap.utils.random(-3, 3),
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2
+        },
+        0
+      );
+
+    if (this.visibleImagesCount >= this.visibleImagesTotal) {
+      const lastInQueue = getNewPosition(this.imgPosition, this.visibleImagesTotal, this.images);
+      const oldImg = this.images[lastInQueue];
+      gsap.to(oldImg.DOM.el, {
+        duration: 0.4,
+        ease: 'power4',
+        opacity: 0,
+        scale: 1.3,
+        onComplete: () => {
+          if (this.activeImagesCount === 0) {
+            this.isIdle = true;
+          }
+        }
+      });
+    }
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+  }
+}
+
+class ImageTrailVariant8 {
+  private container: HTMLDivElement;
+  private DOM: { el: HTMLDivElement };
+  private images: ImageItem[];
+  private imagesTotal: number;
+  private imgPosition: number;
+  private zIndexVal: number;
+  private activeImagesCount: number;
+  private isIdle: boolean;
+  private threshold: number;
+  private mousePos: { x: number; y: number };
+  private lastMousePos: { x: number; y: number };
+  private cacheMousePos: { x: number; y: number };
+  private rotation: { x: number; y: number };
+  private cachedRotation: { x: number; y: number };
+  private zValue: number;
+  private cachedZValue: number;
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+    this.DOM = { el: container };
+    this.images = [...container.querySelectorAll('.content__img')].map(img => new ImageItem(img as HTMLDivElement));
+    this.imagesTotal = this.images.length;
+    this.imgPosition = 0;
+    this.zIndexVal = 1;
+    this.activeImagesCount = 0;
+    this.isIdle = true;
+    this.threshold = 80;
+    this.mousePos = { x: 0, y: 0 };
+    this.lastMousePos = { x: 0, y: 0 };
+    this.cacheMousePos = { x: 0, y: 0 };
+    this.rotation = { x: 0, y: 0 };
+    this.cachedRotation = { x: 0, y: 0 };
+    this.zValue = 0;
+    this.cachedZValue = 0;
+
+    const handlePointerMove = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+    };
+    container.addEventListener('mousemove', handlePointerMove);
+    container.addEventListener('touchmove', handlePointerMove);
+
+    const initRender = (ev: MouseEvent | TouchEvent) => {
+      const rect = container.getBoundingClientRect();
+      this.mousePos = getLocalPointerPos(ev, rect);
+      this.cacheMousePos = { ...this.mousePos };
+      requestAnimationFrame(() => this.render());
+      container.removeEventListener('mousemove', initRender as EventListener);
+      container.removeEventListener('touchmove', initRender as EventListener);
+    };
+    container.addEventListener('mousemove', initRender as EventListener);
+    container.addEventListener('touchmove', initRender as EventListener);
+  }
+
+  private render() {
+    const distance = getMouseDistance(this.mousePos, this.lastMousePos);
+    this.cacheMousePos.x = lerp(this.cacheMousePos.x, this.mousePos.x, 0.1);
+    this.cacheMousePos.y = lerp(this.cacheMousePos.y, this.mousePos.y, 0.1);
+
+    if (distance > this.threshold) {
+      this.showNextImage();
+      this.lastMousePos = { ...this.mousePos };
+    }
+    if (this.isIdle && this.zIndexVal !== 1) {
+      this.zIndexVal = 1;
+    }
+    requestAnimationFrame(() => this.render());
+  }
+
+  private showNextImage() {
+    const rect = this.container.getBoundingClientRect();
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    const relX = this.mousePos.x - centerX;
+    const relY = this.mousePos.y - centerY;
+
+    this.rotation.x = -(relY / centerY) * 30;
+    this.rotation.y = (relX / centerX) * 30;
+    this.cachedRotation = { ...this.rotation };
+
+    const distanceFromCenter = Math.sqrt(relX * relX + relY * relY);
+    const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
+    const proportion = distanceFromCenter / maxDistance;
+    this.zValue = proportion * 1200 - 600;
+    this.cachedZValue = this.zValue;
+    const normalizedZ = (this.zValue + 600) / 1200;
+    const brightness = 0.2 + normalizedZ * 2.3;
+
+    ++this.zIndexVal;
+    this.imgPosition = this.imgPosition < this.imagesTotal - 1 ? this.imgPosition + 1 : 0;
+    const img = this.images[this.imgPosition];
+    gsap.killTweensOf(img.DOM.el);
+
+    gsap
+      .timeline({
+        onStart: () => this.onImageActivated(),
+        onComplete: () => this.onImageDeactivated()
+      })
+      .set(this.DOM.el, { perspective: 1000 }, 0)
+      .fromTo(
+        img.DOM.el,
+        {
+          opacity: 1,
+          z: 0,
+          scale: 1 + this.cachedZValue / 1000,
+          zIndex: this.zIndexVal,
+          x: this.cacheMousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.cacheMousePos.y - (img.rect?.height ?? 0) / 2,
+          rotationX: this.cachedRotation.x,
+          rotationY: this.cachedRotation.y,
+          filter: `brightness(${brightness})`
+        },
+        {
+          duration: 1,
+          ease: 'expo',
+          scale: 1 + this.zValue / 1000,
+          x: this.mousePos.x - (img.rect?.width ?? 0) / 2,
+          y: this.mousePos.y - (img.rect?.height ?? 0) / 2,
+          rotationX: this.rotation.x,
+          rotationY: this.rotation.y
+        },
+        0
+      )
+      .to(
+        img.DOM.el,
+        {
+          duration: 0.4,
+          ease: 'power2',
+          opacity: 0,
+          z: -800
+        },
+        0.3
+      );
+  }
+
+  private onImageActivated() {
+    this.activeImagesCount++;
+    this.isIdle = false;
+  }
+
+  private onImageDeactivated() {
+    this.activeImagesCount--;
+    if (this.activeImagesCount === 0) {
+      this.isIdle = true;
+    }
+  }
+}
+
+type ImageTrailConstructor =
+  | typeof ImageTrailVariant1
+  | typeof ImageTrailVariant2
+  | typeof ImageTrailVariant3
+  | typeof ImageTrailVariant4
+  | typeof ImageTrailVariant5
+  | typeof ImageTrailVariant6
+  | typeof ImageTrailVariant7
+  | typeof ImageTrailVariant8;
+
+const variantMap: Record<number, ImageTrailConstructor> = {
+  1: ImageTrailVariant1,
+  2: ImageTrailVariant2,
+  3: ImageTrailVariant3,
+  4: ImageTrailVariant4,
+  5: ImageTrailVariant5,
+  6: ImageTrailVariant6,
+  7: ImageTrailVariant7,
+  8: ImageTrailVariant8
+};
+
+interface ImageTrailProps {
+  items?: string[];
+  variant?: number;
+}
+
+const props = withDefaults(defineProps<ImageTrailProps>(), {
+  items: () => [],
+  variant: 1
+});
+
+const containerRef = ref<HTMLDivElement>();
+
+onMounted(async () => {
+  await nextTick();
+
+  if (!containerRef.value) return;
+
+  const Cls = variantMap[props.variant] || variantMap[1];
+  new Cls(containerRef.value);
+});
+</script>
+
+<template>
+  <div ref="containerRef" class="z-[100] relative bg-transparent rounded-lg w-full h-full overflow-visible">
+    <div
+      v-for="(url, i) in items"
+      :key="i"
+      class="top-0 left-0 absolute opacity-0 rounded-[15px] w-[190px] aspect-[1.1] overflow-hidden [will-change:transform,filter] content__img"
+    >
+      <div
+        class="top-[-10px] left-[-10px] absolute bg-cover bg-center w-[calc(100%+20px)] h-[calc(100%+20px)] content__img-inner"
+        :style="{ backgroundImage: `url(${url})` }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/demo/Animations/ImageTrailDemo.vue b/src/demo/Animations/ImageTrailDemo.vue
new file mode 100644
index 0000000..30f247d
--- /dev/null
+++ b/src/demo/Animations/ImageTrailDemo.vue
@@ -0,0 +1,96 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+        <ImageTrail :key="key" :items="items" :variant="variant" />
+
+        <div class="absolute flex flex-col justify-center items-center">
+          <p class="mb-0 font-black text-[#271E37] text-[clamp(2rem,6vw,6rem)]">Hover Me.</p>
+          <p class="mt-0 font-black text-[#a6a6a6] text-[18px]">Variant {{ variant }}</p>
+        </div>
+      </div>
+
+      <Customize>
+        <div class="inline-flex gap-2" role="group">
+          <button
+            class="bg-[#271E37] px-3 border border-[#271E37] h-8 font-bold text-white text-xs cursor-not-allowed"
+            disabled
+          >
+            Variant
+          </button>
+
+          <button
+            v-for="num in 8"
+            :key="num"
+            :class="[
+              'text-xs h-8 px-3 border border-[#271E37] font-bold',
+              variant === num ? 'bg-[#27FF64] text-black' : 'bg-[#0D0716]'
+            ]"
+            @click="
+              () => {
+                variant = num;
+                forceRerender();
+              }
+            "
+          >
+            {{ num }}
+          </button>
+        </div>
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="imageTrail" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="imageTrail.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { imageTrail } from '../../constants/code/Animations/imageTrailCode';
+import ImageTrail from '../../content/Animations/ImageTrail/ImageTrail.vue';
+import Customize from '../../components/common/Customize.vue';
+import { ref } from 'vue';
+
+const { rerenderKey: key, forceRerender } = useForceRerender();
+
+const variant = ref(1);
+
+const items = [
+  'https://picsum.photos/id/287/300/300',
+  'https://picsum.photos/id/1001/300/300',
+  'https://picsum.photos/id/1025/300/300',
+  'https://picsum.photos/id/1026/300/300',
+  'https://picsum.photos/id/1027/300/300',
+  'https://picsum.photos/id/1028/300/300',
+  'https://picsum.photos/id/1029/300/300',
+  'https://picsum.photos/id/1030/300/300'
+];
+
+const propData = [
+  {
+    name: 'items',
+    type: 'string[]',
+    default: '[]',
+    description: 'An array of image URLs which will be animated in the trail.'
+  },
+  {
+    name: 'variant',
+    type: 'number',
+    default: '1',
+    description: 'A number from 1 to 8 - all different animation styles.'
+  }
+];
+</script>