Merge branch 'main' into add-ascii-texts

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/metallicPaintCode.ts

@@ -0,0 +1,47 @@
+import code from '@content/Animations/MetallicPaint/MetallicPaint.vue?raw';
+import utility from '@content/Animations/MetallicPaint/parseImage.ts?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const metallicPaint: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MetallicPaint`,
+  usage: `<template>
+  <MetallicPaint
+    :image-data="imageData"
+    :params="{
+      patternScale: 2,
+      refraction: 0.015,
+      edge: 1,
+      patternBlur: 0.005,
+      liquid: 0.07,
+      speed: 0.3
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+  import MetallicPaint from "./MetallicPaint.vue";
+
+  // copy and import the parseImage utility from the correct path
+  import { parseImage } from './parseImage';
+
+  const imageData = ref<ImageData | null>(null);
+
+  onMounted(async () => {
+    try {
+      // Example: Fetch an SVG image and parse it
+      // The SVG should have a transparent background and black fill color for the best effect
+
+      const response = await fetch('/path/to/your/logo.svg');
+      const blob = await response.blob();
+      const file = new File([blob], 'logo.svg', { type: blob.type });
+      const { imageData: processedImageData } = await parseImage(file);
+      imageData.value = processedImageData;
+    } catch (err) {
+      console.error('Error loading image:', err);
+    }
+  });
+</script>`,
+  code,
+  utility
+};

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/Animations/ribbonsCode.ts

@@ -0,0 +1,28 @@
+import code from '@content/Animations/Ribbons/Ribbons.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const ribbons: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Ribbons`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <Ribbons
+    :colors="['#ff9346', '#7cff67', '#ffee51', '#5227FF']"
+    :base-spring="0.03"
+    :base-friction="0.9"
+    :base-thickness="30"
+    :offset-factor="0.05"
+    :max-age="500"
+    :point-count="50"
+    :speed-multiplier="0.6"
+    :enable-fade="false"
+    :enable-shader-effect="false"
+    :effect-amplitude="2"
+    :background-color="[0, 0, 0, 0]"
+  />
+</template>
+
+<script setup lang="ts">
+  import Ribbons from "./Ribbons.vue";
+</script>`,
+  code
+};

src/constants/code/Animations/splashCursorCode.ts

@@ -0,0 +1,29 @@
+import code from '@content/Animations/SplashCursor/SplashCursor.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const splashCursor: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/SplashCursor`,
+  usage: `<template>
+  <SplashCursor
+    :SIM_RESOLUTION="128"
+    :DYE_RESOLUTION="1440"
+    :CAPTURE_RESOLUTION="512"
+    :DENSITY_DISSIPATION="3.5"
+    :VELOCITY_DISSIPATION="2"
+    :PRESSURE="0.1"
+    :PRESSURE_ITERATIONS="20"
+    :CURL="3"
+    :SPLAT_RADIUS="0.2"
+    :SPLAT_FORCE="6000"
+    :SHADING="true"
+    :COLOR_UPDATE_SPEED="10"
+    :BACK_COLOR="{ r: 0.5, g: 0, b: 0 }"
+    :TRANSPARENT="true"
+  />
+</template>
+
+<script setup lang="ts">
+  import SplashCursor from "./SplashCursor.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,21 @@
+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="images"
+    />
+</template>
+
+<script setup lang="ts">
+  import GridMotion from "./GridMotion.vue";
+
+  const imageUrl = 'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+  const numberOfImages = 30;
+  const images = Array.from({ length: numberOfImages }, () => imageUrl);
+</script>`,
+  code
+};

src/constants/code/Backgrounds/hyperspeedCode.ts

@@ -0,0 +1,67 @@
+import code from '@content/Backgrounds/Hyperspeed/Hyperspeed.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const hyperspeed: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Hyperspeed`,
+  installation: `npm install three postprocessing`,
+  usage: `<template>
+  <div class="hyperspeed-container">
+    <Hyperspeed :effect-options="effectOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import Hyperspeed from './Hyperspeed.vue'
+  import { hyperspeedPresets } from './HyperspeedPresets'
+
+  // Use a preset or create custom options
+  const effectOptions = ref(hyperspeedPresets.one)
+
+  // Or create your own custom configuration
+  const customOptions = ref({
+    distortion: 'turbulentDistortion',
+    length: 400,
+    roadWidth: 10,
+    islandWidth: 2,
+    lanesPerRoad: 4,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 20,
+    lightPairsPerRoadWay: 40,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5],
+    lightStickHeight: [1.3, 1.7],
+    movingAwaySpeed: [60, 80],
+    movingCloserSpeed: [-120, -160],
+    carLightsLength: [400 * 0.03, 400 * 0.2],
+    carLightsRadius: [0.05, 0.14],
+    carWidthPercentage: [0.3, 0.5],
+    carShiftX: [-0.8, 0.8],
+    carFloorSeparation: [0, 5],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0xffffff,
+      brokenLines: 0xffffff,
+      leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
+      rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
+      sticks: 0x03b3c3,
+    },
+  })
+</script>
+
+<style scoped>
+.hyperspeed-container {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+</style>`,
+  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/shapeBlurCode.ts

