Merge branch 'main' into feat/scroll-reveal

src/constants/Categories.ts

@@ -21,7 +21,7 @@ export const CATEGORIES = [
       'Decrypted Text',
       'True Focus',
       'Scroll Float',
-      'Scroll Reveal',
+      'Scroll Reveal'
     ]
   },
   {
@@ -35,7 +35,7 @@ export const CATEGORIES = [
       'Count Up',
       'Click Spark',
       'Magnet',
-      'Cubes',
+      'Cubes'
     ]
   },
   {
@@ -56,8 +56,8 @@ export const CATEGORIES = [
       'Glass Icons',
       'Decay Card',
       'Flowing Menu',
-      'Elastic Slider',
-    ],
+      'Elastic Slider'
+    ]
   },
   {
     name: 'Backgrounds',
@@ -73,6 +73,7 @@ export const CATEGORIES = [
       'Squares',
       'Iridescence',
       'Threads',
-    ],
+      'Grid Motion'
+    ]
   }
 ];

src/constants/Components.ts

@@ -1,13 +1,13 @@
 const animations = {
-  'fade-content': () => import("../demo/Animations/FadeContentDemo.vue"),
-  'animated-content': () => import("../demo/Animations/AnimatedContentDemo.vue"),
-  'pixel-transition': () => import("../demo/Animations/PixelTransitionDemo.vue"),
-  'glare-hover': () => import("../demo/Animations/GlareHoverDemo.vue"),
-  'magnet-lines': () => import("../demo/Animations/MagnetLinesDemo.vue"),
-  'click-spark': () => import("../demo/Animations/ClickSparkDemo.vue"),
-  'magnet': () => import("../demo/Animations/MagnetDemo.vue"),
-  'cubes': () => import("../demo/Animations/CubesDemo.vue"),
-  'count-up': () => import("../demo/Animations/CountUpDemo.vue"),
+  'fade-content': () => import('../demo/Animations/FadeContentDemo.vue'),
+  'animated-content': () => import('../demo/Animations/AnimatedContentDemo.vue'),
+  'pixel-transition': () => import('../demo/Animations/PixelTransitionDemo.vue'),
+  'glare-hover': () => import('../demo/Animations/GlareHoverDemo.vue'),
+  'magnet-lines': () => import('../demo/Animations/MagnetLinesDemo.vue'),
+  'click-spark': () => import('../demo/Animations/ClickSparkDemo.vue'),
+  'magnet': () => import('../demo/Animations/MagnetDemo.vue'),
+  'cubes': () => import('../demo/Animations/CubesDemo.vue'),
+  'count-up': () => import('../demo/Animations/CountUpDemo.vue')
 };
 
 const textAnimations = {
@@ -25,44 +25,46 @@ const textAnimations = {
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
-  'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),
+  'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue")
 };
+
 const components = {
-  'masonry': () => import("../demo/Components/MasonryDemo.vue"),
-  'profile-card': () => import("../demo/Components/ProfileCardDemo.vue"),
-  'dock': () => import("../demo/Components/DockDemo.vue"),
-  'gooey-nav': () => import("../demo/Components/GooeyNavDemo.vue"),
-  'pixel-card': () => import("../demo/Components/PixelCardDemo.vue"),
-  'carousel': () => import("../demo/Components/CarouselDemo.vue"),
-  'spotlight-card': () => import("../demo/Components/SpotlightCardDemo.vue"),
-  'circular-gallery': () => import("../demo/Components/CircularGalleryDemo.vue"),
-  'flying-posters': () => import("../demo/Components/FlyingPostersDemo.vue"),
-  'card-swap': () => import("../demo/Components/CardSwapDemo.vue"),
-  'infinite-scroll': () => import("../demo/Components/InfiniteScrollDemo.vue"),
-  'glass-icons': () => import("../demo/Components/GlassIconsDemo.vue"),
-  'decay-card': () => import("../demo/Components/DecayCardDemo.vue"),
-  'flowing-menu': () => import("../demo/Components/FlowingMenuDemo.vue"),
-  'elastic-slider': () => import("../demo/Components/ElasticSliderDemo.vue"),
-  'tilted-card': () => import("../demo/Components/TiltedCardDemo.vue"),
+  'masonry': () => import('../demo/Components/MasonryDemo.vue'),
+  'profile-card': () => import('../demo/Components/ProfileCardDemo.vue'),
+  'dock': () => import('../demo/Components/DockDemo.vue'),
+  'gooey-nav': () => import('../demo/Components/GooeyNavDemo.vue'),
+  'pixel-card': () => import('../demo/Components/PixelCardDemo.vue'),
+  'carousel': () => import('../demo/Components/CarouselDemo.vue'),
+  'spotlight-card': () => import('../demo/Components/SpotlightCardDemo.vue'),
+  'circular-gallery': () => import('../demo/Components/CircularGalleryDemo.vue'),
+  'flying-posters': () => import('../demo/Components/FlyingPostersDemo.vue'),
+  'card-swap': () => import('../demo/Components/CardSwapDemo.vue'),
+  'infinite-scroll': () => import('../demo/Components/InfiniteScrollDemo.vue'),
+  'glass-icons': () => import('../demo/Components/GlassIconsDemo.vue'),
+  'decay-card': () => import('../demo/Components/DecayCardDemo.vue'),
+  'flowing-menu': () => import('../demo/Components/FlowingMenuDemo.vue'),
+  'elastic-slider': () => import('../demo/Components/ElasticSliderDemo.vue'),
+  'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue')
 };
 
 const backgrounds = {
-  'dot-grid': () => import("../demo/Backgrounds/DotGridDemo.vue"),
-  'silk': () => import("../demo/Backgrounds/SilkDemo.vue"),
-  'lightning': () => import("../demo/Backgrounds/LightningDemo.vue"),
-  'letter-glitch': () => import("../demo/Backgrounds/LetterGlitchDemo.vue"),
-  'particles': () => import("../demo/Backgrounds/ParticlesDemo.vue"),
-  'waves': () => import("../demo/Backgrounds/WavesDemo.vue"),
-  'squares': () => import("../demo/Backgrounds/SquaresDemo.vue"),
-  'iridescence': () => import("../demo/Backgrounds/IridescenceDemo.vue"),
-  'threads': () => import("../demo/Backgrounds/ThreadsDemo.vue"),
-  'aurora': () => import("../demo/Backgrounds/AuroraDemo.vue"),
-  'beams': () => import("../demo/Backgrounds/BeamsDemo.vue"),
+  'dot-grid': () => import('../demo/Backgrounds/DotGridDemo.vue'),
+  'silk': () => import('../demo/Backgrounds/SilkDemo.vue'),
+  'lightning': () => import('../demo/Backgrounds/LightningDemo.vue'),
+  'letter-glitch': () => import('../demo/Backgrounds/LetterGlitchDemo.vue'),
+  'particles': () => import('../demo/Backgrounds/ParticlesDemo.vue'),
+  'waves': () => import('../demo/Backgrounds/WavesDemo.vue'),
+  'squares': () => import('../demo/Backgrounds/SquaresDemo.vue'),
+  'iridescence': () => import('../demo/Backgrounds/IridescenceDemo.vue'),
+  'threads': () => import('../demo/Backgrounds/ThreadsDemo.vue'),
+  'aurora': () => import('../demo/Backgrounds/AuroraDemo.vue'),
+  'beams': () => import('../demo/Backgrounds/BeamsDemo.vue'),
+  'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue')
 };
 
 export const componentMap = {
   ...animations,
   ...textAnimations,
   ...components,
-  ...backgrounds,
+  ...backgrounds
 };

