Merge branch 'main' into add-ascii-texts

2026-03-07 14:39:30 -07:00 · 2025-07-12 18:41:53 +02:00
parent 7df5128cc3 01ab91c316
commit 1732e448f0
239 changed files with 18121 additions and 8750 deletions
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -20,6 +20,11 @@ export const CATEGORIES = [
      'Text Cursor',
      'Decrypted Text',
      'Ascii Text',
+      'True Focus',
+      'Scroll Float',
+      'Scroll Reveal',
+      'Rotating Text',
+      'Glitch Text'
    ]
  },
  {
@@ -27,13 +32,16 @@ export const CATEGORIES = [
    subcategories: [
      'Animated Content',
      'Fade Content',
+      'Splash Cursor',
      'Pixel Transition',
+      'Ribbons',
      'Glare Hover',
      'Magnet Lines',
      'Count Up',
+      'Metallic Paint',
      'Click Spark',
      'Magnet',
-      'Cubes',
+      'Cubes'
    ]
  },
  {
@@ -46,6 +54,7 @@ export const CATEGORIES = [
      'Pixel Card',
      'Carousel',
      'Spotlight Card',
+      'Circular Gallery',
      'Flying Posters',
      'Card Swap',
      'Infinite Scroll',
@@ -53,8 +62,8 @@ export const CATEGORIES = [
      'Glass Icons',
      'Decay Card',
      'Flowing Menu',
-      'Elastic Slider',
-    ],
+      'Elastic Slider'
+    ]
  },
  {
    name: 'Backgrounds',
@@ -62,14 +71,17 @@ export const CATEGORIES = [
      'Aurora',
      'Beams',
      'Dot Grid',
+      'Hyperspeed',
      'Silk',
      'Lightning',
      'Letter Glitch',
      'Particles',
+      'Shape Blur',
      'Waves',
      'Squares',
      'Iridescence',
      'Threads',
-    ],
+      'Grid Motion'
+    ]
  }
 ];
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -1,13 +1,16 @@
 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'),
+  'ribbons': () => import('../demo/Animations/RibbonsDemo.vue'),
+  'metallic-paint': () => import('../demo/Animations/MetallicPaintDemo.vue'),
+  'magnet': () => import('../demo/Animations/MagnetDemo.vue'),
+  'cubes': () => import('../demo/Animations/CubesDemo.vue'),
+  'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
+  'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
 };

 const textAnimations = {
@@ -24,43 +27,52 @@ const textAnimations = {
  'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
  'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
  'ascii-text': () => import("../demo/TextAnimations/AsciiTextDemo.vue"),
+  'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
+  'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
+  'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),
+  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue"),
+  'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.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"),
-  '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'),
+  'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
+  'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue')
 };

 export const componentMap = {
  ...animations,
  ...textAnimations,
  ...components,
-  ...backgrounds,
+  ...backgrounds
 };
--- a/src/constants/code/Animations/animatedContentCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/clickSparkCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/countUpCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/cubesCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/fadeContentCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/glareHoverCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/magnetCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/magnetLinesCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/metallicPaintCode.ts
+++ b/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
+};
--- a/src/constants/code/Animations/pixelTransitionCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Animations/ribbonsCode.ts
+++ b/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
+};
--- a/src/constants/code/Animations/splashCursorCode.ts
+++ b/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
+};
--- a/src/constants/code/Backgrounds/auroraCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/beamsCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/dotGridCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/gridMotionCode.ts
+++ b/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
+};
--- a/src/constants/code/Backgrounds/hyperspeedCode.ts
+++ b/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
+};
--- a/src/constants/code/Backgrounds/iridescenceCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/letterGlitchCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/lightningCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/particlesCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/shapeBlurCode.ts
+++ b/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
+};
--- a/src/constants/code/Backgrounds/silkCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/squaresCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/threadsCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Backgrounds/wavesCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/cardSwapCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/carouselCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/circularGalleryCode.ts
+++ b/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
+};
--- a/src/constants/code/Components/decayCardCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/dockCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/elasticSliderCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/flowingMenuCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/flyingPostersCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/glassIconsCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/gooeyNavCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/infiniteScrollCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/masonryCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/pixelCardCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/profileCardCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/spotlightCardCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/Components/tiltedCardCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/blurTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/circularTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/curvedLoopCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/decryptedTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/fallingTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/fuzzyTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/glitchTextCode.ts
+++ b/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
+};
--- a/src/constants/code/TextAnimations/gradientTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/rotatingTextCode.ts
+++ b/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
+};
--- a/src/constants/code/TextAnimations/scrollFloatCode.ts
+++ b/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
+};
--- a/src/constants/code/TextAnimations/scrollRevealCode.ts
+++ b/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
+};
--- a/src/constants/code/TextAnimations/shinyTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/splitTextCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/textCursorCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/textPressureCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/textTrailCode.ts
+++ b/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
-}
+};
--- a/src/constants/code/TextAnimations/trueFocusCode.ts
+++ b/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
+};