Merge branch 'main' into feat/grid-scan

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Color Bends', 'Ghost Cursor', 'Grid Scan', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow'];
+export const NEW = ['Antigravity', 'Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow', 'Grid Scan'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -26,6 +26,7 @@ export const CATEGORIES = [
       'Scroll Velocity',
       'Scramble Text',
       'Shiny Text',
+      'Shuffle',
       'Split Text',
       'Text Cursor',
       'Text Pressure',
@@ -39,6 +40,7 @@ export const CATEGORIES = [
     name: 'Animations',
     subcategories: [
       'Animated Content',
+      'Antigravity',
       'Blob Cursor',
       'Click Spark',
       'Count Up',
@@ -49,12 +51,15 @@ export const CATEGORIES = [
       'Ghost Cursor',
       'Glare Hover',
       'Gradual Blur',
+      'Image Trail',
       'Laser Flow',
       'Logo Loop',
       'Magnet',
       'Magnet Lines',
+      'Meta Balls',
       'Metallic Paint',
       'Noise',
+      'Pixel Trail',
       'Pixel Transition',
       'Ribbons',
       'Shape Blur',

src/constants/Components.ts

@@ -25,6 +25,8 @@ const animations = {
   'gradual-blur': () => import('../demo/Animations/GradualBlurDemo.vue'),
   'laser-flow': () => import('../demo/Animations/LaserFlowDemo.vue'),
   'ghost-cursor': () => import('../demo/Animations/GhostCursorDemo.vue'),
+  'antigravity': () => import('../demo/Animations/AntigravityDemo.vue'),
+  'pixel-trail': () => import('../demo/Animations/PixelTrailDemo.vue'),
 };
 
 const textAnimations = {
@@ -50,6 +52,7 @@ const textAnimations = {
   'scroll-velocity': () => import("../demo/TextAnimations/ScrollVelocityDemo.vue"),
   'text-type': () => import("../demo/TextAnimations/TextTypeDemo.vue"),
   'variable-proximity': () => import("../demo/TextAnimations/VariableProximityDemo.vue"),
+  'shuffle': () => import("../demo/TextAnimations/ShuffleDemo.vue"),
 };
 
 const components = {

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 -------------------------------------------------------------------------------------------------------------------------------
 
@@ -393,6 +401,14 @@ export const componentMetadata: ComponentMetadata = {
     docsUrl: 'https://vue-bits.dev/text-animations/variable-proximity',
     tags: []
   },
+  'TextAnimations/Shuffle': {
+    videoUrl: '/assets/videos/shuffle.webm',
+    description: 'GSAP-powered slot machine style text shuffle animation with scroll trigger.',
+    category: 'TextAnimations',
+    name: 'Shuffle',
+    docsUrl: 'https://vue-bits.dev/text-animations/shuffle',
+    tags: []
+  },
 
   //! Components -------------------------------------------------------------------------------------------------------------------------------
   'Components/AnimatedList': {

src/constants/code/Animations/antigravityCode.ts

@@ -0,0 +1,29 @@
+import code from '@/content/Animations/Antigravity/Antigravity.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const antigravity = createCodeObject(code, 'Animations/Antigravity', {
+  installation: `npm install three @types/three`,
+  usage: `<template>
+  <Antigravity
+    :count="300"
+    :magnetRadius="10"
+    :ringRadius="10"
+    :waveSpeed="0.4"
+    :waveAmplitude="1"
+    :particleSize="2"
+    :lerpSpeed="0.1"
+    color="#FF9FFC"
+    :autoAnimate="false"
+    :particleVariance="1"
+    :rotationSpeed="0"
+    :depthFactor="1"
+    :pulseSpeed="3"
+    particleShape="capsule"
+    :fieldStrength="10"
+  />
+</template>
+
+<script setup lang="ts">
+import Antigravity from "./Antigravity.vue";
+</script>`
+});

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>`
+});

src/constants/code/Components/infiniteMenuCode.ts

@@ -3,12 +3,15 @@ import { createCodeObject } from '@/types/code';
 
 export const infiniteMenu = createCodeObject(code, 'Components/InfiniteMenu', {
   usage: `<template>
-  <InfiniteMenu :items="menuItems" />
+  <InfiniteMenu :items="menuItems" :scale="scaleFactor" />
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import InfiniteMenu from "./InfiniteMenu.vue";
 
+const scaleFactor = ref<number>(3);
+
 const menuItems = [
   {
     image: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=800&h=800&fit=crop',

src/constants/code/TextAnimations/shuffleCode.ts

@@ -0,0 +1,25 @@
+import code from '@/content/TextAnimations/Shuffle/Shuffle.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const shuffle = createCodeObject(code, 'TextAnimations/Shuffle', {
+  installation: 'npm install gsap',
+  usage: `<template>
+  <Shuffle
+    text="Hello World"
+    shuffle-direction="right"
+    :duration="0.35"
+    animation-mode="evenodd"
+    :shuffle-times="1"
+    ease="power3.out"
+    :stagger="0.03"
+    :threshold="0.1"
+    :trigger-once="true"
+    :trigger-on-hover="true"
+    :respect-reduced-motion="true"
+  />
+</template>
+
+<script setup lang="ts">
+import Shuffle from "./Shuffle.vue";
+</script>`
+});