src/constants/code/Animations/animatedContentCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/Animations/AnimatedContent/AnimatedContent.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/Animations/AnimatedContent/AnimatedContent.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const animatedContent: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/AnimatedContent`,
@@ -32,4 +32,4 @@ export const animatedContent: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/Animations/clickSparkCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Animations/ClickSpark/ClickSpark.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Animations/ClickSpark/ClickSpark.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const clickSpark: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ClickSpark`,
@@ -44,4 +44,4 @@ import ClickSpark from '@/content/Animations/ClickSpark/ClickSpark.vue'
 }
 </style>`,
   code
-}
+};

src/constants/code/Animations/countUpCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/Animations/CountUp/CountUp.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/Animations/CountUp/CountUp.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const countup: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/CountUp`,
@@ -30,4 +30,4 @@ export const countup: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/Animations/cubesCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Animations/Cubes/Cubes.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Animations/Cubes/Cubes.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const cubes: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Cubes`,
@@ -29,4 +29,4 @@ export const cubes: CodeObject = {
   import Cubes from "./Cubes.vue";
 </script>`,
   code
-}
+};

src/constants/code/Animations/fadeContentCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Animations/FadeContent/FadeContent.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Animations/FadeContent/FadeContent.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const fadeContent: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/FadeContent`,
@@ -24,4 +24,4 @@ export const fadeContent: CodeObject = {
   import FadeContent from "./FadeContent.vue";
 </script>`,
   code