@@ -0,0 +1,24 @@
+import code from '@content/Backgrounds/ShapeBlur/ShapeBlur.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const shapeBlur: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/ShapeBlur`,
+  installation: `npm install three`,
+  usage: `<template>
+  <ShapeBlur
+    :variation="0"
+    :pixel-ratio-prop="2"
+    :shape-size="1.2"
+    :roundness="0.4"
+    :border-size="0.05"
+    :circle-size="0.3"
+    :circle-edge="0.5"
+    class="shape-blur-effect"
+  />
+</template>
+
+<script setup lang="ts">
+  import ShapeBlur from "./ShapeBlur.vue";
+</script>`,
+  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

@@ -0,0 +1,27 @@
+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`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <CircularGallery
+    :items="[
+      { image: 'https://picsum.photos/800/600?random=1', text: 'Beautiful Nature' },
+      { image: 'https://picsum.photos/800/600?random=2', text: 'City Life' },
+      { image: 'https://picsum.photos/800/600?random=3', text: 'Ocean Views' }
+    ]"
+    :bend="3"
+    text-color="#ffffff"
+    :border-radius="0.05"
+    font="bold 30px Arial"
+    :scroll-speed="2"
+    :scroll-ease="0.05"
+  />
+</template>
+
+<script setup lang="ts">
+  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/glitchTextCode.ts

@@ -0,0 +1,19 @@
+import code from '@/content/TextAnimations/GlitchText/GlitchText.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const glitchText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/GlitchText`,
+  usage: `<template>
+  <GlitchText
+    children="Vue Bits"
+    :speed="0.5"
+    :enable-shadows="true"
+    :enable-on-hover="false"
+  />
+</template>
+
+<script setup lang="ts">
+  import GlitchText from "./GlitchText.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/rotatingTextCode.ts

@@ -0,0 +1,26 @@
+import code from '@/content/TextAnimations/RotatingText/RotatingText.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const rotatingText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/RotatingText`,
+  installation: `npm i motion-v`,
+  usage: `<template>
+    <RotatingText
+      :texts="['Vue', 'Bits', 'is', 'Cool!']"
+      mainClassName="px-2 sm:px-2 md:px-3 bg-green-300 text-black overflow-hidden py-0.5 sm:py-1 md:py-2 justify-center rounded-lg"
+      :staggerFrom="last"
+      :initial="{ y: '100%' }"
+      :animate="{ y: 0 }"
+      :exit="{ y: '-120%' }"
+      :staggerDuration="0.025"
+      splitLevelClassName="overflow-hidden pb-0.5 sm:pb-1 md:pb-1"
+      :transition="{ type: "spring", damping: 30, stiffness: 400 }"
+      :rotationInterval="2000"
+    />
+</template>
+
+<script setup lang="ts">
+  import RotatingText from "./RotatingText.vue";
+</script>`,
+  code
+};

src/constants/code/TextAnimations/scrollFloatCode.ts

@@ -0,0 +1,25 @@
+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`,
+  usage: `<template>
+  <ScrollFloat
+    :children="scrollText"
+    :animation-duration="animationDuration"
+    :ease="ease"
+    :scroll-start="scrollStart"
+    :scroll-end="scrollEnd"
+    :stagger="stagger"
+    :container-class-name="containerClassName"
+    :text-class-name="textClassName"
+    :scroll-container-ref="{ current: containerRef }"
+    :key="rerenderKey"
+  />
+</template>
+
+<script setup lang="ts">
+  import ScrollFloat from "./ScrollFloat.vue";
+</script>`,
+  code
+};

src/constants/code/TextAnimations/scrollRevealCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const scrollRevealCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollReveal`,
+  usage: `<template>
+    <ScrollReveal
+      :children="scrollText"
+      :enable-blur="enableBlur"
+      :base-opacity="baseOpacity"
+      :base-rotation="baseRotation"
+      :blur-strength="blurStrength"
+      :container-class-name="containerClassName"
+      :text-class-name="textClassName"
+      :rotation-end="rotationEnd"
+      :word-animation-end="wordAnimationEnd"
+      :scroll-container-ref="{ current: containerRef }"
+      :key="rerenderKey"
+    />
+</template>
+
+<script setup lang="ts">
+  import ScrollReveal from "./ScrollReveal.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

@@ -0,0 +1,22 @@
+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`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <TrueFocus
+    sentence="True Focus"
+    :manualMode="false"
+    :blurAmount="5"
+    borderColor="red"
+    :animationDuration="2"
+    :pauseBetweenAnimations="1"
+  />
+</template>
+
+<script setup lang="ts">
+  import TrueFocus from "./TrueFocus.vue";
+</script>`,
+  code
+};