Create <PixelTrail /> animation

src/constants/Categories.ts

@@ -55,6 +55,7 @@ export const CATEGORIES = [
       'Magnet Lines',
       'Metallic Paint',
       'Noise',
+      'Pixel Trail',
       'Pixel Transition',
       'Ribbons',
       'Shape Blur',

src/constants/Components.ts

@@ -25,6 +25,7 @@ const animations = {
   'gradual-blur': () => import('../demo/Animations/GradualBlurDemo.vue'),
   'laser-flow': () => import('../demo/Animations/LaserFlowDemo.vue'),
   'ghost-cursor': () => import('../demo/Animations/GhostCursorDemo.vue'),
+  'pixel-trail': () => import('../demo/Animations/PixelTrailDemo.vue'),
 };
 
 const textAnimations = {

src/constants/Information.ts

@@ -222,6 +222,14 @@ export const componentMetadata: ComponentMetadata = {
     docsUrl: 'https://vue-bits.dev/text-animations/count-up',
     tags: []
   },
+  'Animations/PixelTrail': {
+    videoUrl: '/assets/videos/pixeltrail.webm',
+    description: 'Pixel grid trail effect that follows cursor movement with customizable gooey filter.',
+    category: 'Animations',
+    name: 'PixelTrail',
+    docsUrl: 'https://vue-bits.dev/animations/pixel-trail',
+    tags: []
+  },
 
   //! Text Animations -------------------------------------------------------------------------------------------------------------------------------
 

src/constants/code/Animations/pixelTrailCode.ts

@@ -0,0 +1,22 @@
+import code from '@/content/Animations/PixelTrail/PixelTrail.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const pixelTrail = createCodeObject(code, 'Animations/PixelTrail', {
+  installation: `npm install three @types/three`,
+  usage: `<template>
+  <div class="relative w-full h-[400px]">
+    <PixelTrail
+      :grid-size="50"
+      :trail-size="0.1"
+      :max-age="250"
+      :interpolate="5"
+      color="#5227FF"
+      :gooey-filter="{ id: 'goo-filter', strength: 2 }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import PixelTrail from "./PixelTrail.vue";
+</script>`
+});