-}
+};

src/constants/code/Animations/glareHoverCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/Animations/GlareHover/GlareHover.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/Animations/GlareHover/GlareHover.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const glareHover: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/GlareHover`,
@@ -26,4 +26,4 @@ export const glareHover: CodeObject = {
   import GlareHover from "./GlareHover.vue";
 </script>`,
   code
-}
+};

src/constants/code/Animations/magnetCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Animations/Magnet/Magnet.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Animations/Magnet/Magnet.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const magnet: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Magnet`,
@@ -45,4 +45,4 @@ import Magnet from '@/content/Animations/Magnet/Magnet.vue'
 }
 </style>`,
   code
-}
+};

src/constants/code/Animations/magnetLinesCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/Animations/MagnetLines/MagnetLines.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/Animations/MagnetLines/MagnetLines.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const magnetLines: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MagnetLines`,
@@ -19,4 +19,4 @@ export const magnetLines: CodeObject = {
   import MagnetLines from "./MagnetLines.vue";
 </script>`,
   code
-}
+};

src/constants/code/Animations/pixelTransitionCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/Animations/PixelTransition/PixelTransition.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/Animations/PixelTransition/PixelTransition.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const pixelTransition: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/PixelTransition`,
@@ -26,4 +26,4 @@ export const pixelTransition: CodeObject = {
   import PixelTransition from './PixelTransition.vue';
 </script>`,
   code
-}
+};

src/constants/code/Backgrounds/auroraCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Aurora/Aurora.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Aurora/Aurora.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const aurora: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Aurora`,
@@ -30,4 +30,4 @@ export const aurora: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Backgrounds/beamsCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Beams/Beams.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Beams/Beams.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const beams: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Beams`,
@@ -33,4 +33,4 @@ export const beams: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Backgrounds/dotGridCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/DotGrid/DotGrid.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/DotGrid/DotGrid.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const dotGrid: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/DotGrid`,
@@ -36,4 +36,4 @@ export const dotGrid: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Backgrounds/gridMotionCode.ts

@@ -0,0 +1,45 @@
+import code from "@content/Backgrounds/GridMotion/GridMotion.vue?raw";
+import type { CodeObject } from "../../../types/code";
+
+export const gridMotion: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridMotion`,
+  installation: `npm i gsap`,
+  usage: `<template>
+    <GridMotion
+      :items="items"
+    />
+</template>
+
+<script setup lang="ts">
+  import GridMotion from "./GridMotion.vue";
+
+  const items = [ 
+   "Item 1", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", 
+   "Item 2", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "Item 4", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", 
+   "Item 5", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "Item 7", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", 
+   "Item 8", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "Item 10", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", 
+   "Item 11", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "Item 13", 
+   `<div key='item-1'>Custom Content</div>`, 
+   "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", 
+   "Item 14", 
+   // Add more items as needed 
+ ];
+</script>`,
+  code,
+};

src/constants/code/Backgrounds/iridescenceCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Iridescence/Iridescence.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Iridescence/Iridescence.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const iridescence: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Iridescence`,
@@ -19,4 +19,4 @@ export const iridescence: CodeObject = {
   import Iridescence from "./Iridescence.vue";
 </script>`,
   code
-}
+};

src/constants/code/Backgrounds/letterGlitchCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/LetterGlitch/LetterGlitch.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/LetterGlitch/LetterGlitch.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const letterGlitch: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/LetterGlitch`,
@@ -29,4 +29,4 @@ export const letterGlitch: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Backgrounds/lightningCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Lightning/Lightning.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Lightning/Lightning.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const lightning: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Lightning`,
@@ -30,4 +30,4 @@ export const lightning: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Backgrounds/particlesCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Particles/Particles.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Particles/Particles.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const particles: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Particles`,
@@ -36,4 +36,4 @@ export const particles: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Backgrounds/silkCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Silk/Silk.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Silk/Silk.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const silk: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Silk`,
@@ -30,4 +30,4 @@ export const silk: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Backgrounds/squaresCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Squares/Squares.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Squares/Squares.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const squares: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Squares`,
@@ -19,4 +19,4 @@ export const squares: CodeObject = {
   import Squares from "./Squares.vue";
 </script>`,
   code
-}
+};

src/constants/code/Backgrounds/threadsCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Threads/Threads.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Threads/Threads.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const threads: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Threads`,
@@ -19,4 +19,4 @@ export const threads: CodeObject = {
   import Threads from "./Threads.vue";
 </script>`,
   code
-}
+};

src/constants/code/Backgrounds/wavesCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Backgrounds/Waves/Waves.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Backgrounds/Waves/Waves.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const waves: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Waves`,
@@ -35,4 +35,4 @@ export const waves: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Components/cardSwapCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/CardSwap/CardSwap.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/CardSwap/CardSwap.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const cardSwap: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CardSwap`,
@@ -51,4 +51,4 @@ export const cardSwap: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/Components/carouselCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/Carousel/Carousel.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/Carousel/Carousel.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const carousel: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Carousel`,
@@ -37,4 +37,4 @@ export const carousel: CodeObject = {
   ];
 </script>`,
   code
-}
+};

src/constants/code/Components/circularGalleryCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/CircularGallery/CircularGallery.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/CircularGallery/CircularGallery.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const circularGallery: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CircularGallery`,
@@ -24,4 +24,4 @@ export const circularGallery: CodeObject = {
   import CircularGallery from "./CircularGallery.vue";
 </script>`,
   code
-}
+};

src/constants/code/Components/decayCardCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/DecayCard/DecayCard.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/DecayCard/DecayCard.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const decayCard: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/DecayCard`,
@@ -20,4 +20,4 @@ export const decayCard: CodeObject = {
   import DecayCard from "./DecayCard.vue";
 </script>`,
   code
-}
+};

src/constants/code/Components/dockCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/Dock/Dock.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/Dock/Dock.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const dock: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Dock`,
@@ -44,4 +44,4 @@ export const dock: CodeObject = {
   ];
 </script>`,
   code
-}
+};

src/constants/code/Components/elasticSliderCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/ElasticSlider/ElasticSlider.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/ElasticSlider/ElasticSlider.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const elasticSlider: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ElasticSlider`,
@@ -27,4 +27,4 @@ export const elasticSlider: CodeObject = {
   import ElasticSlider from "./ElasticSlider.vue";
 </script>`,
   code
-}
+};

src/constants/code/Components/flowingMenuCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/FlowingMenu/FlowingMenu.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/FlowingMenu/FlowingMenu.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const flowingMenu: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlowingMenu`,
@@ -19,4 +19,4 @@ export const flowingMenu: CodeObject = {
   ];
 </script>`,
   code
-}
+};

src/constants/code/Components/flyingPostersCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const flyingPosters: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlyingPosters`,
@@ -34,4 +34,4 @@ export const flyingPosters: CodeObject = {
   ];
 </script>`,
   code
-}
+};

src/constants/code/Components/glassIconsCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/GlassIcons/GlassIcons.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/GlassIcons/GlassIcons.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const glassIcons: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GlassIcons`,
@@ -20,4 +20,4 @@ export const glassIcons: CodeObject = {
   ];
 </script>`,
   code
-}
+};

src/constants/code/Components/gooeyNavCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/GooeyNav/GooeyNav.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/GooeyNav/GooeyNav.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const gooeyNav: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GooeyNav`,
@@ -37,4 +37,4 @@ export const gooeyNav: CodeObject = {
   }
 </style>`,
   code
-}
+};

src/constants/code/Components/infiniteScrollCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/InfiniteScroll/InfiniteScroll.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/InfiniteScroll/InfiniteScroll.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const infiniteScroll: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/InfiniteScroll`,
@@ -31,4 +31,4 @@ export const infiniteScroll: CodeObject = {
   ];
 </script>`,
   code
-}
+};

src/constants/code/Components/masonryCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/Masonry/Masonry.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/Masonry/Masonry.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const masonry: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Masonry`,
@@ -29,4 +29,4 @@ const items = ref([
 ])
 </script>`,
   code
-}
+};

src/constants/code/Components/pixelCardCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/PixelCard/PixelCard.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/PixelCard/PixelCard.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const pixelCard: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/PixelCard`,
@@ -18,4 +18,4 @@ export const pixelCard: CodeObject = {
   import PixelCard from "./PixelCard.vue";
 </script>`,
   code
-}
+};

src/constants/code/Components/profileCardCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/ProfileCard/ProfileCard.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/ProfileCard/ProfileCard.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const profileCard: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
@@ -28,4 +28,4 @@ export const profileCard: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/Components/spotlightCardCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/SpotlightCard/SpotlightCard.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/SpotlightCard/SpotlightCard.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const spotlightCard: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/SpotlightCard`,
@@ -16,4 +16,4 @@ export const spotlightCard: CodeObject = {
   import SpotlightCard from "./SpotlightCard.vue";
 </script>`,
   code
-}
+};

src/constants/code/Components/tiltedCardCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/Components/TiltedCard/TiltedCard.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/Components/TiltedCard/TiltedCard.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const tiltedCard: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/Components/TiltedCard`,
@@ -31,4 +31,4 @@ export const tiltedCard: CodeObject = {
   import TiltedCard from "./TiltedCard.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/blurTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/BlurText/BlurText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/BlurText/BlurText.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const blurText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/BlurText`,
@@ -26,4 +26,4 @@ export const blurText: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/circularTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/CircularText/CircularText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/CircularText/CircularText.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const circularText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/CircularText`,
@@ -17,4 +17,4 @@ export const circularText: CodeObject = {
   import CircularText from "./CircularText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/curvedLoopCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/CurvedLoop/CurvedLoop.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/CurvedLoop/CurvedLoop.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const curvedLoop: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/CurvedLoop`,
@@ -17,4 +17,4 @@ export const curvedLoop: CodeObject = {
   import CurvedLoop from "./CurvedLoop.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/decryptedTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/DecryptedText/DecryptedText.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/TextAnimations/DecryptedText/DecryptedText.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const decryptedText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/DecryptedText`,
@@ -21,4 +21,4 @@ export const decryptedText: CodeObject = {
   import DecryptedText from "./DecryptedText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/fallingTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/FallingText/FallingText.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/TextAnimations/FallingText/FallingText.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const fallingText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/FallingText`,
@@ -19,4 +19,4 @@ export const fallingText: CodeObject = {
   import FallingText from "./FallingText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/fuzzyTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/FuzzyText/FuzzyText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/FuzzyText/FuzzyText.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const fuzzyText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/FuzzyText`,
@@ -19,4 +19,4 @@ export const fuzzyText: CodeObject = {
   import FuzzyText from "./FuzzyText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/gradientTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/GradientText/GradientText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/GradientText/GradientText.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const gradientText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/GradientText`,
@@ -17,4 +17,4 @@ export const gradientText: CodeObject = {
   import GradientText from "./GradientText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/scrollFloatCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const scrollFloatCode: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
@@ -22,4 +22,4 @@ export const scrollFloatCode: CodeObject = {
   import ScrollFloat from "./ScrollFloat.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/shinyTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const shinyText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ShinyText`,
@@ -16,4 +16,4 @@ export const shinyText: CodeObject = {
   import ShinyText from "./ShinyText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/splitTextCode.ts

@@ -1,6 +1,6 @@
 // Fun fact: this is the first component ever made for Vue Bits!
-import code from '@content/TextAnimations/SplitText/SplitText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/SplitText/SplitText.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const splitText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/SplitText`,
@@ -30,4 +30,4 @@ export const splitText: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/textCursorCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/TextCursor/TextCursor.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/TextAnimations/TextCursor/TextCursor.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const textCursor: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextCursor`,
@@ -21,4 +21,4 @@ export const textCursor: CodeObject = {
   import TextCursor from "./TextCursor.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/textPressureCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/TextPressure/TextPressure.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/TextPressure/TextPressure.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const textPressure: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextPressure`,
@@ -22,4 +22,4 @@ export const textPressure: CodeObject = {
   import TextPressure from "./TextPressure.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/textTrailCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/TextTrail/TextTrail.vue?raw'
-import type { CodeObject } from '@/types/code'
+import code from '@/content/TextAnimations/TextTrail/TextTrail.vue?raw';
+import type { CodeObject } from '@/types/code';
 
 export const textTrail: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextTrail`,
@@ -20,4 +20,4 @@ export const textTrail: CodeObject = {
   import TextTrail from "./TextTrail.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/trueFocusCode.ts

@@ -1,5 +1,5 @@
-import code from "@/content/TextAnimations/TrueFocus/TrueFocus.vue?raw";
-import type { CodeObject } from "../../../types/code";
+import code from '@/content/TextAnimations/TrueFocus/TrueFocus.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const trueFocus: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TrueFocus`,
@@ -18,5 +18,5 @@ export const trueFocus: CodeObject = {
 <script setup lang="ts">
   import TrueFocus from "./TrueFocus.vue";
 </script>`,
-  code,
+  code
 };