From 0b97a8c75aa68b3d6e8dcf93d1add9a4721b8c5a Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Fri, 11 Jul 2025 18:18:45 +0530
Subject: [PATCH 01/37] Create <TrueFocus /> text animation

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/TextAnimations/trueFocusCode.ts      |  22 ++
 .../TextAnimations/TrueFocus/TrueFocus.vue    | 218 ++++++++++++++++++
 src/demo/TextAnimations/TrueFocusDemo.vue     | 158 +++++++++++++
 5 files changed, 400 insertions(+)
 create mode 100644 src/constants/code/TextAnimations/trueFocusCode.ts
 create mode 100644 src/content/TextAnimations/TrueFocus/TrueFocus.vue
 create mode 100644 src/demo/TextAnimations/TrueFocusDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 646629f..d7eedae 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'True Focus'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index ac70fc8..a9d1b62 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -23,6 +23,7 @@ const textAnimations = {
   'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
+  'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
 };
 
 const components = {
diff --git a/src/constants/code/TextAnimations/trueFocusCode.ts b/src/constants/code/TextAnimations/trueFocusCode.ts
new file mode 100644
index 0000000..4e0acc4
--- /dev/null
+++ 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,
+};
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
new file mode 100644
index 0000000..b5ebc51
--- /dev/null
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { ref, onUnmounted, watch, nextTick, computed } from "vue";
+
+interface TrueFocusProps {
+  sentence?: string;
+  manualMode?: boolean;
+  blurAmount?: number;
+  borderColor?: string;
+  glowColor?: string;
+  animationDuration?: number;
+  pauseBetweenAnimations?: number;
+}
+
+const props = withDefaults(defineProps<TrueFocusProps>(), {
+  sentence: "True Focus",
+  manualMode: false,
+  blurAmount: 5,
+  borderColor: "green",
+  glowColor: "rgba(0, 255, 0, 0.6)",
+  animationDuration: 0.5,
+  pauseBetweenAnimations: 1,
+});
+
+const words = computed(() => props.sentence.split(" "));
+const currentIndex = ref(0);
+const lastActiveIndex = ref<number | null>(null);
+const containerRef = ref<HTMLDivElement>();
+const wordRefs = ref<HTMLSpanElement[]>([]);
+const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
+
+let interval: number | null = null;
+
+watch(
+  [
+    () => props.manualMode,
+    () => props.animationDuration,
+    () => props.pauseBetweenAnimations,
+    words,
+  ],
+  () => {
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+
+    if (!props.manualMode) {
+      interval = setInterval(
+        () => {
+          currentIndex.value = (currentIndex.value + 1) % words.value.length;
+        },
+        (props.animationDuration + props.pauseBetweenAnimations) * 1000,
+      );
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  [currentIndex, words],
+  async () => {
+    if (currentIndex.value === null || currentIndex.value === -1) return;
+    if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;
+
+    await nextTick();
+
+    const parentRect = containerRef.value.getBoundingClientRect();
+    const activeRect = wordRefs.value[currentIndex.value].getBoundingClientRect();
+
+    focusRect.value = {
+      x: activeRect.left - parentRect.left,
+      y: activeRect.top - parentRect.top,
+      width: activeRect.width,
+      height: activeRect.height,
+    };
+  },
+  { immediate: true },
+);
+
+const handleMouseEnter = (index: number) => {
+  if (props.manualMode) {
+    lastActiveIndex.value = index;
+    currentIndex.value = index;
+  }
+};
+
+const handleMouseLeave = () => {
+  if (props.manualMode) {
+    currentIndex.value = lastActiveIndex.value || 0;
+  }
+};
+
+const setWordRef = (el: HTMLSpanElement | null, index: number) => {
+  if (el) {
+    wordRefs.value[index] = el;
+  }
+};
+
+onUnmounted(() => {
+  if (interval) {
+    clearInterval(interval);
+  }
+});
+</script>
+
+<template>
+  <div class="focus-container" ref="containerRef">
+    <span
+      v-for="(word, index) in words"
+      :key="index"
+      :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
+      :class="[
+        'focus-word',
+        { manual: manualMode },
+        { active: index === currentIndex && !manualMode },
+      ]"
+      :style="{
+        filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
+        '--border-color': borderColor,
+        '--glow-color': glowColor,
+        transition: `filter ${animationDuration}s ease`,
+      }"
+      @mouseenter="handleMouseEnter(index)"
+      @mouseleave="handleMouseLeave"
+    >
+      {{ word }}
+    </span>
+
+    <div
+      class="focus-frame"
+      :style="{
+        '--border-color': borderColor,
+        '--glow-color': glowColor,
+        transform: `translate(${focusRect.x}px, ${focusRect.y}px)`,
+        width: `${focusRect.width}px`,
+        height: `${focusRect.height}px`,
+        opacity: currentIndex >= 0 ? 1 : 0,
+        transition: `all ${animationDuration}s ease`,
+      }"
+    >
+      <span class="top-left corner"></span>
+      <span class="top-right corner"></span>
+      <span class="bottom-left corner"></span>
+      <span class="bottom-right corner"></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.focus-container {
+  position: relative;
+  display: flex;
+  gap: 1em;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.focus-word {
+  position: relative;
+  font-size: 3rem;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    filter 0.3s ease,
+    color 0.3s ease;
+}
+
+.focus-word.active {
+  filter: blur(0);
+}
+
+.focus-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: content-box;
+  border: none;
+}
+
+.corner {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border: 3px solid var(--border-color, #fff);
+  filter: drop-shadow(0px 0px 4px var(--border-color, #fff));
+  border-radius: 3px;
+  transition: none;
+}
+
+.top-left {
+  top: -10px;
+  left: -10px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.top-right {
+  top: -10px;
+  right: -10px;
+  border-left: none;
+  border-bottom: none;
+}
+
+.bottom-left {
+  bottom: -10px;
+  left: -10px;
+  border-right: none;
+  border-top: none;
+}
+
+.bottom-right {
+  bottom: -10px;
+  right: -10px;
+  border-left: none;
+  border-top: none;
+}
+</style>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
new file mode 100644
index 0000000..cf4abb3
--- /dev/null
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="truefocus-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
+          <RefreshButton @click="forceRerender" />
+          <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
+            <TrueFocus v-bind="config" />
+          </div>
+        </div>
+
+        <Customize>
+          <PreviewColor title="Text Color" v-model="borderColor" @update:model-value="forceRerender" />
+
+          <PreviewSwitch
+            title="Hover Mode"
+            v-model="manualMode"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Blur Amount"
+            v-model="blurAmount"
+            :min="0"
+            :max="15"
+            :step="0.5"
+            value-unit="px"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Animation Duration"
+            v-model="animationDuration"
+            :min="0.1"
+            :max="3"
+            :step="0.1"
+            value-unit="s"
+            :disabled="!manualMode"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Pause Between Animations"
+            v-model="pauseBetweenAnimations"
+            :min="0"
+            :max="5"
+            :step="0.5"
+            value-unit="s"
+            :disabled="manualMode"
+            @update:model-value="forceRerender"
+          />
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['framer-motion']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="trueFocus" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="trueFocus.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TabbedLayout from "../../components/common/TabbedLayout.vue";
+import PropTable from "../../components/common/PropTable.vue";
+import CliInstallation from "../../components/code/CliInstallation.vue";
+import CodeExample from "../../components/code/CodeExample.vue";
+import Dependencies from "../../components/code/Dependencies.vue";
+import Customize from "../../components/common/Customize.vue";
+import PreviewColor from "../../components/common/PreviewColor.vue";
+import PreviewSlider from "../../components/common/PreviewSlider.vue";
+import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
+import RefreshButton from "../../components/common/RefreshButton.vue";
+import TrueFocus from "../../content/TextAnimations/TrueFocus/TrueFocus.vue";
+import { trueFocus } from "../../constants/code/TextAnimations/trueFocusCode";
+import { useForceRerender } from "@/composables/useForceRerender";
+
+const { rerenderKey: key, forceRerender } = useForceRerender();
+
+const manualMode = ref(false);
+const blurAmount = ref(5);
+const animationDuration = ref(0.5);
+const pauseBetweenAnimations = ref(1);
+const borderColor = ref("#5227FF");
+
+const config = computed(() => ({
+  sentence: "True Focus",
+  manualMode: manualMode.value,
+  blurAmount: blurAmount.value,
+  borderColor: borderColor.value,
+  animationDuration: animationDuration.value,
+  pauseBetweenAnimations: pauseBetweenAnimations.value,
+}));
+
+const propData = [
+  {
+    name: "sentence",
+    type: "string",
+    default: "'True Focus'",
+    description: "The text to display with the focus animation.",
+  },
+  {
+    name: "manualMode",
+    type: "boolean",
+    default: "false",
+    description: "Disables automatic animation when set to true.",
+  },
+  {
+    name: "blurAmount",
+    type: "number",
+    default: "5",
+    description: "The amount of blur applied to non-active words.",
+  },
+  {
+    name: "borderColor",
+    type: "string",
+    default: "'green'",
+    description: "The color of the focus borders.",
+  },
+  {
+    name: "glowColor",
+    type: "string",
+    default: "'rgba(0, 255, 0, 0.6)'",
+    description: "The color of the glowing effect on the borders.",
+  },
+  {
+    name: "animationDuration",
+    type: "number",
+    default: "0.5",
+    description: "The duration of the animation for each word.",
+  },
+  {
+    name: "pauseBetweenAnimations",
+    type: "number",
+    default: "1",
+    description: "Time to pause between focusing on each word (in auto mode).",
+  },
+];
+</script>
+
+<style scoped>
+.truefocus-demo {
+  width: 100%;
+}
+
+.demo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

From f19ec4d1ef67a625094d035b8934f0191b67eb99 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Sat, 12 Jul 2025 00:29:13 +0200
Subject: [PATCH 02/37] fix linter

---
 src/content/Backgrounds/Beams/Beams.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/Backgrounds/Beams/Beams.vue b/src/content/Backgrounds/Beams/Beams.vue
index 48441d4..4cfde5e 100644
--- a/src/content/Backgrounds/Beams/Beams.vue
+++ b/src/content/Backgrounds/Beams/Beams.vue
@@ -375,7 +375,7 @@ const initThreeJS = () => {
   
   resize()
   
-  const animate = (time: number) => {
+  const animate = () => {
     animationId = requestAnimationFrame(animate)
     
     if (beamMesh && beamMesh.material) {
@@ -389,7 +389,7 @@ const initThreeJS = () => {
   
   animationId = requestAnimationFrame(animate)
   
-  ;(container as any)._resizeObserver = resizeObserver
+  ;(container as HTMLDivElement & { _resizeObserver?: ResizeObserver })._resizeObserver = resizeObserver
 }
 
 const cleanup = () => {
@@ -399,11 +399,11 @@ const cleanup = () => {
   }
   
   if (containerRef.value) {
-    const container = containerRef.value
+    const container = containerRef.value as HTMLDivElement & { _resizeObserver?: ResizeObserver }
     
-    if ((container as any)._resizeObserver) {
-      ;(container as any)._resizeObserver.disconnect()
-      delete (container as any)._resizeObserver
+    if (container._resizeObserver) {
+      container._resizeObserver.disconnect()
+      delete container._resizeObserver
     }
     
     if (renderer && renderer.domElement.parentNode === container) {

From d74724c136b0809c5dea29dcab96c6b8a46845d9 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 12 Jul 2025 09:00:15 +0530
Subject: [PATCH 03/37] Updated <TrueFocus /> text animation

---
 .../code/TextAnimations/trueFocusCode.ts      |   8 +-
 .../TextAnimations/TrueFocus/TrueFocus.vue    | 130 +++++-------------
 src/demo/TextAnimations/TrueFocusDemo.vue     |  16 +--
 3 files changed, 43 insertions(+), 111 deletions(-)

diff --git a/src/constants/code/TextAnimations/trueFocusCode.ts b/src/constants/code/TextAnimations/trueFocusCode.ts
index 4e0acc4..603d42c 100644
--- a/src/constants/code/TextAnimations/trueFocusCode.ts
+++ b/src/constants/code/TextAnimations/trueFocusCode.ts
@@ -7,11 +7,11 @@ export const trueFocus: CodeObject = {
   usage: `<template>
   <TrueFocus
     sentence="True Focus"
-    manualMode="false"
-    blurAmount="5"
+    :manualMode="false"
+    :blurAmount="5"
     borderColor="red"
-    animationDuration="2"
-    pauseBetweenAnimations="1"
+    :animationDuration="2"
+    :pauseBetweenAnimations="1"
   />
 </template>
 
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index b5ebc51..6040b7e 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, onUnmounted, watch, nextTick, computed } from "vue";
+import { motion } from "motion-v";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 
 interface TrueFocusProps {
   sentence?: string;
@@ -56,7 +57,7 @@ watch(
 );
 
 watch(
-  [currentIndex, words],
+  [currentIndex, words.value.length],
   async () => {
     if (currentIndex.value === null || currentIndex.value === -1) return;
     if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;
@@ -95,6 +96,22 @@ const setWordRef = (el: HTMLSpanElement | null, index: number) => {
   }
 };
 
+onMounted(async () => {
+  await nextTick();
+  
+  if (wordRefs.value[0] && containerRef.value) {
+    const parentRect = containerRef.value.getBoundingClientRect();
+    const activeRect = wordRefs.value[0].getBoundingClientRect();
+
+    focusRect.value = {
+      x: activeRect.left - parentRect.left,
+      y: activeRect.top - parentRect.top,
+      width: activeRect.width,
+      height: activeRect.height,
+    };
+  }
+});
+
 onUnmounted(() => {
   if (interval) {
     clearInterval(interval);
@@ -103,16 +120,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="focus-container" ref="containerRef">
+  <div class="relative flex flex-wrap justify-center items-center gap-[1em]" ref="containerRef">
     <span
       v-for="(word, index) in words"
       :key="index"
       :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
-      :class="[
-        'focus-word',
-        { manual: manualMode },
-        { active: index === currentIndex && !manualMode },
-      ]"
+      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
       :style="{
         filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
         '--border-color': borderColor,
@@ -125,94 +138,27 @@ onUnmounted(() => {
       {{ word }}
     </span>
 
-    <div
-      class="focus-frame"
+    <motion.div
+      class="top-0 left-0 box-content absolute border-none pointer-events-none"
+      :animate="{
+        x: focusRect.x,
+        y: focusRect.y,
+        width: focusRect.width,
+        height: focusRect.height,
+        opacity: currentIndex >= 0 ? 1 : 0,
+      }"
+      :transition="{
+        duration: animationDuration,
+      }"
       :style="{
         '--border-color': borderColor,
         '--glow-color': glowColor,
-        transform: `translate(${focusRect.x}px, ${focusRect.y}px)`,
-        width: `${focusRect.width}px`,
-        height: `${focusRect.height}px`,
-        opacity: currentIndex >= 0 ? 1 : 0,
-        transition: `all ${animationDuration}s ease`,
       }"
     >
-      <span class="top-left corner"></span>
-      <span class="top-right corner"></span>
-      <span class="bottom-left corner"></span>
-      <span class="bottom-right corner"></span>
-    </div>
+      <span class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+    </motion.div>
   </div>
 </template>
-
-<style scoped>
-.focus-container {
-  position: relative;
-  display: flex;
-  gap: 1em;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.focus-word {
-  position: relative;
-  font-size: 3rem;
-  font-weight: 900;
-  cursor: pointer;
-  transition:
-    filter 0.3s ease,
-    color 0.3s ease;
-}
-
-.focus-word.active {
-  filter: blur(0);
-}
-
-.focus-frame {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  box-sizing: content-box;
-  border: none;
-}
-
-.corner {
-  position: absolute;
-  width: 1rem;
-  height: 1rem;
-  border: 3px solid var(--border-color, #fff);
-  filter: drop-shadow(0px 0px 4px var(--border-color, #fff));
-  border-radius: 3px;
-  transition: none;
-}
-
-.top-left {
-  top: -10px;
-  left: -10px;
-  border-right: none;
-  border-bottom: none;
-}
-
-.top-right {
-  top: -10px;
-  right: -10px;
-  border-left: none;
-  border-bottom: none;
-}
-
-.bottom-left {
-  bottom: -10px;
-  left: -10px;
-  border-right: none;
-  border-top: none;
-}
-
-.bottom-right {
-  bottom: -10px;
-  right: -10px;
-  border-left: none;
-  border-top: none;
-}
-</style>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index cf4abb3..bef248c 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -3,7 +3,6 @@
     <TabbedLayout>
       <template #preview>
         <div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
-          <RefreshButton @click="forceRerender" />
           <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
             <TrueFocus v-bind="config" />
           </div>
@@ -77,7 +76,6 @@ import Customize from "../../components/common/Customize.vue";
 import PreviewColor from "../../components/common/PreviewColor.vue";
 import PreviewSlider from "../../components/common/PreviewSlider.vue";
 import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
-import RefreshButton from "../../components/common/RefreshButton.vue";
 import TrueFocus from "../../content/TextAnimations/TrueFocus/TrueFocus.vue";
 import { trueFocus } from "../../constants/code/TextAnimations/trueFocusCode";
 import { useForceRerender } from "@/composables/useForceRerender";
@@ -88,7 +86,7 @@ const manualMode = ref(false);
 const blurAmount = ref(5);
 const animationDuration = ref(0.5);
 const pauseBetweenAnimations = ref(1);
-const borderColor = ref("#5227FF");
+const borderColor = ref("#27FF64");
 
 const config = computed(() => ({
   sentence: "True Focus",
@@ -144,15 +142,3 @@ const propData = [
   },
 ];
 </script>
-
-<style scoped>
-.truefocus-demo {
-  width: 100%;
-}
-
-.demo-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>

From ea8a04eb3bccd15bf2aae8aa8e4a0e1b309e7c8f Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 02:44:24 +0600
Subject: [PATCH 04/37] Scroll Float added in text animation section

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/Components/scrollFloatCode.ts        |  25 +++
 .../ScrollFloat/ScrollFloat.vue               | 141 +++++++++++++
 src/demo/TextAnimations/ScrollFloatDemo.vue   | 191 ++++++++++++++++++
 5 files changed, 359 insertions(+)
 create mode 100644 src/constants/code/Components/scrollFloatCode.ts
 create mode 100644 src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
 create mode 100644 src/demo/TextAnimations/ScrollFloatDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 9234c53..6dae674 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'Scroll Float'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index d1c9376..ea07b7e 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -23,6 +23,7 @@ const textAnimations = {
   'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
+  'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
 };
 
 const components = {
diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/Components/scrollFloatCode.ts
new file mode 100644
index 0000000..d4cd34b
--- /dev/null
+++ b/src/constants/code/Components/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/Components/ProfileCard`,
+  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
+}
\ No newline at end of file
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
new file mode 100644
index 0000000..b12e5a4
--- /dev/null
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -0,0 +1,141 @@
+<template>
+    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
+      <span :class="`scroll-float-text ${textClassName}`">
+        <span
+          v-for="(char, index) in splitText"
+          :key="index"
+          class="char"
+        >
+          {{ char === " " ? "\u00A0" : char }}
+        </span>
+      </span>
+    </h2>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+  import { gsap } from 'gsap';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
+  
+  gsap.registerPlugin(ScrollTrigger);
+  
+  interface Props {
+    children: string;
+    scrollContainerRef?: { current: HTMLElement | null };
+    containerClassName?: string;
+    textClassName?: string;
+    animationDuration?: number;
+    ease?: string;
+    scrollStart?: string;
+    scrollEnd?: string;
+    stagger?: number;
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    containerClassName: '',
+    textClassName: '',
+    animationDuration: 1,
+    ease: 'back.inOut(2)',
+    scrollStart: 'center bottom+=50%',
+    scrollEnd: 'bottom bottom-=40%',
+    stagger: 0.03
+  });
+  
+  const containerRef = ref<HTMLElement | null>(null);
+  let scrollTriggerInstance: ScrollTrigger | null = null;
+  
+  const splitText = computed(() => {
+    const text = typeof props.children === 'string' ? props.children : '';
+    return text.split("");
+  });
+  
+  const initializeAnimation = () => {
+    const el = containerRef.value;
+    if (!el) return;
+  
+    const scroller =
+      props.scrollContainerRef && props.scrollContainerRef.current
+        ? props.scrollContainerRef.current
+        : window;
+  
+    const charElements = el.querySelectorAll('.char');
+  
+    if (scrollTriggerInstance) {
+      scrollTriggerInstance.kill();
+    }
+  
+    const tl = gsap.fromTo(
+      charElements,
+      {
+        willChange: 'opacity, transform',
+        opacity: 0,
+        yPercent: 120,
+        scaleY: 2.3,
+        scaleX: 0.7,
+        transformOrigin: '50% 0%'
+      },
+      {
+        duration: props.animationDuration,
+        ease: props.ease,
+        opacity: 1,
+        yPercent: 0,
+        scaleY: 1,
+        scaleX: 1,
+        stagger: props.stagger,
+        scrollTrigger: {
+          trigger: el,
+          scroller,
+          start: props.scrollStart,
+          end: props.scrollEnd,
+          scrub: true
+        }
+      }
+    );
+  
+    scrollTriggerInstance = tl.scrollTrigger || null;
+  };
+  
+  onMounted(() => {
+    initializeAnimation();
+  });
+  
+  onUnmounted(() => {
+    if (scrollTriggerInstance) {
+      scrollTriggerInstance.kill();
+    }
+  });
+  
+  watch(
+    [
+      () => props.children,
+      () => props.scrollContainerRef,
+      () => props.animationDuration,
+      () => props.ease,
+      () => props.scrollStart,
+      () => props.scrollEnd,
+      () => props.stagger
+    ],
+    () => {
+      initializeAnimation();
+    },
+    { deep: true }
+  );
+  </script>
+  
+  <style scoped>
+  .scroll-float {
+    overflow: hidden;
+  }
+  
+  .scroll-float-text {
+    display: inline-block;
+    font-size: clamp(1.6rem, 8vw, 10rem);
+    font-weight: 900;
+    text-align: center;
+    line-height: 1.5;
+  }
+  
+  .char {
+    display: inline-block;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
new file mode 100644
index 0000000..fc0eda0
--- /dev/null
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="profile-card-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div 
+          ref="containerRef"
+          class="demo-container"
+          @wheel="smoothScroll"
+        >
+       
+          <div class="scroll-instruction">
+            Scroll Down
+          </div>
+          
+          <div class="scroll-content">
+            <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"
+            />
+          </div>
+        </div>
+
+        <Customize>
+        
+            <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
+            <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
+            
+
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="scrollFloatCode" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="scrollFloatCode.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { gsap } from 'gsap'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import { scrollFloatCode } from '@/constants/code/Components/scrollFloatCode'
+
+
+const containerRef = ref<HTMLElement | null>(null)
+const scrollText = ref("vuebits")
+const animationDuration = ref(1)
+const ease = ref('back.inOut(2)')
+const scrollStart = ref('center bottom+=50%')
+const scrollEnd = ref('bottom bottom-=40%')
+const stagger = ref(0.03)
+const containerClassName = ref("")
+const textClassName = ref("")
+const rerenderKey = ref(0)
+
+
+const smoothScroll = (e: WheelEvent) => {
+  e.preventDefault()
+  const container = containerRef.value
+  if (!container) return
+
+  const delta = e.deltaY || e.detail
+  const scrollAmount = delta * 2
+  
+  gsap.to(container, {
+    scrollTop: container.scrollTop + scrollAmount,
+    duration: 2,
+    ease: "power3.out",
+    overwrite: "auto"
+  })
+}
+
+
+onMounted(() => {
+  const container = containerRef.value
+  if (container) {
+    container.addEventListener('wheel', smoothScroll, { passive: false })
+  }
+})
+
+onUnmounted(() => {
+  const container = containerRef.value
+  if (container) {
+    container.removeEventListener('wheel', smoothScroll)
+  }
+})
+
+const propData = [
+  {
+    name: 'children',
+    type: 'string',
+    default: '""',
+    description: 'The text content to be animated character by character'
+  },
+  {
+    name: 'scrollContainerRef',
+    type: 'object',
+    default: 'undefined',
+    description: 'Ref to a custom scroll container (defaults to window)'
+  },
+  {
+    name: 'containerClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the container element'
+  },
+  {
+    name: 'textClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the text element'
+  },
+  {
+    name: 'animationDuration',
+    type: 'number',
+    default: '1',
+    description: 'Duration of the animation in seconds'
+  },
+  {
+    name: 'ease',
+    type: 'string',
+    default: '"back.inOut(2)"',
+    description: 'GSAP easing function for the animation'
+  },
+  {
+    name: 'scrollStart',
+    type: 'string',
+    default: '"center bottom+=50%"',
+    description: 'ScrollTrigger start position'
+  },
+  {
+    name: 'scrollEnd',
+    type: 'string',
+    default: '"bottom bottom-=40%"',
+    description: 'ScrollTrigger end position'
+  },
+  {
+    name: 'stagger',
+    type: 'number',
+    default: '0.03',
+    description: 'Delay between each character animation'
+  }
+]
+</script>
+<style scoped>
+.demo-container {
+  height: 60vh ;
+  overflow-y: auto;
+}
+
+.scroll-content {
+  padding-top: 150vh !important; 
+  padding-bottom: 50vh;
+}
+.scroll-instruction {
+  text-align: center;
+  color: #271E37;
+  font-size: clamp(4rem, 6vw, 4rem);
+  font-weight: 900;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+}
+.scroll-content{
+  color: aliceblue;
+}
+
+</style>
\ No newline at end of file

From 936bca258a64682dbce501ebde85d851edc816fe Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 11:26:58 +0600
Subject: [PATCH 05/37] Issue resolved

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 .../code/Components/scrollFloatCode.ts        |   2 +-
 .../ScrollFloat/ScrollFloat.vue               | 252 ++++++++----------
 src/demo/TextAnimations/ScrollFloatDemo.vue   |   2 -
 3 files changed, 118 insertions(+), 138 deletions(-)

diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/Components/scrollFloatCode.ts
index d4cd34b..f7bba6c 100644
--- a/src/constants/code/Components/scrollFloatCode.ts
+++ b/src/constants/code/Components/scrollFloatCode.ts
@@ -2,7 +2,7 @@ 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/Components/ProfileCard`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
   usage: `<template>
   <ScrollFloat
     :children="scrollText"
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
index b12e5a4..6aad9af 100644
--- a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -1,141 +1,123 @@
 <template>
-    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
-      <span :class="`scroll-float-text ${textClassName}`">
-        <span
-          v-for="(char, index) in splitText"
-          :key="index"
-          class="char"
-        >
-          {{ char === " " ? "\u00A0" : char }}
-        </span>
+  <h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
+    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
+      <span
+        v-for="(char, index) in splitText"
+        :key="index"
+        class="inline-block char"
+      >
+        {{ char === " " ? "\u00A0" : char }}
       </span>
-    </h2>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-  import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/ScrollTrigger';
-  
-  gsap.registerPlugin(ScrollTrigger);
-  
-  interface Props {
-    children: string;
-    scrollContainerRef?: { current: HTMLElement | null };
-    containerClassName?: string;
-    textClassName?: string;
-    animationDuration?: number;
-    ease?: string;
-    scrollStart?: string;
-    scrollEnd?: string;
-    stagger?: number;
+    </span>
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface Props {
+  children: string;
+  scrollContainerRef?: { current: HTMLElement | null };
+  containerClassName?: string;
+  textClassName?: string;
+  animationDuration?: number;
+  ease?: string;
+  scrollStart?: string;
+  scrollEnd?: string;
+  stagger?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  containerClassName: '',
+  textClassName: '',
+  animationDuration: 1,
+  ease: 'back.inOut(2)',
+  scrollStart: 'center bottom+=50%',
+  scrollEnd: 'bottom bottom-=40%',
+  stagger: 0.03
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+let scrollTriggerInstance: ScrollTrigger | null = null;
+
+const splitText = computed(() => {
+  const text = typeof props.children === 'string' ? props.children : '';
+  return text.split("");
+});
+
+const initializeAnimation = () => {
+  const el = containerRef.value;
+  if (!el) return;
+
+  const scroller =
+    props.scrollContainerRef && props.scrollContainerRef.current
+      ? props.scrollContainerRef.current
+      : window;
+
+  const charElements = el.querySelectorAll('.char');
+
+  if (scrollTriggerInstance) {
+    scrollTriggerInstance.kill();
   }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    containerClassName: '',
-    textClassName: '',
-    animationDuration: 1,
-    ease: 'back.inOut(2)',
-    scrollStart: 'center bottom+=50%',
-    scrollEnd: 'bottom bottom-=40%',
-    stagger: 0.03
-  });
-  
-  const containerRef = ref<HTMLElement | null>(null);
-  let scrollTriggerInstance: ScrollTrigger | null = null;
-  
-  const splitText = computed(() => {
-    const text = typeof props.children === 'string' ? props.children : '';
-    return text.split("");
-  });
-  
-  const initializeAnimation = () => {
-    const el = containerRef.value;
-    if (!el) return;
-  
-    const scroller =
-      props.scrollContainerRef && props.scrollContainerRef.current
-        ? props.scrollContainerRef.current
-        : window;
-  
-    const charElements = el.querySelectorAll('.char');
-  
-    if (scrollTriggerInstance) {
-      scrollTriggerInstance.kill();
-    }
-  
-    const tl = gsap.fromTo(
-      charElements,
-      {
-        willChange: 'opacity, transform',
-        opacity: 0,
-        yPercent: 120,
-        scaleY: 2.3,
-        scaleX: 0.7,
-        transformOrigin: '50% 0%'
-      },
-      {
-        duration: props.animationDuration,
-        ease: props.ease,
-        opacity: 1,
-        yPercent: 0,
-        scaleY: 1,
-        scaleX: 1,
-        stagger: props.stagger,
-        scrollTrigger: {
-          trigger: el,
-          scroller,
-          start: props.scrollStart,
-          end: props.scrollEnd,
-          scrub: true
-        }
-      }
-    );
-  
-    scrollTriggerInstance = tl.scrollTrigger || null;
-  };
-  
-  onMounted(() => {
-    initializeAnimation();
-  });
-  
-  onUnmounted(() => {
-    if (scrollTriggerInstance) {
-      scrollTriggerInstance.kill();
-    }
-  });
-  
-  watch(
-    [
-      () => props.children,
-      () => props.scrollContainerRef,
-      () => props.animationDuration,
-      () => props.ease,
-      () => props.scrollStart,
-      () => props.scrollEnd,
-      () => props.stagger
-    ],
-    () => {
-      initializeAnimation();
+
+  const tl = gsap.fromTo(
+    charElements,
+    {
+      willChange: 'opacity, transform',
+      opacity: 0,
+      yPercent: 120,
+      scaleY: 2.3,
+      scaleX: 0.7,
+      transformOrigin: '50% 0%'
     },
-    { deep: true }
+    {
+      duration: props.animationDuration,
+      ease: props.ease,
+      opacity: 1,
+      yPercent: 0,
+      scaleY: 1,
+      scaleX: 1,
+      stagger: props.stagger,
+      scrollTrigger: {
+        trigger: el,
+        scroller,
+        start: props.scrollStart,
+        end: props.scrollEnd,
+        scrub: true
+      }
+    }
   );
-  </script>
-  
-  <style scoped>
-  .scroll-float {
-    overflow: hidden;
+
+  scrollTriggerInstance = tl.scrollTrigger || null;
+};
+
+onMounted(() => {
+  initializeAnimation();
+});
+
+onUnmounted(() => {
+  if (scrollTriggerInstance) {
+    scrollTriggerInstance.kill();
   }
-  
-  .scroll-float-text {
-    display: inline-block;
-    font-size: clamp(1.6rem, 8vw, 10rem);
-    font-weight: 900;
-    text-align: center;
-    line-height: 1.5;
-  }
-  
-  .char {
-    display: inline-block;
-  }
-  </style>
\ No newline at end of file
+});
+
+watch(
+  [
+    () => props.children,
+    () => props.scrollContainerRef,
+    () => props.animationDuration,
+    () => props.ease,
+    () => props.scrollStart,
+    () => props.scrollEnd,
+    () => props.stagger
+  ],
+  () => {
+    initializeAnimation();
+  },
+  { deep: true }
+);
+</script>
\ No newline at end of file
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index fc0eda0..82cbb4f 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="profile-card-demo">
     <TabbedLayout>
       <template #preview>
         <div 
@@ -47,7 +46,6 @@
         <CliInstallation :command="scrollFloatCode.cli" />
       </template>
     </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">

From 45d0dbaf3c696dbd16b040acdb688d55fa4a5c46 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 12 Jul 2025 12:06:15 +0530
Subject: [PATCH 06/37] Added <GridMotion  /> background

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/Backgrounds/gridMotionCode.ts        |  45 +++++++
 .../Backgrounds/GridMotion/GridMotion.vue     | 116 ++++++++++++++++++
 src/demo/Backgrounds/GridMotionDemo.vue       | 115 +++++++++++++++++
 5 files changed, 278 insertions(+)
 create mode 100644 src/constants/code/Backgrounds/gridMotionCode.ts
 create mode 100644 src/content/Backgrounds/GridMotion/GridMotion.vue
 create mode 100644 src/demo/Backgrounds/GridMotionDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 9234c53..43868e4 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -69,6 +69,7 @@ export const CATEGORIES = [
       'Squares',
       'Iridescence',
       'Threads',
+      'Grid Motion'
     ],
   }
 ];
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index d1c9376..cb5f98e 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -55,6 +55,7 @@ const backgrounds = {
   '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 = {
diff --git a/src/constants/code/Backgrounds/gridMotionCode.ts b/src/constants/code/Backgrounds/gridMotionCode.ts
new file mode 100644
index 0000000..36b3082
--- /dev/null
+++ b/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='jsx-item-1'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
+    'Item 4',
+    "<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
+    'Item 7',
+    "<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
+    'Item 10',
+    "<div key='jsx-item-3'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
+    'Item 13',
+    "<div key='jsx-item-4'>Custom JSX 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,
+};
diff --git a/src/content/Backgrounds/GridMotion/GridMotion.vue b/src/content/Backgrounds/GridMotion/GridMotion.vue
new file mode 100644
index 0000000..ee33f4b
--- /dev/null
+++ b/src/content/Backgrounds/GridMotion/GridMotion.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed } from "vue";
+import { gsap } from "gsap";
+
+interface GridMotionProps {
+  items?: string[];
+  gradientColor?: string;
+}
+
+const props = withDefaults(defineProps<GridMotionProps>(), {
+  items: () => [],
+  gradientColor: "black",
+});
+
+const gridRef = ref<HTMLElement | null>(null);
+const rowRefs = ref<HTMLElement[]>([]);
+const mouseX = ref(window.innerWidth / 2);
+
+const totalItems = 28;
+const defaultItems = Array.from({ length: totalItems }, (_, i) => `Item ${i + 1}`);
+const combinedItems = computed(() =>
+  props.items.length > 0 ? props.items.slice(0, totalItems) : defaultItems,
+);
+
+function isImage(item: string) {
+  return typeof item === "string" && item.startsWith("http");
+}
+
+function isTag(item: string) {
+  return typeof item === "string" && item.startsWith("<") && item.endsWith(">");
+}
+
+onMounted(() => {
+  gsap.ticker.lagSmoothing(0);
+
+  const handleMouseMove = (e: MouseEvent) => {
+    mouseX.value = e.clientX;
+  };
+
+  const updateMotion = () => {
+    const maxMoveAmount = 300;
+    const baseDuration = 0.8;
+    const inertiaFactors = [0.6, 0.4, 0.3, 0.2];
+
+    rowRefs.value.forEach((row, index) => {
+      const direction = index % 2 === 0 ? 1 : -1;
+      const moveAmount =
+        ((mouseX.value / window.innerWidth) * maxMoveAmount - maxMoveAmount / 2) * direction;
+
+      gsap.to(row, {
+        x: moveAmount,
+        duration: baseDuration + inertiaFactors[index % inertiaFactors.length],
+        ease: "power3.out",
+        overwrite: "auto",
+      });
+    });
+  };
+
+  const removeAnimation = gsap.ticker.add(updateMotion);
+  window.addEventListener("mousemove", handleMouseMove);
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("mousemove", handleMouseMove);
+    removeAnimation();
+  });
+});
+</script>
+
+<template>
+  <div ref="gridRef" class="w-full h-full overflow-hidden">
+    <section
+      class="relative flex justify-center items-center w-full h-screen overflow-hidden"
+      :style="{
+        background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
+      }"
+    >
+      <div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div>
+
+      <div
+        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center"
+      >
+        <div
+          v-for="rowIndex in 4"
+          :key="rowIndex"
+          class="gap-4 grid grid-cols-7"
+          :style="{ willChange: 'transform, filter' }"
+          ref="rowRefs"
+        >
+          <div v-for="itemIndex in 7" :key="itemIndex" class="relative">
+            <div
+              class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
+            >
+              <div
+                v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
+                :style="{
+                  backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`,
+                }"
+              ></div>
+              <div
+                v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                class="z-[2] p-4 text-center"
+                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
+              ></div>
+              <div v-else class="z-[1] p-4 text-center">
+                {{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="top-0 left-0 relative w-full h-full pointer-events-none"></div>
+    </section>
+  </div>
+</template>
diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
new file mode 100644
index 0000000..1802d94
--- /dev/null
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -0,0 +1,115 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <h2 className="demo-title-extra">Images</h2>
+      <div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
+        <GridMotion :items="images" />
+      </div>
+
+      <h2 className="demo-title-extra">Custom Content</h2>
+      <div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
+        <GridMotion :items="items" />
+      </div>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="gridMotion" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="gridMotion.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import CliInstallation from "../../components/code/CliInstallation.vue";
+import CodeExample from "../../components/code/CodeExample.vue";
+import Dependencies from "../../components/code/Dependencies.vue";
+import PropTable from "../../components/common/PropTable.vue";
+import TabbedLayout from "../../components/common/TabbedLayout.vue";
+import GridMotion from "../../content/Backgrounds/GridMotion/GridMotion.vue";
+import { gridMotion } from "../../constants/code/Backgrounds/gridMotionCode";
+
+const propData = [
+  {
+    name: "items",
+    type: "array",
+    default: "[]",
+    description:
+      "An array of items to display in the grid. Each item can be a string, JSX element, or an image URL.",
+  },
+  {
+    name: "gradientColor",
+    type: "string",
+    default: "black",
+    description: "Controls the color of the radial gradient used as the background.",
+  },
+];
+
+const images = [
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  // Add more items as needed
+];
+
+const items = [
+  "Item 1",
+  `<div key='jsx-item-1'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>`,
+  "Item 4",
+  `<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>`,
+  "Item 7",
+  `<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>`,
+  "Item 10",
+  `<div key='jsx-item-3'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>`,
+  "Item 13",
+  `<div key='jsx-item-4'>Custom JSX 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>

From ecaa5369b5678c10dddf6f603574cfa8f9772566 Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 12:48:43 +0600
Subject: [PATCH 07/37] Fixed file location, scroll float should be under text
 animation

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 .../code/{Components => TextAnimations}/scrollFloatCode.ts      | 0
 src/demo/TextAnimations/ScrollFloatDemo.vue                     | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/constants/code/{Components => TextAnimations}/scrollFloatCode.ts (100%)

diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/TextAnimations/scrollFloatCode.ts
similarity index 100%
rename from src/constants/code/Components/scrollFloatCode.ts
rename to src/constants/code/TextAnimations/scrollFloatCode.ts
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index 82cbb4f..c751f47 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -58,7 +58,7 @@ import CodeExample from '../../components/code/CodeExample.vue'
 import Customize from '../../components/common/Customize.vue'
 import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
 import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import { scrollFloatCode } from '@/constants/code/Components/scrollFloatCode'
+import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode'
 
 
 const containerRef = ref<HTMLElement | null>(null)

From af076d6fafc6425efe883bc4db66ac38966d9eeb Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 12 Jul 2025 12:48:43 +0530
Subject: [PATCH 08/37] Updated <GridMotion /> background

---
 src/demo/Backgrounds/GridMotionDemo.vue | 56 ++++++-------------------
 1 file changed, 13 insertions(+), 43 deletions(-)

diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index 1802d94..5d8654e 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -50,64 +50,34 @@ const propData = [
   },
 ];
 
-const images = [
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  // Add more items as needed
-];
+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);
 
 const items = [
   "Item 1",
-  `<div key='jsx-item-1'>Custom JSX Content</div>`,
+  `<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='jsx-item-2'>Custom JSX Content</div>`,
+  `<div key='item-1'>Custom Content</div>`,
   "Item 4",
-  `<div key='jsx-item-2'>Custom JSX Content</div>`,
+  `<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='jsx-item-2'>Custom JSX Content</div>`,
+  `<div key='item-1'>Custom Content</div>`,
   "Item 7",
-  `<div key='jsx-item-2'>Custom JSX Content</div>`,
+  `<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='jsx-item-2'>Custom JSX Content</div>`,
+  `<div key='item-1'>Custom Content</div>`,
   "Item 10",
-  `<div key='jsx-item-3'>Custom JSX Content</div>`,
+  `<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='jsx-item-2'>Custom JSX Content</div>`,
+  `<div key='item-1'>Custom Content</div>`,
   "Item 13",
-  `<div key='jsx-item-4'>Custom JSX Content</div>`,
+  `<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

From 0209273305994ffada930fa88c64b50be1d546ec Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 10:20:34 +0300
Subject: [PATCH 09/37] Demo updates

---
 .../ScrollFloat/ScrollFloat.vue               |  9 +-
 .../TextAnimations/TrueFocus/TrueFocus.vue    | 50 +++++------
 src/demo/TextAnimations/ScrollFloatDemo.vue   | 90 +++++++++----------
 src/demo/TextAnimations/TrueFocusDemo.vue     | 43 ++-------
 4 files changed, 74 insertions(+), 118 deletions(-)

diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
index 6aad9af..c4b51bb 100644
--- a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -1,11 +1,8 @@
 <template>
   <h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
-    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
-      <span
-        v-for="(char, index) in splitText"
-        :key="index"
-        class="inline-block char"
-      >
+    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`"
+      style="font-size: clamp(1.6rem, 8vw, 10rem);">
+      <span v-for="(char, index) in splitText" :key="index" class="inline-block char">
         {{ char === " " ? "\u00A0" : char }}
       </span>
     </span>
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index 6040b7e..6613874 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -98,7 +98,7 @@ const setWordRef = (el: HTMLSpanElement | null, index: number) => {
 
 onMounted(async () => {
   await nextTick();
-  
+
   if (wordRefs.value[0] && containerRef.value) {
     const parentRect = containerRef.value.getBoundingClientRect();
     const activeRect = wordRefs.value[0].getBoundingClientRect();
@@ -121,44 +121,36 @@ onUnmounted(() => {
 
 <template>
   <div class="relative flex flex-wrap justify-center items-center gap-[1em]" ref="containerRef">
-    <span
-      v-for="(word, index) in words"
-      :key="index"
-      :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
-      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
-      :style="{
+    <span v-for="(word, index) in words" :key="index" :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
+      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer" :style="{
         filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
         '--border-color': borderColor,
         '--glow-color': glowColor,
         transition: `filter ${animationDuration}s ease`,
-      }"
-      @mouseenter="handleMouseEnter(index)"
-      @mouseleave="handleMouseLeave"
-    >
+      }" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave">
       {{ word }}
     </span>
 
-    <motion.div
-      class="top-0 left-0 box-content absolute border-none pointer-events-none"
-      :animate="{
-        x: focusRect.x,
-        y: focusRect.y,
-        width: focusRect.width,
-        height: focusRect.height,
-        opacity: currentIndex >= 0 ? 1 : 0,
-      }"
-      :transition="{
+    <motion.div class="top-0 left-0 box-content absolute border-none pointer-events-none" :animate="{
+      x: focusRect.x,
+      y: focusRect.y,
+      width: focusRect.width,
+      height: focusRect.height,
+      opacity: currentIndex >= 0 ? 1 : 0,
+    }" :transition="{
         duration: animationDuration,
-      }"
-      :style="{
+      }" :style="{
         '--border-color': borderColor,
         '--glow-color': glowColor,
-      }"
-    >
-      <span class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"></span>
-      <span class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
-      <span class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"></span>
-      <span class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      }">
+      <span
+        class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span
+        class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span
+        class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span
+        class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
     </motion.div>
   </div>
 </template>
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index c751f47..b053bfe 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -1,51 +1,44 @@
 <template>
-    <TabbedLayout>
-      <template #preview>
-        <div 
-          ref="containerRef"
-          class="demo-container"
-          @wheel="smoothScroll"
-        >
-       
-          <div class="scroll-instruction">
-            Scroll Down
-          </div>
-          
-          <div class="scroll-content">
-            <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"
-            />
-          </div>
+  <TabbedLayout>
+    <template #preview>
+      <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
+
+        <div class="scroll-instruction">
+          Scroll Down
         </div>
 
-        <Customize>
-        
-            <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
-            <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
-            
+        <div class="scroll-content">
+          <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" 
+          />
+        </div>
+      </div>
 
-        </Customize>
+      <Customize>
+        <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
+        <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="scrollFloatCode" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="scrollFloatCode" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="scrollFloatCode.cli" />
-      </template>
-    </TabbedLayout>
+    <template #cli>
+      <CliInstallation :command="scrollFloatCode.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -80,10 +73,10 @@ const smoothScroll = (e: WheelEvent) => {
 
   const delta = e.deltaY || e.detail
   const scrollAmount = delta * 2
-  
+
   gsap.to(container, {
     scrollTop: container.scrollTop + scrollAmount,
-    duration: 2,
+    duration: 1,
     ease: "power3.out",
     overwrite: "auto"
   })
@@ -163,17 +156,18 @@ const propData = [
 </script>
 <style scoped>
 .demo-container {
-  height: 60vh ;
+  height: 60vh;
   overflow-y: auto;
 }
 
 .scroll-content {
-  padding-top: 150vh !important; 
+  padding-top: 150vh !important;
   padding-bottom: 50vh;
 }
+
 .scroll-instruction {
   text-align: center;
-  color: #271E37;
+  color: #222;
   font-size: clamp(4rem, 6vw, 4rem);
   font-weight: 900;
   position: absolute;
@@ -182,8 +176,8 @@ const propData = [
   right: 0;
   transform: translateY(-50%);
 }
-.scroll-content{
+
+.scroll-content {
   color: aliceblue;
 }
-
 </style>
\ No newline at end of file
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index bef248c..accbc0d 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -9,45 +9,18 @@
         </div>
 
         <Customize>
-          <PreviewColor title="Text Color" v-model="borderColor" @update:model-value="forceRerender" />
+          <PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
 
-          <PreviewSwitch
-            title="Hover Mode"
-            v-model="manualMode"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Blur Amount"
-            v-model="blurAmount"
-            :min="0"
-            :max="15"
-            :step="0.5"
-            value-unit="px"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px"
+            @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Animation Duration"
-            v-model="animationDuration"
-            :min="0.1"
-            :max="3"
-            :step="0.1"
-            value-unit="s"
-            :disabled="!manualMode"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Animation Duration" v-model="animationDuration" :min="0.1" :max="3" :step="0.1"
+            value-unit="s" :disabled="!manualMode" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Pause Between Animations"
-            v-model="pauseBetweenAnimations"
-            :min="0"
-            :max="5"
-            :step="0.5"
-            value-unit="s"
-            :disabled="manualMode"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Pause Between Animations" v-model="pauseBetweenAnimations" :min="0" :max="5" :step="0.5"
+            value-unit="s" :disabled="manualMode" @update:model-value="forceRerender" />
         </Customize>
 
         <PropTable :data="propData" />

From 65240f0f8e5704a468e376792d9f54be5d84db63 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 10:38:49 +0300
Subject: [PATCH 10/37] Migrate <CircularGallery />

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/Components/circularGalleryCode.ts    |  27 +
 .../CircularGallery/CircularGallery.vue       | 711 ++++++++++++++++++
 src/demo/Components/CircularGalleryDemo.vue   | 160 ++++
 5 files changed, 900 insertions(+)
 create mode 100644 src/constants/code/Components/circularGalleryCode.ts
 create mode 100644 src/content/Components/CircularGallery/CircularGallery.vue
 create mode 100644 src/demo/Components/CircularGalleryDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 20c3d12..f70a632 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -47,6 +47,7 @@ export const CATEGORIES = [
       'Pixel Card',
       'Carousel',
       'Spotlight Card',
+      'Circular Gallery',
       'Flying Posters',
       'Card Swap',
       'Infinite Scroll',
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 7f984ff..f206da7 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -35,6 +35,7 @@ const components = {
   '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"),
diff --git a/src/constants/code/Components/circularGalleryCode.ts b/src/constants/code/Components/circularGalleryCode.ts
new file mode 100644
index 0000000..7c7efbd
--- /dev/null
+++ 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
+}
diff --git a/src/content/Components/CircularGallery/CircularGallery.vue b/src/content/Components/CircularGallery/CircularGallery.vue
new file mode 100644
index 0000000..5822ffa
--- /dev/null
+++ b/src/content/Components/CircularGallery/CircularGallery.vue
@@ -0,0 +1,711 @@
+<template>
+  <div ref="containerRef" class="w-full h-full overflow-hidden cursor-grab active:cursor-grabbing" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl'
+
+interface CircularGalleryProps {
+  items?: { image: string; text: string }[]
+  bend?: number
+  textColor?: string
+  borderRadius?: number
+  font?: string
+  scrollSpeed?: number
+  scrollEase?: number
+}
+
+const props = withDefaults(defineProps<CircularGalleryProps>(), {
+  bend: 3,
+  textColor: '#ffffff',
+  borderRadius: 0.05,
+  font: 'bold 30px Figtree',
+  scrollSpeed: 2,
+  scrollEase: 0.05
+})
+
+const containerRef = ref<HTMLDivElement>()
+let app: App | null = null
+
+type GL = Renderer['gl']
+
+function debounce<T extends (...args: unknown[]) => void>(func: T, wait: number) {
+  let timeout: number
+  return function (this: unknown, ...args: Parameters<T>) {
+    window.clearTimeout(timeout)
+    timeout = window.setTimeout(() => func.apply(this, args), wait)
+  }
+}
+
+function lerp(p1: number, p2: number, t: number): number {
+  return p1 + (p2 - p1) * t
+}
+
+function autoBind(instance: Record<string, unknown>): void {
+  const proto = Object.getPrototypeOf(instance)
+  Object.getOwnPropertyNames(proto).forEach((key) => {
+    if (key !== 'constructor' && typeof instance[key] === 'function') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      instance[key] = (instance[key] as any).bind(instance)
+    }
+  })
+}
+
+function getFontSize(font: string): number {
+  const match = font.match(/(\d+)px/)
+  return match ? parseInt(match[1], 10) : 30
+}
+
+function createTextTexture(
+  gl: GL,
+  text: string,
+  font: string = 'bold 30px monospace',
+  color: string = 'black'
+): { texture: Texture; width: number; height: number } {
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Could not get 2d context')
+
+  context.font = font
+  const metrics = context.measureText(text)
+  const textWidth = Math.ceil(metrics.width)
+  const fontSize = getFontSize(font)
+  const textHeight = Math.ceil(fontSize * 1.2)
+
+  canvas.width = textWidth + 20
+  canvas.height = textHeight + 20
+
+  context.font = font
+  context.fillStyle = color
+  context.textBaseline = 'middle'
+  context.textAlign = 'center'
+  context.clearRect(0, 0, canvas.width, canvas.height)
+  context.fillText(text, canvas.width / 2, canvas.height / 2)
+
+  const texture = new Texture(gl, { generateMipmaps: false })
+  texture.image = canvas
+  return { texture, width: canvas.width, height: canvas.height }
+}
+
+interface TitleProps {
+  gl: GL
+  plane: Mesh
+  renderer: Renderer
+  text: string
+  textColor?: string
+  font?: string
+}
+
+class Title {
+  gl: GL
+  plane: Mesh
+  renderer: Renderer
+  text: string
+  textColor: string
+  font: string
+  mesh!: Mesh
+
+  constructor({ gl, plane, renderer, text, textColor = '#545050', font = '30px sans-serif' }: TitleProps) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    autoBind(this as any)
+    this.gl = gl
+    this.plane = plane
+    this.renderer = renderer
+    this.text = text
+    this.textColor = textColor
+    this.font = font
+    this.createMesh()
+  }
+
+  createMesh() {
+    const { texture, width, height } = createTextTexture(this.gl, this.text, this.font, this.textColor)
+    const geometry = new Plane(this.gl)
+    const program = new Program(this.gl, {
+      vertex: `
+        attribute vec3 position;
+        attribute vec2 uv;
+        uniform mat4 modelViewMatrix;
+        uniform mat4 projectionMatrix;
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragment: `
+        precision highp float;
+        uniform sampler2D tMap;
+        varying vec2 vUv;
+        void main() {
+          vec4 color = texture2D(tMap, vUv);
+          if (color.a < 0.1) discard;
+          gl_FragColor = color;
+        }
+      `,
+      uniforms: { tMap: { value: texture } },
+      transparent: true,
+    })
+    this.mesh = new Mesh(this.gl, { geometry, program })
+    const aspect = width / height
+    const textHeightScaled = this.plane.scale.y * 0.15
+    const textWidthScaled = textHeightScaled * aspect
+    this.mesh.scale.set(textWidthScaled, textHeightScaled, 1)
+    this.mesh.position.y = -this.plane.scale.y * 0.5 - textHeightScaled * 0.5 - 0.05
+    this.mesh.setParent(this.plane)
+  }
+}
+
+interface ScreenSize {
+  width: number
+  height: number
+}
+
+interface Viewport {
+  width: number
+  height: number
+}
+
+interface MediaProps {
+  geometry: Plane
+  gl: GL
+  image: string
+  index: number
+  length: number
+  renderer: Renderer
+  scene: Transform
+  screen: ScreenSize
+  text: string
+  viewport: Viewport
+  bend: number
+  textColor: string
+  borderRadius?: number
+  font?: string
+}
+
+class Media {
+  extra: number = 0
+  geometry: Plane
+  gl: GL
+  image: string
+  index: number
+  length: number
+  renderer: Renderer
+  scene: Transform
+  screen: ScreenSize
+  text: string
+  viewport: Viewport
+  bend: number
+  textColor: string
+  borderRadius: number
+  font?: string
+  program!: Program
+  plane!: Mesh
+  title!: Title
+  scale!: number
+  padding!: number
+  width!: number
+  widthTotal!: number
+  x!: number
+  speed: number = 0
+  isBefore: boolean = false
+  isAfter: boolean = false
+
+  constructor({
+    geometry,
+    gl,
+    image,
+    index,
+    length,
+    renderer,
+    scene,
+    screen,
+    text,
+    viewport,
+    bend,
+    textColor,
+    borderRadius = 0,
+    font,
+  }: MediaProps) {
+    this.geometry = geometry
+    this.gl = gl
+    this.image = image
+    this.index = index
+    this.length = length
+    this.renderer = renderer
+    this.scene = scene
+    this.screen = screen
+    this.text = text
+    this.viewport = viewport
+    this.bend = bend
+    this.textColor = textColor
+    this.borderRadius = borderRadius
+    this.font = font
+    this.createShader()
+    this.createMesh()
+    this.createTitle()
+    this.onResize()
+  }
+
+  createShader() {
+    const texture = new Texture(this.gl, { generateMipmaps: false })
+    this.program = new Program(this.gl, {
+      depthTest: false,
+      depthWrite: false,
+      vertex: `
+        precision highp float;
+        attribute vec3 position;
+        attribute vec2 uv;
+        uniform mat4 modelViewMatrix;
+        uniform mat4 projectionMatrix;
+        uniform float uTime;
+        uniform float uSpeed;
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          vec3 p = position;
+          p.z = (sin(p.x * 4.0 + uTime) * 1.5 + cos(p.y * 2.0 + uTime) * 1.5) * (0.1 + uSpeed * 0.5);
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+        }
+      `,
+      fragment: `
+        precision highp float;
+        uniform vec2 uImageSizes;
+        uniform vec2 uPlaneSizes;
+        uniform sampler2D tMap;
+        uniform float uBorderRadius;
+        varying vec2 vUv;
+        
+        float roundedBoxSDF(vec2 p, vec2 b, float r) {
+          vec2 d = abs(p) - b;
+          return length(max(d, vec2(0.0))) + min(max(d.x, d.y), 0.0) - r;
+        }
+        
+        void main() {
+          vec2 ratio = vec2(
+            min((uPlaneSizes.x / uPlaneSizes.y) / (uImageSizes.x / uImageSizes.y), 1.0),
+            min((uPlaneSizes.y / uPlaneSizes.x) / (uImageSizes.y / uImageSizes.x), 1.0)
+          );
+          vec2 uv = vec2(
+            vUv.x * ratio.x + (1.0 - ratio.x) * 0.5,
+            vUv.y * ratio.y + (1.0 - ratio.y) * 0.5
+          );
+          vec4 color = texture2D(tMap, uv);
+          
+          float d = roundedBoxSDF(vUv - 0.5, vec2(0.5 - uBorderRadius), uBorderRadius);
+          if(d > 0.0) {
+            discard;
+          }
+          
+          gl_FragColor = vec4(color.rgb, 1.0);
+        }
+      `,
+      uniforms: {
+        tMap: { value: texture },
+        uPlaneSizes: { value: [0, 0] },
+        uImageSizes: { value: [0, 0] },
+        uSpeed: { value: 0 },
+        uTime: { value: 100 * Math.random() },
+        uBorderRadius: { value: this.borderRadius },
+      },
+      transparent: true,
+    })
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.src = this.image
+    img.onload = () => {
+      texture.image = img
+      this.program.uniforms.uImageSizes.value = [img.naturalWidth, img.naturalHeight]
+    }
+  }
+
+  createMesh() {
+    this.plane = new Mesh(this.gl, {
+      geometry: this.geometry,
+      program: this.program,
+    })
+    this.plane.setParent(this.scene)
+  }
+
+  createTitle() {
+    this.title = new Title({
+      gl: this.gl,
+      plane: this.plane,
+      renderer: this.renderer,
+      text: this.text,
+      textColor: this.textColor,
+      font: this.font,
+    })
+  }
+
+  update(scroll: { current: number; last: number }, direction: 'right' | 'left') {
+    this.plane.position.x = this.x - scroll.current - this.extra
+
+    const x = this.plane.position.x
+    const H = this.viewport.width / 2
+
+    if (this.bend === 0) {
+      this.plane.position.y = 0
+      this.plane.rotation.z = 0
+    } else {
+      const B_abs = Math.abs(this.bend)
+      const R = (H * H + B_abs * B_abs) / (2 * B_abs)
+      const effectiveX = Math.min(Math.abs(x), H)
+
+      const arc = R - Math.sqrt(R * R - effectiveX * effectiveX)
+      if (this.bend > 0) {
+        this.plane.position.y = -arc
+        this.plane.rotation.z = -Math.sign(x) * Math.asin(effectiveX / R)
+      } else {
+        this.plane.position.y = arc
+        this.plane.rotation.z = Math.sign(x) * Math.asin(effectiveX / R)
+      }
+    }
+
+    this.speed = scroll.current - scroll.last
+    this.program.uniforms.uTime.value += 0.04
+    this.program.uniforms.uSpeed.value = this.speed
+
+    const planeOffset = this.plane.scale.x / 2
+    const viewportOffset = this.viewport.width / 2
+    this.isBefore = this.plane.position.x + planeOffset < -viewportOffset
+    this.isAfter = this.plane.position.x - planeOffset > viewportOffset
+    if (direction === 'right' && this.isBefore) {
+      this.extra -= this.widthTotal
+      this.isBefore = this.isAfter = false
+    }
+    if (direction === 'left' && this.isAfter) {
+      this.extra += this.widthTotal
+      this.isBefore = this.isAfter = false
+    }
+  }
+
+  onResize({ screen, viewport }: { screen?: ScreenSize; viewport?: Viewport } = {}) {
+    if (screen) this.screen = screen
+    if (viewport) {
+      this.viewport = viewport
+      if (this.plane.program.uniforms.uViewportSizes) {
+        this.plane.program.uniforms.uViewportSizes.value = [this.viewport.width, this.viewport.height]
+      }
+    }
+    this.scale = this.screen.height / 1500
+    this.plane.scale.y = (this.viewport.height * (900 * this.scale)) / this.screen.height
+    this.plane.scale.x = (this.viewport.width * (700 * this.scale)) / this.screen.width
+    this.plane.program.uniforms.uPlaneSizes.value = [this.plane.scale.x, this.plane.scale.y]
+    this.padding = 2
+    this.width = this.plane.scale.x + this.padding
+    this.widthTotal = this.width * this.length
+    this.x = this.width * this.index
+  }
+}
+
+interface AppConfig {
+  items?: { image: string; text: string }[]
+  bend?: number
+  textColor?: string
+  borderRadius?: number
+  font?: string
+  scrollSpeed?: number
+  scrollEase?: number
+}
+
+class App {
+  container: HTMLElement
+  scrollSpeed: number
+  scroll: {
+    ease: number
+    current: number
+    target: number
+    last: number
+    position?: number
+  }
+  onCheckDebounce: (...args: unknown[]) => void
+  renderer!: Renderer
+  gl!: GL
+  camera!: Camera
+  scene!: Transform
+  planeGeometry!: Plane
+  medias: Media[] = []
+  mediasImages: { image: string; text: string }[] = []
+  screen!: { width: number; height: number }
+  viewport!: { width: number; height: number }
+  raf: number = 0
+
+  boundOnResize!: () => void
+  boundOnWheel!: (e: Event) => void
+  boundOnTouchDown!: (e: MouseEvent | TouchEvent) => void
+  boundOnTouchMove!: (e: MouseEvent | TouchEvent) => void
+  boundOnTouchUp!: () => void
+
+  isDown: boolean = false
+  start: number = 0
+
+  constructor(
+    container: HTMLElement,
+    {
+      items,
+      bend = 1,
+      textColor = '#ffffff',
+      borderRadius = 0,
+      font = 'bold 30px Figtree',
+      scrollSpeed = 2,
+      scrollEase = 0.05,
+    }: AppConfig
+  ) {
+    document.documentElement.classList.remove('no-js')
+    this.container = container
+    this.scrollSpeed = scrollSpeed
+    this.scroll = { ease: scrollEase, current: 0, target: 0, last: 0 }
+    this.onCheckDebounce = debounce(this.onCheck.bind(this), 200)
+    this.createRenderer()
+    this.createCamera()
+    this.createScene()
+    this.onResize()
+    this.createGeometry()
+    this.createMedias(items, bend, textColor, borderRadius, font)
+    this.update()
+    this.addEventListeners()
+  }
+
+  createRenderer() {
+    this.renderer = new Renderer({ alpha: true })
+    this.gl = this.renderer.gl
+    this.gl.clearColor(0, 0, 0, 0)
+    this.container.appendChild(this.renderer.gl.canvas as HTMLCanvasElement)
+  }
+
+  createCamera() {
+    this.camera = new Camera(this.gl)
+    this.camera.fov = 45
+    this.camera.position.z = 20
+  }
+
+  createScene() {
+    this.scene = new Transform()
+  }
+
+  createGeometry() {
+    this.planeGeometry = new Plane(this.gl, {
+      heightSegments: 50,
+      widthSegments: 100,
+    })
+  }
+
+  createMedias(
+    items: { image: string; text: string }[] | undefined,
+    bend: number = 1,
+    textColor: string,
+    borderRadius: number,
+    font: string
+  ) {
+    const defaultItems = [
+      {
+        image: `https://picsum.photos/seed/1/800/600?grayscale`,
+        text: 'Bridge',
+      },
+      {
+        image: `https://picsum.photos/seed/2/800/600?grayscale`,
+        text: 'Desk Setup',
+      },
+      {
+        image: `https://picsum.photos/seed/3/800/600?grayscale`,
+        text: 'Waterfall',
+      },
+      {
+        image: `https://picsum.photos/seed/4/800/600?grayscale`,
+        text: 'Strawberries',
+      },
+      {
+        image: `https://picsum.photos/seed/5/800/600?grayscale`,
+        text: 'Deep Diving',
+      },
+      {
+        image: `https://picsum.photos/seed/16/800/600?grayscale`,
+        text: 'Train Track',
+      },
+      {
+        image: `https://picsum.photos/seed/17/800/600?grayscale`,
+        text: 'Santorini',
+      },
+      {
+        image: `https://picsum.photos/seed/8/800/600?grayscale`,
+        text: 'Blurry Lights',
+      },
+      {
+        image: `https://picsum.photos/seed/9/800/600?grayscale`,
+        text: 'New York',
+      },
+      {
+        image: `https://picsum.photos/seed/10/800/600?grayscale`,
+        text: 'Good Boy',
+      },
+      {
+        image: `https://picsum.photos/seed/21/800/600?grayscale`,
+        text: 'Coastline',
+      },
+      {
+        image: `https://picsum.photos/seed/12/800/600?grayscale`,
+        text: 'Palm Trees',
+      },
+    ]
+    const galleryItems = items && items.length ? items : defaultItems
+    this.mediasImages = galleryItems.concat(galleryItems)
+    this.medias = this.mediasImages.map((data, index) => {
+      return new Media({
+        geometry: this.planeGeometry,
+        gl: this.gl,
+        image: data.image,
+        index,
+        length: this.mediasImages.length,
+        renderer: this.renderer,
+        scene: this.scene,
+        screen: this.screen,
+        text: data.text,
+        viewport: this.viewport,
+        bend,
+        textColor,
+        borderRadius,
+        font,
+      })
+    })
+  }
+
+  onTouchDown(e: MouseEvent | TouchEvent) {
+    this.isDown = true
+    this.scroll.position = this.scroll.current
+    this.start = 'touches' in e ? e.touches[0].clientX : e.clientX
+  }
+
+  onTouchMove(e: MouseEvent | TouchEvent) {
+    if (!this.isDown) return
+    const x = 'touches' in e ? e.touches[0].clientX : e.clientX
+    const distance = (this.start - x) * (this.scrollSpeed * 0.025)
+    this.scroll.target = (this.scroll.position ?? 0) + distance
+  }
+
+  onTouchUp() {
+    this.isDown = false
+    this.onCheck()
+  }
+
+  onWheel(e: Event) {
+    const wheelEvent = e as WheelEvent
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const delta = wheelEvent.deltaY || (wheelEvent as any).wheelDelta || (wheelEvent as any).detail
+    this.scroll.target += delta > 0 ? this.scrollSpeed : -this.scrollSpeed
+    this.onCheckDebounce()
+  }
+
+  onCheck() {
+    if (!this.medias || !this.medias[0]) return
+    const width = this.medias[0].width
+    const itemIndex = Math.round(Math.abs(this.scroll.target) / width)
+    const item = width * itemIndex
+    this.scroll.target = this.scroll.target < 0 ? -item : item
+  }
+
+  onResize() {
+    this.screen = {
+      width: this.container.clientWidth,
+      height: this.container.clientHeight,
+    }
+    this.renderer.setSize(this.screen.width, this.screen.height)
+    this.camera.perspective({
+      aspect: this.screen.width / this.screen.height,
+    })
+    const fov = (this.camera.fov * Math.PI) / 180
+    const height = 2 * Math.tan(fov / 2) * this.camera.position.z
+    const width = height * this.camera.aspect
+    this.viewport = { width, height }
+    if (this.medias) {
+      this.medias.forEach((media) => media.onResize({ screen: this.screen, viewport: this.viewport }))
+    }
+  }
+
+  update() {
+    this.scroll.current = lerp(this.scroll.current, this.scroll.target, this.scroll.ease)
+    const direction = this.scroll.current > this.scroll.last ? 'right' : 'left'
+    if (this.medias) {
+      this.medias.forEach((media) => media.update(this.scroll, direction))
+    }
+    this.renderer.render({ scene: this.scene, camera: this.camera })
+    this.scroll.last = this.scroll.current
+    this.raf = window.requestAnimationFrame(this.update.bind(this))
+  }
+
+  addEventListeners() {
+    this.boundOnResize = this.onResize.bind(this)
+    this.boundOnWheel = this.onWheel.bind(this)
+    this.boundOnTouchDown = this.onTouchDown.bind(this)
+    this.boundOnTouchMove = this.onTouchMove.bind(this)
+    this.boundOnTouchUp = this.onTouchUp.bind(this)
+    window.addEventListener('resize', this.boundOnResize)
+    window.addEventListener('mousewheel', this.boundOnWheel)
+    window.addEventListener('wheel', this.boundOnWheel)
+    window.addEventListener('mousedown', this.boundOnTouchDown)
+    window.addEventListener('mousemove', this.boundOnTouchMove)
+    window.addEventListener('mouseup', this.boundOnTouchUp)
+    window.addEventListener('touchstart', this.boundOnTouchDown)
+    window.addEventListener('touchmove', this.boundOnTouchMove)
+    window.addEventListener('touchend', this.boundOnTouchUp)
+  }
+
+  destroy() {
+    window.cancelAnimationFrame(this.raf)
+    window.removeEventListener('resize', this.boundOnResize)
+    window.removeEventListener('mousewheel', this.boundOnWheel)
+    window.removeEventListener('wheel', this.boundOnWheel)
+    window.removeEventListener('mousedown', this.boundOnTouchDown)
+    window.removeEventListener('mousemove', this.boundOnTouchMove)
+    window.removeEventListener('mouseup', this.boundOnTouchUp)
+    window.removeEventListener('touchstart', this.boundOnTouchDown)
+    window.removeEventListener('touchmove', this.boundOnTouchMove)
+    window.removeEventListener('touchend', this.boundOnTouchUp)
+    if (this.renderer && this.renderer.gl && this.renderer.gl.canvas.parentNode) {
+      this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas as HTMLCanvasElement)
+    }
+  }
+}
+
+onMounted(() => {
+  if (!containerRef.value) return
+
+  app = new App(containerRef.value, {
+    items: props.items,
+    bend: props.bend,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    font: props.font,
+    scrollSpeed: props.scrollSpeed,
+    scrollEase: props.scrollEase,
+  })
+})
+
+onUnmounted(() => {
+  if (app) {
+    app.destroy()
+    app = null
+  }
+})
+
+watch(
+  () => ({
+    items: props.items,
+    bend: props.bend,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    font: props.font,
+    scrollSpeed: props.scrollSpeed,
+    scrollEase: props.scrollEase,
+  }),
+  (newProps) => {
+    if (app) {
+      app.destroy()
+    }
+    if (containerRef.value) {
+      app = new App(containerRef.value, newProps)
+    }
+  },
+  { deep: true }
+)
+</script>
diff --git a/src/demo/Components/CircularGalleryDemo.vue b/src/demo/Components/CircularGalleryDemo.vue
new file mode 100644
index 0000000..6cf43a2
--- /dev/null
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="circular-gallery-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container h-[500px] p-0 overflow-hidden">          
+          <CircularGallery
+            :key="rerenderKey"
+            :bend="bend"
+            :border-radius="borderRadius"
+            :scroll-speed="scrollSpeed"
+            :scroll-ease="scrollEase"
+            :text-color="textColor"
+            :font="font"
+          />
+        </div>
+
+        <Customize>
+          <PreviewSlider 
+            title="Bend Level" 
+            v-model="bend" 
+            :min="-10" 
+            :max="10" 
+            :step="1"
+            @update:model-value="forceRerender" 
+          />
+
+          <PreviewSlider 
+            title="Border Radius" 
+            v-model="borderRadius" 
+            :min="0" 
+            :max="0.5" 
+            :step="0.01"
+            @update:model-value="forceRerender" 
+          />
+
+          <PreviewSlider 
+            title="Scroll Speed" 
+            v-model="scrollSpeed" 
+            :min="0.5" 
+            :max="5" 
+            :step="0.1"
+            @update:model-value="forceRerender" 
+          />
+
+          <PreviewSlider 
+            title="Scroll Ease" 
+            v-model="scrollEase" 
+            :min="0.01" 
+            :max="0.15" 
+            :step="0.01"
+            @update:model-value="forceRerender" 
+          />
+
+          <PreviewColor 
+            title="Text Color" 
+            v-model="textColor"
+            @update:model-value="forceRerender" 
+          />
+
+          <PreviewSelect 
+            title="Font" 
+            v-model="font"
+            :options="fontOptions"
+            @update:model-value="forceRerender" 
+          />
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['ogl']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="circularGallery" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="circularGallery.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import Dependencies from '../../components/code/Dependencies.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import PreviewColor from '../../components/common/PreviewColor.vue'
+import PreviewSelect from '../../components/common/PreviewSelect.vue'
+import CircularGallery from '../../content/Components/CircularGallery/CircularGallery.vue'
+import { circularGallery } from '@/constants/code/Components/circularGalleryCode'
+import { useForceRerender } from '@/composables/useForceRerender'
+
+const bend = ref(1)
+const borderRadius = ref(0.05)
+const scrollSpeed = ref(2)
+const scrollEase = ref(0.05)
+const textColor = ref('#ffffff')
+const font = ref('bold 30px Figtree')
+
+const { rerenderKey, forceRerender } = useForceRerender()
+
+const fontOptions = [
+  { label: 'Figtree Bold', value: 'bold 30px Figtree' },
+  { label: 'Arial Bold', value: 'bold 30px Arial' },
+  { label: 'Helvetica Bold', value: 'bold 30px Helvetica' },
+  { label: 'Times Bold', value: 'bold 30px Times' },
+  { label: 'Courier Bold', value: 'bold 30px Courier' },
+  { label: 'Georgia Bold', value: 'bold 30px Georgia' },
+]
+
+const propData = [
+  {
+    name: 'items',
+    type: 'Array<{ image: string; text: string }>',
+    default: 'undefined',
+    description: 'List of items to display in the gallery. Each item should have an image URL and a text label.',
+  },
+  {
+    name: 'bend',
+    type: 'number',
+    default: '3',
+    description: 'Determines the curvature of the gallery layout. A negative value bends in one direction, a positive value in the opposite.',
+  },
+  {
+    name: 'textColor',
+    type: 'string',
+    default: '"#ffffff"',
+    description: 'Specifies the color of the text labels.',
+  },
+  {
+    name: 'borderRadius',
+    type: 'number',
+    default: '0.05',
+    description: 'Sets the border radius for the media items to achieve rounded corners.',
+  },
+  {
+    name: 'font',
+    type: 'string',
+    default: '"bold 30px Figtree"',
+    description: 'Font style for the text labels.',
+  },
+  {
+    name: 'scrollSpeed',
+    type: 'number',
+    default: '2',
+    description: 'Controls how much the gallery moves per scroll event. Lower values result in slower scrolling, higher values in faster scrolling.',
+  },
+  {
+    name: 'scrollEase',
+    type: 'number',
+    default: '0.05',
+    description: 'Controls the smoothness of scroll transitions. Lower values create smoother, more fluid motion, while higher values make it more responsive.',
+  },
+]
+</script>

From 7d64e4b756caff7cb6682080b4ec018ed8519f58 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 10:41:29 +0300
Subject: [PATCH 11/37] Refactor event listeners to use container for touch and
 wheel events

---
 .../CircularGallery/CircularGallery.vue       | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/content/Components/CircularGallery/CircularGallery.vue b/src/content/Components/CircularGallery/CircularGallery.vue
index 5822ffa..66be81e 100644
--- a/src/content/Components/CircularGallery/CircularGallery.vue
+++ b/src/content/Components/CircularGallery/CircularGallery.vue
@@ -639,28 +639,32 @@ class App {
     this.boundOnTouchDown = this.onTouchDown.bind(this)
     this.boundOnTouchMove = this.onTouchMove.bind(this)
     this.boundOnTouchUp = this.onTouchUp.bind(this)
+    
     window.addEventListener('resize', this.boundOnResize)
-    window.addEventListener('mousewheel', this.boundOnWheel)
-    window.addEventListener('wheel', this.boundOnWheel)
-    window.addEventListener('mousedown', this.boundOnTouchDown)
+    
+    this.container.addEventListener('wheel', this.boundOnWheel)
+    this.container.addEventListener('mousedown', this.boundOnTouchDown)
+    this.container.addEventListener('touchstart', this.boundOnTouchDown)
+    
     window.addEventListener('mousemove', this.boundOnTouchMove)
     window.addEventListener('mouseup', this.boundOnTouchUp)
-    window.addEventListener('touchstart', this.boundOnTouchDown)
     window.addEventListener('touchmove', this.boundOnTouchMove)
     window.addEventListener('touchend', this.boundOnTouchUp)
   }
 
   destroy() {
     window.cancelAnimationFrame(this.raf)
+    
     window.removeEventListener('resize', this.boundOnResize)
-    window.removeEventListener('mousewheel', this.boundOnWheel)
-    window.removeEventListener('wheel', this.boundOnWheel)
-    window.removeEventListener('mousedown', this.boundOnTouchDown)
     window.removeEventListener('mousemove', this.boundOnTouchMove)
     window.removeEventListener('mouseup', this.boundOnTouchUp)
-    window.removeEventListener('touchstart', this.boundOnTouchDown)
     window.removeEventListener('touchmove', this.boundOnTouchMove)
     window.removeEventListener('touchend', this.boundOnTouchUp)
+    
+    this.container.removeEventListener('wheel', this.boundOnWheel)
+    this.container.removeEventListener('mousedown', this.boundOnTouchDown)
+    this.container.removeEventListener('touchstart', this.boundOnTouchDown)
+    
     if (this.renderer && this.renderer.gl && this.renderer.gl.canvas.parentNode) {
       this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas as HTMLCanvasElement)
     }

From 4f3eba93ed9ec263dd4b165c01dfa8d3b06435f9 Mon Sep 17 00:00:00 2001
From: Utkarsh Singhal <singhalutkarsh26@gmail.com>
Date: Sat, 12 Jul 2025 13:22:56 +0530
Subject: [PATCH 12/37] Updated <GridMotion /> background

---
 .../code/Backgrounds/gridMotionCode.ts        | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/constants/code/Backgrounds/gridMotionCode.ts b/src/constants/code/Backgrounds/gridMotionCode.ts
index 36b3082..0203dc9 100644
--- a/src/constants/code/Backgrounds/gridMotionCode.ts
+++ b/src/constants/code/Backgrounds/gridMotionCode.ts
@@ -13,33 +13,33 @@ export const gridMotion: CodeObject = {
 <script setup lang="ts">
   import GridMotion from "./GridMotion.vue";
 
-  const items = [
-    'Item 1',
-    "<div key='jsx-item-1'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
-    'Item 4',
-    "<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
-    'Item 7',
-    "<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
-    'Item 10',
-    "<div key='jsx-item-3'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
-    'Item 13',
-    "<div key='jsx-item-4'>Custom JSX 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
-    ];
+  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,
 };

From 7a780b81144ddd25caa25358e5ced8b503437857 Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 12:43:14 +0600
Subject: [PATCH 13/37] Scroll Reveal added to text animations

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   3 +-
 .../code/TextAnimations/scrollRevealCode.ts   |  26 +++
 .../ScrollReveal/ScrollReveal.vue             | 165 ++++++++++++++
 src/demo/TextAnimations/ScrollRevealDemo.vue  | 205 ++++++++++++++++++
 5 files changed, 399 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/code/TextAnimations/scrollRevealCode.ts
 create mode 100644 src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
 create mode 100644 src/demo/TextAnimations/ScrollRevealDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index f70a632..151e61d 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -21,6 +21,7 @@ export const CATEGORIES = [
       'Decrypted Text',
       'True Focus',
       'Scroll Float',
+      'Scroll Reveal',
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index f206da7..16a560a 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -25,8 +25,9 @@ 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"),
 };
-
+ 
 const components = {
   'masonry': () => import("../demo/Components/MasonryDemo.vue"),
   'profile-card': () => import("../demo/Components/ProfileCardDemo.vue"),
diff --git a/src/constants/code/TextAnimations/scrollRevealCode.ts b/src/constants/code/TextAnimations/scrollRevealCode.ts
new file mode 100644
index 0000000..1919eba
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
new file mode 100644
index 0000000..e8db1c2
--- /dev/null
+++ b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
@@ -0,0 +1,165 @@
+<template>
+    <h2 ref="containerRef" :class="`my-5 ${containerClassName}`">
+      <p 
+        :class="`leading-relaxed font-semibold ${textClassName}`"
+        style="font-size: clamp(1.6rem, 4vw, 3rem);"
+      >
+        <span 
+          v-for="(word, index) in splitText" 
+          :key="index"
+          :class="word.isWhitespace ? '' : 'inline-block word'"
+        >
+          {{ word.text }}
+        </span>
+      </p>
+    </h2>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+  import { gsap } from 'gsap';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
+  
+  gsap.registerPlugin(ScrollTrigger);
+  
+  interface Props {
+    children: string;
+    scrollContainerRef?: { current: HTMLElement | null };
+    enableBlur?: boolean;
+    baseOpacity?: number;
+    baseRotation?: number;
+    blurStrength?: number;
+    containerClassName?: string;
+    textClassName?: string;
+    rotationEnd?: string;
+    wordAnimationEnd?: string;
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    enableBlur: true,
+    baseOpacity: 0.1,
+    baseRotation: 3,
+    blurStrength: 4,
+    containerClassName: '',
+    textClassName: '',
+    rotationEnd: 'bottom bottom',
+    wordAnimationEnd: 'bottom bottom'
+  });
+  
+  const containerRef = ref<HTMLElement | null>(null);
+  let scrollTriggerInstances: ScrollTrigger[] = [];
+  
+  const splitText = computed(() => {
+    const text = typeof props.children === 'string' ? props.children : '';
+    return text.split(/(\s+)/).map((word, index) => ({
+      text: word,
+      isWhitespace: word.match(/^\s+$/) !== null,
+      key: index
+    }));
+  });
+  
+  const initializeAnimation = () => {
+    const el = containerRef.value;
+    if (!el) return;
+  
+    scrollTriggerInstances.forEach(trigger => trigger.kill());
+    scrollTriggerInstances = [];
+  
+    const scroller =
+      props.scrollContainerRef && props.scrollContainerRef.current
+        ? props.scrollContainerRef.current
+        : window;
+  
+    const rotationTl = gsap.fromTo(
+      el,
+      { transformOrigin: '0% 50%', rotate: props.baseRotation },
+      {
+        ease: 'none',
+        rotate: 0,
+        scrollTrigger: {
+          trigger: el,
+          scroller,
+          start: 'top bottom',
+          end: props.rotationEnd,
+          scrub: true,
+        },
+      }
+    );
+  
+    if (rotationTl.scrollTrigger) {
+      scrollTriggerInstances.push(rotationTl.scrollTrigger);
+    }
+  
+    const wordElements = el.querySelectorAll('.word');
+  
+    const opacityTl = gsap.fromTo(
+      wordElements,
+      { opacity: props.baseOpacity, willChange: 'opacity' },
+      {
+        ease: 'none',
+        opacity: 1,
+        stagger: 0.05,
+        scrollTrigger: {
+          trigger: el,
+          scroller,
+          start: 'top bottom-=20%',
+          end: props.wordAnimationEnd,
+          scrub: true,
+        },
+      }
+    );
+  
+    if (opacityTl.scrollTrigger) {
+      scrollTriggerInstances.push(opacityTl.scrollTrigger);
+    }
+
+    if (props.enableBlur) {
+      const blurTl = gsap.fromTo(
+        wordElements,
+        { filter: `blur(${props.blurStrength}px)` },
+        {
+          ease: 'none',
+          filter: 'blur(0px)',
+          stagger: 0.05,
+          scrollTrigger: {
+            trigger: el,
+            scroller,
+            start: 'top bottom-=20%',
+            end: props.wordAnimationEnd,
+            scrub: true,
+          },
+        }
+      );
+  
+      if (blurTl.scrollTrigger) {
+        scrollTriggerInstances.push(blurTl.scrollTrigger);
+      }
+    }
+  };
+  
+  onMounted(() => {
+    initializeAnimation();
+  });
+  
+  onUnmounted(() => {
+    scrollTriggerInstances.forEach(trigger => trigger.kill());
+  });
+  
+  watch(
+    [
+      () => props.children,
+      () => props.scrollContainerRef,
+      () => props.enableBlur,
+      () => props.baseRotation,
+      () => props.baseOpacity,
+      () => props.rotationEnd,
+      () => props.wordAnimationEnd,
+      () => props.blurStrength
+    ],
+    () => {
+      initializeAnimation();
+    },
+    { deep: true }
+  );
+  </script>
+  
\ No newline at end of file
diff --git a/src/demo/TextAnimations/ScrollRevealDemo.vue b/src/demo/TextAnimations/ScrollRevealDemo.vue
new file mode 100644
index 0000000..518ee48
--- /dev/null
+++ b/src/demo/TextAnimations/ScrollRevealDemo.vue
@@ -0,0 +1,205 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div 
+        ref="containerRef"
+        class="demo-container"
+        @wheel="smoothScroll"
+      >
+
+        <div class="scroll-instruction">
+          Scroll Down
+        </div>
+
+        <div class="scroll-content">
+          <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"
+          />
+        </div>
+      </div>
+
+      <Customize>
+
+          <PreviewSwitch 
+            title="Enable Hover" 
+            :model-value="enableBlur"
+            @update:model-value="(val: boolean) => { enableBlur = val; forceRerender() }" 
+          />
+          <PreviewSlider title="Base Opacity:" v-model="baseOpacity" :min="0" :max="1" :step="0.1" value-unit="" />
+          <PreviewSlider title="Base Rotation:" v-model="baseRotation" :min="0" :max="10" :step="0.5" value-unit="deg" />
+          <PreviewSlider title="Blur Strength:" v-model="blurStrength" :min="0" :max="10" :step="0.5" value-unit="px" />
+
+      </Customize>
+
+      <PropTable :data="propData" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="scrollRevealCode" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="scrollRevealCode.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { gsap } from 'gsap'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
+import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode'
+
+const containerRef = ref<HTMLElement | null>(null)
+const scrollText = ref("When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!")
+const enableBlur = ref(true)
+const baseOpacity = ref(0.1)
+const baseRotation = ref(3)
+const blurStrength = ref(4)
+const containerClassName = ref("")
+const textClassName = ref("")
+const rotationEnd = ref("bottom bottom")
+const wordAnimationEnd = ref("bottom bottom")
+const rerenderKey = ref(0)
+
+const forceRerender = () => {
+rerenderKey.value++
+}
+
+const smoothScroll = (e: WheelEvent) => {
+e.preventDefault()
+const container = containerRef.value
+if (!container) return
+const delta = e.deltaY || e.detail
+const scrollAmount = delta * 2
+
+gsap.to(container, {
+  scrollTop: container.scrollTop + scrollAmount,
+  duration: 2,
+  ease: "power3.out",
+  overwrite: "auto"
+})
+}
+
+onMounted(() => {
+const container = containerRef.value
+if (container) {
+  container.addEventListener('wheel', smoothScroll, { passive: false })
+}
+})
+
+onUnmounted(() => {
+const container = containerRef.value
+if (container) {
+  container.removeEventListener('wheel', smoothScroll)
+}
+})
+
+const propData = [
+{
+  name: 'children',
+  type: 'string',
+  default: '""',
+  description: 'The text content to be animated word by word'
+},
+{
+  name: 'scrollContainerRef',
+  type: 'object',
+  default: 'undefined',
+  description: 'Ref to a custom scroll container (defaults to window)'
+},
+{
+  name: 'enableBlur',
+  type: 'boolean',
+  default: 'true',
+  description: 'Whether to enable blur animation'
+},
+{
+  name: 'baseOpacity',
+  type: 'number',
+  default: '0.1',
+  description: 'Starting opacity value for words'
+},
+{
+  name: 'baseRotation',
+  type: 'number',
+  default: '3',
+  description: 'Starting rotation value in degrees'
+},
+{
+  name: 'blurStrength',
+  type: 'number',
+  default: '4',
+  description: 'Blur strength in pixels'
+},
+{
+  name: 'containerClassName',
+  type: 'string',
+  default: '""',
+  description: 'Additional CSS classes for the container element'
+},
+{
+  name: 'textClassName',
+  type: 'string',
+  default: '""',
+  description: 'Additional CSS classes for the text element'
+},
+{
+  name: 'rotationEnd',
+  type: 'string',
+  default: '"bottom bottom"',
+  description: 'ScrollTrigger end position for rotation animation'
+},
+{
+  name: 'wordAnimationEnd',
+  type: 'string',
+  default: '"bottom bottom"',
+  description: 'ScrollTrigger end position for word animations'
+}
+]
+</script>
+
+<style scoped>
+.demo-container {
+height: 60vh;
+overflow-y: auto;
+}
+
+.scroll-content {
+padding-top: 150vh !important; 
+padding-bottom: 50vh;
+}
+
+.scroll-instruction {
+text-align: center;
+color: #271E37;
+font-size: clamp(4rem, 6vw, 4rem);
+font-weight: 900;
+position: absolute;
+top: 50%;
+left: 0;
+right: 0;
+transform: translateY(-50%);
+}
+
+.scroll-content {
+color: aliceblue;
+}
+</style>
\ No newline at end of file

From 28762e90d6e2a5c6e6798a2caa3b5af1728c783e Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 14:02:43 +0600
Subject: [PATCH 14/37] White space removed

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 src/constants/Components.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 16a560a..a6fb977 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -27,7 +27,6 @@ const textAnimations = {
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
   'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),
 };
- 
 const components = {
   'masonry': () => import("../demo/Components/MasonryDemo.vue"),
   'profile-card': () => import("../demo/Components/ProfileCardDemo.vue"),

From ac8b2c04d83dfac5e45a6cb9468edc4b2674ec76 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 11:41:32 +0300
Subject: [PATCH 15/37] format

---
 .../Backgrounds/GridMotion/GridMotion.vue     | 40 ++++++-------------
 src/demo/Backgrounds/GridMotionDemo.vue       |  1 -
 2 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/src/content/Backgrounds/GridMotion/GridMotion.vue b/src/content/Backgrounds/GridMotion/GridMotion.vue
index ee33f4b..5ae8f86 100644
--- a/src/content/Backgrounds/GridMotion/GridMotion.vue
+++ b/src/content/Backgrounds/GridMotion/GridMotion.vue
@@ -68,40 +68,24 @@ onMounted(() => {
 
 <template>
   <div ref="gridRef" class="w-full h-full overflow-hidden">
-    <section
-      class="relative flex justify-center items-center w-full h-screen overflow-hidden"
-      :style="{
-        background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
-      }"
-    >
+    <section class="relative flex justify-center items-center w-full h-screen overflow-hidden" :style="{
+      background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
+    }">
       <div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div>
 
       <div
-        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center"
-      >
-        <div
-          v-for="rowIndex in 4"
-          :key="rowIndex"
-          class="gap-4 grid grid-cols-7"
-          :style="{ willChange: 'transform, filter' }"
-          ref="rowRefs"
-        >
+        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center">
+        <div v-for="rowIndex in 4" :key="rowIndex" class="gap-4 grid grid-cols-7"
+          :style="{ willChange: 'transform, filter' }" ref="rowRefs">
           <div v-for="itemIndex in 7" :key="itemIndex" class="relative">
             <div
-              class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
-            >
-              <div
-                v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
-                class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
-                :style="{
+              class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white">
+              <div v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                class="top-0 left-0 absolute bg-cover bg-center w-full h-full" :style="{
                   backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`,
-                }"
-              ></div>
-              <div
-                v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
-                class="z-[2] p-4 text-center"
-                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
-              ></div>
+                }"></div>
+              <div v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])" class="z-[2] p-4 text-center"
+                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"></div>
               <div v-else class="z-[1] p-4 text-center">
                 {{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }}
               </div>
diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index 5d8654e..5dd0dd6 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -80,6 +80,5 @@ const items = [
   `<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>

From f4d97ee94ebd6f665894ac915c00d30f4ca0066b Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 11:59:33 +0300
Subject: [PATCH 16/37] Add prettier config, format codebase

---
 .github/ISSUE_TEMPLATE/1-bug-report.yml       |  84 +--
 .github/ISSUE_TEMPLATE/2-feature-request.yml  |  44 +-
 .prettierignore                               |  34 +
 .prettierrc                                   |  14 +
 README.md                                     |   6 +-
 eslint.config.ts                              |  16 +-
 index.html                                    | 186 ++---
 jsrepo-build-config.json                      |  70 +-
 package-lock.json                             |   1 +
 package.json                                  |   3 +
 public/site.webmanifest                       |  12 +-
 scripts/cleanEmptyLines.js                    |   0
 scripts/generateComponent.js                  |  24 +-
 src/App.vue                                   |  25 +-
 src/components/code/CliInstallation.vue       |  79 +-
 src/components/code/CodeExample.vue           |  85 ++-
 src/components/code/Dependencies.vue          |   9 +-
 src/components/common/BackToTopButton.vue     |  71 +-
 src/components/common/ContributionSection.vue |  47 +-
 src/components/common/Customize.vue           |   3 +-
 src/components/common/Logo.vue                |  37 +-
 src/components/common/PreviewColor.vue        |  19 +-
 src/components/common/PreviewSelect.vue       |  43 +-
 src/components/common/PreviewSlider.vue       |  30 +-
 src/components/common/PreviewSwitch.vue       |  15 +-
 src/components/common/PropTable.vue           |  20 +-
 src/components/common/RefreshButton.vue       |   6 +-
 src/components/common/TabbedLayout.vue        |  32 +-
 .../landing/DisplayHeader/DisplayHeader.css   |  20 +-
 .../landing/DisplayHeader/DisplayHeader.vue   |  83 +--
 .../landing/FeatureCards/FeatureCards.css     |  41 +-
 .../landing/FeatureCards/FeatureCards.vue     | 285 ++++----
 src/components/landing/Footer/Footer.css      |   6 +-
 src/components/landing/Footer/Footer.vue      |  33 +-
 src/components/landing/Hero/Hero.vue          |  85 ++-
 .../landing/PlasmaWave/PlasmaWave.vue         | 229 +++---
 .../landing/StartBuilding/StartBuilding.css   |  10 +-
 .../landing/StartBuilding/StartBuilding.vue   |   9 +-
 src/components/layouts/CategoryLayout.vue     |  13 +-
 src/components/navs/Header.vue                | 169 ++---
 src/components/navs/Sidebar.vue               | 345 +++++----
 src/composables/useForceRerender.ts           |  10 +-
 src/composables/useStars.ts                   |  63 +-
 src/constants/Categories.ts                   |  10 +-
 src/constants/Components.ts                   | 104 +--
 .../code/Animations/animatedContentCode.ts    |   6 +-
 .../code/Animations/clickSparkCode.ts         |   6 +-
 src/constants/code/Animations/countUpCode.ts  |   6 +-
 src/constants/code/Animations/cubesCode.ts    |   6 +-
 .../code/Animations/fadeContentCode.ts        |   6 +-
 .../code/Animations/glareHoverCode.ts         |   6 +-
 src/constants/code/Animations/magnetCode.ts   |   6 +-
 .../code/Animations/magnetLinesCode.ts        |   6 +-
 .../code/Animations/pixelTransitionCode.ts    |   6 +-
 src/constants/code/Backgrounds/auroraCode.ts  |   6 +-
 src/constants/code/Backgrounds/beamsCode.ts   |   6 +-
 src/constants/code/Backgrounds/dotGridCode.ts |   6 +-
 .../code/Backgrounds/iridescenceCode.ts       |   6 +-
 .../code/Backgrounds/letterGlitchCode.ts      |   6 +-
 .../code/Backgrounds/lightningCode.ts         |   6 +-
 .../code/Backgrounds/particlesCode.ts         |   6 +-
 src/constants/code/Backgrounds/silkCode.ts    |   6 +-
 src/constants/code/Backgrounds/squaresCode.ts |   6 +-
 src/constants/code/Backgrounds/threadsCode.ts |   6 +-
 src/constants/code/Backgrounds/wavesCode.ts   |   6 +-
 src/constants/code/Components/cardSwapCode.ts |   6 +-
 src/constants/code/Components/carouselCode.ts |   6 +-
 .../code/Components/circularGalleryCode.ts    |   6 +-
 .../code/Components/decayCardCode.ts          |   6 +-
 src/constants/code/Components/dockCode.ts     |   6 +-
 .../code/Components/elasticSliderCode.ts      |   6 +-
 .../code/Components/flowingMenuCode.ts        |   6 +-
 .../code/Components/flyingPostersCode.ts      |   6 +-
 .../code/Components/glassIconsCode.ts         |   6 +-
 src/constants/code/Components/gooeyNavCode.ts |   6 +-
 .../code/Components/infiniteScrollCode.ts     |   6 +-
 src/constants/code/Components/masonryCode.ts  |   6 +-
 .../code/Components/pixelCardCode.ts          |   6 +-
 .../code/Components/profileCardCode.ts        |   6 +-
 .../code/Components/spotlightCardCode.ts      |   6 +-
 .../code/Components/tiltedCardCode.ts         |   6 +-
 .../code/TextAnimations/blurTextCode.ts       |   6 +-
 .../code/TextAnimations/circularTextCode.ts   |   6 +-
 .../code/TextAnimations/curvedLoopCode.ts     |   6 +-
 .../code/TextAnimations/decryptedTextCode.ts  |   6 +-
 .../code/TextAnimations/fallingTextCode.ts    |   6 +-
 .../code/TextAnimations/fuzzyTextCode.ts      |   6 +-
 .../code/TextAnimations/gradientTextCode.ts   |   6 +-
 .../code/TextAnimations/scrollFloatCode.ts    |   6 +-
 .../code/TextAnimations/shinyTextCode.ts      |   6 +-
 .../code/TextAnimations/splitTextCode.ts      |   6 +-
 .../code/TextAnimations/textCursorCode.ts     |   6 +-
 .../code/TextAnimations/textPressureCode.ts   |   6 +-
 .../code/TextAnimations/textTrailCode.ts      |   6 +-
 .../code/TextAnimations/trueFocusCode.ts      |   6 +-
 .../AnimatedContent/AnimatedContent.vue       | 101 ++-
 .../Animations/ClickSpark/ClickSpark.vue      | 225 +++---
 src/content/Animations/CountUp/CountUp.vue    | 177 ++---
 src/content/Animations/Cubes/Cubes.vue        | 381 +++++-----
 .../Animations/FadeContent/FadeContent.vue    |  48 +-
 .../Animations/GlareHover/GlareHover.vue      |  97 +--
 src/content/Animations/Magnet/Magnet.vue      |  98 +--
 .../Animations/MagnetLines/MagnetLines.vue    |  82 +--
 .../PixelTransition/PixelTransition.vue       | 147 ++--
 src/content/Backgrounds/Aurora/Aurora.vue     | 183 ++---
 src/content/Backgrounds/Beams/Beams.vue       | 394 +++++-----
 src/content/Backgrounds/DotGrid/DotGrid.vue   | 344 ++++-----
 .../Backgrounds/GridMotion/GridMotion.vue     |  69 +-
 .../Backgrounds/Iridescence/Iridescence.vue   | 154 ++--
 .../Backgrounds/LetterGlitch/LetterGlitch.vue | 345 +++++----
 .../Backgrounds/Lightning/Lightning.vue       | 228 +++---
 .../Backgrounds/Particles/Particles.vue       | 295 ++++----
 src/content/Backgrounds/Silk/Silk.vue         | 218 +++---
 src/content/Backgrounds/Squares/Squares.vue   | 216 +++---
 src/content/Backgrounds/Threads/Threads.vue   | 186 +++--
 src/content/Backgrounds/Waves/Waves.vue       | 489 ++++++-------
 src/content/Components/CardSwap/CardSwap.vue  | 243 +++----
 src/content/Components/Carousel/Carousel.vue  | 336 +++++----
 .../CircularGallery/CircularGallery.vue       | 678 +++++++++---------
 .../Components/DecayCard/DecayCard.vue        | 174 ++---
 src/content/Components/Dock/Dock.vue          | 240 ++++---
 .../ElasticSlider/ElasticSlider.vue           | 390 +++++-----
 .../Components/FlowingMenu/FlowingMenu.vue    | 125 ++--
 .../FlyingPosters/FlyingPosters.vue           | 212 +++---
 .../Components/GlassIcons/GlassIcons.vue      |  38 +-
 src/content/Components/GooeyNav/GooeyNav.vue  | 258 +++----
 .../InfiniteScroll/InfiniteScroll.vue         | 215 +++---
 src/content/Components/Masonry/Masonry.vue    | 248 +++----
 .../Components/PixelCard/PixelCard.vue        | 340 +++++----
 .../Components/ProfileCard/ProfileCard.vue    | 445 +++++++-----
 .../SpotlightCard/SpotlightCard.vue           |  76 +-
 .../Components/TiltedCard/TiltedCard.vue      | 158 ++--
 .../TextAnimations/BlurText/BlurText.vue      | 136 ++--
 .../CircularText/CircularText.vue             | 134 ++--
 .../TextAnimations/CurvedLoop/CurvedLoop.vue  | 232 +++---
 .../DecryptedText/DecryptedText.vue           | 312 ++++----
 .../FallingText/FallingText.vue               | 274 ++++---
 .../TextAnimations/FuzzyText/FuzzyText.vue    | 315 ++++----
 .../GradientText/GradientText.vue             |  35 +-
 .../ScrollFloat/ScrollFloat.vue               |  16 +-
 .../TextAnimations/ShinyText/ShinyText.vue    |  17 +-
 .../TextAnimations/SplitText/SplitText.vue    | 183 +++--
 .../TextAnimations/TextCursor/TextCursor.vue  | 136 ++--
 .../TextPressure/TextPressure.vue             | 239 +++---
 .../TextAnimations/TextTrail/TextTrail.vue    | 413 ++++++-----
 .../TextAnimations/TrueFocus/TrueFocus.vue    |  88 ++-
 src/css/base.css                              |  10 +-
 src/css/category.css                          |  30 +-
 src/css/landing.css                           |  35 +-
 src/css/main.css                              |   1 -
 src/css/sidebar.css                           |  20 +-
 src/demo/Animations/AnimatedContentDemo.vue   | 164 +++--
 src/demo/Animations/ClickSparkDemo.vue        | 115 ++-
 src/demo/Animations/CountUpDemo.vue           |  69 +-
 src/demo/Animations/CubesDemo.vue             | 161 +++--
 src/demo/Animations/FadeContentDemo.vue       |  90 ++-
 src/demo/Animations/GlareHoverDemo.vue        |  65 +-
 src/demo/Animations/MagnetDemo.vue            |  87 ++-
 src/demo/Animations/MagnetLinesDemo.vue       |  22 +-
 src/demo/Animations/PixelTransitionDemo.vue   |  83 ++-
 src/demo/Backgrounds/AuroraDemo.vue           | 134 ++--
 src/demo/Backgrounds/BeamsDemo.vue            |  41 +-
 src/demo/Backgrounds/DotGridDemo.vue          | 183 +++--
 src/demo/Backgrounds/GridMotionDemo.vue       |  68 +-
 src/demo/Backgrounds/IridescenceDemo.vue      |  81 ++-
 src/demo/Backgrounds/LetterGlitchDemo.vue     | 113 +--
 src/demo/Backgrounds/LightningDemo.vue        | 100 ++-
 src/demo/Backgrounds/ParticlesDemo.vue        | 186 +++--
 src/demo/Backgrounds/SilkDemo.vue             |  85 ++-
 src/demo/Backgrounds/SquaresDemo.vue          |  95 +--
 src/demo/Backgrounds/ThreadsDemo.vue          |  71 +-
 src/demo/Backgrounds/WavesDemo.vue            |  95 ++-
 src/demo/Components/CardSwapDemo.vue          | 159 ++--
 src/demo/Components/CarouselDemo.vue          | 144 ++--
 src/demo/Components/CircularGalleryDemo.vue   | 129 ++--
 src/demo/Components/DecayCardDemo.vue         |  23 +-
 src/demo/Components/DockDemo.vue              | 183 +++--
 src/demo/Components/ElasticSliderDemo.vue     |  25 +-
 src/demo/Components/FlowingMenuDemo.vue       |  21 +-
 src/demo/Components/FlyingPostersDemo.vue     | 184 +++--
 src/demo/Components/GlassIconsDemo.vue        |  29 +-
 src/demo/Components/GooeyNavDemo.vue          | 106 +--
 src/demo/Components/InfiniteScrollDemo.vue    |  63 +-
 src/demo/Components/MasonryDemo.vue           | 158 ++--
 src/demo/Components/PixelCardDemo.vue         |  87 +--
 src/demo/Components/ProfileCardDemo.vue       | 104 +--
 src/demo/Components/SpotlightCardDemo.vue     |  31 +-
 src/demo/Components/TiltedCardDemo.vue        |  67 +-
 src/demo/TextAnimations/BlurTextDemo.vue      | 177 +++--
 src/demo/TextAnimations/CircularTextDemo.vue  |  75 +-
 src/demo/TextAnimations/CurvedLoopDemo.vue    |  85 ++-
 src/demo/TextAnimations/DecryptedTextDemo.vue | 151 ++--
 src/demo/TextAnimations/FallingTextDemo.vue   |  78 +-
 src/demo/TextAnimations/FuzzyTextDemo.vue     |  90 ++-
 src/demo/TextAnimations/GradientTextDemo.vue  |  71 +-
 src/demo/TextAnimations/ScrollFloatDemo.vue   | 109 +--
 src/demo/TextAnimations/ShinyTextDemo.vue     |  33 +-
 src/demo/TextAnimations/SplitTextDemo.vue     | 143 ++--
 src/demo/TextAnimations/TextCursorDemo.vue    |  64 +-
 src/demo/TextAnimations/TextPressureDemo.vue  | 148 +++-
 src/demo/TextAnimations/TextTrailDemo.vue     |  91 ++-
 src/demo/TextAnimations/TrueFocusDemo.vue     | 120 ++--
 src/main.ts                                   |  38 +-
 src/pages/CategoryPage.vue                    |  57 +-
 src/pages/LandingPage.vue                     |  42 +-
 src/router/index.ts                           |  18 +-
 src/types/code.ts                             |  10 +-
 src/utils/utils.ts                            |  22 +-
 tsconfig.app.json                             |  16 +-
 vite.config.ts                                |  26 +-
 wrangler.jsonc                                |   2 +-
 211 files changed, 10586 insertions(+), 8810 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
 create mode 100644 scripts/cleanEmptyLines.js

diff --git a/.github/ISSUE_TEMPLATE/1-bug-report.yml b/.github/ISSUE_TEMPLATE/1-bug-report.yml
index 17beb58..0df7898 100644
--- a/.github/ISSUE_TEMPLATE/1-bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/1-bug-report.yml
@@ -1,47 +1,47 @@
 name: 🐞 Bug report
 description: Help improve Vue Bits.
-labels: ["bug"]
-title: "[BUG]: "
+labels: ['bug']
+title: '[BUG]: '
 body:
-    - type: markdown
-      attributes:
-          value: |
-              ## Thanks for trying to improve Vue Bits!
-              Before continuing make sure you have checked other issues to see if your issue has already been reported / addressed.
-    - type: textarea
-      id: desc
-      attributes:
-          label: Describe the issue
-          description: What is happening right now? What is supposed to happen?
-          placeholder: When I do ..., it does ... but it should do ...
-      validations:
-          required: true
-    - type: markdown
-      attributes:
-          value: |
-              ## Reproduction
+  - type: markdown
+    attributes:
+      value: |
+        ## Thanks for trying to improve Vue Bits!
+        Before continuing make sure you have checked other issues to see if your issue has already been reported / addressed.
+  - type: textarea
+    id: desc
+    attributes:
+      label: Describe the issue
+      description: What is happening right now? What is supposed to happen?
+      placeholder: When I do ..., it does ... but it should do ...
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## Reproduction
 
-              Please provide code snippets/screenshots and, if possible/needed, a live environment where your bug can be reproduced.
-    - type: input
-      id: reproduction-link
-      attributes:
-          label: Reproduction Link
-          description: Link a live environment you used to reproduce.
-          placeholder: https://github.com/DavidHDev/vue-bits
-      validations:
-          required: false
-    - type: textarea
-      id: repro-steps
-      attributes:
-          label: Steps to reproduce
-          description: What steps should be taken to reproduce your issue. 
-      validations:
+        Please provide code snippets/screenshots and, if possible/needed, a live environment where your bug can be reproduced.
+  - type: input
+    id: reproduction-link
+    attributes:
+      label: Reproduction Link
+      description: Link a live environment you used to reproduce.
+      placeholder: https://github.com/DavidHDev/vue-bits
+    validations:
+      required: false
+  - type: textarea
+    id: repro-steps
+    attributes:
+      label: Steps to reproduce
+      description: What steps should be taken to reproduce your issue.
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Validations
+      description: Please make sure you have checked all of the following.
+      options:
+        - label: I have checked other issues to see if my issue was already reported or addressed
           required: true
-    - type: checkboxes
-      id: terms
-      attributes:
-          label: Validations
-          description: Please make sure you have checked all of the following.
-          options:
-              - label: I have checked other issues to see if my issue was already reported or addressed
-                required: true
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/2-feature-request.yml b/.github/ISSUE_TEMPLATE/2-feature-request.yml
index 6704327..0e2de7c 100644
--- a/.github/ISSUE_TEMPLATE/2-feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/2-feature-request.yml
@@ -1,26 +1,26 @@
 name: 💡 Feature Request
 description: Suggest something for Vue Bits.
-labels: ["enhancement"]
-title: "[FEAT]: "
+labels: ['enhancement']
+title: '[FEAT]: '
 body:
-    - type: markdown
-      attributes:
-          value: |
-              ## Thanks for trying to improve Vue Bits!
-              Before continuing make sure you have checked other issues to see if your idea has already been discussed / addressed.
-    - type: textarea
-      id: desc
-      attributes:
-          label: Share your suggestion
-          description: What would you like to see in Vue Bits?
-          placeholder: I want flying pigs in a component please
-      validations:
+  - type: markdown
+    attributes:
+      value: |
+        ## Thanks for trying to improve Vue Bits!
+        Before continuing make sure you have checked other issues to see if your idea has already been discussed / addressed.
+  - type: textarea
+    id: desc
+    attributes:
+      label: Share your suggestion
+      description: What would you like to see in Vue Bits?
+      placeholder: I want flying pigs in a component please
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Validations
+      description: Please make sure you have checked all of the following.
+      options:
+        - label: I have checked other issues to see if my issue was already discussed or addressed
           required: true
-    - type: checkboxes
-      id: terms
-      attributes:
-          label: Validations
-          description: Please make sure you have checked all of the following.
-          options:
-              - label: I have checked other issues to see if my issue was already discussed or addressed
-                required: true
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..5d94291
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,34 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+build/
+public/ui/
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE files
+.vscode/
+.idea/
+
+# Logs
+*.log
+
+# Cache
+.cache/
+.parcel-cache/
+.nuxt/
+.next/
+.vite/
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# Generated files
+coverage/
+*.tsbuildinfo
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..85e84fe
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,14 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": false,
+  "htmlWhitespaceSensitivity": "ignore",
+  "bracketSameLine": false,
+  "singleAttributePerLine": false
+}
diff --git a/README.md b/README.md
index c67732f..f0511c8 100644
--- a/README.md
+++ b/README.md
@@ -28,9 +28,9 @@ Go to [vue-bits.dev](https://vue-bits.dev/) to view the documentation.
 
 ## About
 
-This is the official Vue port of [React Bits](https://reactbits.dev)! 
+This is the official Vue port of [React Bits](https://reactbits.dev)!
 
-Vue Bits is a large collection of animated Vue UI components made to spice up your web creations. We've got animations, components, backgrounds, and awesome stuff that you won't be able to find anywhere else - all free for you to use! 
+Vue Bits is a large collection of animated Vue UI components made to spice up your web creations. We've got animations, components, backgrounds, and awesome stuff that you won't be able to find anywhere else - all free for you to use!
 
 These components are all enhanced with customization options as props, to make it easy for you to get exactly what you need.
 
@@ -62,7 +62,7 @@ Please review the [Contribution Guide](https://github.com/DavidHDev/vue-bits/blo
 
 ## Stats
 
-![Alt](https://repobeats.axiom.co/api/embed/02689c621a09cc5b492ccc1b4bb2f764e32500b7.svg "Repobeats analytics image")
+![Alt](https://repobeats.axiom.co/api/embed/02689c621a09cc5b492ccc1b4bb2f764e32500b7.svg 'Repobeats analytics image')
 
 ## Sponsorship
 
diff --git a/eslint.config.ts b/eslint.config.ts
index 0acea8e..5472bb1 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,11 +1,11 @@
-import { globalIgnores } from 'eslint/config'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import pluginVue from 'eslint-plugin-vue'
+import { globalIgnores } from 'eslint/config';
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+import pluginVue from 'eslint-plugin-vue';
 
 export default defineConfigWithVueTs(
   {
     name: 'app/files-to-lint',
-    files: ['**/*.{ts,mts,tsx,vue}'],
+    files: ['**/*.{ts,mts,tsx,vue}']
   },
 
   globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
@@ -18,7 +18,7 @@ export default defineConfigWithVueTs(
     files: ['**/*.vue'],
     rules: {
       'vue/multi-word-component-names': 'off',
-      'vue/no-reserved-component-names': 'off',
-    },
-  },
-)
+      'vue/no-reserved-component-names': 'off'
+    }
+  }
+);
diff --git a/index.html b/index.html
index bac3082..7709c90 100644
--- a/index.html
+++ b/index.html
@@ -1,99 +1,107 @@
 <!doctype html>
-<html lang="en" style="background: #0b0b0b;">
+<html lang="en" style="background: #0b0b0b">
+  <head>
+    <!-- Basic Meta Tags -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0b0b0b" />
+    <meta name="author" content="David Haz" />
+    <meta
+      name="description"
+      content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces."
+    />
+    <meta
+      name="keywords"
+      content="Vue, Vue tutorials, Vue tips, Vue best practices, Vue development, Vue guides, Vue articles, Vue ecosystem, JavaScript, frontend development, VueJS, UI Library, Component Library, Vue Components, Vue Animations"
+    />
 
-<head>
-  <!-- Basic Meta Tags -->
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="theme-color" content="#0b0b0b" />
-  <meta name="author" content="David Haz">
-  <meta name="description"
-    content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces." />
-  <meta name="keywords"
-    content="Vue, Vue tutorials, Vue tips, Vue best practices, Vue development, Vue guides, Vue articles, Vue ecosystem, JavaScript, frontend development, VueJS, UI Library, Component Library, Vue Components, Vue Animations" />
+    <!-- Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Figtree:wght@200..800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap" rel="stylesheet" />
 
-  <!-- Font -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
-    rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Figtree:wght@200..800&display=swap"
-    rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="icon" type="image/svg+xml" sizes="16x16 32x32" href="favicon.ico" />
+    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Vue Bits" />
+    <link rel="manifest" href="/site.webmanifest" />
 
-  <!-- Icons -->
-  <link rel="icon" type="image/svg+xml" sizes="16x16 32x32" href="favicon.ico" />
-  <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
-  <link rel="shortcut icon" href="favicon.ico" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-  <meta name="apple-mobile-web-app-title" content="Vue Bits" />
-  <link rel="manifest" href="/site.webmanifest" />
+    <!-- Open Graph (OG) - Facebook, LinkedIn, etc. -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Vue Bits" />
+    <meta
+      property="og:description"
+      content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces."
+    />
+    <meta property="og:image" content="https://vue-bits.dev/og-pic.png" />
+    <meta property="og:image:alt" content="The Vue Bits landing page design, showcasing the logo and a subtitle!" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:url" content="https://vue-bits.dev" />
+    <meta property="og:site_name" content="Vue Bits" />
+    <meta property="og:locale" content="en_US" />
 
-  <!-- Open Graph (OG) - Facebook, LinkedIn, etc. -->
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="Vue Bits">
-  <meta property="og:description"
-    content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.">
-  <meta property="og:image" content="https://vue-bits.dev/og-pic.png">
-  <meta property="og:image:alt" content="The Vue Bits landing page design, showcasing the logo and a subtitle!">
-  <meta property="og:image:width" content="1200">
-  <meta property="og:image:height" content="630">
-  <meta property="og:url" content="https://vue-bits.dev">
-  <meta property="og:site_name" content="Vue Bits">
-  <meta property="og:locale" content="en_US">
+    <!-- Twitter Card - Twitter Sharing -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Vue Bits" />
+    <meta
+      name="twitter:description"
+      content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces."
+    />
+    <meta name="twitter:image" content="https://vue-bits.dev/og-pic.jpg" />
+    <meta name="twitter:image:alt" content="The Vue Bits landing page design, showcasing the logo and a subtitle!" />
 
-  <!-- Twitter Card - Twitter Sharing -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="Vue Bits">
-  <meta name="twitter:description"
-    content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.">
-  <meta name="twitter:image" content="https://vue-bits.dev/og-pic.jpg">
-  <meta name="twitter:image:alt" content="The Vue Bits landing page design, showcasing the logo and a subtitle!">
+    <!-- Favicon & Apple Touch Icons -->
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
 
-  <!-- Favicon & Apple Touch Icons -->
-  <link rel="icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="manifest" href="/site.webmanifest">
+    <!-- Canonical & Robots Meta Tags -->
+    <link rel="canonical" href="https://vue-bits.dev" />
+    <meta name="robots" content="index, follow" />
 
-  <!-- Canonical & Robots Meta Tags -->
-  <link rel="canonical" href="https://vue-bits.dev">
-  <meta name="robots" content="index, follow">
-
-  <!-- Structured Data (JSON-LD for SEO) -->
-  <script type="application/ld+json">
-  {
-    "@context": "https://schema.org",
-    "@type": "WebPage",
-    "name": "Vue Bits",
-    "url": "https://vue-bits.dev",
-    "description": "An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.",
-    "image": "https://vue-bits.dev/og-pic.jpg",
-    "author": {
-      "@type": "Person",
-      "name": "David Haz"
-    },
-    "publisher": {
-      "@type": "Person",
-      "name": "David Haz",
-      "logo": {
-        "@type": "ImageObject",
-        "url": "https://davidhaz.com"
+    <!-- Structured Data (JSON-LD for SEO) -->
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "name": "Vue Bits",
+        "url": "https://vue-bits.dev",
+        "description": "An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.",
+        "image": "https://vue-bits.dev/og-pic.jpg",
+        "author": {
+          "@type": "Person",
+          "name": "David Haz"
+        },
+        "publisher": {
+          "@type": "Person",
+          "name": "David Haz",
+          "logo": {
+            "@type": "ImageObject",
+            "url": "https://davidhaz.com"
+          }
+        }
       }
-    }
-  }
-  </script>
-  <title>Vue Bits - Animated UI Components For Vue</title>
-</head>
+    </script>
+    <title>Vue Bits - Animated UI Components For Vue</title>
+  </head>
 
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/jsrepo-build-config.json b/jsrepo-build-config.json
index 29643a7..85ee01d 100644
--- a/jsrepo-build-config.json
+++ b/jsrepo-build-config.json
@@ -1,37 +1,37 @@
 {
-	"$schema": "https://unpkg.com/jsrepo@1.30.1/schemas/registry-config.json",
-	"meta": {
-		"authors": ["David Haz"],
-		"description": "An open source collection of animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.",
-		"bugs": "https://github.com/DavidHDev/vue-bits/issues",
-		"homepage": "https://vue-bits.dev",
-		"repository": "https://github.com/DavidHDev/vue-bits",
-		"tags": [
-			"vue",
-			"javascript",
-			"components",
-			"web",
-			"vuejs",
-			"css-animations",
-			"component-library",
-			"ui-components",
-			"3d",
-			"ui-library",
-			"tailwind",
-			"tailwindcss",
-			"components",
-			"components-library"
-		]
-	},
-	"dirs": [],
-	"doNotListBlocks": [],
-	"doNotListCategories": [],
-	"listBlocks": [],
-	"listCategories": [],
-	"excludeDeps": ["vue"],
-	"includeBlocks": [],
-	"includeCategories": [],
-	"excludeBlocks": [],
-	"excludeCategories": [],
-	"preview": true
+  "$schema": "https://unpkg.com/jsrepo@1.30.1/schemas/registry-config.json",
+  "meta": {
+    "authors": ["David Haz"],
+    "description": "An open source collection of animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.",
+    "bugs": "https://github.com/DavidHDev/vue-bits/issues",
+    "homepage": "https://vue-bits.dev",
+    "repository": "https://github.com/DavidHDev/vue-bits",
+    "tags": [
+      "vue",
+      "javascript",
+      "components",
+      "web",
+      "vuejs",
+      "css-animations",
+      "component-library",
+      "ui-components",
+      "3d",
+      "ui-library",
+      "tailwind",
+      "tailwindcss",
+      "components",
+      "components-library"
+    ]
+  },
+  "dirs": [],
+  "doNotListBlocks": [],
+  "doNotListCategories": [],
+  "listBlocks": [],
+  "listCategories": [],
+  "excludeDeps": ["vue"],
+  "includeBlocks": [],
+  "includeCategories": [],
+  "excludeBlocks": [],
+  "excludeCategories": [],
+  "preview": true
 }
diff --git a/package-lock.json b/package-lock.json
index a3c070d..aa07415 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "jsrepo": "^1.30.1",
         "npm-run-all2": "^8.0.4",
         "postcss": "^8.5.6",
+        "prettier": "^3.6.2",
         "tailwindcss": "^4.1.11",
         "typescript": "~5.8.0",
         "vite": "^7.0.0",
diff --git a/package.json b/package.json
index cba736a..537c416 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "new:component": "node scripts/generateComponent.js"
   },
   "dependencies": {
@@ -47,6 +49,7 @@
     "jsrepo": "^1.30.1",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
     "tailwindcss": "^4.1.11",
     "typescript": "~5.8.0",
     "vite": "^7.0.0",
diff --git a/public/site.webmanifest b/public/site.webmanifest
index 45dc8a2..0b08af1 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/scripts/cleanEmptyLines.js b/scripts/cleanEmptyLines.js
new file mode 100644
index 0000000..e69de29
diff --git a/scripts/generateComponent.js b/scripts/generateComponent.js
index 110686b..eb264b1 100644
--- a/scripts/generateComponent.js
+++ b/scripts/generateComponent.js
@@ -1,15 +1,15 @@
-import fs from "fs";
-import path from "path";
-import process from "process";
+import fs from 'fs';
+import path from 'path';
+import process from 'process';
 
-import { fileURLToPath } from "url";
+import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const args = process.argv.slice(2);
 if (args.length < 2) {
-  console.error("Usage: npm run generate:component <ComponentType> <ComponentName>");
+  console.error('Usage: npm run generate:component <ComponentType> <ComponentName>');
   process.exit(1);
 }
 
@@ -17,12 +17,12 @@ const [componentType, componentName] = args;
 const componentNameLower = componentName.charAt(0).toLowerCase() + componentName.slice(1);
 
 const paths = {
-  content: path.join(__dirname, "../src/content", componentType, componentName),
-  demo: path.join(__dirname, "../src/demo", componentType),
-  constants: path.join(__dirname, "../src/constants/code", componentType),
+  content: path.join(__dirname, '../src/content', componentType, componentName),
+  demo: path.join(__dirname, '../src/demo', componentType),
+  constants: path.join(__dirname, '../src/constants/code', componentType)
 };
 
-Object.values(paths).forEach((dir) => {
+Object.values(paths).forEach(dir => {
   if (!fs.existsSync(dir)) {
     fs.mkdirSync(dir, { recursive: true });
   }
@@ -31,12 +31,12 @@ Object.values(paths).forEach((dir) => {
 const files = [
   path.join(paths.content, `${componentName}.vue`),
   path.join(paths.demo, `${componentName}Demo.vue`),
-  path.join(paths.constants, `${componentNameLower}Code.ts`),
+  path.join(paths.constants, `${componentNameLower}Code.ts`)
 ];
 
-files.forEach((file) => {
+files.forEach(file => {
   if (!fs.existsSync(file)) {
-    fs.writeFileSync(file, "");
+    fs.writeFileSync(file, '');
   }
 });
 
diff --git a/src/App.vue b/src/App.vue
index 4733645..29f3a14 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,27 +1,24 @@
 <template>
   <div>
-    <DisplayHeader 
-      v-if="!isCategoryPage" 
-      :activeItem="activeItem" 
-    />
-    
+    <DisplayHeader v-if="!isCategoryPage" :activeItem="activeItem" />
+
     <router-view />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import DisplayHeader from '@/components/landing/DisplayHeader/DisplayHeader.vue'
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import DisplayHeader from '@/components/landing/DisplayHeader/DisplayHeader.vue';
 
-const route = useRoute()
+const route = useRoute();
 
 const activeItem = computed(() => {
-  if (route.path === '/') return 'home'
-  return null
-})
+  if (route.path === '/') return 'home';
+  return null;
+});
 
 const isCategoryPage = computed(() => {
-  return /^\/[^/]+\/[^/]+$/.test(route.path)
-})
+  return /^\/[^/]+\/[^/]+$/.test(route.path);
+});
 </script>
diff --git a/src/components/code/CliInstallation.vue b/src/components/code/CliInstallation.vue
index 1384cc4..b830c21 100644
--- a/src/components/code/CliInstallation.vue
+++ b/src/components/code/CliInstallation.vue
@@ -2,12 +2,21 @@
   <div class="cli-installation">
     <h2 class="demo-title">One-Time Installation</h2>
 
-    <VCodeBlock v-if="command" :code="command" :persistent-copy-button="true" highlightjs lang="bash" theme="nord"
-      :copy-button="true" class="code-block" />
+    <VCodeBlock
+      v-if="command"
+      :code="command"
+      :persistent-copy-button="true"
+      highlightjs
+      lang="bash"
+      theme="nord"
+      :copy-button="true"
+      class="code-block"
+    />
 
     <div class="cli-divider"></div>
 
     <h2 class="demo-title">Full CLI Setup</h2>
+
     <p class="jsrepo-info">
       Vue Bits uses
       <a href="https://jsrepo.dev/" target="_blank" rel="noreferrer">jsrepo</a>
@@ -17,23 +26,57 @@
     <Accordion expandIcon="pi pi-chevron-right" collapseIcon="pi pi-chevron-down">
       <AccordionPanel value="setup">
         <AccordionHeader>Setup Steps</AccordionHeader>
+
         <AccordionContent
-          :pt="{ transition: { enterFromClass: '', enterActiveClass: '', enterToClass: '', leaveFromClass: '', leaveActiveClass: '', leaveToClass: '' } }">
+          :pt="{
+            transition: {
+              enterFromClass: '',
+              enterActiveClass: '',
+              enterToClass: '',
+              leaveFromClass: '',
+              leaveActiveClass: '',
+              leaveToClass: ''
+            }
+          }"
+        >
           <div class="setup-content">
             <p class="demo-extra-info">1. Initialize a config file for your project</p>
 
             <div class="setup-option">
-              <VCodeBlock :persistent-copy-button="true" code="npx jsrepo init https://vue-bits.dev/ui" highlightjs
-                lang="bash" theme="nord" :copy-button="true" class="code-block" />
+              <VCodeBlock
+                :persistent-copy-button="true"
+                code="npx jsrepo init https://vue-bits.dev/ui"
+                highlightjs
+                lang="bash"
+                theme="nord"
+                :copy-button="true"
+                class="code-block"
+              />
             </div>
 
             <p class="demo-extra-info">2. Browse &amp; add components from the list</p>
-            <VCodeBlock :persistent-copy-button="true" code="npx jsrepo add" highlightjs lang="bash" theme="nord"
-              :copy-button="true" class="code-block" />
+
+            <VCodeBlock
+              :persistent-copy-button="true"
+              code="npx jsrepo add"
+              highlightjs
+              lang="bash"
+              theme="nord"
+              :copy-button="true"
+              class="code-block"
+            />
 
             <p class="demo-extra-info">3. Or just add a specific component</p>
-            <VCodeBlock :persistent-copy-button="true" code="npx jsrepo add Animations/AnimatedContainer" highlightjs
-              lang="bash" theme="nord" :copy-button="true" class="code-block" />
+
+            <VCodeBlock
+              :persistent-copy-button="true"
+              code="npx jsrepo add Animations/AnimatedContainer"
+              highlightjs
+              lang="bash"
+              theme="nord"
+              :copy-button="true"
+              class="code-block"
+            />
           </div>
         </AccordionContent>
       </AccordionPanel>
@@ -42,15 +85,15 @@
 </template>
 
 <script setup lang="ts">
-import { VCodeBlock } from '@wdns/vue-code-block'
-import Accordion from 'primevue/accordion'
-import AccordionPanel from 'primevue/accordionpanel'
-import AccordionHeader from 'primevue/accordionheader'
-import AccordionContent from 'primevue/accordioncontent'
+import { VCodeBlock } from '@wdns/vue-code-block';
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
 
 const { command } = defineProps<{
-  command?: string
-}>()
+  command?: string;
+}>();
 </script>
 
 <style scoped>
@@ -74,7 +117,7 @@ const { command } = defineProps<{
 }
 
 .jsrepo-info a {
-  color: #27FF64;
+  color: #27ff64;
   text-decoration: underline;
 }
 
@@ -166,4 +209,4 @@ const { command } = defineProps<{
 :deep(.v-code-block--me-1) {
   margin-right: 0 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/code/CodeExample.vue b/src/components/code/CodeExample.vue
index 5bdcc98..cc41b9f 100644
--- a/src/components/code/CodeExample.vue
+++ b/src/components/code/CodeExample.vue
@@ -4,14 +4,25 @@
       <h2 class="demo-title">{{ getDisplayName(name) }}</h2>
 
       <div v-if="snippet" class="code-container">
-        <div class="code-wrapper" :class="{ 'collapsed': shouldCollapse(snippet) && !isExpanded(name) }">
-          <VCodeBlock :code="snippet" highlightjs :lang="getLanguage(name)" theme="nord" :copy-button="true"
-            :persistent-copy-button="true" class="code-block" />
+        <div class="code-wrapper" :class="{ collapsed: shouldCollapse(snippet) && !isExpanded(name) }">
+          <VCodeBlock
+            :code="snippet"
+            highlightjs
+            :lang="getLanguage(name)"
+            theme="nord"
+            :copy-button="true"
+            :persistent-copy-button="true"
+            class="code-block"
+          />
 
           <div v-if="shouldCollapse(snippet) && !isExpanded(name)" class="fade-overlay" />
 
-          <button v-if="shouldCollapse(snippet)" class="expand-button" :class="{ 'expanded': isExpanded(name) }"
-            @click="toggleExpanded(name)">
+          <button
+            v-if="shouldCollapse(snippet)"
+            class="expand-button"
+            :class="{ expanded: isExpanded(name) }"
+            @click="toggleExpanded(name)"
+          >
             {{ isExpanded(name) ? 'Collapse Snippet' : 'See Full Snippet' }}
           </button>
         </div>
@@ -19,6 +30,7 @@
 
       <div v-if="!snippet" class="no-code">
         <span>Nothing here yet!</span>
+
         <i class="pi pi-face-sad"></i>
       </div>
     </div>
@@ -26,58 +38,55 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { VCodeBlock } from '@wdns/vue-code-block'
-import type { CodeObject } from '../../types/code'
+import { computed, ref } from 'vue';
+import { VCodeBlock } from '@wdns/vue-code-block';
+import type { CodeObject } from '../../types/code';
 
 const props = defineProps<{
-  codeObject: CodeObject
-}>()
+  codeObject: CodeObject;
+}>();
 
-const skipKeys = [
-  'cli'
-]
+const skipKeys = ['cli'];
 
-const expandedSections = ref<Set<string>>(new Set())
+const expandedSections = ref<Set<string>>(new Set());
 
 const codeEntries = computed(() => {
-  return Object.entries(props.codeObject).filter(([name]) => !skipKeys.includes(name))
-})
-
+  return Object.entries(props.codeObject).filter(([name]) => !skipKeys.includes(name));
+});
 
 const shouldCollapse = (snippet: string) => {
-  const codeLines = snippet?.split('\n').length || 0
-  return codeLines > 35
-}
+  const codeLines = snippet?.split('\n').length || 0;
+  return codeLines > 35;
+};
 
 const isExpanded = (name: string) => {
-  return expandedSections.value.has(name)
-}
+  return expandedSections.value.has(name);
+};
 
 const toggleExpanded = (name: string) => {
   if (expandedSections.value.has(name)) {
-    expandedSections.value.delete(name)
+    expandedSections.value.delete(name);
   } else {
-    expandedSections.value.add(name)
+    expandedSections.value.add(name);
   }
-}
+};
 
 const getDisplayName = (name: string) => {
-  if (name === 'code') return 'Code'
-  if (name === 'cli') return 'CLI Command'
-  if (name === 'utility') return 'Utility'
-  if (name === 'usage') return 'Usage'
-  if (name === 'installation') return 'Installation'
-  return name.charAt(0).toUpperCase() + name.slice(1)
-}
+  if (name === 'code') return 'Code';
+  if (name === 'cli') return 'CLI Command';
+  if (name === 'utility') return 'Utility';
+  if (name === 'usage') return 'Usage';
+  if (name === 'installation') return 'Installation';
+  return name.charAt(0).toUpperCase() + name.slice(1);
+};
 
 const getLanguage = (name: string) => {
-  if (name === 'cli') return 'bash'
-  if (name === 'code') return 'html'
-  if (name === 'usage') return 'html'
-  if (name === 'installation') return 'bash'
-  return 'javascript'
-}
+  if (name === 'cli') return 'bash';
+  if (name === 'code') return 'html';
+  if (name === 'usage') return 'html';
+  if (name === 'installation') return 'bash';
+  return 'javascript';
+};
 </script>
 
 <style scoped>
diff --git a/src/components/code/Dependencies.vue b/src/components/code/Dependencies.vue
index b27fb66..560774d 100644
--- a/src/components/code/Dependencies.vue
+++ b/src/components/code/Dependencies.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="dependencies-container">
     <h2 class="demo-title">Dependencies</h2>
+
     <div class="demo-details">
-      <span v-for="dep in dependencyList" :key="dep" class="dependency-tag">
-        {{ dep }}
-      </span>
+      <span v-for="dep in dependencyList" :key="dep" class="dependency-tag">{{ dep }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 interface Props {
-  dependencyList: string[]
+  dependencyList: string[];
 }
 
-defineProps<Props>()
+defineProps<Props>();
 </script>
diff --git a/src/components/common/BackToTopButton.vue b/src/components/common/BackToTopButton.vue
index ed9ff7d..3eef0f6 100644
--- a/src/components/common/BackToTopButton.vue
+++ b/src/components/common/BackToTopButton.vue
@@ -1,29 +1,33 @@
 <template>
-  <Button :style="{
-    fontWeight: 500,
-    borderRadius: '0.75rem',
-    border: '1px solid #142216',
-    padding: '1rem',
-    position: 'fixed',
-    right: '2.3em',
-    zIndex: 98,
-    boxShadow: '10px 0 25px rgba(0, 0, 0, 0.2)',
-    transition: '0.3s ease',
-    opacity: visible ? 1 : 0,
-    bottom: visible ? '2.5em' : '1em',
-    cursor: visible ? 'pointer' : 'default'
-  }" class="back-to-top" @click="visible && scrollToTop()">
-    <i class="pi pi-arrow-up" style="color: #fff; font-size: 1rem;"></i>
+  <Button
+    :style="{
+      fontWeight: 500,
+      borderRadius: '0.75rem',
+      border: '1px solid #142216',
+      padding: '1rem',
+      position: 'fixed',
+      right: '2.3em',
+      zIndex: 98,
+      boxShadow: '10px 0 25px rgba(0, 0, 0, 0.2)',
+      transition: '0.3s ease',
+      opacity: visible ? 1 : 0,
+      bottom: visible ? '2.5em' : '1em',
+      cursor: visible ? 'pointer' : 'default'
+    }"
+    class="back-to-top"
+    @click="visible && scrollToTop()"
+  >
+    <i class="pi pi-arrow-up" style="color: #fff; font-size: 1rem"></i>
   </Button>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useToast } from 'primevue/usetoast'
-import Button from 'primevue/button'
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
 
-const toast = useToast()
-const visible = ref(false)
+const toast = useToast();
+const visible = ref(false);
 
 const messages = [
   '🐴  Country roads, take me home!',
@@ -33,34 +37,33 @@ const messages = [
   '🐉  Fus Ro Dah!',
   '🍄  The princess is in another castle!',
   '🦸‍♂️  Avengers, assemble!',
-  '🗡️  It\'s dangerous to go alone! Take this.',
+  "🗡️  It's dangerous to go alone! Take this.",
   '📜  A wizard is never late.',
   '💍  Foul Tarnished, in search of the Elden Ring!',
   '🐊  See you later, alligator.',
   '🔥  Dracarys!'
-]
+];
 
-const getRandomMessage = (messages: string[]) =>
-  messages[Math.floor(Math.random() * messages.length)]
+const getRandomMessage = (messages: string[]) => messages[Math.floor(Math.random() * messages.length)];
 
 const scrollToTop = () => {
-  window.scrollTo(0, 0)
+  window.scrollTo(0, 0);
   toast.add({
     severity: 'secondary',
     summary: getRandomMessage(messages),
     life: 3000
-  })
-}
+  });
+};
 
 const onScroll = () => {
-  visible.value = window.scrollY > 500
-}
+  visible.value = window.scrollY > 500;
+};
 
 onMounted(() => {
-  window.addEventListener('scroll', onScroll)
-})
+  window.addEventListener('scroll', onScroll);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll)
-})
-</script>
\ No newline at end of file
+  window.removeEventListener('scroll', onScroll);
+});
+</script>
diff --git a/src/components/common/ContributionSection.vue b/src/components/common/ContributionSection.vue
index 0473fc2..b0c0435 100644
--- a/src/components/common/ContributionSection.vue
+++ b/src/components/common/ContributionSection.vue
@@ -1,24 +1,19 @@
 <template>
   <div class="contribute-container">
     <h2 class="demo-title-contribute">Help improve this component!</h2>
+
     <div class="contribute-buttons">
-      <a
-        :href="bugReportUrl"
-        target="_blank"
-        rel="noreferrer"
-        class="contribute-button"
-      >
+      <a :href="bugReportUrl" target="_blank" rel="noreferrer" class="contribute-button">
         <i class="pi pi-exclamation-triangle"></i>
+
         <span>Report an issue</span>
       </a>
+
       <span class="contribute-separator">or</span>
-      <a
-        :href="featureRequestUrl"
-        target="_blank"
-        rel="noreferrer"
-        class="contribute-button"
-      >
+
+      <a :href="featureRequestUrl" target="_blank" rel="noreferrer" class="contribute-button">
         <i class="pi pi-lightbulb"></i>
+
         <span>Request a feature</span>
       </a>
     </div>
@@ -26,22 +21,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 
-const route = useRoute()
+const route = useRoute();
 
 const bugReportUrl = computed(() => {
-  const category = route.params.category
-  const subcategory = route.params.subcategory
-  const title = encodeURIComponent(`[BUG]: ${category}/${subcategory}`)
-  return `https://github.com/DavidHDev/vue-bits/issues/new?template=1-bug-report.yml&title=${title}&labels=bug`
-})
+  const category = route.params.category;
+  const subcategory = route.params.subcategory;
+  const title = encodeURIComponent(`[BUG]: ${category}/${subcategory}`);
+  return `https://github.com/DavidHDev/vue-bits/issues/new?template=1-bug-report.yml&title=${title}&labels=bug`;
+});
 
 const featureRequestUrl = computed(() => {
-  const category = route.params.category
-  const subcategory = route.params.subcategory
-  const title = encodeURIComponent(`[FEAT]: ${category}/${subcategory}`)
-  return `https://github.com/DavidHDev/vue-bits/issues/new?template=2-feature-request.yml&title=${title}&labels=enhancement`
-})
-</script>
\ No newline at end of file
+  const category = route.params.category;
+  const subcategory = route.params.subcategory;
+  const title = encodeURIComponent(`[FEAT]: ${category}/${subcategory}`);
+  return `https://github.com/DavidHDev/vue-bits/issues/new?template=2-feature-request.yml&title=${title}&labels=enhancement`;
+});
+</script>
diff --git a/src/components/common/Customize.vue b/src/components/common/Customize.vue
index 89d709d..3d2ccc1 100644
--- a/src/components/common/Customize.vue
+++ b/src/components/common/Customize.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2 class="demo-title">Customize</h2>
+
     <slot />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/common/Logo.vue b/src/components/common/Logo.vue
index d121da7..1fd01a8 100644
--- a/src/components/common/Logo.vue
+++ b/src/components/common/Logo.vue
@@ -1,28 +1,45 @@
 <template>
   <svg width="141" height="30" viewBox="0 0 193 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M66.4663 34.2676L56.3843 7.12372H60.5722L68.7929 30.2348L77.0912 7.12372H81.2015L71.1195 34.2676H66.4663Z"
-      fill="white" />
+    <path
+      d="M66.4663 34.2676L56.3843 7.12372H60.5722L68.7929 30.2348L77.0912 7.12372H81.2015L71.1195 34.2676H66.4663Z"
+      fill="white"
+    />
+
     <path
       d="M88.3915 34.7329C86.8662 34.7329 85.5349 34.4227 84.3974 33.8023C83.2858 33.1818 82.4198 32.2512 81.7994 31.0103C81.2048 29.7695 80.9075 28.2055 80.9075 26.3183V14.724H84.7852V25.8918C84.7852 27.7272 85.1859 29.1103 85.9873 30.0409C86.7887 30.9716 87.9391 31.4369 89.4384 31.4369C90.4466 31.4369 91.3514 31.1913 92.1528 30.7001C92.9801 30.2089 93.6264 29.498 94.0917 28.5674C94.557 27.6367 94.7897 26.4993 94.7897 25.155V14.724H98.6674V34.2676H95.2162L94.9448 30.9328C94.3502 32.1219 93.4842 33.0526 92.3467 33.7247C91.2092 34.3969 89.8908 34.7329 88.3915 34.7329Z"
-      fill="white" />
+      fill="white"
+    />
+
     <path
       d="M110.648 34.7329C108.787 34.7329 107.133 34.3064 105.685 33.4533C104.237 32.6002 103.1 31.411 102.273 29.8858C101.471 28.3606 101.071 26.5898 101.071 24.5734C101.071 22.5053 101.471 20.7086 102.273 19.1834C103.1 17.6323 104.237 16.4302 105.685 15.5771C107.133 14.6982 108.813 14.2587 110.726 14.2587C112.639 14.2587 114.281 14.6852 115.651 15.5383C117.021 16.3914 118.081 17.5289 118.83 18.9507C119.58 20.3467 119.955 21.8977 119.955 23.6039C119.955 23.8624 119.942 24.1468 119.916 24.457C119.916 24.7414 119.903 25.0645 119.877 25.4265H103.901V22.6733H116.077C116 21.0447 115.457 19.7779 114.449 18.8731C113.44 17.9425 112.187 17.4772 110.687 17.4772C109.627 17.4772 108.658 17.7228 107.779 18.2139C106.9 18.6793 106.189 19.3772 105.646 20.3079C105.129 21.2127 104.871 22.3631 104.871 23.759V24.8448C104.871 26.2925 105.129 27.5204 105.646 28.5286C106.189 29.511 106.9 30.2606 107.779 30.7777C108.658 31.2689 109.614 31.5144 110.648 31.5144C111.889 31.5144 112.91 31.243 113.712 30.7001C114.513 30.1572 115.108 29.4205 115.496 28.4898H119.373C119.037 29.679 118.468 30.7518 117.667 31.7083C116.866 32.639 115.87 33.3757 114.681 33.9186C113.518 34.4615 112.174 34.7329 110.648 34.7329Z"
-      fill="white" />
+      fill="white"
+    />
+
     <path
       d="M130.615 34.2676V7.12372H140.658C142.545 7.12372 144.122 7.43394 145.389 8.05437C146.656 8.64895 147.599 9.47619 148.22 10.5361C148.866 11.5701 149.189 12.7464 149.189 14.0648C149.189 15.4349 148.892 16.5853 148.297 17.5159C147.703 18.4466 146.914 19.1704 145.932 19.6875C144.975 20.1786 143.941 20.463 142.83 20.5406L143.373 20.1528C144.562 20.1786 145.648 20.5018 146.63 21.1222C147.612 21.7168 148.388 22.5182 148.956 23.5264C149.525 24.5346 149.81 25.6462 149.81 26.8612C149.81 28.2572 149.474 29.5239 148.801 30.6613C148.129 31.773 147.134 32.6519 145.816 33.2982C144.497 33.9445 142.881 34.2676 140.968 34.2676H130.615ZM134.493 31.0491H140.464C142.171 31.0491 143.489 30.6613 144.42 29.8858C145.376 29.0844 145.854 27.9599 145.854 26.5122C145.854 25.0904 145.363 23.9529 144.381 23.0998C143.424 22.2467 142.093 21.8202 140.387 21.8202H134.493V31.0491ZM134.493 18.8344H140.232C141.86 18.8344 143.101 18.4595 143.954 17.7098C144.807 16.9343 145.234 15.8744 145.234 14.5301C145.234 13.2376 144.807 12.2164 143.954 11.4667C143.101 10.6912 141.822 10.3034 140.115 10.3034H134.493V18.8344Z"
-      fill="white" />
+      fill="white"
+    />
+
     <path
       d="M153.736 34.2676V14.724H157.614V34.2676H153.736ZM155.714 11.0402C154.964 11.0402 154.344 10.8075 153.852 10.3422C153.387 9.87689 153.154 9.2823 153.154 8.55847C153.154 7.86048 153.387 7.29175 153.852 6.85228C154.344 6.38696 154.964 6.1543 155.714 6.1543C156.438 6.1543 157.045 6.38696 157.536 6.85228C158.027 7.29175 158.273 7.86048 158.273 8.55847C158.273 9.2823 158.027 9.87689 157.536 10.3422C157.045 10.8075 156.438 11.0402 155.714 11.0402Z"
-      fill="white" />
+      fill="white"
+    />
+
     <path
       d="M170.449 34.2676C169.208 34.2676 168.135 34.0737 167.23 33.6859C166.326 33.2982 165.628 32.6519 165.136 31.7471C164.645 30.8423 164.4 29.6144 164.4 28.0633V18.02H161.026V14.724H164.4L164.865 9.83811H168.277V14.724H173.823V18.02H168.277V28.1021C168.277 29.2137 168.51 29.9763 168.975 30.3899C169.441 30.7777 170.242 30.9716 171.38 30.9716H173.629V34.2676H170.449Z"
-      fill="white" />
+      fill="white"
+    />
+
     <path
       d="M184.885 34.7329C183.23 34.7329 181.782 34.4615 180.542 33.9186C179.301 33.3757 178.318 32.6131 177.595 31.6308C176.871 30.6484 176.431 29.498 176.276 28.1796H180.231C180.361 28.8 180.606 29.3688 180.968 29.8858C181.356 30.4028 181.873 30.8165 182.519 31.1267C183.191 31.4369 183.98 31.592 184.885 31.592C185.738 31.592 186.436 31.4757 186.979 31.243C187.547 30.9845 187.961 30.6484 188.219 30.2348C188.478 29.7953 188.607 29.33 188.607 28.8388C188.607 28.115 188.426 27.5721 188.064 27.2102C187.728 26.8224 187.211 26.5251 186.513 26.3183C185.841 26.0857 185.027 25.8789 184.07 25.6979C183.165 25.5428 182.287 25.336 181.433 25.0775C180.606 24.7931 179.856 24.4441 179.184 24.0305C178.538 23.6169 178.021 23.0998 177.633 22.4794C177.246 21.8331 177.052 21.0447 177.052 20.114C177.052 19.0024 177.349 18.0071 177.943 17.1282C178.538 16.2234 179.378 15.5254 180.464 15.0342C181.576 14.5172 182.881 14.2587 184.38 14.2587C186.552 14.2587 188.297 14.7757 189.615 15.8098C190.934 16.8438 191.709 18.3044 191.942 20.1916H188.181C188.077 19.3126 187.689 18.6405 187.017 18.1752C186.345 17.684 185.453 17.4384 184.342 17.4384C183.23 17.4384 182.377 17.6581 181.782 18.0976C181.188 18.5371 180.891 19.1187 180.891 19.8426C180.891 20.3079 181.059 20.7215 181.395 21.0834C181.731 21.4453 182.222 21.7556 182.868 22.0141C183.54 22.2467 184.355 22.4665 185.311 22.6733C186.681 22.9318 187.909 23.2549 188.995 23.6427C190.081 24.0305 190.947 24.5992 191.593 25.3489C192.239 26.0986 192.562 27.1714 192.562 28.5674C192.588 29.7824 192.278 30.8552 191.632 31.7859C191.011 32.7165 190.119 33.4404 188.956 33.9574C187.819 34.4744 186.462 34.7329 184.885 34.7329Z"
-      fill="white" />
+      fill="white"
+    />
+
     <path
       d="M0.345215 0.450195H15.6363C15.6363 0.450195 22.0583 12.3486 26.6885 19.6614C26.8836 19.9694 26.9797 20.151 27.1894 20.4493C27.3852 20.7278 27.4954 20.8853 27.7214 21.1399C27.9339 21.3795 27.8963 21.356 28.1397 21.6249C28.2726 21.7719 28.3875 21.8829 28.6738 22.068C28.933 22.2355 29.377 22.3481 29.7138 22.2345C29.9746 22.1465 30.0451 22.1136 30.2668 21.9894C31.043 21.5543 31.8402 19.9698 31.8402 19.9698L40.7527 3.71523H32.9372V0.450859L46.3206 0.450195L35.594 19.0675C35.594 19.0675 34.5027 20.8176 33.7209 22.1763C33.5935 22.3977 33.0493 23.1986 32.8374 23.4686C32.4369 23.9791 32.2132 24.2841 31.8402 24.6523C31.4828 25.005 31.1302 25.1777 30.8799 25.2783C30.4928 25.4337 30.0788 25.5121 29.663 25.546C29.3087 25.5749 29.0702 25.5934 28.7179 25.546C28.2786 25.4868 28.2472 25.4717 27.7214 25.2783C27.5003 25.197 27.131 24.9776 26.783 24.7266C26.3964 24.4478 26.1328 24.1992 25.6981 23.7395C25.3155 23.3347 25.1467 23.0947 24.8373 22.6316C24.5125 22.1455 24.2598 21.8766 23.953 21.379C19.7839 14.6168 13.8639 3.71523 13.8639 3.71523H5.99112L23.3635 33.9098L26.6885 28.1777C26.6885 28.1777 27.1444 28.7994 28.7438 28.7475C30.2137 28.6998 30.5672 28.1777 30.5672 28.1777L23.3635 40.437L3.53103 6.05657L2.19899 3.71523L0.345215 0.450195Z"
-      fill="white" />
+      fill="white"
+    />
+
     <circle cx="29.3282" cy="10.6089" r="3.34281" fill="white" />
   </svg>
 </template>
@@ -30,5 +47,5 @@
 <script setup lang="ts">
 defineOptions({
   name: 'VueBitsLogo'
-})
+});
 </script>
diff --git a/src/components/common/PreviewColor.vue b/src/components/common/PreviewColor.vue
index 29140be..1884361 100644
--- a/src/components/common/PreviewColor.vue
+++ b/src/components/common/PreviewColor.vue
@@ -1,25 +1,26 @@
 <template>
   <div class="preview-color">
     <span class="color-label">{{ title }}</span>
+
     <input :value="modelValue" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
   </div>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  title: string
-  modelValue: string
-  disabled?: boolean
-}>()
+  title: string;
+  modelValue: string;
+  disabled?: boolean;
+}>();
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
+  'update:modelValue': [value: string];
+}>();
 
 const handleColorChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-}
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', target.value);
+};
 </script>
 
 <style scoped>
diff --git a/src/components/common/PreviewSelect.vue b/src/components/common/PreviewSelect.vue
index b172637..b28d086 100644
--- a/src/components/common/PreviewSelect.vue
+++ b/src/components/common/PreviewSelect.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="preview-select">
     <span class="select-label">{{ title }}</span>
+
     <Select
       :model-value="modelValue"
       @update:model-value="handleSelectChange"
@@ -14,45 +15,45 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import Select from 'primevue/select'
+import { computed } from 'vue';
+import Select from 'primevue/select';
 
 interface Option {
-  label: string
-  value: string | number
+  label: string;
+  value: string | number;
 }
 
 const props = defineProps<{
-  title: string
-  modelValue: string | number
-  options: Option[] | string[] | number[]
-  optionLabel?: string
-  optionValue?: string
-  placeholder?: string
-  disabled?: boolean
-}>()
+  title: string;
+  modelValue: string | number;
+  options: Option[] | string[] | number[];
+  optionLabel?: string;
+  optionValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}>();
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
+  'update:modelValue': [value: string | number];
+}>();
 
 const handleSelectChange = (value: string | number) => {
-  emit('update:modelValue', value)
-}
+  emit('update:modelValue', value);
+};
 
 const isObjectArray = computed(() => {
-  return props.options.length > 0 && typeof props.options[0] === 'object'
-})
+  return props.options.length > 0 && typeof props.options[0] === 'object';
+});
 
 const selectAttributes = computed(() => {
   if (isObjectArray.value) {
     return {
       optionLabel: props.optionLabel || 'label',
       optionValue: props.optionValue || 'value'
-    }
+    };
   }
-  return {}
-})
+  return {};
+});
 </script>
 
 <style scoped>
diff --git a/src/components/common/PreviewSlider.vue b/src/components/common/PreviewSlider.vue
index c5a020b..6692928 100644
--- a/src/components/common/PreviewSlider.vue
+++ b/src/components/common/PreviewSlider.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="preview-slider">
     <span class="slider-label">{{ title }}</span>
+
     <Slider
       :model-value="modelValue"
       @update:model-value="handleSliderChange"
@@ -10,31 +11,32 @@
       :disabled="disabled"
       class="custom-slider"
     />
+
     <span class="slider-value">{{ modelValue }}{{ valueUnit }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
-import Slider from 'primevue/slider'
+import Slider from 'primevue/slider';
 
 defineProps<{
-  title: string
-  modelValue: number
-  min?: number
-  max?: number
-  step?: number
-  valueUnit?: string
-  disabled?: boolean
-}>()
+  title: string;
+  modelValue: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  valueUnit?: string;
+  disabled?: boolean;
+}>();
 
 const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
+  'update:modelValue': [value: number];
+}>();
 
 const handleSliderChange = (value: number | number[]) => {
-  const numValue = Array.isArray(value) ? value[0] : value
-  emit('update:modelValue', numValue)
-}
+  const numValue = Array.isArray(value) ? value[0] : value;
+  emit('update:modelValue', numValue);
+};
 </script>
 
 <style scoped>
diff --git a/src/components/common/PreviewSwitch.vue b/src/components/common/PreviewSwitch.vue
index 2bdf305..2f2fb13 100644
--- a/src/components/common/PreviewSwitch.vue
+++ b/src/components/common/PreviewSwitch.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="preview-switch">
     <span class="switch-label">{{ title }}</span>
+
     <ToggleSwitch
       :model-value="modelValue"
       @update:model-value="$emit('update:modelValue', $event)"
@@ -10,17 +11,17 @@
 </template>
 
 <script setup lang="ts">
-import ToggleSwitch from 'primevue/toggleswitch'
+import ToggleSwitch from 'primevue/toggleswitch';
 
 defineProps<{
-  title: string
-  modelValue: boolean
-  disabled?: boolean
-}>()
+  title: string;
+  modelValue: boolean;
+  disabled?: boolean;
+}>();
 
 defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
+  'update:modelValue': [value: boolean];
+}>();
 </script>
 
 <style scoped>
diff --git a/src/components/common/PropTable.vue b/src/components/common/PropTable.vue
index 51e2848..f81f9a0 100644
--- a/src/components/common/PropTable.vue
+++ b/src/components/common/PropTable.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="prop-table-container">
     <h2 class="demo-title">Props</h2>
+
     <div class="table-wrapper">
       <DataTable :value="data" class="props-table">
         <Column field="name" header="Property">
@@ -8,16 +9,19 @@
             <div class="code-cell">{{ data.name }}</div>
           </template>
         </Column>
+
         <Column field="type" header="Type">
           <template #body="{ data }">
             <span class="type-text">{{ data.type }}</span>
           </template>
         </Column>
+
         <Column field="default" header="Default">
           <template #body="{ data }">
             <div class="code-cell">{{ data.default || '—' }}</div>
           </template>
         </Column>
+
         <Column field="description" header="Description">
           <template #body="{ data }">
             <div class="description-text">{{ data.description }}</div>
@@ -29,19 +33,19 @@
 </template>
 
 <script setup lang="ts">
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
 
 interface PropData {
-  name: string
-  type: string
-  default: string
-  description: string
+  name: string;
+  type: string;
+  default: string;
+  description: string;
 }
 
 defineProps<{
-  data: PropData[]
-}>()
+  data: PropData[];
+}>();
 </script>
 
 <style scoped>
diff --git a/src/components/common/RefreshButton.vue b/src/components/common/RefreshButton.vue
index bcadb79..81ee92f 100644
--- a/src/components/common/RefreshButton.vue
+++ b/src/components/common/RefreshButton.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
+import Button from 'primevue/button';
 
 defineEmits<{
-  refresh: []
-}>()
+  refresh: [];
+}>();
 </script>
 
 <style scoped>
diff --git a/src/components/common/TabbedLayout.vue b/src/components/common/TabbedLayout.vue
index d481b4d..f5e8ba2 100644
--- a/src/components/common/TabbedLayout.vue
+++ b/src/components/common/TabbedLayout.vue
@@ -5,24 +5,31 @@
         <Tab value="0">
           <div class="tab-header">
             <i class="pi pi-eye"></i>
+
             <span>Preview</span>
           </div>
         </Tab>
+
         <Tab value="1">
           <div class="tab-header">
             <i class="pi pi-code"></i>
+
             <span>Code</span>
           </div>
         </Tab>
+
         <Tab value="2">
           <div class="tab-header">
             <i class="pi pi-box"></i>
+
             <span>CLI</span>
           </div>
         </Tab>
+
         <Tab value="3">
           <div class="tab-header">
             <i class="pi pi-heart"></i>
+
             <span>Contribute</span>
           </div>
         </Tab>
@@ -32,12 +39,15 @@
         <TabPanel value="0">
           <slot name="preview" />
         </TabPanel>
+
         <TabPanel value="1">
           <slot name="code" />
         </TabPanel>
+
         <TabPanel value="2">
           <slot name="cli" />
         </TabPanel>
+
         <TabPanel value="3">
           <ContributionSection />
         </TabPanel>
@@ -47,12 +57,12 @@
 </template>
 
 <script setup lang="ts">
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
-import TabPanel from 'primevue/tabpanel'
-import ContributionSection from './ContributionSection.vue'
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import ContributionSection from './ContributionSection.vue';
 </script>
 
 <style scoped>
@@ -121,8 +131,8 @@ import ContributionSection from './ContributionSection.vue'
 :deep(.p-tab-indicator),
 :deep(.p-tab::before),
 :deep(.p-tab::after),
-:deep(.p-tab[aria-selected="true"]::before),
-:deep(.p-tab[aria-selected="true"]::after),
+:deep(.p-tab[aria-selected='true']::before),
+:deep(.p-tab[aria-selected='true']::after),
 :deep(.p-tablist::after),
 :deep(.p-tablist-tab-list::before),
 :deep(.p-tablist-tab-list::after),
@@ -131,14 +141,14 @@ import ContributionSection from './ContributionSection.vue'
   display: none !important;
 }
 
-:deep(.p-tab[aria-selected="true"]) {
+:deep(.p-tab[aria-selected='true']) {
   background: transparent !important;
   border-bottom: none !important;
 }
 
-:deep(.p-tab[aria-selected="true"] .tab-header) {
+:deep(.p-tab[aria-selected='true'] .tab-header) {
   background: #333333;
-  color: #A7EF9E;
+  color: #a7ef9e;
 }
 
 :deep(.p-tabpanels) {
diff --git a/src/components/landing/DisplayHeader/DisplayHeader.css b/src/components/landing/DisplayHeader/DisplayHeader.css
index 701035a..d6bc6db 100644
--- a/src/components/landing/DisplayHeader/DisplayHeader.css
+++ b/src/components/landing/DisplayHeader/DisplayHeader.css
@@ -77,7 +77,9 @@
   color: inherit;
   font-weight: 400;
   opacity: 0.6;
-  transition: opacity 0.3s ease, transform 0.2s ease;
+  transition:
+    opacity 0.3s ease,
+    transform 0.2s ease;
 }
 
 .nav-link:hover {
@@ -106,9 +108,7 @@
   font-weight: 500;
   padding: 0 0 0 1.4rem;
   height: calc(60px - 2px);
-  background: linear-gradient(135deg,
-      rgb(30, 160, 63),
-      rgba(24, 47, 255, 0.6));
+  background: linear-gradient(135deg, rgb(30, 160, 63), rgba(24, 47, 255, 0.6));
   background-size: 200% 200%;
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
@@ -121,14 +121,14 @@
   align-items: center;
   white-space: nowrap;
   justify-content: space-between;
-  transition: .3s ease;
+  transition: 0.3s ease;
 }
 
 .cta-button span {
   background-color: #0b0b0b;
   margin-left: 1em;
   margin-right: calc(1em - 8px);
-  padding-top: .1em;
+  padding-top: 0.1em;
   height: 45px;
   border-radius: 50px;
   width: 100px;
@@ -143,16 +143,16 @@
   margin-right: 6px;
   width: 16px;
   height: 16px;
-  transition: .3s ease;
+  transition: 0.3s ease;
 }
 
 .cta-button:hover {
-  transition: .3s ease;
+  transition: 0.3s ease;
 }
 
 .cta-button:hover span img {
   transform: scale(1.2);
-  transition: .3s ease;
+  transition: 0.3s ease;
 }
 
 @media (max-width: 900px) {
@@ -307,4 +307,4 @@
   .nav-cta-group {
     gap: 2rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/landing/DisplayHeader/DisplayHeader.vue b/src/components/landing/DisplayHeader/DisplayHeader.vue
index 59f5052..8b2e5ac 100644
--- a/src/components/landing/DisplayHeader/DisplayHeader.vue
+++ b/src/components/landing/DisplayHeader/DisplayHeader.vue
@@ -7,22 +7,12 @@
 
       <div class="nav-cta-group">
         <nav class="landing-nav-items" ref="navRef">
-          <router-link 
-            class="nav-link" 
-            :class="{ 'active-link': activeItem === 'home' }" 
-            to="/"
-          >
-            Home
-          </router-link>
-          <router-link class="nav-link" to="/text-animations/split-text">
-            Docs
-          </router-link>
+          <router-link class="nav-link" :class="{ 'active-link': activeItem === 'home' }" to="/">Home</router-link>
+
+          <router-link class="nav-link" to="/text-animations/split-text">Docs</router-link>
         </nav>
 
-        <button 
-          class="cta-button" 
-          @click="openGitHub"
-        >
+        <button class="cta-button" @click="openGitHub">
           Star On GitHub
           <span ref="starCountRef" :style="{ opacity: 0 }">
             <img :src="starIcon" alt="Star Icon" />
@@ -35,43 +25,48 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { gsap } from 'gsap'
-import VueBitsLogo from '@/components/common/Logo.vue'
-import { useStars } from '@/composables/useStars'
-import starIcon from '@/assets/common/star.svg'
-import './DisplayHeader.css'
+import { ref, watch } from 'vue';
+import { gsap } from 'gsap';
+import VueBitsLogo from '@/components/common/Logo.vue';
+import { useStars } from '@/composables/useStars';
+import starIcon from '@/assets/common/star.svg';
+import './DisplayHeader.css';
 
 interface Props {
   activeItem?: string | null;
 }
 
-defineProps<Props>()
+defineProps<Props>();
 
-const navRef = ref<HTMLElement | null>(null)
-const starCountRef = ref<HTMLElement | null>(null)
-const stars = useStars()
+const navRef = ref<HTMLElement | null>(null);
+const starCountRef = ref<HTMLElement | null>(null);
+const stars = useStars();
 
 const openGitHub = () => {
-  window.open('https://github.com/DavidHDev/vue-bits', '_blank')
-}
+  window.open('https://github.com/DavidHDev/vue-bits', '_blank');
+};
 
-watch(stars, (newStars) => {
-  if (newStars && starCountRef.value) {
-    gsap.fromTo(starCountRef.value,
-      {
-        scale: 0,
-        width: 0,
-        opacity: 0
-      },
-      {
-        scale: 1,
-        width: "100px",
-        opacity: 1,
-        duration: 0.8,
-        ease: "back.out(1)"
-      }
-    )
-  }
-}, { immediate: true })
+watch(
+  stars,
+  newStars => {
+    if (newStars && starCountRef.value) {
+      gsap.fromTo(
+        starCountRef.value,
+        {
+          scale: 0,
+          width: 0,
+          opacity: 0
+        },
+        {
+          scale: 1,
+          width: '100px',
+          opacity: 1,
+          duration: 0.8,
+          ease: 'back.out(1)'
+        }
+      );
+    }
+  },
+  { immediate: true }
+);
 </script>
diff --git a/src/components/landing/FeatureCards/FeatureCards.css b/src/components/landing/FeatureCards/FeatureCards.css
index 38accce..37098d6 100644
--- a/src/components/landing/FeatureCards/FeatureCards.css
+++ b/src/components/landing/FeatureCards/FeatureCards.css
@@ -22,7 +22,7 @@
   font-weight: 600;
   letter-spacing: -2px;
   color: #fff;
-  margin-bottom: .2rem;
+  margin-bottom: 0.2rem;
   background: linear-gradient(135deg, #fff 0%, #60fa89 20%, #55f788 40%, #00ff62 60%, #55f799 80%, #fff 100%);
   background-size: 200% 200%;
   -webkit-background-clip: text;
@@ -44,7 +44,6 @@
 }
 
 @keyframes gradientShift {
-
   0%,
   100% {
     background-position: 0% 50%;
@@ -120,8 +119,6 @@
     grid-column: 2 / 3;
     grid-row: 2 / 3;
   }
-
-
 }
 
 @media (min-width: 50rem) {
@@ -145,8 +142,6 @@
     grid-column: 1 / 3;
     grid-row: 2 / 3;
   }
-
-
 }
 
 @media (min-width: 768px) and (max-width: 49.99rem) {
@@ -169,8 +164,6 @@
     grid-column: 1 / 2;
     grid-row: 2 / 3;
   }
-
-
 }
 
 .feature-card {
@@ -212,14 +205,20 @@
   position: absolute;
   inset: 0;
   padding: 1px;
-  background: radial-gradient(200px circle at var(--glow-x) var(--glow-y),
-      rgba(132, 0, 255, calc(var(--glow-intensity) * 0.8)) 0%,
-      rgba(132, 0, 255, calc(var(--glow-intensity) * 0.4)) 30%,
-      transparent 60%);
+  background: radial-gradient(
+    200px circle at var(--glow-x) var(--glow-y),
+    rgba(132, 0, 255, calc(var(--glow-intensity) * 0.8)) 0%,
+    rgba(132, 0, 255, calc(var(--glow-intensity) * 0.4)) 30%,
+    transparent 60%
+  );
   border-radius: inherit;
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   mask-composite: subtract;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   pointer-events: none;
   transition: opacity 0.3s ease;
@@ -230,8 +229,6 @@
   background: #07160a;
 }
 
-
-
 .feature-card:hover::before {
   opacity: 1;
 }
@@ -314,7 +311,9 @@
 }
 
 .feature-card.particle-container:hover {
-  box-shadow: 0 4px 20px rgba(24, 78, 42, 0.4), 0 0 30px rgba(0, 255, 76, 0.2);
+  box-shadow:
+    0 4px 20px rgba(24, 78, 42, 0.4),
+    0 0 30px rgba(0, 255, 76, 0.2);
   background: #07160b;
 }
 
@@ -481,8 +480,6 @@
   z-index: 2;
 }
 
-
-
 @media (max-width: 479px) {
   .features-section {
     padding: 4rem 1rem 2rem;
@@ -510,8 +507,6 @@
     font-size: 4rem;
   }
 
-
-
   .feature-card h3 {
     font-size: 1rem;
     margin-bottom: 0.5rem;
@@ -553,8 +548,6 @@
     font-size: 4rem;
   }
 
-
-
   .feature-card h3 {
     font-size: 0.95rem;
     margin-bottom: 0.4rem;
@@ -659,4 +652,4 @@
   .feature-card p {
     font-size: 0.8rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/landing/FeatureCards/FeatureCards.vue b/src/components/landing/FeatureCards/FeatureCards.vue
index 6b66304..4bf8eef 100644
--- a/src/components/landing/FeatureCards/FeatureCards.vue
+++ b/src/components/landing/FeatureCards/FeatureCards.vue
@@ -3,6 +3,7 @@
     <div class="features-container">
       <div class="features-header">
         <h3 class="features-title">Zero cost, all the cool.</h3>
+
         <p class="features-subtitle">Everything you need to add flair to your websites</p>
       </div>
 
@@ -13,11 +14,16 @@
           <div className="messages-gif-wrapper">
             <img src="/assets/messages.gif" alt="Messages animation" className="messages-gif" />
           </div>
+
           <h2>
             <template v-if="isMobile">100</template>
-            <CountUp v-else :to="100" />%
+
+            <CountUp v-else :to="100" />
+            %
           </h2>
+
           <h3>Free &amp; Open Source</h3>
+
           <p>Loved by developers around the world</p>
         </ParticleCard>
 
@@ -25,19 +31,24 @@
           <div className="components-gif-wrapper">
             <img src="/assets/components.gif" alt="Components animation" className="components-gif" />
           </div>
+
           <h2>
             <template v-if="isMobile">40</template>
-            <CountUp v-else :to="40" />+
+
+            <CountUp v-else :to="40" />
+            +
           </h2>
+
           <h3>Curated Components</h3>
+
           <p>Growing weekly &amp; only getting better</p>
         </ParticleCard>
 
         <ParticleCard class="feature-card card4" :disable-animations="isMobile">
-          <h2>
-            Modern
-          </h2>
+          <h2>Modern</h2>
+
           <h3>Technologies</h3>
+
           <p>TypeScript + Tailwind, ready to ship</p>
         </ParticleCard>
       </div>
@@ -46,26 +57,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue'
-import { gsap } from 'gsap'
-import CountUp from '../../../content/Animations/CountUp/CountUp.vue'
-import './FeatureCards.css'
+import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue';
+import { gsap } from 'gsap';
+import CountUp from '../../../content/Animations/CountUp/CountUp.vue';
+import './FeatureCards.css';
 
-const isMobile = ref(false)
-const gridRef = ref<HTMLDivElement | null>(null)
+const isMobile = ref(false);
+const gridRef = ref<HTMLDivElement | null>(null);
 
 const checkIsMobile = () => {
-  isMobile.value = window.innerWidth <= 768
-}
+  isMobile.value = window.innerWidth <= 768;
+};
 
 onMounted(() => {
-  checkIsMobile()
-  window.addEventListener('resize', checkIsMobile)
-})
+  checkIsMobile();
+  window.addEventListener('resize', checkIsMobile);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', checkIsMobile)
-})
+  window.removeEventListener('resize', checkIsMobile);
+});
 
 const ParticleCard = defineComponent({
   name: 'ParticleCard',
@@ -76,114 +87,119 @@ const ParticleCard = defineComponent({
     }
   },
   setup(props, { slots }) {
-    const cardRef = ref<HTMLDivElement | null>(null)
-    const particlesRef = ref<HTMLDivElement[]>([])
-    const timeoutsRef = ref<number[]>([])
-    const isHoveredRef = ref(false)
-    const memoizedParticles = ref<HTMLDivElement[]>([])
-    const particlesInit = ref(false)
+    const cardRef = ref<HTMLDivElement | null>(null);
+    const particlesRef = ref<HTMLDivElement[]>([]);
+    const timeoutsRef = ref<number[]>([]);
+    const isHoveredRef = ref(false);
+    const memoizedParticles = ref<HTMLDivElement[]>([]);
+    const particlesInit = ref(false);
 
     const createParticle = (x: number, y: number): HTMLDivElement => {
-      const el = document.createElement('div')
-      el.className = 'particle'
+      const el = document.createElement('div');
+      el.className = 'particle';
       el.style.cssText = `
         position:absolute;width:4px;height:4px;border-radius:50%;
         background:rgba(132,0,255,1);box-shadow:0 0 6px rgba(132,0,255,.6);
         pointer-events:none;z-index:100;left:${x}px;top:${y}px;
-      `
-      return el
-    }
+      `;
+      return el;
+    };
 
     const memoizeParticles = () => {
-      if (particlesInit.value || !cardRef.value) return
-      const { width, height } = cardRef.value.getBoundingClientRect()
+      if (particlesInit.value || !cardRef.value) return;
+      const { width, height } = cardRef.value.getBoundingClientRect();
       Array.from({ length: 12 }).forEach(() => {
-        memoizedParticles.value.push(createParticle(Math.random() * width, Math.random() * height))
-      })
-      particlesInit.value = true
-    }
+        memoizedParticles.value.push(createParticle(Math.random() * width, Math.random() * height));
+      });
+      particlesInit.value = true;
+    };
 
     const clearParticles = () => {
-      timeoutsRef.value.forEach(clearTimeout)
-      timeoutsRef.value = []
+      timeoutsRef.value.forEach(clearTimeout);
+      timeoutsRef.value = [];
       particlesRef.value.forEach(p =>
         gsap.to(p, {
           scale: 0,
           opacity: 0,
           duration: 0.3,
-          ease: "back.in(1.7)",
+          ease: 'back.in(1.7)',
           onComplete: () => {
             if (p.parentNode) {
-              p.parentNode.removeChild(p)
+              p.parentNode.removeChild(p);
             }
-          },
+          }
         })
-      )
-      particlesRef.value = []
-    }
+      );
+      particlesRef.value = [];
+    };
 
     const animateParticles = () => {
-      if (!cardRef.value || !isHoveredRef.value) return
-      if (!particlesInit.value) memoizeParticles()
+      if (!cardRef.value || !isHoveredRef.value) return;
+      if (!particlesInit.value) memoizeParticles();
 
       memoizedParticles.value.forEach((particle, i) => {
         const id = setTimeout(() => {
-          if (!isHoveredRef.value || !cardRef.value) return
-          const clone = particle.cloneNode(true) as HTMLDivElement
-          cardRef.value.appendChild(clone)
-          particlesRef.value.push(clone)
+          if (!isHoveredRef.value || !cardRef.value) return;
+          const clone = particle.cloneNode(true) as HTMLDivElement;
+          cardRef.value.appendChild(clone);
+          particlesRef.value.push(clone);
 
-          gsap.set(clone, { scale: 0, opacity: 0 })
-          gsap.to(clone, { scale: 1, opacity: 1, duration: 0.3, ease: "back.out(1.7)" })
+          gsap.set(clone, { scale: 0, opacity: 0 });
+          gsap.to(clone, { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' });
           gsap.to(clone, {
             x: (Math.random() - 0.5) * 100,
             y: (Math.random() - 0.5) * 100,
             rotation: Math.random() * 360,
             duration: 2 + Math.random() * 2,
-            ease: "none",
+            ease: 'none',
             repeat: -1,
-            yoyo: true,
-          })
-          gsap.to(clone, { opacity: 0.3, duration: 1.5, ease: "power2.inOut", repeat: -1, yoyo: true })
-        }, i * 100)
-        timeoutsRef.value.push(id)
-      })
-    }
+            yoyo: true
+          });
+          gsap.to(clone, { opacity: 0.3, duration: 1.5, ease: 'power2.inOut', repeat: -1, yoyo: true });
+        }, i * 100);
+        timeoutsRef.value.push(id);
+      });
+    };
 
     const handleMouseEnter = () => {
-      isHoveredRef.value = true
-      animateParticles()
-    }
+      isHoveredRef.value = true;
+      animateParticles();
+    };
 
     const handleMouseLeave = () => {
-      isHoveredRef.value = false
-      clearParticles()
-    }
+      isHoveredRef.value = false;
+      clearParticles();
+    };
 
     onMounted(() => {
-      if (props.disableAnimations || !cardRef.value) return
+      if (props.disableAnimations || !cardRef.value) return;
 
-      const node = cardRef.value
-      node.addEventListener('mouseenter', handleMouseEnter)
-      node.addEventListener('mouseleave', handleMouseLeave)
-    })
+      const node = cardRef.value;
+      node.addEventListener('mouseenter', handleMouseEnter);
+      node.addEventListener('mouseleave', handleMouseLeave);
+    });
 
     onUnmounted(() => {
       if (cardRef.value) {
-        cardRef.value.removeEventListener('mouseenter', handleMouseEnter)
-        cardRef.value.removeEventListener('mouseleave', handleMouseLeave)
+        cardRef.value.removeEventListener('mouseenter', handleMouseEnter);
+        cardRef.value.removeEventListener('mouseleave', handleMouseLeave);
       }
-      isHoveredRef.value = false
-      clearParticles()
-    })
+      isHoveredRef.value = false;
+      clearParticles();
+    });
 
-    return () => h('div', {
-      ref: cardRef,
-      class: 'particle-container',
-      style: { position: 'relative', overflow: 'hidden' }
-    }, slots.default?.())
+    return () =>
+      h(
+        'div',
+        {
+          ref: cardRef,
+          class: 'particle-container',
+          style: { position: 'relative', overflow: 'hidden' }
+        },
+        slots.default?.()
+      );
   }
-})
+});
 
 const GlobalSpotlight = defineComponent({
   name: 'GlobalSpotlight',
@@ -198,89 +214,88 @@ const GlobalSpotlight = defineComponent({
     }
   },
   setup(props) {
-    const spotlightRef = ref<HTMLDivElement | null>(null)
-    const isInsideSectionRef = ref(false)
+    const spotlightRef = ref<HTMLDivElement | null>(null);
+    const isInsideSectionRef = ref(false);
 
     const handleMouseMove = (e: MouseEvent) => {
-      if (!spotlightRef.value || !props.gridRef.value) return
-      const section = props.gridRef.value.closest('.features-section')
-      const rect = section?.getBoundingClientRect()
+      if (!spotlightRef.value || !props.gridRef.value) return;
+      const section = props.gridRef.value.closest('.features-section');
+      const rect = section?.getBoundingClientRect();
       const inside =
-        rect &&
-        e.clientX >= rect.left && e.clientX <= rect.right &&
-        e.clientY >= rect.top && e.clientY <= rect.bottom
+        rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
 
-      isInsideSectionRef.value = inside
-      const cards = props.gridRef.value.querySelectorAll('.feature-card')
+      isInsideSectionRef.value = inside;
+      const cards = props.gridRef.value.querySelectorAll('.feature-card');
 
       if (!inside) {
-        gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: "power2.out" })
-        cards.forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'))
-        return
+        gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
+        cards.forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
+        return;
       }
 
-      let minDist = Infinity
-      const prox = 100, fade = 150
+      let minDist = Infinity;
+      const prox = 100,
+        fade = 150;
       cards.forEach((card: HTMLElement) => {
-        const r = card.getBoundingClientRect()
-        const cx = r.left + r.width / 2
-        const cy = r.top + r.height / 2
-        const d = Math.hypot(e.clientX - cx, e.clientY - cy) - Math.max(r.width, r.height) / 2
-        const ed = Math.max(0, d)
-        minDist = Math.min(minDist, ed)
+        const r = card.getBoundingClientRect();
+        const cx = r.left + r.width / 2;
+        const cy = r.top + r.height / 2;
+        const d = Math.hypot(e.clientX - cx, e.clientY - cy) - Math.max(r.width, r.height) / 2;
+        const ed = Math.max(0, d);
+        minDist = Math.min(minDist, ed);
 
-        const rx = ((e.clientX - r.left) / r.width) * 100
-        const ry = ((e.clientY - r.top) / r.height) * 100
-        let glow = 0
-        if (ed <= prox) glow = 1
-        else if (ed <= fade) glow = (fade - ed) / (fade - prox)
-        card.style.setProperty('--glow-x', `${rx}%`)
-        card.style.setProperty('--glow-y', `${ry}%`)
-        card.style.setProperty('--glow-intensity', String(glow))
-      })
+        const rx = ((e.clientX - r.left) / r.width) * 100;
+        const ry = ((e.clientY - r.top) / r.height) * 100;
+        let glow = 0;
+        if (ed <= prox) glow = 1;
+        else if (ed <= fade) glow = (fade - ed) / (fade - prox);
+        card.style.setProperty('--glow-x', `${rx}%`);
+        card.style.setProperty('--glow-y', `${ry}%`);
+        card.style.setProperty('--glow-intensity', String(glow));
+      });
 
-      gsap.to(spotlightRef.value, { left: e.clientX, top: e.clientY, duration: 0.1, ease: "power2.out" })
-      const target = minDist <= prox ? 0.8 : minDist <= fade ? ((fade - minDist) / (fade - prox)) * 0.8 : 0
-      gsap.to(spotlightRef.value, { opacity: target, duration: target > 0 ? 0.2 : 0.5, ease: "power2.out" })
-    }
+      gsap.to(spotlightRef.value, { left: e.clientX, top: e.clientY, duration: 0.1, ease: 'power2.out' });
+      const target = minDist <= prox ? 0.8 : minDist <= fade ? ((fade - minDist) / (fade - prox)) * 0.8 : 0;
+      gsap.to(spotlightRef.value, { opacity: target, duration: target > 0 ? 0.2 : 0.5, ease: 'power2.out' });
+    };
 
     const handleMouseLeave = () => {
-      isInsideSectionRef.value = false
+      isInsideSectionRef.value = false;
       props.gridRef.value
         ?.querySelectorAll('.feature-card')
-        .forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'))
+        .forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
       if (spotlightRef.value) {
-        gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: "power2.out" })
+        gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
       }
-    }
+    };
 
     onMounted(() => {
-      if (props.disableAnimations || !props.gridRef?.value) return
+      if (props.disableAnimations || !props.gridRef?.value) return;
 
-      const spotlight = document.createElement('div')
-      spotlight.className = 'global-spotlight'
+      const spotlight = document.createElement('div');
+      spotlight.className = 'global-spotlight';
       spotlight.style.cssText = `
         position:fixed;width:800px;height:800px;border-radius:50%;pointer-events:none;
         background:radial-gradient(circle,rgba(132,0,255,.15) 0%,rgba(132,0,255,.08) 15%,
         rgba(132,0,255,.04) 25%,rgba(132,0,255,.02) 40%,rgba(132,0,255,.01) 65%,transparent 70%);
         z-index:200;opacity:0;transform:translate(-50%,-50%);mix-blend-mode:screen;
-      `
-      document.body.appendChild(spotlight)
-      spotlightRef.value = spotlight
+      `;
+      document.body.appendChild(spotlight);
+      spotlightRef.value = spotlight;
 
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseleave', handleMouseLeave)
-    })
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseleave', handleMouseLeave);
+    });
 
     onUnmounted(() => {
-      document.removeEventListener('mousemove', handleMouseMove)
-      document.removeEventListener('mouseleave', handleMouseLeave)
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseleave', handleMouseLeave);
       if (spotlightRef.value?.parentNode) {
-        spotlightRef.value.parentNode.removeChild(spotlightRef.value)
+        spotlightRef.value.parentNode.removeChild(spotlightRef.value);
       }
-    })
+    });
 
-    return () => null
+    return () => null;
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/components/landing/Footer/Footer.css b/src/components/landing/Footer/Footer.css
index 69fa91e..0cc7832 100644
--- a/src/components/landing/Footer/Footer.css
+++ b/src/components/landing/Footer/Footer.css
@@ -48,13 +48,13 @@
 }
 
 .footer-heart {
-  color: #27FF64;
+  color: #27ff64;
   font-size: 1em;
   display: inline-block;
 }
 
 .footer-creator-link {
-  color: #27FF64;
+  color: #27ff64;
   text-decoration: none;
   transition: color 0.2s ease;
 }
@@ -152,4 +152,4 @@
     padding: 0.5rem 0.75rem;
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/landing/Footer/Footer.vue b/src/components/landing/Footer/Footer.vue
index 02469d1..c935c0b 100644
--- a/src/components/landing/Footer/Footer.vue
+++ b/src/components/landing/Footer/Footer.vue
@@ -4,10 +4,14 @@
       <div class="footer-content">
         <div class="footer-left">
           <img :src="vueBitsLogo" alt="Vue Bits" class="footer-logo" />
+
           <p class="footer-description">
-            A library created with <i class="pi pi-heart-fill footer-heart"></i> by
+            A library created with
+            <i class="pi pi-heart-fill footer-heart"></i>
+            by
             <a href="https://davidhaz.com/" target="_blank" class="footer-creator-link">this guy</a>
           </p>
+
           <p class="footer-copyright">© {{ currentYear }} Vue Bits</p>
         </div>
 
@@ -15,15 +19,12 @@
           <a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noopener noreferrer" class="footer-link">
             GitHub
           </a>
-          <router-link to="/text-animations/split-text" class="footer-link">
-            Docs
-          </router-link>
-          <a href="https://www.jsrepo.com/" target="_blank" class="footer-link">
-            CLI
-          </a>
-          <a href="https://reactbits.dev/" target="_blank" class="footer-link">
-            React Bits
-          </a>
+
+          <router-link to="/text-animations/split-text" class="footer-link">Docs</router-link>
+
+          <a href="https://www.jsrepo.com/" target="_blank" class="footer-link">CLI</a>
+
+          <a href="https://reactbits.dev/" target="_blank" class="footer-link">React Bits</a>
         </div>
       </div>
     </footer>
@@ -31,10 +32,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import vueBitsLogo from '../../../assets/logos/vue-bits-logo.svg'
-import FadeContent from '@/content/Animations/FadeContent/FadeContent.vue'
-import './Footer.css'
+import { computed } from 'vue';
+import vueBitsLogo from '../../../assets/logos/vue-bits-logo.svg';
+import FadeContent from '@/content/Animations/FadeContent/FadeContent.vue';
+import './Footer.css';
 
-const currentYear = computed(() => new Date().getFullYear())
-</script>
\ No newline at end of file
+const currentYear = computed(() => new Date().getFullYear());
+</script>
diff --git a/src/components/landing/Hero/Hero.vue b/src/components/landing/Hero/Hero.vue
index fd1ea18..a2a6435 100644
--- a/src/components/landing/Hero/Hero.vue
+++ b/src/components/landing/Hero/Hero.vue
@@ -2,18 +2,41 @@
   <div class="landing-content">
     <div class="hero-main-content">
       <h1 class="landing-title">
-        <ResponsiveSplitText :is-mobile="isMobile" text="Animated Vue components" class-name="hero-split"
-          split-type="chars" :delay="30" :duration="2" ease="elastic.out(0.5, 0.3)" />
+        <ResponsiveSplitText
+          :is-mobile="isMobile"
+          text="Animated Vue components"
+          class-name="hero-split"
+          split-type="chars"
+          :delay="30"
+          :duration="2"
+          ease="elastic.out(0.5, 0.3)"
+        />
+
         <br />
-        <ResponsiveSplitText :is-mobile="isMobile" text="for creative developers" class-name="hero-split"
-          split-type="chars" :delay="30" :duration="2" ease="elastic.out(0.5, 0.3)" />
+
+        <ResponsiveSplitText
+          :is-mobile="isMobile"
+          text="for creative developers"
+          class-name="hero-split"
+          split-type="chars"
+          :delay="30"
+          :duration="2"
+          ease="elastic.out(0.5, 0.3)"
+        />
       </h1>
 
-      <ResponsiveSplitText :is-mobile="isMobile" class-name="landing-subtitle" split-type="words" :delay="10"
-        :duration="1" text="Eighty-plus snippets, ready to be dropped into your Vue projects" />
+      <ResponsiveSplitText
+        :is-mobile="isMobile"
+        class-name="landing-subtitle"
+        split-type="words"
+        :delay="10"
+        :duration="1"
+        text="Eighty-plus snippets, ready to be dropped into your Vue projects"
+      />
 
       <router-link to="/text-animations/split-text" class="landing-button">
         <span>Browse Components</span>
+
         <div class="button-arrow-circle">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
             <path d="M6 12L10 8L6 4" stroke="#0b0b0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
@@ -25,8 +48,14 @@
     <div v-if="!isMobile" class="hero-cards-container">
       <div class="hero-card hero-card-1" @click="openUrl('https://vue-bits.dev/backgrounds/dot-grid')">
         <div class="w-full h-full relative hero-dot-grid">
-          <DotGrid base-color="#ffffff" active-color="rgba(138, 43, 226, 0.9)" :dot-size="8" :gap="16"
-            :proximity="50" />
+          <DotGrid
+            base-color="#ffffff"
+            active-color="rgba(138, 43, 226, 0.9)"
+            :dot-size="8"
+            :gap="16"
+            :proximity="50"
+          />
+
           <div class="placeholder-card"></div>
         </div>
       </div>
@@ -34,11 +63,13 @@
       <div class="hero-cards-row">
         <div class="hero-card hero-card-2" @click="openUrl('https://vue-bits.dev/backgrounds/letter-glitch')">
           <LetterGlitch class-name="hero-glitch" :glitch-colors="['#ffffff', '#999999', '#333333']" />
+
           <div class="placeholder-card"></div>
         </div>
 
         <div class="hero-card hero-card-3" @click="openUrl('https://vue-bits.dev/backgrounds/squares')">
           <Squares border-color="#fff" :speed="0.2" direction="diagonal" hover-fill-color="#fff" />
+
           <div class="placeholder-card"></div>
         </div>
       </div>
@@ -47,11 +78,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, h, defineComponent } from 'vue'
-import DotGrid from '@/content/Backgrounds/DotGrid/DotGrid.vue'
-import SplitText from '@/content/TextAnimations/SplitText/SplitText.vue'
-import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue'
-import Squares from '@/content/Backgrounds/Squares/Squares.vue'
+import { ref, onMounted, onUnmounted, h, defineComponent } from 'vue';
+import DotGrid from '@/content/Backgrounds/DotGrid/DotGrid.vue';
+import SplitText from '@/content/TextAnimations/SplitText/SplitText.vue';
+import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
+import Squares from '@/content/Backgrounds/Squares/Squares.vue';
 
 const ResponsiveSplitText = defineComponent({
   props: {
@@ -71,7 +102,7 @@ const ResponsiveSplitText = defineComponent({
   },
   render() {
     if (this.isMobile) {
-      return h('span', { class: this.className }, this.text)
+      return h('span', { class: this.className }, this.text);
     } else {
       return h(SplitText, {
         text: this.text,
@@ -86,29 +117,29 @@ const ResponsiveSplitText = defineComponent({
         rootMargin: this.rootMargin,
         textAlign: this.textAlign,
         onLetterAnimationComplete: this.onLetterAnimationComplete as (() => void) | undefined
-      })
+      });
     }
   }
-})
+});
 
 const openUrl = (url: string) => {
-  window.open(url)
-}
+  window.open(url);
+};
 
-const isMobile = ref(false)
+const isMobile = ref(false);
 
 const checkIsMobile = () => {
-  isMobile.value = window.innerWidth <= 768
-}
+  isMobile.value = window.innerWidth <= 768;
+};
 
 onMounted(() => {
-  checkIsMobile()
-  window.addEventListener('resize', checkIsMobile)
-})
+  checkIsMobile();
+  window.addEventListener('resize', checkIsMobile);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', checkIsMobile)
-})
+  window.removeEventListener('resize', checkIsMobile);
+});
 </script>
 
 <style scoped>
@@ -119,4 +150,4 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/landing/PlasmaWave/PlasmaWave.vue b/src/components/landing/PlasmaWave/PlasmaWave.vue
index 7310aa9..f554cc4 100644
--- a/src/components/landing/PlasmaWave/PlasmaWave.vue
+++ b/src/components/landing/PlasmaWave/PlasmaWave.vue
@@ -1,29 +1,32 @@
 <template>
-  <div v-if="!isMobile" ref="containerRef" :style="{
-    position: 'absolute',
-    inset: 0,
-    overflow: 'hidden',
-    width: '100vw',
-    height: '100vh'
-  }">
-  </div>
+  <div
+    v-if="!isMobile"
+    ref="containerRef"
+    :style="{
+      position: 'absolute',
+      inset: 0,
+      overflow: 'hidden',
+      width: '100vw',
+      height: '100vh'
+    }"
+  ></div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { Renderer, Camera, Transform, Program, Mesh, Geometry } from 'ogl'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { Renderer, Camera, Transform, Program, Mesh, Geometry } from 'ogl';
 
 interface Props {
-  xOffset?: number
-  yOffset?: number
-  rotationDeg?: number
-  focalLength?: number
-  speed1?: number
-  speed2?: number
-  dir2?: number
-  bend1?: number
-  bend2?: number
-  fadeInDuration?: number
+  xOffset?: number;
+  yOffset?: number;
+  rotationDeg?: number;
+  focalLength?: number;
+  speed1?: number;
+  speed2?: number;
+  dir2?: number;
+  bend1?: number;
+  bend2?: number;
+  fadeInDuration?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
   bend1: 0.9,
   bend2: 0.6,
   fadeInDuration: 2000
-})
+});
 
 const vertex = /* glsl */ `
 attribute vec2 position;
@@ -46,7 +49,7 @@ void main() {
   vUv = position * 0.5 + 0.5;
   gl_Position = vec4(position, 0.0, 1.0);
 }
-`
+`;
 
 const fragment = /* glsl */ `
 precision mediump float;
@@ -143,40 +146,40 @@ void main() {
   mainImage(color, coord);
   gl_FragColor = color;
 }
-`
+`;
 
-const isMobile = ref(false)
-const isVisible = ref(true)
-const containerRef = ref<HTMLDivElement | null>(null)
-const uniformOffset = ref(new Float32Array([props.xOffset, props.yOffset]))
-const uniformResolution = ref(new Float32Array([1, 1]))
-const rendererRef = ref<Renderer | null>(null)
-const fadeStartTime = ref<number | null>(null)
-const lastTimeRef = ref(0)
-const pausedTimeRef = ref(0)
-const rafId = ref<number | null>(null)
-const resizeObserver = ref<ResizeObserver | null>(null)
-const intersectionObserver = ref<IntersectionObserver | null>(null)
+const isMobile = ref(false);
+const isVisible = ref(true);
+const containerRef = ref<HTMLDivElement | null>(null);
+const uniformOffset = ref(new Float32Array([props.xOffset, props.yOffset]));
+const uniformResolution = ref(new Float32Array([1, 1]));
+const rendererRef = ref<Renderer | null>(null);
+const fadeStartTime = ref<number | null>(null);
+const lastTimeRef = ref(0);
+const pausedTimeRef = ref(0);
+const rafId = ref<number | null>(null);
+const resizeObserver = ref<ResizeObserver | null>(null);
+const intersectionObserver = ref<IntersectionObserver | null>(null);
 
 const checkIsMobile = () => {
-  isMobile.value = window.innerWidth <= 768
-}
+  isMobile.value = window.innerWidth <= 768;
+};
 
 const resize = () => {
-  if (!containerRef.value || !rendererRef.value) return
+  if (!containerRef.value || !rendererRef.value) return;
 
-  const { width, height } = containerRef.value.getBoundingClientRect()
-  rendererRef.value.setSize(width, height)
-  uniformResolution.value[0] = width * rendererRef.value.dpr
-  uniformResolution.value[1] = height * rendererRef.value.dpr
+  const { width, height } = containerRef.value.getBoundingClientRect();
+  rendererRef.value.setSize(width, height);
+  uniformResolution.value[0] = width * rendererRef.value.dpr;
+  uniformResolution.value[1] = height * rendererRef.value.dpr;
 
-  const gl = rendererRef.value.gl
-  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
-  gl.clear(gl.COLOR_BUFFER_BIT)
-}
+  const gl = rendererRef.value.gl;
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+};
 
 const initWebGL = () => {
-  if (isMobile.value || !containerRef.value) return
+  if (isMobile.value || !containerRef.value) return;
 
   const renderer = new Renderer({
     alpha: true,
@@ -184,20 +187,20 @@ const initWebGL = () => {
     antialias: false,
     depth: false,
     stencil: false,
-    powerPreference: 'high-performance',
-  })
-  rendererRef.value = renderer
+    powerPreference: 'high-performance'
+  });
+  rendererRef.value = renderer;
 
-  const gl = renderer.gl
-  gl.clearColor(0, 0, 0, 0)
-  containerRef.value.appendChild(gl.canvas)
+  const gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 0);
+  containerRef.value.appendChild(gl.canvas);
 
-  const camera = new Camera(gl)
-  const scene = new Transform()
+  const camera = new Camera(gl);
+  const scene = new Transform();
 
   const geometry = new Geometry(gl, {
-    position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
-  })
+    position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) }
+  });
 
   const program = new Program(gl, {
     vertex,
@@ -215,117 +218,117 @@ const initWebGL = () => {
       bend2: { value: props.bend2 },
       bendAdj1: { value: 0 },
       bendAdj2: { value: 0 },
-      uOpacity: { value: 0 },
-    },
-  })
-  new Mesh(gl, { geometry, program }).setParent(scene)
+      uOpacity: { value: 0 }
+    }
+  });
+  new Mesh(gl, { geometry, program }).setParent(scene);
 
-  resize()
+  resize();
 
-  resizeObserver.value = new ResizeObserver(resize)
-  resizeObserver.value.observe(containerRef.value)
+  resizeObserver.value = new ResizeObserver(resize);
+  resizeObserver.value.observe(containerRef.value);
 
   const loop = (now: number) => {
     if (isVisible.value) {
       if (lastTimeRef.value === 0) {
-        lastTimeRef.value = now - pausedTimeRef.value
+        lastTimeRef.value = now - pausedTimeRef.value;
       }
 
-      const t = (now - lastTimeRef.value) * 0.001
+      const t = (now - lastTimeRef.value) * 0.001;
 
       if (fadeStartTime.value === null && t > 0.1) {
-        fadeStartTime.value = now
+        fadeStartTime.value = now;
       }
 
-      let opacity = 0
+      let opacity = 0;
       if (fadeStartTime.value !== null) {
-        const fadeElapsed = now - fadeStartTime.value
-        opacity = Math.min(fadeElapsed / props.fadeInDuration, 1)
-        opacity = 1 - Math.pow(1 - opacity, 3)
+        const fadeElapsed = now - fadeStartTime.value;
+        opacity = Math.min(fadeElapsed / props.fadeInDuration, 1);
+        opacity = 1 - Math.pow(1 - opacity, 3);
       }
 
-      uniformOffset.value[0] = props.xOffset
-      uniformOffset.value[1] = props.yOffset
+      uniformOffset.value[0] = props.xOffset;
+      uniformOffset.value[1] = props.yOffset;
 
-      program.uniforms.iTime.value = t
-      program.uniforms.uRotation.value = props.rotationDeg * Math.PI / 180
-      program.uniforms.focalLength.value = props.focalLength
-      program.uniforms.uOpacity.value = opacity
+      program.uniforms.iTime.value = t;
+      program.uniforms.uRotation.value = (props.rotationDeg * Math.PI) / 180;
+      program.uniforms.focalLength.value = props.focalLength;
+      program.uniforms.uOpacity.value = opacity;
 
-      renderer.render({ scene, camera })
+      renderer.render({ scene, camera });
     } else {
       if (lastTimeRef.value !== 0) {
-        pausedTimeRef.value = now - lastTimeRef.value
-        lastTimeRef.value = 0
+        pausedTimeRef.value = now - lastTimeRef.value;
+        lastTimeRef.value = 0;
       }
     }
 
-    rafId.value = requestAnimationFrame(loop)
-  }
+    rafId.value = requestAnimationFrame(loop);
+  };
 
-  rafId.value = requestAnimationFrame(loop)
-}
+  rafId.value = requestAnimationFrame(loop);
+};
 
 const setupIntersectionObserver = () => {
-  if (!containerRef.value || isMobile.value) return
+  if (!containerRef.value || isMobile.value) return;
 
   intersectionObserver.value = new IntersectionObserver(
     ([entry]) => {
-      isVisible.value = entry.isIntersecting
+      isVisible.value = entry.isIntersecting;
     },
     {
       rootMargin: '50px',
-      threshold: 0.1,
+      threshold: 0.1
     }
-  )
+  );
 
-  intersectionObserver.value.observe(containerRef.value)
-}
+  intersectionObserver.value.observe(containerRef.value);
+};
 
 const cleanup = () => {
   if (rafId.value) {
-    cancelAnimationFrame(rafId.value)
-    rafId.value = null
+    cancelAnimationFrame(rafId.value);
+    rafId.value = null;
   }
 
   if (resizeObserver.value) {
-    resizeObserver.value.disconnect()
-    resizeObserver.value = null
+    resizeObserver.value.disconnect();
+    resizeObserver.value = null;
   }
 
   if (intersectionObserver.value) {
-    intersectionObserver.value.disconnect()
-    intersectionObserver.value = null
+    intersectionObserver.value.disconnect();
+    intersectionObserver.value = null;
   }
 
   if (rendererRef.value) {
-    rendererRef.value.gl.canvas.remove()
-    rendererRef.value = null
+    rendererRef.value.gl.canvas.remove();
+    rendererRef.value = null;
   }
 
-  window.removeEventListener('resize', checkIsMobile)
-}
+  window.removeEventListener('resize', checkIsMobile);
+};
 
 onMounted(() => {
-  checkIsMobile()
-  window.addEventListener('resize', checkIsMobile)
+  checkIsMobile();
+  window.addEventListener('resize', checkIsMobile);
 
   if (!isMobile.value) {
-    initWebGL()
-    setupIntersectionObserver()
+    initWebGL();
+    setupIntersectionObserver();
   }
-})
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
-watch(isMobile, (newIsMobile) => {
+watch(isMobile, newIsMobile => {
   if (newIsMobile) {
-    cleanup()
+    cleanup();
   } else {
-    initWebGL()
-    setupIntersectionObserver()
+    initWebGL();
+    setupIntersectionObserver();
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/components/landing/StartBuilding/StartBuilding.css b/src/components/landing/StartBuilding/StartBuilding.css
index 8b442b5..bef9290 100644
--- a/src/components/landing/StartBuilding/StartBuilding.css
+++ b/src/components/landing/StartBuilding/StartBuilding.css
@@ -17,9 +17,7 @@
   max-width: 1200px;
   user-select: none;
   margin: 0 auto;
-  background: linear-gradient(135deg,
-      #3aed6d,
-      rgba(24, 255, 93, 0.6));
+  background: linear-gradient(135deg, #3aed6d, rgba(24, 255, 93, 0.6));
   background-size: 200% 200%;
   border-radius: 16px;
   padding: 4rem 3rem;
@@ -78,7 +76,7 @@
   background: transparent;
   color: #0b0b0b;
   border: 2px solid #0b0b0b;
-  padding: .6rem 1.6rem;
+  padding: 0.6rem 1.6rem;
   font-size: 1.1rem;
   font-weight: 600;
   border-radius: 50px;
@@ -88,7 +86,7 @@
 
 .start-building-button:hover {
   background: #0b0b0b;
-  color: #27FF64;
+  color: #27ff64;
 }
 
 @media (max-width: 1280px) {
@@ -159,4 +157,4 @@
     padding: 0.75rem 1.5rem;
     font-size: 0.95rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/landing/StartBuilding/StartBuilding.vue b/src/components/landing/StartBuilding/StartBuilding.vue
index 5d881ab..eac09c6 100644
--- a/src/components/landing/StartBuilding/StartBuilding.vue
+++ b/src/components/landing/StartBuilding/StartBuilding.vue
@@ -3,16 +3,15 @@
     <div class="start-building-container">
       <div class="start-building-card">
         <h2 class="start-building-title">Start exploring Vue Bits</h2>
+
         <p class="start-building-subtitle">Animations, components, backgrounds - it's all here</p>
 
-        <router-link to="/text-animations/split-text" class="start-building-button">
-          Browse Components
-        </router-link>
+        <router-link to="/text-animations/split-text" class="start-building-button">Browse Components</router-link>
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import './StartBuilding.css'
-</script>
\ No newline at end of file
+import './StartBuilding.css';
+</script>
diff --git a/src/components/layouts/CategoryLayout.vue b/src/components/layouts/CategoryLayout.vue
index 546d4d3..712daea 100644
--- a/src/components/layouts/CategoryLayout.vue
+++ b/src/components/layouts/CategoryLayout.vue
@@ -1,20 +1,24 @@
 <template>
   <main class="app-container">
     <Header />
+
     <section class="category-wrapper">
       <Sidebar />
+
       <div class="category-page">
         <router-view />
       </div>
     </section>
-    <Toast position="bottom-right"
+
+    <Toast
+      position="bottom-right"
       :closeButtonProps="{ style: { right: '0', margin: '0', outline: 'none', border: 'none' } }"
       :pt="{
         message: {
           style: {
             borderRadius: '10px',
             border: '1px solid #142216',
-            backgroundColor: '#0b0b0b',
+            backgroundColor: '#0b0b0b'
           }
         },
         messageContent: {
@@ -27,11 +31,12 @@
             display: 'none'
           }
         }
-      }" />
+      }"
+    />
   </main>
 </template>
 
 <script setup lang="ts">
 import Header from '../navs/Header.vue';
 import Sidebar from '../navs/Sidebar.vue';
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/navs/Header.vue b/src/components/navs/Header.vue
index 91952b9..4af8f34 100644
--- a/src/components/navs/Header.vue
+++ b/src/components/navs/Header.vue
@@ -28,6 +28,7 @@
       <div class="drawer-content" @click.stop>
         <div class="drawer-header">
           <img :src="Logo" alt="Logo" class="drawer-logo" />
+
           <button class="close-button" aria-label="Close Menu" @click="closeDrawer">
             <i class="pi pi-times"></i>
           </button>
@@ -35,12 +36,13 @@
 
         <div class="drawer-body">
           <!-- Navigation Categories -->
+
           <div class="drawer-navigation">
             <div class="categories-container">
-              <Category 
-                v-for="cat in CATEGORIES" 
-                :key="cat.name" 
-                :category="cat" 
+              <Category
+                v-for="cat in CATEGORIES"
+                :key="cat.name"
+                :category="cat"
                 :location="route"
                 :handle-click="onNavClick"
                 :handle-transition-navigation="handleMobileTransitionNavigation"
@@ -55,9 +57,9 @@
 
           <div class="drawer-section">
             <p class="section-title">Useful Links</p>
-            <router-link to="/text-animations/split-text" @click="closeDrawer" class="drawer-link">
-              Docs
-            </router-link>
+
+            <router-link to="/text-animations/split-text" @click="closeDrawer" class="drawer-link">Docs</router-link>
+
             <a href="https://github.com/DavidHDev/vue-bits" target="_blank" @click="closeDrawer" class="drawer-link">
               GitHub
               <i class="pi pi-arrow-up-right arrow-icon"></i>
@@ -68,6 +70,7 @@
 
           <div class="drawer-section">
             <p class="section-title">Other</p>
+
             <a href="https://davidhaz.com/" target="_blank" @click="closeDrawer" class="drawer-link">
               Who made this?
               <i class="pi pi-arrow-up-right arrow-icon"></i>
@@ -80,58 +83,58 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, defineComponent, h } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useStars } from '../../composables/useStars'
-import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories'
-import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue'
-import Logo from '../../assets/logos/vue-bits-logo.svg'
-import Star from '../../assets/common/star.svg'
+import { ref, onMounted, onUnmounted, computed, defineComponent, h } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStars } from '../../composables/useStars';
+import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
+import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue';
+import Logo from '../../assets/logos/vue-bits-logo.svg';
+import Star from '../../assets/common/star.svg';
 
-const isDrawerOpen = ref(false)
-const isTransitioning = ref(false)
-const stars = useStars()
-const route = useRoute()
-const router = useRouter()
+const isDrawerOpen = ref(false);
+const isTransitioning = ref(false);
+const stars = useStars();
+const route = useRoute();
+const router = useRouter();
 
-const slug = (str: string) => str.replace(/\s+/g, "-").toLowerCase()
+const slug = (str: string) => str.replace(/\s+/g, '-').toLowerCase();
 
 const toggleDrawer = () => {
-  isDrawerOpen.value = !isDrawerOpen.value
-}
+  isDrawerOpen.value = !isDrawerOpen.value;
+};
 
 const closeDrawer = () => {
-  isDrawerOpen.value = false
-}
+  isDrawerOpen.value = false;
+};
 
 const openGitHub = () => {
-  window.open('https://github.com/DavidHDev/vue-bits', '_blank')
-}
+  window.open('https://github.com/DavidHDev/vue-bits', '_blank');
+};
 
 const onNavClick = () => {
-  closeDrawer()
-  window.scrollTo(0, 0)
-}
+  closeDrawer();
+  window.scrollTo(0, 0);
+};
 
 const handleMobileTransitionNavigation = async (path: string) => {
-  if (isTransitioning.value || route.path === path) return
+  if (isTransitioning.value || route.path === path) return;
 
-  closeDrawer()
-  isTransitioning.value = true
+  closeDrawer();
+  isTransitioning.value = true;
 
   try {
-    await router.push(path)
-    window.scrollTo(0, 0)
+    await router.push(path);
+    window.scrollTo(0, 0);
   } finally {
-    isTransitioning.value = false
+    isTransitioning.value = false;
   }
-}
+};
 
 const handleKeyDown = (e: KeyboardEvent) => {
   if (e.key === 'Escape' && isDrawerOpen.value) {
-    closeDrawer()
+    closeDrawer();
   }
-}
+};
 
 const Category = defineComponent({
   name: 'Category',
@@ -167,63 +170,67 @@ const Category = defineComponent({
   },
   setup(props) {
     interface ItemType {
-      sub: string
-      path: string
-      isActive: boolean
-      isNew: boolean
-      isUpdated: boolean
+      sub: string;
+      path: string;
+      isActive: boolean;
+      isNew: boolean;
+      isUpdated: boolean;
     }
 
     const items = computed(() =>
       props.category.subcategories.map((sub: string): ItemType => {
-        const path = `/${slug(props.category.name)}/${slug(sub)}`
-        const activePath = props.location.path
+        const path = `/${slug(props.category.name)}/${slug(sub)}`;
+        const activePath = props.location.path;
         return {
           sub,
           path,
           isActive: activePath === path,
           isNew: (NEW as string[]).includes(sub),
-          isUpdated: (UPDATED as string[]).includes(sub),
-        }
+          isUpdated: (UPDATED as string[]).includes(sub)
+        };
       })
-    )
+    );
 
-    return () => h('div', { class: 'category' }, [
-      h('p', { class: 'category-name' }, props.category.name),
-      h('div', { class: 'category-items' },
-        items.value.map(({ sub, path, isActive, isNew, isUpdated }: ItemType) => {
-          return h('router-link', {
-            key: path,
-            to: path,
-            class: [
-              'sidebar-item',
-              { 'active-sidebar-item': isActive },
-              { 'transitioning': props.isTransitioning }
-            ],
-            onClick: (e: Event) => {
-              e.preventDefault()
-              props.handleTransitionNavigation(path)
-            },
-            onMouseenter: (e: Event) => props.onItemMouseEnter(path, e),
-            onMouseleave: props.onItemMouseLeave
-          }, {
-            default: () => [
-              sub,
-              isNew ? h('span', { class: 'new-tag' }, 'New') : null,
-              isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null
-            ].filter(Boolean)
+    return () =>
+      h('div', { class: 'category' }, [
+        h('p', { class: 'category-name' }, props.category.name),
+        h(
+          'div',
+          { class: 'category-items' },
+          items.value.map(({ sub, path, isActive, isNew, isUpdated }: ItemType) => {
+            return h(
+              'router-link',
+              {
+                key: path,
+                to: path,
+                class: ['sidebar-item', { 'active-sidebar-item': isActive }, { transitioning: props.isTransitioning }],
+                onClick: (e: Event) => {
+                  e.preventDefault();
+                  props.handleTransitionNavigation(path);
+                },
+                onMouseenter: (e: Event) => props.onItemMouseEnter(path, e),
+                onMouseleave: props.onItemMouseLeave
+              },
+              {
+                default: () =>
+                  [
+                    sub,
+                    isNew ? h('span', { class: 'new-tag' }, 'New') : null,
+                    isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null
+                  ].filter(Boolean)
+              }
+            );
           })
-        })
-      )
-    ])
+        )
+      ]);
   }
-})
+});
 
 onMounted(() => {
-  document.addEventListener('keydown', handleKeyDown)
-})
+  document.addEventListener('keydown', handleKeyDown);
+});
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeyDown)
-})
-</script>
\ No newline at end of file
+  document.removeEventListener('keydown', handleKeyDown);
+});
+</script>
diff --git a/src/components/navs/Sidebar.vue b/src/components/navs/Sidebar.vue
index 90c039c..2087102 100644
--- a/src/components/navs/Sidebar.vue
+++ b/src/components/navs/Sidebar.vue
@@ -1,5 +1,6 @@
 <template>
   <!-- Mobile Drawer -->
+
   <div v-if="isDrawerOpen" class="drawer-overlay" @click="closeDrawer">
     <div class="drawer-content" :class="{ 'drawer-open': isDrawerOpen }" @click.stop>
       <div class="drawer-header sidebar-logo">
@@ -7,6 +8,7 @@
           <router-link to="/" @click="closeDrawer">
             <img :src="Logo" alt="Logo" class="drawer-logo" />
           </router-link>
+
           <button class="icon-button" aria-label="Close" @click="closeDrawer">
             <i class="pi pi-times"></i>
           </button>
@@ -15,26 +17,41 @@
 
       <div class="drawer-body">
         <div class="categories-container">
-          <Category v-for="cat in CATEGORIES" :key="cat.name" :category="cat" :location="route"
-            :pending-active-path="pendingActivePath ?? undefined" :handle-click="onNavClick"
-            :handle-transition-navigation="handleMobileTransitionNavigation" :on-item-mouse-enter="() => { }"
-            :on-item-mouse-leave="() => { }" :is-transitioning="isTransitioning" />
+          <Category
+            v-for="cat in CATEGORIES"
+            :key="cat.name"
+            :category="cat"
+            :location="route"
+            :pending-active-path="pendingActivePath ?? undefined"
+            :handle-click="onNavClick"
+            :handle-transition-navigation="handleMobileTransitionNavigation"
+            :on-item-mouse-enter="() => {}"
+            :on-item-mouse-leave="() => {}"
+            :is-transitioning="isTransitioning"
+          />
         </div>
 
         <div class="separator"></div>
+
         <div class="useful-links">
           <p class="useful-links-title">Useful Links</p>
+
           <div class="links-container">
             <a href="https://github.com/DavidHDev/vue-bits" target="_blank" @click="closeDrawer" class="useful-link">
               <span>GitHub</span>
+
               <i class="pi pi-arrow-up-right arrow-icon"></i>
             </a>
+
             <router-link to="/text-animations/split-text" @click="closeDrawer" class="useful-link">
               <span>Docs</span>
+
               <i class="pi pi-arrow-up-right arrow-icon"></i>
             </router-link>
+
             <a href="https://davidhaz.com/" target="_blank" @click="closeDrawer" class="useful-link">
               <span>Who made this?</span>
+
               <i class="pi pi-arrow-up-right arrow-icon"></i>
             </a>
           </div>
@@ -44,174 +61,192 @@
   </div>
 
   <!-- Desktop Sidebar -->
-  <nav ref="sidebarContainerRef" class="sidebar" :class="{ 'sidebar-no-fade': isScrolledToBottom }"
-    @scroll="handleScroll">
+
+  <nav
+    ref="sidebarContainerRef"
+    class="sidebar"
+    :class="{ 'sidebar-no-fade': isScrolledToBottom }"
+    @scroll="handleScroll"
+  >
     <div ref="sidebarRef" class="sidebar-content">
       <!-- Active line indicator -->
-      <div class="active-line" :style="{
-        transform: isLineVisible && linePosition !== null
-          ? `translateY(${linePosition - 8}px)`
-          : 'translateY(-100px)',
-        opacity: isLineVisible ? 1 : 0
-      }"></div>
+
+      <div
+        class="active-line"
+        :style="{
+          transform:
+            isLineVisible && linePosition !== null ? `translateY(${linePosition - 8}px)` : 'translateY(-100px)',
+          opacity: isLineVisible ? 1 : 0
+        }"
+      ></div>
 
       <!-- Hover line indicator -->
-      <div class="hover-line" :style="{
-        transform: hoverLinePosition !== null
-          ? `translateY(${hoverLinePosition - 8}px)`
-          : 'translateY(-100px)',
-        opacity: isHoverLineVisible ? 1 : 0
-      }"></div>
+
+      <div
+        class="hover-line"
+        :style="{
+          transform: hoverLinePosition !== null ? `translateY(${hoverLinePosition - 8}px)` : 'translateY(-100px)',
+          opacity: isHoverLineVisible ? 1 : 0
+        }"
+      ></div>
 
       <div class="categories-list">
-        <Category v-for="cat in CATEGORIES" :key="cat.name" :category="cat" :location="route"
-          :pending-active-path="pendingActivePath ?? undefined" :handle-click="scrollToTop"
-          :handle-transition-navigation="handleTransitionNavigation" :on-item-mouse-enter="onItemEnter"
-          :on-item-mouse-leave="onItemLeave" :is-transitioning="isTransitioning" />
+        <Category
+          v-for="cat in CATEGORIES"
+          :key="cat.name"
+          :category="cat"
+          :location="route"
+          :pending-active-path="pendingActivePath ?? undefined"
+          :handle-click="scrollToTop"
+          :handle-transition-navigation="handleTransitionNavigation"
+          :on-item-mouse-enter="onItemEnter"
+          :on-item-mouse-leave="onItemLeave"
+          :is-transitioning="isTransitioning"
+        />
       </div>
     </div>
   </nav>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories'
-import Logo from '../../assets/logos/vue-bits-logo.svg'
-import '../../css/sidebar.css'
+import { ref, onMounted, onUnmounted, nextTick, watch, defineComponent, h, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
+import Logo from '../../assets/logos/vue-bits-logo.svg';
+import '../../css/sidebar.css';
 
-const HOVER_TIMEOUT_DELAY = 150
+const HOVER_TIMEOUT_DELAY = 150;
 
-const isDrawerOpen = ref(false)
-const linePosition = ref<number | null>(null)
-const isLineVisible = ref(false)
-const hoverLinePosition = ref<number | null>(null)
-const isHoverLineVisible = ref(false)
-const pendingActivePath = ref<string | null>(null)
-const isScrolledToBottom = ref(false)
-const isTransitioning = ref(false)
+const isDrawerOpen = ref(false);
+const linePosition = ref<number | null>(null);
+const isLineVisible = ref(false);
+const hoverLinePosition = ref<number | null>(null);
+const isHoverLineVisible = ref(false);
+const pendingActivePath = ref<string | null>(null);
+const isScrolledToBottom = ref(false);
+const isTransitioning = ref(false);
 
-const sidebarRef = ref<HTMLDivElement>()
-const sidebarContainerRef = ref<HTMLDivElement>()
+const sidebarRef = ref<HTMLDivElement>();
+const sidebarContainerRef = ref<HTMLDivElement>();
 
-let hoverTimeoutRef: number | null = null
-let hoverDelayTimeoutRef: number | null = null
+let hoverTimeoutRef: number | null = null;
+let hoverDelayTimeoutRef: number | null = null;
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 
-const scrollToTop = () => window.scrollTo(0, 0)
-const slug = (str: string) => str.replace(/\s+/g, "-").toLowerCase()
+const scrollToTop = () => window.scrollTo(0, 0);
+const slug = (str: string) => str.replace(/\s+/g, '-').toLowerCase();
 
 const findActiveElement = () => {
-  const activePath = pendingActivePath.value || route.path
+  const activePath = pendingActivePath.value || route.path;
 
   for (const category of CATEGORIES) {
     const activeItem = category.subcategories.find((sub: string) => {
-      const expectedPath = `/${slug(category.name)}/${slug(sub)}`
-      return activePath === expectedPath
-    })
+      const expectedPath = `/${slug(category.name)}/${slug(sub)}`;
+      return activePath === expectedPath;
+    });
     if (activeItem) {
-      const selector = `.sidebar a[href="${activePath}"]`
-      const element = document.querySelector(selector) as HTMLElement
-      return element
+      const selector = `.sidebar a[href="${activePath}"]`;
+      const element = document.querySelector(selector) as HTMLElement;
+      return element;
     }
   }
-  return null
-}
+  return null;
+};
 
 const updateLinePosition = (el: HTMLElement | null) => {
-  if (!el || !sidebarRef.value || !sidebarRef.value.offsetParent) return null
-  const sidebarRect = sidebarRef.value.getBoundingClientRect()
-  const elRect = el.getBoundingClientRect()
-  return elRect.top - sidebarRect.top + elRect.height / 2
-}
+  if (!el || !sidebarRef.value || !sidebarRef.value.offsetParent) return null;
+  const sidebarRect = sidebarRef.value.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+  return elRect.top - sidebarRect.top + elRect.height / 2;
+};
 
 const closeDrawer = () => {
-  isDrawerOpen.value = false
-}
+  isDrawerOpen.value = false;
+};
 
 const onNavClick = () => {
-  closeDrawer()
-  scrollToTop()
-}
+  closeDrawer();
+  scrollToTop();
+};
 
 const handleTransitionNavigation = async (path: string) => {
-  if (isTransitioning.value || route.path === path) return
+  if (isTransitioning.value || route.path === path) return;
 
-  pendingActivePath.value = path
+  pendingActivePath.value = path;
 
   // TODO: Implement transition when available
-  await router.push(path)
-  scrollToTop()
-  pendingActivePath.value = null
-}
+  await router.push(path);
+  scrollToTop();
+  pendingActivePath.value = null;
+};
 
 const handleMobileTransitionNavigation = async (path: string) => {
-  if (isTransitioning.value || route.path === path) return
+  if (isTransitioning.value || route.path === path) return;
 
-  closeDrawer()
-  pendingActivePath.value = path
+  closeDrawer();
+  pendingActivePath.value = path;
 
   // TODO: Implement transition when available
-  await router.push(path)
-  scrollToTop()
-  pendingActivePath.value = null
-}
+  await router.push(path);
+  scrollToTop();
+  pendingActivePath.value = null;
+};
 
 const onItemEnter = (path: string, e: Event) => {
-  if (hoverTimeoutRef) clearTimeout(hoverTimeoutRef)
-  if (hoverDelayTimeoutRef) clearTimeout(hoverDelayTimeoutRef)
+  if (hoverTimeoutRef) clearTimeout(hoverTimeoutRef);
+  if (hoverDelayTimeoutRef) clearTimeout(hoverDelayTimeoutRef);
 
-  const targetElement = e.currentTarget as HTMLElement
-  const pos = updateLinePosition(targetElement)
+  const targetElement = e.currentTarget as HTMLElement;
+  const pos = updateLinePosition(targetElement);
 
   if (pos !== null) {
-    hoverLinePosition.value = pos
+    hoverLinePosition.value = pos;
   }
 
   hoverDelayTimeoutRef = setTimeout(() => {
-    isHoverLineVisible.value = true
-  }, 200)
-}
+    isHoverLineVisible.value = true;
+  }, 200);
+};
 
 const onItemLeave = () => {
-  if (hoverDelayTimeoutRef) clearTimeout(hoverDelayTimeoutRef)
+  if (hoverDelayTimeoutRef) clearTimeout(hoverDelayTimeoutRef);
 
   hoverTimeoutRef = setTimeout(() => {
-    isHoverLineVisible.value = false
-  }, HOVER_TIMEOUT_DELAY)
-}
+    isHoverLineVisible.value = false;
+  }, HOVER_TIMEOUT_DELAY);
+};
 
 const handleScroll = () => {
-  const sidebarElement = sidebarContainerRef.value
-  if (!sidebarElement) return
+  const sidebarElement = sidebarContainerRef.value;
+  if (!sidebarElement) return;
 
-  const { scrollTop, scrollHeight, clientHeight } = sidebarElement
-  const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10
-  isScrolledToBottom.value = isAtBottom
-}
+  const { scrollTop, scrollHeight, clientHeight } = sidebarElement;
+  const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+  isScrolledToBottom.value = isAtBottom;
+};
 
 const updateActiveLine = async () => {
-  await nextTick()
+  await nextTick();
 
   setTimeout(() => {
-    const activeEl = findActiveElement()
+    const activeEl = findActiveElement();
 
     if (!activeEl) {
-      isLineVisible.value = false
-      return
+      isLineVisible.value = false;
+      return;
     }
 
-    const pos = updateLinePosition(activeEl)
+    const pos = updateLinePosition(activeEl);
     if (pos !== null) {
-      linePosition.value = pos
-      isLineVisible.value = true
+      linePosition.value = pos;
+      isLineVisible.value = true;
     } else {
-      isLineVisible.value = false
+      isLineVisible.value = false;
     }
-  }, 100)
-}
+  }, 100);
+};
 
 const Category = defineComponent({
   name: 'Category',
@@ -251,74 +286,78 @@ const Category = defineComponent({
   },
   setup(props) {
     interface ItemType {
-      sub: string
-      path: string
-      isActive: boolean
-      isNew: boolean
-      isUpdated: boolean
+      sub: string;
+      path: string;
+      isActive: boolean;
+      isNew: boolean;
+      isUpdated: boolean;
     }
 
     const items = computed(() =>
       props.category.subcategories.map((sub: string): ItemType => {
-        const path = `/${slug(props.category.name)}/${slug(sub)}`
-        const activePath = props.pendingActivePath || props.location.path
+        const path = `/${slug(props.category.name)}/${slug(sub)}`;
+        const activePath = props.pendingActivePath || props.location.path;
         return {
           sub,
           path,
           isActive: activePath === path,
           isNew: (NEW as string[]).includes(sub),
-          isUpdated: (UPDATED as string[]).includes(sub),
-        }
+          isUpdated: (UPDATED as string[]).includes(sub)
+        };
       })
-    )
+    );
 
-    return () => h('div', { class: 'category' }, [
-      h('p', { class: 'category-name' }, props.category.name),
-      h('div', { class: 'category-items' },
-        items.value.map(({ sub, path, isActive, isNew, isUpdated }: ItemType) => {
-          return h('router-link', {
-            key: path,
-            to: path,
-            class: [
-              'sidebar-item',
-              { 'active-sidebar-item': isActive },
-              { 'transitioning': props.isTransitioning }
-            ],
-            onClick: (e: Event) => {
-              e.preventDefault()
-              props.handleTransitionNavigation(path)
-            },
-            onMouseenter: (e: Event) => props.onItemMouseEnter(path, e),
-            onMouseleave: props.onItemMouseLeave
-          }, {
-            default: () => [
-              sub,
-              isNew ? h('span', { class: 'new-tag' }, 'New') : null,
-              isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null
-            ].filter(Boolean)
+    return () =>
+      h('div', { class: 'category' }, [
+        h('p', { class: 'category-name' }, props.category.name),
+        h(
+          'div',
+          { class: 'category-items' },
+          items.value.map(({ sub, path, isActive, isNew, isUpdated }: ItemType) => {
+            return h(
+              'router-link',
+              {
+                key: path,
+                to: path,
+                class: ['sidebar-item', { 'active-sidebar-item': isActive }, { transitioning: props.isTransitioning }],
+                onClick: (e: Event) => {
+                  e.preventDefault();
+                  props.handleTransitionNavigation(path);
+                },
+                onMouseenter: (e: Event) => props.onItemMouseEnter(path, e),
+                onMouseleave: props.onItemMouseLeave
+              },
+              {
+                default: () =>
+                  [
+                    sub,
+                    isNew ? h('span', { class: 'new-tag' }, 'New') : null,
+                    isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null
+                  ].filter(Boolean)
+              }
+            );
           })
-        })
-      )
-    ])
+        )
+      ]);
   }
-})
+});
 
-watch(() => route.path, updateActiveLine)
-watch(pendingActivePath, updateActiveLine)
+watch(() => route.path, updateActiveLine);
+watch(pendingActivePath, updateActiveLine);
 
 onMounted(() => {
-  updateActiveLine()
+  updateActiveLine();
   if (sidebarContainerRef.value) {
-    sidebarContainerRef.value.addEventListener('scroll', handleScroll)
-    handleScroll()
+    sidebarContainerRef.value.addEventListener('scroll', handleScroll);
+    handleScroll();
   }
-})
+});
 
 onUnmounted(() => {
-  if (hoverTimeoutRef) clearTimeout(hoverTimeoutRef)
-  if (hoverDelayTimeoutRef) clearTimeout(hoverDelayTimeoutRef)
+  if (hoverTimeoutRef) clearTimeout(hoverTimeoutRef);
+  if (hoverDelayTimeoutRef) clearTimeout(hoverDelayTimeoutRef);
   if (sidebarContainerRef.value) {
-    sidebarContainerRef.value.removeEventListener('scroll', handleScroll)
+    sidebarContainerRef.value.removeEventListener('scroll', handleScroll);
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/composables/useForceRerender.ts b/src/composables/useForceRerender.ts
index fba5ae4..b6d8ab7 100644
--- a/src/composables/useForceRerender.ts
+++ b/src/composables/useForceRerender.ts
@@ -1,18 +1,18 @@
-import { ref } from 'vue'
+import { ref } from 'vue';
 
 /**
  * Composable for force re-rendering components
  * Useful for demo components that need to restart animations or reset state
  */
 export function useForceRerender() {
-  const rerenderKey = ref(0)
+  const rerenderKey = ref(0);
 
   const forceRerender = () => {
-    rerenderKey.value++
-  }
+    rerenderKey.value++;
+  };
 
   return {
     rerenderKey,
     forceRerender
-  }
+  };
 }
diff --git a/src/composables/useStars.ts b/src/composables/useStars.ts
index 5bd69cd..9dd0507 100644
--- a/src/composables/useStars.ts
+++ b/src/composables/useStars.ts
@@ -1,48 +1,51 @@
-import { ref, onMounted } from 'vue'
-import { getStarsCount } from '@/utils/utils'
+import { ref, onMounted } from 'vue';
+import { getStarsCount } from '@/utils/utils';
 
-const CACHE_KEY = 'github_stars_cache'
-const CACHE_DURATION = 24 * 60 * 60 * 1000
+const CACHE_KEY = 'github_stars_cache';
+const CACHE_DURATION = 24 * 60 * 60 * 1000;
 
 export function useStars() {
-  const stars = ref<number>(0)
+  const stars = ref<number>(0);
 
   const fetchStars = async () => {
     try {
-      const cachedData = localStorage.getItem(CACHE_KEY)
-      
+      const cachedData = localStorage.getItem(CACHE_KEY);
+
       if (cachedData) {
-        const { count, timestamp } = JSON.parse(cachedData)
-        const now = Date.now()
-        
+        const { count, timestamp } = JSON.parse(cachedData);
+        const now = Date.now();
+
         if (now - timestamp < CACHE_DURATION) {
-          stars.value = count
-          return
+          stars.value = count;
+          return;
         }
       }
-      
-      const count = await getStarsCount()
-      
-      localStorage.setItem(CACHE_KEY, JSON.stringify({
-        count,
-        timestamp: Date.now()
-      }))
-      
-      stars.value = count
+
+      const count = await getStarsCount();
+
+      localStorage.setItem(
+        CACHE_KEY,
+        JSON.stringify({
+          count,
+          timestamp: Date.now()
+        })
+      );
+
+      stars.value = count;
     } catch (error) {
-      console.error('Error fetching stars:', error)
-      
-      const cachedData = localStorage.getItem(CACHE_KEY)
+      console.error('Error fetching stars:', error);
+
+      const cachedData = localStorage.getItem(CACHE_KEY);
       if (cachedData) {
-        const { count } = JSON.parse(cachedData)
-        stars.value = count
+        const { count } = JSON.parse(cachedData);
+        stars.value = count;
       }
     }
-  }
+  };
 
   onMounted(() => {
-    fetchStars()
-  })
+    fetchStars();
+  });
 
-  return stars
+  return stars;
 }
diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 20a5126..29eb24e 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -20,7 +20,7 @@ export const CATEGORIES = [
       'Text Cursor',
       'Decrypted Text',
       'True Focus',
-      'Scroll Float',
+      'Scroll Float'
     ]
   },
   {
@@ -34,7 +34,7 @@ export const CATEGORIES = [
       'Count Up',
       'Click Spark',
       'Magnet',
-      'Cubes',
+      'Cubes'
     ]
   },
   {
@@ -55,8 +55,8 @@ export const CATEGORIES = [
       'Glass Icons',
       'Decay Card',
       'Flowing Menu',
-      'Elastic Slider',
-    ],
+      'Elastic Slider'
+    ]
   },
   {
     name: 'Backgrounds',
@@ -73,6 +73,6 @@ export const CATEGORIES = [
       'Iridescence',
       'Threads',
       'Grid Motion'
-    ],
+    ]
   }
 ];
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 1bae9f4..dc761d3 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -1,69 +1,69 @@
 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 = {
-  'split-text': () => import("../demo/TextAnimations/SplitTextDemo.vue"),
-  'blur-text': () => import("../demo/TextAnimations/BlurTextDemo.vue"),
-  'circular-text': () => import("../demo/TextAnimations/CircularTextDemo.vue"),
-  'shiny-text': () => import("../demo/TextAnimations/ShinyTextDemo.vue"),
-  'text-pressure': () => import("../demo/TextAnimations/TextPressureDemo.vue"),
-  'curved-loop': () => import("../demo/TextAnimations/CurvedLoopDemo.vue"),
-  'fuzzy-text': () => import("../demo/TextAnimations/FuzzyTextDemo.vue"),
-  'gradient-text': () => import("../demo/TextAnimations/GradientTextDemo.vue"),
-  'text-trail': () => import("../demo/TextAnimations/TextTrailDemo.vue"),
-  'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
-  'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
-  'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
-  'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
-  'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
+  'split-text': () => import('../demo/TextAnimations/SplitTextDemo.vue'),
+  'blur-text': () => import('../demo/TextAnimations/BlurTextDemo.vue'),
+  'circular-text': () => import('../demo/TextAnimations/CircularTextDemo.vue'),
+  'shiny-text': () => import('../demo/TextAnimations/ShinyTextDemo.vue'),
+  'text-pressure': () => import('../demo/TextAnimations/TextPressureDemo.vue'),
+  'curved-loop': () => import('../demo/TextAnimations/CurvedLoopDemo.vue'),
+  'fuzzy-text': () => import('../demo/TextAnimations/FuzzyTextDemo.vue'),
+  'gradient-text': () => import('../demo/TextAnimations/GradientTextDemo.vue'),
+  'text-trail': () => import('../demo/TextAnimations/TextTrailDemo.vue'),
+  'falling-text': () => import('../demo/TextAnimations/FallingTextDemo.vue'),
+  'text-cursor': () => import('../demo/TextAnimations/TextCursorDemo.vue'),
+  'decrypted-text': () => import('../demo/TextAnimations/DecryptedTextDemo.vue'),
+  'true-focus': () => import('../demo/TextAnimations/TrueFocusDemo.vue'),
+  'scroll-float': () => import('../demo/TextAnimations/ScrollFloatDemo.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"),
-  'grid-motion': () => import("../demo/Backgrounds/GridMotionDemo.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
 };
diff --git a/src/constants/code/Animations/animatedContentCode.ts b/src/constants/code/Animations/animatedContentCode.ts
index 11b8113..a371169 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/Animations/clickSparkCode.ts b/src/constants/code/Animations/clickSparkCode.ts
index 6616a38..e34dbf2 100644
--- 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
-}
+};
diff --git a/src/constants/code/Animations/countUpCode.ts b/src/constants/code/Animations/countUpCode.ts
index 4253352..bba56d4 100644
--- 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
-}
+};
diff --git a/src/constants/code/Animations/cubesCode.ts b/src/constants/code/Animations/cubesCode.ts
index 00e7cb1..a210173 100644
--- 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
-}
+};
diff --git a/src/constants/code/Animations/fadeContentCode.ts b/src/constants/code/Animations/fadeContentCode.ts
index 711dfb0..740d822 100644
--- 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
-}
+};
diff --git a/src/constants/code/Animations/glareHoverCode.ts b/src/constants/code/Animations/glareHoverCode.ts
index ee72600..f13d79d 100644
--- 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
-}
+};
diff --git a/src/constants/code/Animations/magnetCode.ts b/src/constants/code/Animations/magnetCode.ts
index ae0d169..6c94358 100644
--- 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
-}
+};
diff --git a/src/constants/code/Animations/magnetLinesCode.ts b/src/constants/code/Animations/magnetLinesCode.ts
index a469c87..d753422 100644
--- 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
-}
+};
diff --git a/src/constants/code/Animations/pixelTransitionCode.ts b/src/constants/code/Animations/pixelTransitionCode.ts
index e58acd3..737e708 100644
--- 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
-}
+};
diff --git a/src/constants/code/Backgrounds/auroraCode.ts b/src/constants/code/Backgrounds/auroraCode.ts
index f8d9f04..5a00daf 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/Backgrounds/beamsCode.ts b/src/constants/code/Backgrounds/beamsCode.ts
index 753e6d9..96e9cf4 100644
--- 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
-}
+};
diff --git a/src/constants/code/Backgrounds/dotGridCode.ts b/src/constants/code/Backgrounds/dotGridCode.ts
index d1e4b5a..798ba4c 100644
--- 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
-}
+};
diff --git a/src/constants/code/Backgrounds/iridescenceCode.ts b/src/constants/code/Backgrounds/iridescenceCode.ts
index 547da77..46e60ad 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/Backgrounds/letterGlitchCode.ts b/src/constants/code/Backgrounds/letterGlitchCode.ts
index 50d09c4..5dc7cf5 100644
--- 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
-}
+};
diff --git a/src/constants/code/Backgrounds/lightningCode.ts b/src/constants/code/Backgrounds/lightningCode.ts
index b444c69..843e1ef 100644
--- 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
-}
+};
diff --git a/src/constants/code/Backgrounds/particlesCode.ts b/src/constants/code/Backgrounds/particlesCode.ts
index adbd599..e0d2c35 100644
--- 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
-}
+};
diff --git a/src/constants/code/Backgrounds/silkCode.ts b/src/constants/code/Backgrounds/silkCode.ts
index 3946b91..18291ab 100644
--- 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
-}
+};
diff --git a/src/constants/code/Backgrounds/squaresCode.ts b/src/constants/code/Backgrounds/squaresCode.ts
index 6e4daae..3cff934 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/Backgrounds/threadsCode.ts b/src/constants/code/Backgrounds/threadsCode.ts
index 86dfe06..5593a1b 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/Backgrounds/wavesCode.ts b/src/constants/code/Backgrounds/wavesCode.ts
index c576678..806c20e 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/cardSwapCode.ts b/src/constants/code/Components/cardSwapCode.ts
index a012bd3..2bfbb41 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/carouselCode.ts b/src/constants/code/Components/carouselCode.ts
index 907c1bd..29c9c4e 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/circularGalleryCode.ts b/src/constants/code/Components/circularGalleryCode.ts
index 7c7efbd..ebf4715 100644
--- a/src/constants/code/Components/circularGalleryCode.ts
+++ b/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
-}
+};
diff --git a/src/constants/code/Components/decayCardCode.ts b/src/constants/code/Components/decayCardCode.ts
index 674157f..5a723e8 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/dockCode.ts b/src/constants/code/Components/dockCode.ts
index 7651bc2..c6f16ab 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/Components/elasticSliderCode.ts b/src/constants/code/Components/elasticSliderCode.ts
index 6f94a99..1ca7731 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/flowingMenuCode.ts b/src/constants/code/Components/flowingMenuCode.ts
index 0a3f4d7..fd18c57 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/flyingPostersCode.ts b/src/constants/code/Components/flyingPostersCode.ts
index 0399a7c..658dd24 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/glassIconsCode.ts b/src/constants/code/Components/glassIconsCode.ts
index 8a3b0fc..a0c0e68 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/gooeyNavCode.ts b/src/constants/code/Components/gooeyNavCode.ts
index 34e7cee..47dede4 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/infiniteScrollCode.ts b/src/constants/code/Components/infiniteScrollCode.ts
index 530700c..87c8a2d 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/masonryCode.ts b/src/constants/code/Components/masonryCode.ts
index 41657da..b207d46 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/pixelCardCode.ts b/src/constants/code/Components/pixelCardCode.ts
index 636d44d..25738f7 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/profileCardCode.ts b/src/constants/code/Components/profileCardCode.ts
index d0e1de8..fe2cd1d 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/Components/spotlightCardCode.ts b/src/constants/code/Components/spotlightCardCode.ts
index 1bf7e08..e479b24 100644
--- 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
-}
+};
diff --git a/src/constants/code/Components/tiltedCardCode.ts b/src/constants/code/Components/tiltedCardCode.ts
index 84e331b..936a40a 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/TextAnimations/blurTextCode.ts b/src/constants/code/TextAnimations/blurTextCode.ts
index 5e99363..cb45462 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/circularTextCode.ts b/src/constants/code/TextAnimations/circularTextCode.ts
index a12d88e..a423cdc 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/curvedLoopCode.ts b/src/constants/code/TextAnimations/curvedLoopCode.ts
index 19c4abd..6d6a039 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/decryptedTextCode.ts b/src/constants/code/TextAnimations/decryptedTextCode.ts
index 5a363a0..f5b6ff6 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/fallingTextCode.ts b/src/constants/code/TextAnimations/fallingTextCode.ts
index 390ea19..8f25b06 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/fuzzyTextCode.ts b/src/constants/code/TextAnimations/fuzzyTextCode.ts
index f329b01..61746ed 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/gradientTextCode.ts b/src/constants/code/TextAnimations/gradientTextCode.ts
index 44a2e70..fc1dd32 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/scrollFloatCode.ts b/src/constants/code/TextAnimations/scrollFloatCode.ts
index f7bba6c..a659927 100644
--- a/src/constants/code/TextAnimations/scrollFloatCode.ts
+++ b/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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/TextAnimations/shinyTextCode.ts b/src/constants/code/TextAnimations/shinyTextCode.ts
index 7cf718b..1b02686 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/splitTextCode.ts b/src/constants/code/TextAnimations/splitTextCode.ts
index 6e1b354..5bbe926 100644
--- 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
-}
\ No newline at end of file
+};
diff --git a/src/constants/code/TextAnimations/textCursorCode.ts b/src/constants/code/TextAnimations/textCursorCode.ts
index 358fa70..7642cb1 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/textPressureCode.ts b/src/constants/code/TextAnimations/textPressureCode.ts
index 292ea4d..c014493 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/textTrailCode.ts b/src/constants/code/TextAnimations/textTrailCode.ts
index 9f1dc23..6d59f67 100644
--- 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
-}
+};
diff --git a/src/constants/code/TextAnimations/trueFocusCode.ts b/src/constants/code/TextAnimations/trueFocusCode.ts
index 603d42c..98ed43b 100644
--- a/src/constants/code/TextAnimations/trueFocusCode.ts
+++ b/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
 };
diff --git a/src/content/Animations/AnimatedContent/AnimatedContent.vue b/src/content/Animations/AnimatedContent/AnimatedContent.vue
index d65f1ac..c51c8c5 100644
--- a/src/content/Animations/AnimatedContent/AnimatedContent.vue
+++ b/src/content/Animations/AnimatedContent/AnimatedContent.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
-gsap.registerPlugin(ScrollTrigger)
+gsap.registerPlugin(ScrollTrigger);
 
 interface AnimatedContentProps {
-  distance?: number
-  direction?: 'vertical' | 'horizontal'
-  reverse?: boolean
-  duration?: number
-  ease?: string | ((progress: number) => number)
-  initialOpacity?: number
-  animateOpacity?: boolean
-  scale?: number
-  threshold?: number
-  delay?: number
-  className?: string
+  distance?: number;
+  direction?: 'vertical' | 'horizontal';
+  reverse?: boolean;
+  duration?: number;
+  ease?: string | ((progress: number) => number);
+  initialOpacity?: number;
+  animateOpacity?: boolean;
+  scale?: number;
+  threshold?: number;
+  delay?: number;
+  className?: string;
 }
 
 const props = withDefaults(defineProps<AnimatedContentProps>(), {
@@ -31,27 +31,27 @@ const props = withDefaults(defineProps<AnimatedContentProps>(), {
   threshold: 0.1,
   delay: 0,
   className: ''
-})
+});
 
 const emit = defineEmits<{
-  complete: []
-}>()
+  complete: [];
+}>();
 
-const containerRef = ref<HTMLDivElement>()
+const containerRef = ref<HTMLDivElement>();
 
 onMounted(() => {
-  const el = containerRef.value
-  if (!el) return
+  const el = containerRef.value;
+  if (!el) return;
 
-  const axis = props.direction === 'horizontal' ? 'x' : 'y'
-  const offset = props.reverse ? -props.distance : props.distance
-  const startPct = (1 - props.threshold) * 100
+  const axis = props.direction === 'horizontal' ? 'x' : 'y';
+  const offset = props.reverse ? -props.distance : props.distance;
+  const startPct = (1 - props.threshold) * 100;
 
   gsap.set(el, {
     [axis]: offset,
     scale: props.scale,
-    opacity: props.animateOpacity ? props.initialOpacity : 1,
-  })
+    opacity: props.animateOpacity ? props.initialOpacity : 1
+  });
 
   gsap.to(el, {
     [axis]: 0,
@@ -65,10 +65,10 @@ onMounted(() => {
       trigger: el,
       start: `top ${startPct}%`,
       toggleActions: 'play none none none',
-      once: true,
-    },
-  })
-})
+      once: true
+    }
+  });
+});
 
 watch(
   () => [
@@ -81,24 +81,24 @@ watch(
     props.animateOpacity,
     props.scale,
     props.threshold,
-    props.delay,
+    props.delay
   ],
   () => {
-    const el = containerRef.value
-    if (!el) return
+    const el = containerRef.value;
+    if (!el) return;
 
-    ScrollTrigger.getAll().forEach((t) => t.kill())
-    gsap.killTweensOf(el)
+    ScrollTrigger.getAll().forEach(t => t.kill());
+    gsap.killTweensOf(el);
 
-    const axis = props.direction === 'horizontal' ? 'x' : 'y'
-    const offset = props.reverse ? -props.distance : props.distance
-    const startPct = (1 - props.threshold) * 100
+    const axis = props.direction === 'horizontal' ? 'x' : 'y';
+    const offset = props.reverse ? -props.distance : props.distance;
+    const startPct = (1 - props.threshold) * 100;
 
     gsap.set(el, {
       [axis]: offset,
       scale: props.scale,
-      opacity: props.animateOpacity ? props.initialOpacity : 1,
-    })
+      opacity: props.animateOpacity ? props.initialOpacity : 1
+    });
 
     gsap.to(el, {
       [axis]: 0,
@@ -112,27 +112,24 @@ watch(
         trigger: el,
         start: `top ${startPct}%`,
         toggleActions: 'play none none none',
-        once: true,
-      },
-    })
+        once: true
+      }
+    });
   },
   { deep: true }
-)
+);
 
 onUnmounted(() => {
-  const el = containerRef.value
+  const el = containerRef.value;
   if (el) {
-    ScrollTrigger.getAll().forEach((t) => t.kill())
-    gsap.killTweensOf(el)
+    ScrollTrigger.getAll().forEach(t => t.kill());
+    gsap.killTweensOf(el);
   }
-})
+});
 </script>
 
 <template>
-  <div
-    ref="containerRef"
-    :class="`animated-content ${props.className}`"
-  >
+  <div ref="containerRef" :class="`animated-content ${props.className}`">
     <slot />
   </div>
 </template>
diff --git a/src/content/Animations/ClickSpark/ClickSpark.vue b/src/content/Animations/ClickSpark/ClickSpark.vue
index 962ed0a..a8d5f1c 100644
--- a/src/content/Animations/ClickSpark/ClickSpark.vue
+++ b/src/content/Animations/ClickSpark/ClickSpark.vue
@@ -1,35 +1,29 @@
 <template>
-  <div 
-    ref="containerRef"
-    class="relative w-full h-full"
-    @click="handleClick"
-  >
-    <canvas
-      ref="canvasRef"
-      class="absolute inset-0 pointer-events-none"
-    />
+  <div ref="containerRef" class="relative w-full h-full" @click="handleClick">
+    <canvas ref="canvasRef" class="absolute inset-0 pointer-events-none" />
+
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 
 interface Spark {
-  x: number
-  y: number
-  angle: number
-  startTime: number
+  x: number;
+  y: number;
+  angle: number;
+  startTime: number;
 }
 
 interface Props {
-  sparkColor?: string
-  sparkSize?: number
-  sparkRadius?: number
-  sparkCount?: number
-  duration?: number
-  easing?: "linear" | "ease-in" | "ease-out" | "ease-in-out"
-  extraScale?: number
+  sparkColor?: string;
+  sparkSize?: number;
+  sparkRadius?: number;
+  sparkCount?: number;
+  duration?: number;
+  easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+  extraScale?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,149 +34,152 @@ const props = withDefaults(defineProps<Props>(), {
   duration: 400,
   easing: 'ease-out',
   extraScale: 1.0
-})
+});
 
-const containerRef = ref<HTMLDivElement | null>(null)
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-const sparks = ref<Spark[]>([])
-const startTimeRef = ref<number | null>(null)
-const animationId = ref<number | null>(null)
+const containerRef = ref<HTMLDivElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const sparks = ref<Spark[]>([]);
+const startTimeRef = ref<number | null>(null);
+const animationId = ref<number | null>(null);
 
 const easeFunc = computed(() => {
   return (t: number) => {
     switch (props.easing) {
-      case "linear":
-        return t
-      case "ease-in":
-        return t * t
-      case "ease-in-out":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+      case 'linear':
+        return t;
+      case 'ease-in':
+        return t * t;
+      case 'ease-in-out':
+        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
       default:
-        return t * (2 - t)
+        return t * (2 - t);
     }
-  }
-})
+  };
+});
 
 const handleClick = (e: MouseEvent) => {
-  const canvas = canvasRef.value
-  if (!canvas) return
-  const rect = canvas.getBoundingClientRect()
-  const x = e.clientX - rect.left
-  const y = e.clientY - rect.top
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
 
-  const now = performance.now()
+  const now = performance.now();
   const newSparks: Spark[] = Array.from({ length: props.sparkCount }, (_, i) => ({
     x,
     y,
     angle: (2 * Math.PI * i) / props.sparkCount,
-    startTime: now,
-  }))
+    startTime: now
+  }));
 
-  sparks.value.push(...newSparks)
-}
+  sparks.value.push(...newSparks);
+};
 
 const draw = (timestamp: number) => {
   if (!startTimeRef.value) {
-    startTimeRef.value = timestamp
+    startTimeRef.value = timestamp;
   }
-  
-  const canvas = canvasRef.value
-  const ctx = canvas?.getContext('2d')
-  if (!ctx || !canvas) return
-  
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+  const canvas = canvasRef.value;
+  const ctx = canvas?.getContext('2d');
+  if (!ctx || !canvas) return;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
   sparks.value = sparks.value.filter((spark: Spark) => {
-    const elapsed = timestamp - spark.startTime
+    const elapsed = timestamp - spark.startTime;
     if (elapsed >= props.duration) {
-      return false
+      return false;
     }
 
-    const progress = elapsed / props.duration
-    const eased = easeFunc.value(progress)
+    const progress = elapsed / props.duration;
+    const eased = easeFunc.value(progress);
 
-    const distance = eased * props.sparkRadius * props.extraScale
-    const lineLength = props.sparkSize * (1 - eased)
+    const distance = eased * props.sparkRadius * props.extraScale;
+    const lineLength = props.sparkSize * (1 - eased);
 
-    const x1 = spark.x + distance * Math.cos(spark.angle)
-    const y1 = spark.y + distance * Math.sin(spark.angle)
-    const x2 = spark.x + (distance + lineLength) * Math.cos(spark.angle)
-    const y2 = spark.y + (distance + lineLength) * Math.sin(spark.angle)
+    const x1 = spark.x + distance * Math.cos(spark.angle);
+    const y1 = spark.y + distance * Math.sin(spark.angle);
+    const x2 = spark.x + (distance + lineLength) * Math.cos(spark.angle);
+    const y2 = spark.y + (distance + lineLength) * Math.sin(spark.angle);
 
-    ctx.strokeStyle = props.sparkColor
-    ctx.lineWidth = 2
-    ctx.beginPath()
-    ctx.moveTo(x1, y1)
-    ctx.lineTo(x2, y2)
-    ctx.stroke()
+    ctx.strokeStyle = props.sparkColor;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
 
-    return true
-  })
+    return true;
+  });
 
-  animationId.value = requestAnimationFrame(draw)
-}
+  animationId.value = requestAnimationFrame(draw);
+};
 
 const resizeCanvas = () => {
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
-  const parent = canvas.parentElement
-  if (!parent) return
+  const parent = canvas.parentElement;
+  if (!parent) return;
 
-  const { width, height } = parent.getBoundingClientRect()
+  const { width, height } = parent.getBoundingClientRect();
   if (canvas.width !== width || canvas.height !== height) {
-    canvas.width = width
-    canvas.height = height
+    canvas.width = width;
+    canvas.height = height;
   }
-}
+};
 
-let resizeTimeout: number
+let resizeTimeout: number;
 
 const handleResize = () => {
-  clearTimeout(resizeTimeout)
-  resizeTimeout = setTimeout(resizeCanvas, 100)
-}
+  clearTimeout(resizeTimeout);
+  resizeTimeout = setTimeout(resizeCanvas, 100);
+};
 
-let resizeObserver: ResizeObserver | null = null
+let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
-  const parent = canvas.parentElement
-  if (!parent) return
+  const parent = canvas.parentElement;
+  if (!parent) return;
 
-  resizeObserver = new ResizeObserver(handleResize)
-  resizeObserver.observe(parent)
+  resizeObserver = new ResizeObserver(handleResize);
+  resizeObserver.observe(parent);
 
-  resizeCanvas()
+  resizeCanvas();
 
-  animationId.value = requestAnimationFrame(draw)
-})
+  animationId.value = requestAnimationFrame(draw);
+});
 
 onUnmounted(() => {
   if (resizeObserver) {
-    resizeObserver.disconnect()
+    resizeObserver.disconnect();
   }
-  clearTimeout(resizeTimeout)
-  
-  if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
-  }
-})
+  clearTimeout(resizeTimeout);
 
-watch([
-  () => props.sparkColor,
-  () => props.sparkSize,
-  () => props.sparkRadius,
-  () => props.sparkCount,
-  () => props.duration,
-  easeFunc,
-  () => props.extraScale
-], () => {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
+    cancelAnimationFrame(animationId.value);
   }
-  animationId.value = requestAnimationFrame(draw)
-})
+});
+
+watch(
+  [
+    () => props.sparkColor,
+    () => props.sparkSize,
+    () => props.sparkRadius,
+    () => props.sparkCount,
+    () => props.duration,
+    easeFunc,
+    () => props.extraScale
+  ],
+  () => {
+    if (animationId.value) {
+      cancelAnimationFrame(animationId.value);
+    }
+    animationId.value = requestAnimationFrame(draw);
+  }
+);
 </script>
diff --git a/src/content/Animations/CountUp/CountUp.vue b/src/content/Animations/CountUp/CountUp.vue
index 2c8717a..1975607 100644
--- a/src/content/Animations/CountUp/CountUp.vue
+++ b/src/content/Animations/CountUp/CountUp.vue
@@ -3,161 +3,164 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 
 interface Props {
-  to: number
-  from?: number
-  direction?: "up" | "down"
-  delay?: number
-  duration?: number
-  className?: string
-  startWhen?: boolean
-  separator?: string
-  onStart?: () => void
-  onEnd?: () => void
+  to: number;
+  from?: number;
+  direction?: 'up' | 'down';
+  delay?: number;
+  duration?: number;
+  className?: string;
+  startWhen?: boolean;
+  separator?: string;
+  onStart?: () => void;
+  onEnd?: () => void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   from: 0,
-  direction: "up",
+  direction: 'up',
   delay: 0,
   duration: 2,
-  className: "",
+  className: '',
   startWhen: true,
-  separator: ""
-})
+  separator: ''
+});
 
-const elementRef = ref<HTMLSpanElement | null>(null)
-const currentValue = ref(props.direction === "down" ? props.to : props.from)
-const isInView = ref(false)
-const animationId = ref<number | null>(null)
-const hasStarted = ref(false)
+const elementRef = ref<HTMLSpanElement | null>(null);
+const currentValue = ref(props.direction === 'down' ? props.to : props.from);
+const isInView = ref(false);
+const animationId = ref<number | null>(null);
+const hasStarted = ref(false);
 
-let intersectionObserver: IntersectionObserver | null = null
+let intersectionObserver: IntersectionObserver | null = null;
 
-const damping = computed(() => 20 + 40 * (1 / props.duration))
-const stiffness = computed(() => 100 * (1 / props.duration))
+const damping = computed(() => 20 + 40 * (1 / props.duration));
+const stiffness = computed(() => 100 * (1 / props.duration));
 
-let velocity = 0
-let startTime = 0
+let velocity = 0;
+let startTime = 0;
 
 const formatNumber = (value: number) => {
   const options = {
     useGrouping: !!props.separator,
     minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-  }
+    maximumFractionDigits: 0
+  };
 
-  const formattedNumber = Intl.NumberFormat("en-US", options).format(
-    Number(value.toFixed(0))
-  )
+  const formattedNumber = Intl.NumberFormat('en-US', options).format(Number(value.toFixed(0)));
 
-  return props.separator
-    ? formattedNumber.replace(/,/g, props.separator)
-    : formattedNumber
-}
+  return props.separator ? formattedNumber.replace(/,/g, props.separator) : formattedNumber;
+};
 
 const updateDisplay = () => {
   if (elementRef.value) {
-    elementRef.value.textContent = formatNumber(currentValue.value)
+    elementRef.value.textContent = formatNumber(currentValue.value);
   }
-}
+};
 
 const springAnimation = (timestamp: number) => {
-  if (!startTime) startTime = timestamp
+  if (!startTime) startTime = timestamp;
 
-  const target = props.direction === "down" ? props.from : props.to
-  const current = currentValue.value
+  const target = props.direction === 'down' ? props.from : props.to;
+  const current = currentValue.value;
 
-  const displacement = target - current
-  const springForce = displacement * stiffness.value
-  const dampingForce = velocity * damping.value
-  const acceleration = springForce - dampingForce
+  const displacement = target - current;
+  const springForce = displacement * stiffness.value;
+  const dampingForce = velocity * damping.value;
+  const acceleration = springForce - dampingForce;
 
-  velocity += acceleration * 0.016 // Assuming 60fps
-  currentValue.value += velocity * 0.016
+  velocity += acceleration * 0.016; // Assuming 60fps
+  currentValue.value += velocity * 0.016;
 
-  updateDisplay()
+  updateDisplay();
 
   if (Math.abs(displacement) > 0.01 || Math.abs(velocity) > 0.01) {
-    animationId.value = requestAnimationFrame(springAnimation)
+    animationId.value = requestAnimationFrame(springAnimation);
   } else {
-    currentValue.value = target
-    updateDisplay()
-    animationId.value = null
+    currentValue.value = target;
+    updateDisplay();
+    animationId.value = null;
 
     if (props.onEnd) {
-      props.onEnd()
+      props.onEnd();
     }
   }
-}
+};
 
 const startAnimation = () => {
-  if (hasStarted.value || !isInView.value || !props.startWhen) return
+  if (hasStarted.value || !isInView.value || !props.startWhen) return;
 
-  hasStarted.value = true
+  hasStarted.value = true;
 
   if (props.onStart) {
-    props.onStart()
+    props.onStart();
   }
 
   setTimeout(() => {
-    startTime = 0
-    velocity = 0
-    animationId.value = requestAnimationFrame(springAnimation)
-  }, props.delay * 1000)
-}
+    startTime = 0;
+    velocity = 0;
+    animationId.value = requestAnimationFrame(springAnimation);
+  }, props.delay * 1000);
+};
 
 const setupIntersectionObserver = () => {
-  if (!elementRef.value) return
+  if (!elementRef.value) return;
 
   intersectionObserver = new IntersectionObserver(
     ([entry]) => {
       if (entry.isIntersecting && !isInView.value) {
-        isInView.value = true
-        startAnimation()
+        isInView.value = true;
+        startAnimation();
       }
     },
     {
       threshold: 0,
-      rootMargin: "0px"
+      rootMargin: '0px'
     }
-  )
+  );
 
-  intersectionObserver.observe(elementRef.value)
-}
+  intersectionObserver.observe(elementRef.value);
+};
 
 const cleanup = () => {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
-    animationId.value = null
+    cancelAnimationFrame(animationId.value);
+    animationId.value = null;
   }
 
   if (intersectionObserver) {
-    intersectionObserver.disconnect()
-    intersectionObserver = null
+    intersectionObserver.disconnect();
+    intersectionObserver = null;
   }
-}
+};
 
-watch([() => props.from, () => props.to, () => props.direction], () => {
-  currentValue.value = props.direction === "down" ? props.to : props.from
-  updateDisplay()
-  hasStarted.value = false
-}, { immediate: true })
+watch(
+  [() => props.from, () => props.to, () => props.direction],
+  () => {
+    currentValue.value = props.direction === 'down' ? props.to : props.from;
+    updateDisplay();
+    hasStarted.value = false;
+  },
+  { immediate: true }
+);
 
-watch(() => props.startWhen, () => {
-  if (props.startWhen && isInView.value && !hasStarted.value) {
-    startAnimation()
+watch(
+  () => props.startWhen,
+  () => {
+    if (props.startWhen && isInView.value && !hasStarted.value) {
+      startAnimation();
+    }
   }
-})
+);
 
 onMounted(() => {
-  updateDisplay()
-  setupIntersectionObserver()
-})
+  updateDisplay();
+  setupIntersectionObserver();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
-</script>
\ No newline at end of file
+  cleanup();
+});
+</script>
diff --git a/src/content/Animations/Cubes/Cubes.vue b/src/content/Animations/Cubes/Cubes.vue
index 6df1951..376c7ad 100644
--- a/src/content/Animations/Cubes/Cubes.vue
+++ b/src/content/Animations/Cubes/Cubes.vue
@@ -2,46 +2,74 @@
   <div class="relative w-1/2 max-md:w-11/12 aspect-square" :style="wrapperStyle">
     <div ref="sceneRef" class="grid w-full h-full" :style="sceneStyle">
       <template v-for="(_, r) in cells" :key="`row-${r}`">
-        <div v-for="(__, c) in cells" :key="`${r}-${c}`"
-          class="cube relative w-full h-full aspect-square [transform-style:preserve-3d]" :data-row="r" :data-col="c">
+        <div
+          v-for="(__, c) in cells"
+          :key="`${r}-${c}`"
+          class="cube relative w-full h-full aspect-square [transform-style:preserve-3d]"
+          :data-row="r"
+          :data-col="c"
+        >
           <span class="absolute pointer-events-none -inset-9" />
 
-          <div class="cube-face absolute inset-0 flex items-center justify-center" :style="{
-            background: 'var(--cube-face-bg)',
-            border: 'var(--cube-face-border)',
-            boxShadow: 'var(--cube-face-shadow)',
-            transform: 'translateY(-50%) rotateX(90deg)',
-          }" />
-          <div class="cube-face absolute inset-0 flex items-center justify-center" :style="{
-            background: 'var(--cube-face-bg)',
-            border: 'var(--cube-face-border)',
-            boxShadow: 'var(--cube-face-shadow)',
-            transform: 'translateY(50%) rotateX(-90deg)',
-          }" />
-          <div class="cube-face absolute inset-0 flex items-center justify-center" :style="{
-            background: 'var(--cube-face-bg)',
-            border: 'var(--cube-face-border)',
-            boxShadow: 'var(--cube-face-shadow)',
-            transform: 'translateX(-50%) rotateY(-90deg)',
-          }" />
-          <div class="cube-face absolute inset-0 flex items-center justify-center" :style="{
-            background: 'var(--cube-face-bg)',
-            border: 'var(--cube-face-border)',
-            boxShadow: 'var(--cube-face-shadow)',
-            transform: 'translateX(50%) rotateY(90deg)',
-          }" />
-          <div class="cube-face absolute inset-0 flex items-center justify-center" :style="{
-            background: 'var(--cube-face-bg)',
-            border: 'var(--cube-face-border)',
-            boxShadow: 'var(--cube-face-shadow)',
-            transform: 'rotateY(-90deg) translateX(50%) rotateY(90deg)',
-          }" />
-          <div class="cube-face absolute inset-0 flex items-center justify-center" :style="{
-            background: 'var(--cube-face-bg)',
-            border: 'var(--cube-face-border)',
-            boxShadow: 'var(--cube-face-shadow)',
-            transform: 'rotateY(90deg) translateX(-50%) rotateY(-90deg)',
-          }" />
+          <div
+            class="cube-face absolute inset-0 flex items-center justify-center"
+            :style="{
+              background: 'var(--cube-face-bg)',
+              border: 'var(--cube-face-border)',
+              boxShadow: 'var(--cube-face-shadow)',
+              transform: 'translateY(-50%) rotateX(90deg)'
+            }"
+          />
+
+          <div
+            class="cube-face absolute inset-0 flex items-center justify-center"
+            :style="{
+              background: 'var(--cube-face-bg)',
+              border: 'var(--cube-face-border)',
+              boxShadow: 'var(--cube-face-shadow)',
+              transform: 'translateY(50%) rotateX(-90deg)'
+            }"
+          />
+
+          <div
+            class="cube-face absolute inset-0 flex items-center justify-center"
+            :style="{
+              background: 'var(--cube-face-bg)',
+              border: 'var(--cube-face-border)',
+              boxShadow: 'var(--cube-face-shadow)',
+              transform: 'translateX(-50%) rotateY(-90deg)'
+            }"
+          />
+
+          <div
+            class="cube-face absolute inset-0 flex items-center justify-center"
+            :style="{
+              background: 'var(--cube-face-bg)',
+              border: 'var(--cube-face-border)',
+              boxShadow: 'var(--cube-face-shadow)',
+              transform: 'translateX(50%) rotateY(90deg)'
+            }"
+          />
+
+          <div
+            class="cube-face absolute inset-0 flex items-center justify-center"
+            :style="{
+              background: 'var(--cube-face-bg)',
+              border: 'var(--cube-face-border)',
+              boxShadow: 'var(--cube-face-shadow)',
+              transform: 'rotateY(-90deg) translateX(50%) rotateY(90deg)'
+            }"
+          />
+
+          <div
+            class="cube-face absolute inset-0 flex items-center justify-center"
+            :style="{
+              background: 'var(--cube-face-bg)',
+              border: 'var(--cube-face-border)',
+              boxShadow: 'var(--cube-face-shadow)',
+              transform: 'rotateY(90deg) translateX(-50%) rotateY(-90deg)'
+            }"
+          />
         </div>
       </template>
     </div>
@@ -49,34 +77,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, withDefaults } from 'vue'
-import gsap from 'gsap'
+import { ref, computed, onMounted, onUnmounted, withDefaults } from 'vue';
+import gsap from 'gsap';
 
 interface Gap {
-  row: number
-  col: number
+  row: number;
+  col: number;
 }
 
 interface Duration {
-  enter: number
-  leave: number
+  enter: number;
+  leave: number;
 }
 
 interface Props {
-  gridSize?: number
-  cubeSize?: number
-  maxAngle?: number
-  radius?: number
-  easing?: gsap.EaseString
-  duration?: Duration
-  cellGap?: number | Gap
-  borderStyle?: string
-  faceColor?: string
-  shadow?: boolean | string
-  autoAnimate?: boolean
-  rippleOnClick?: boolean
-  rippleColor?: string
-  rippleSpeed?: number
+  gridSize?: number;
+  cubeSize?: number;
+  maxAngle?: number;
+  radius?: number;
+  easing?: gsap.EaseString;
+  duration?: Duration;
+  cellGap?: number | Gap;
+  borderStyle?: string;
+  faceColor?: string;
+  shadow?: boolean | string;
+  autoAnimate?: boolean;
+  rippleOnClick?: boolean;
+  rippleColor?: string;
+  rippleSpeed?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -91,37 +119,37 @@ const props = withDefaults(defineProps<Props>(), {
   autoAnimate: true,
   rippleOnClick: true,
   rippleColor: '#fff',
-  rippleSpeed: 2,
-})
+  rippleSpeed: 2
+});
 
-const sceneRef = ref<HTMLDivElement | null>(null)
-const rafRef = ref<number | null>(null)
-const idleTimerRef = ref<number | null>(null)
-const userActiveRef = ref(false)
-const simPosRef = ref<{ x: number; y: number }>({ x: 0, y: 0 })
-const simTargetRef = ref<{ x: number; y: number }>({ x: 0, y: 0 })
-const simRAFRef = ref<number | null>(null)
+const sceneRef = ref<HTMLDivElement | null>(null);
+const rafRef = ref<number | null>(null);
+const idleTimerRef = ref<number | null>(null);
+const userActiveRef = ref(false);
+const simPosRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });
+const simTargetRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });
+const simRAFRef = ref<number | null>(null);
 
 const colGap = computed(() => {
   return typeof props.cellGap === 'number'
     ? `${props.cellGap}px`
     : (props.cellGap as Gap)?.col !== undefined
       ? `${(props.cellGap as Gap).col}px`
-      : '5%'
-})
+      : '5%';
+});
 
 const rowGap = computed(() => {
   return typeof props.cellGap === 'number'
     ? `${props.cellGap}px`
     : (props.cellGap as Gap)?.row !== undefined
       ? `${(props.cellGap as Gap).row}px`
-      : '5%'
-})
+      : '5%';
+});
 
-const enterDur = computed(() => props.duration.enter)
-const leaveDur = computed(() => props.duration.leave)
+const enterDur = computed(() => props.duration.enter);
+const leaveDur = computed(() => props.duration.leave);
 
-const cells = computed(() => Array.from({ length: props.gridSize }))
+const cells = computed(() => Array.from({ length: props.gridSize }));
 
 const sceneStyle = computed(() => ({
   gridTemplateColumns: props.cubeSize
@@ -133,189 +161,184 @@ const sceneStyle = computed(() => ({
   columnGap: colGap.value,
   rowGap: rowGap.value,
   perspective: '99999999px',
-  gridAutoRows: '1fr',
-}))
+  gridAutoRows: '1fr'
+}));
 
 const wrapperStyle = computed(() => ({
   '--cube-face-border': props.borderStyle,
   '--cube-face-bg': props.faceColor,
-  '--cube-face-shadow':
-    props.shadow === true ? '0 0 6px rgba(0,0,0,.5)' : props.shadow || 'none',
+  '--cube-face-shadow': props.shadow === true ? '0 0 6px rgba(0,0,0,.5)' : props.shadow || 'none',
   ...(props.cubeSize
     ? {
-      width: `${props.gridSize * props.cubeSize}px`,
-      height: `${props.gridSize * props.cubeSize}px`,
-    }
-    : {}),
-}))
+        width: `${props.gridSize * props.cubeSize}px`,
+        height: `${props.gridSize * props.cubeSize}px`
+      }
+    : {})
+}));
 
 const tiltAt = (rowCenter: number, colCenter: number) => {
-  if (!sceneRef.value) return
+  if (!sceneRef.value) return;
 
-  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach((cube) => {
-    const r = +(cube.dataset.row!)
-    const c = +(cube.dataset.col!)
-    const dist = Math.hypot(r - rowCenter, c - colCenter)
+  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube => {
+    const r = +cube.dataset.row!;
+    const c = +cube.dataset.col!;
+    const dist = Math.hypot(r - rowCenter, c - colCenter);
 
     if (dist <= props.radius) {
-      const pct = 1 - dist / props.radius
-      const angle = pct * props.maxAngle
+      const pct = 1 - dist / props.radius;
+      const angle = pct * props.maxAngle;
       gsap.to(cube, {
         duration: enterDur.value,
         ease: props.easing,
         overwrite: true,
         rotateX: -angle,
-        rotateY: angle,
-      })
+        rotateY: angle
+      });
     } else {
       gsap.to(cube, {
         duration: leaveDur.value,
         ease: 'power3.out',
         overwrite: true,
         rotateX: 0,
-        rotateY: 0,
-      })
+        rotateY: 0
+      });
     }
-  })
-}
+  });
+};
 
 const onPointerMove = (e: PointerEvent) => {
-  userActiveRef.value = true
-  if (idleTimerRef.value) clearTimeout(idleTimerRef.value)
+  userActiveRef.value = true;
+  if (idleTimerRef.value) clearTimeout(idleTimerRef.value);
 
-  const rect = sceneRef.value!.getBoundingClientRect()
-  const cellW = rect.width / props.gridSize
-  const cellH = rect.height / props.gridSize
-  const colCenter = (e.clientX - rect.left) / cellW
-  const rowCenter = (e.clientY - rect.top) / cellH
+  const rect = sceneRef.value!.getBoundingClientRect();
+  const cellW = rect.width / props.gridSize;
+  const cellH = rect.height / props.gridSize;
+  const colCenter = (e.clientX - rect.left) / cellW;
+  const rowCenter = (e.clientY - rect.top) / cellH;
 
-  if (rafRef.value) cancelAnimationFrame(rafRef.value)
-  rafRef.value = requestAnimationFrame(() =>
-    tiltAt(rowCenter, colCenter)
-  )
+  if (rafRef.value) cancelAnimationFrame(rafRef.value);
+  rafRef.value = requestAnimationFrame(() => tiltAt(rowCenter, colCenter));
 
   idleTimerRef.value = setTimeout(() => {
-    userActiveRef.value = false
-  }, 3000)
-}
+    userActiveRef.value = false;
+  }, 3000);
+};
 
 const resetAll = () => {
-  if (!sceneRef.value) return
-  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach((cube) =>
+  if (!sceneRef.value) return;
+  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube =>
     gsap.to(cube, {
       duration: leaveDur.value,
       rotateX: 0,
       rotateY: 0,
-      ease: 'power3.out',
+      ease: 'power3.out'
     })
-  )
-}
+  );
+};
 
 const onClick = (e: MouseEvent) => {
-  if (!props.rippleOnClick || !sceneRef.value) return
+  if (!props.rippleOnClick || !sceneRef.value) return;
 
-  const rect = sceneRef.value.getBoundingClientRect()
-  const cellW = rect.width / props.gridSize
-  const cellH = rect.height / props.gridSize
-  const colHit = Math.floor((e.clientX - rect.left) / cellW)
-  const rowHit = Math.floor((e.clientY - rect.top) / cellH)
+  const rect = sceneRef.value.getBoundingClientRect();
+  const cellW = rect.width / props.gridSize;
+  const cellH = rect.height / props.gridSize;
+  const colHit = Math.floor((e.clientX - rect.left) / cellW);
+  const rowHit = Math.floor((e.clientY - rect.top) / cellH);
 
-  const baseRingDelay = 0.15
-  const baseAnimDur = 0.3
-  const baseHold = 0.6
+  const baseRingDelay = 0.15;
+  const baseAnimDur = 0.3;
+  const baseHold = 0.6;
 
-  const spreadDelay = baseRingDelay / props.rippleSpeed
-  const animDuration = baseAnimDur / props.rippleSpeed
-  const holdTime = baseHold / props.rippleSpeed
+  const spreadDelay = baseRingDelay / props.rippleSpeed;
+  const animDuration = baseAnimDur / props.rippleSpeed;
+  const holdTime = baseHold / props.rippleSpeed;
 
-  const rings: Record<number, HTMLDivElement[]> = {}
-  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach((cube) => {
-    const r = +(cube.dataset.row!)
-    const c = +(cube.dataset.col!)
-    const dist = Math.hypot(r - rowHit, c - colHit)
-    const ring = Math.round(dist)
-    if (!rings[ring]) rings[ring] = []
-    rings[ring].push(cube)
-  })
+  const rings: Record<number, HTMLDivElement[]> = {};
+  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube => {
+    const r = +cube.dataset.row!;
+    const c = +cube.dataset.col!;
+    const dist = Math.hypot(r - rowHit, c - colHit);
+    const ring = Math.round(dist);
+    if (!rings[ring]) rings[ring] = [];
+    rings[ring].push(cube);
+  });
 
   Object.keys(rings)
     .map(Number)
     .sort((a, b) => a - b)
-    .forEach((ring) => {
-      const delay = ring * spreadDelay
-      const faces = rings[ring].flatMap((cube) =>
-        Array.from(cube.querySelectorAll<HTMLElement>('.cube-face'))
-      )
+    .forEach(ring => {
+      const delay = ring * spreadDelay;
+      const faces = rings[ring].flatMap(cube => Array.from(cube.querySelectorAll<HTMLElement>('.cube-face')));
 
       gsap.to(faces, {
         backgroundColor: props.rippleColor,
         duration: animDuration,
         delay,
-        ease: 'power3.out',
-      })
+        ease: 'power3.out'
+      });
       gsap.to(faces, {
         backgroundColor: props.faceColor,
         duration: animDuration,
         delay: delay + animDuration + holdTime,
-        ease: 'power3.out',
-      })
-    })
-}
+        ease: 'power3.out'
+      });
+    });
+};
 
 const startAutoAnimation = () => {
-  if (!props.autoAnimate || !sceneRef.value) return
+  if (!props.autoAnimate || !sceneRef.value) return;
 
   simPosRef.value = {
     x: Math.random() * props.gridSize,
-    y: Math.random() * props.gridSize,
-  }
+    y: Math.random() * props.gridSize
+  };
   simTargetRef.value = {
     x: Math.random() * props.gridSize,
-    y: Math.random() * props.gridSize,
-  }
+    y: Math.random() * props.gridSize
+  };
 
-  const speed = 0.02
+  const speed = 0.02;
   const loop = () => {
     if (!userActiveRef.value) {
-      const pos = simPosRef.value
-      const tgt = simTargetRef.value
-      pos.x += (tgt.x - pos.x) * speed
-      pos.y += (tgt.y - pos.y) * speed
-      tiltAt(pos.y, pos.x)
+      const pos = simPosRef.value;
+      const tgt = simTargetRef.value;
+      pos.x += (tgt.x - pos.x) * speed;
+      pos.y += (tgt.y - pos.y) * speed;
+      tiltAt(pos.y, pos.x);
 
       if (Math.hypot(pos.x - tgt.x, pos.y - tgt.y) < 0.1) {
         simTargetRef.value = {
           x: Math.random() * props.gridSize,
-          y: Math.random() * props.gridSize,
-        }
+          y: Math.random() * props.gridSize
+        };
       }
     }
-    simRAFRef.value = requestAnimationFrame(loop)
-  }
-  simRAFRef.value = requestAnimationFrame(loop)
-}
+    simRAFRef.value = requestAnimationFrame(loop);
+  };
+  simRAFRef.value = requestAnimationFrame(loop);
+};
 
 onMounted(() => {
-  const el = sceneRef.value
-  if (!el) return
+  const el = sceneRef.value;
+  if (!el) return;
 
-  el.addEventListener('pointermove', onPointerMove)
-  el.addEventListener('pointerleave', resetAll)
-  el.addEventListener('click', onClick)
+  el.addEventListener('pointermove', onPointerMove);
+  el.addEventListener('pointerleave', resetAll);
+  el.addEventListener('click', onClick);
 
-  startAutoAnimation()
-})
+  startAutoAnimation();
+});
 
 onUnmounted(() => {
-  const el = sceneRef.value
+  const el = sceneRef.value;
   if (el) {
-    el.removeEventListener('pointermove', onPointerMove)
-    el.removeEventListener('pointerleave', resetAll)
-    el.removeEventListener('click', onClick)
+    el.removeEventListener('pointermove', onPointerMove);
+    el.removeEventListener('pointerleave', resetAll);
+    el.removeEventListener('click', onClick);
   }
 
-  if (rafRef.value !== null) cancelAnimationFrame(rafRef.value)
-  if (idleTimerRef.value !== null) clearTimeout(idleTimerRef.value)
-  if (simRAFRef.value !== null) cancelAnimationFrame(simRAFRef.value)
-})
+  if (rafRef.value !== null) cancelAnimationFrame(rafRef.value);
+  if (idleTimerRef.value !== null) clearTimeout(idleTimerRef.value);
+  if (simRAFRef.value !== null) cancelAnimationFrame(simRAFRef.value);
+});
 </script>
diff --git a/src/content/Animations/FadeContent/FadeContent.vue b/src/content/Animations/FadeContent/FadeContent.vue
index 1279e3c..844708c 100644
--- a/src/content/Animations/FadeContent/FadeContent.vue
+++ b/src/content/Animations/FadeContent/FadeContent.vue
@@ -5,7 +5,7 @@
     :style="{
       opacity: inView ? 1 : initialOpacity,
       transition: `opacity ${duration}ms ${easing}, filter ${duration}ms ${easing}`,
-      filter: blur ? (inView ? 'blur(0px)' : 'blur(10px)') : 'none',
+      filter: blur ? (inView ? 'blur(0px)' : 'blur(10px)') : 'none'
     }"
   >
     <slot />
@@ -13,16 +13,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue';
 
 interface Props {
-  blur?: boolean
-  duration?: number
-  easing?: string
-  delay?: number
-  threshold?: number
-  initialOpacity?: number
-  className?: string
+  blur?: boolean;
+  duration?: number;
+  easing?: string;
+  delay?: number;
+  threshold?: number;
+  initialOpacity?: number;
+  className?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,34 +33,34 @@ const props = withDefaults(defineProps<Props>(), {
   threshold: 0.1,
   initialOpacity: 0,
   className: ''
-})
+});
 
-const inView = ref(false)
-const elementRef = ref<HTMLDivElement | null>(null)
-let observer: IntersectionObserver | null = null
+const inView = ref(false);
+const elementRef = ref<HTMLDivElement | null>(null);
+let observer: IntersectionObserver | null = null;
 
 onMounted(() => {
-  const element = elementRef.value
-  if (!element) return
+  const element = elementRef.value;
+  if (!element) return;
 
   observer = new IntersectionObserver(
     ([entry]) => {
       if (entry.isIntersecting) {
-        observer?.unobserve(element)
+        observer?.unobserve(element);
         setTimeout(() => {
-          inView.value = true
-        }, props.delay)
+          inView.value = true;
+        }, props.delay);
       }
     },
     { threshold: props.threshold }
-  )
+  );
 
-  observer.observe(element)
-})
+  observer.observe(element);
+});
 
 onUnmounted(() => {
   if (observer) {
-    observer.disconnect()
+    observer.disconnect();
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/content/Animations/GlareHover/GlareHover.vue b/src/content/Animations/GlareHover/GlareHover.vue
index f4c242e..30cf3ab 100644
--- a/src/content/Animations/GlareHover/GlareHover.vue
+++ b/src/content/Animations/GlareHover/GlareHover.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed } from 'vue';
 
 interface GlareHoverProps {
-  width?: string
-  height?: string
-  background?: string
-  borderRadius?: string
-  borderColor?: string
-  glareColor?: string
-  glareOpacity?: number
-  glareAngle?: number
-  glareSize?: number
-  transitionDuration?: number
-  playOnce?: boolean
-  className?: string
-  style?: Record<string, string | number>
+  width?: string;
+  height?: string;
+  background?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  glareColor?: string;
+  glareOpacity?: number;
+  glareAngle?: number;
+  glareSize?: number;
+  transitionDuration?: number;
+  playOnce?: boolean;
+  className?: string;
+  style?: Record<string, string | number>;
 }
 
 const props = withDefaults(defineProps<GlareHoverProps>(), {
@@ -31,28 +31,28 @@ const props = withDefaults(defineProps<GlareHoverProps>(), {
   playOnce: false,
   className: '',
   style: () => ({})
-})
+});
 
-const overlayRef = ref<HTMLDivElement | null>(null)
+const overlayRef = ref<HTMLDivElement | null>(null);
 
 const rgba = computed(() => {
-  const hex = props.glareColor.replace('#', '')
-  let result = props.glareColor
-  
+  const hex = props.glareColor.replace('#', '');
+  let result = props.glareColor;
+
   if (/^[\dA-Fa-f]{6}$/.test(hex)) {
-    const r = parseInt(hex.slice(0, 2), 16)
-    const g = parseInt(hex.slice(2, 4), 16)
-    const b = parseInt(hex.slice(4, 6), 16)
-    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`;
   } else if (/^[\dA-Fa-f]{3}$/.test(hex)) {
-    const r = parseInt(hex[0] + hex[0], 16)
-    const g = parseInt(hex[1] + hex[1], 16)
-    const b = parseInt(hex[2] + hex[2], 16)
-    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`
+    const r = parseInt(hex[0] + hex[0], 16);
+    const g = parseInt(hex[1] + hex[1], 16);
+    const b = parseInt(hex[2] + hex[2], 16);
+    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`;
   }
-  
-  return result
-})
+
+  return result;
+});
 
 const overlayStyle = computed(() => ({
   position: 'absolute' as const,
@@ -64,32 +64,32 @@ const overlayStyle = computed(() => ({
   backgroundSize: `${props.glareSize}% ${props.glareSize}%, 100% 100%`,
   backgroundRepeat: 'no-repeat',
   backgroundPosition: '-100% -100%, 0 0',
-  pointerEvents: 'none' as const,
-}))
+  pointerEvents: 'none' as const
+}));
 
 const animateIn = () => {
-  const el = overlayRef.value
-  if (!el) return
+  const el = overlayRef.value;
+  if (!el) return;
 
-  el.style.transition = 'none'
-  el.style.backgroundPosition = '-100% -100%, 0 0'
-  void el.offsetHeight
-  el.style.transition = `${props.transitionDuration}ms ease`
-  el.style.backgroundPosition = '100% 100%, 0 0'
-}
+  el.style.transition = 'none';
+  el.style.backgroundPosition = '-100% -100%, 0 0';
+  void el.offsetHeight;
+  el.style.transition = `${props.transitionDuration}ms ease`;
+  el.style.backgroundPosition = '100% 100%, 0 0';
+};
 
 const animateOut = () => {
-  const el = overlayRef.value
-  if (!el) return
+  const el = overlayRef.value;
+  if (!el) return;
 
   if (props.playOnce) {
-    el.style.transition = 'none'
-    el.style.backgroundPosition = '-100% -100%, 0 0'
+    el.style.transition = 'none';
+    el.style.backgroundPosition = '-100% -100%, 0 0';
   } else {
-    el.style.transition = `${props.transitionDuration}ms ease`
-    el.style.backgroundPosition = '-100% -100%, 0 0'
+    el.style.transition = `${props.transitionDuration}ms ease`;
+    el.style.backgroundPosition = '-100% -100%, 0 0';
   }
-}
+};
 </script>
 
 <template>
@@ -101,12 +101,13 @@ const animateOut = () => {
       background: props.background,
       borderRadius: props.borderRadius,
       borderColor: props.borderColor,
-      ...props.style,
+      ...props.style
     }"
     @mouseenter="animateIn"
     @mouseleave="animateOut"
   >
     <div ref="overlayRef" :style="overlayStyle" />
+
     <slot />
   </div>
 </template>
diff --git a/src/content/Animations/Magnet/Magnet.vue b/src/content/Animations/Magnet/Magnet.vue
index 989354f..e076e13 100644
--- a/src/content/Animations/Magnet/Magnet.vue
+++ b/src/content/Animations/Magnet/Magnet.vue
@@ -1,27 +1,34 @@
 <template>
-  <div ref="magnetRef" :class="wrapperClassName" :style="{ position: 'relative', display: 'inline-block' }"
-    v-bind="$attrs">
-    <div :class="innerClassName" :style="{
-      transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
-      transition: transitionStyle,
-      willChange: 'transform',
-    }">
+  <div
+    ref="magnetRef"
+    :class="wrapperClassName"
+    :style="{ position: 'relative', display: 'inline-block' }"
+    v-bind="$attrs"
+  >
+    <div
+      :class="innerClassName"
+      :style="{
+        transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
+        transition: transitionStyle,
+        willChange: 'transform'
+      }"
+    >
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 
 interface Props {
-  padding?: number
-  disabled?: boolean
-  magnetStrength?: number
-  activeTransition?: string
-  inactiveTransition?: string
-  wrapperClassName?: string
-  innerClassName?: string
+  padding?: number;
+  disabled?: boolean;
+  magnetStrength?: number;
+  activeTransition?: string;
+  inactiveTransition?: string;
+  wrapperClassName?: string;
+  innerClassName?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,53 +39,54 @@ const props = withDefaults(defineProps<Props>(), {
   inactiveTransition: 'transform 0.5s ease-in-out',
   wrapperClassName: '',
   innerClassName: ''
-})
+});
 
 defineOptions({
   inheritAttrs: false
-})
+});
 
-const magnetRef = ref<HTMLDivElement | null>(null)
-const isActive = ref(false)
-const position = ref({ x: 0, y: 0 })
+const magnetRef = ref<HTMLDivElement | null>(null);
+const isActive = ref(false);
+const position = ref({ x: 0, y: 0 });
 
-const transitionStyle = computed(() =>
-  isActive.value ? props.activeTransition : props.inactiveTransition
-)
+const transitionStyle = computed(() => (isActive.value ? props.activeTransition : props.inactiveTransition));
 
 const handleMouseMove = (e: MouseEvent) => {
-  if (!magnetRef.value || props.disabled) return
+  if (!magnetRef.value || props.disabled) return;
 
-  const { left, top, width, height } = magnetRef.value.getBoundingClientRect()
-  const centerX = left + width / 2
-  const centerY = top + height / 2
+  const { left, top, width, height } = magnetRef.value.getBoundingClientRect();
+  const centerX = left + width / 2;
+  const centerY = top + height / 2;
 
-  const distX = Math.abs(centerX - e.clientX)
-  const distY = Math.abs(centerY - e.clientY)
+  const distX = Math.abs(centerX - e.clientX);
+  const distY = Math.abs(centerY - e.clientY);
 
   if (distX < width / 2 + props.padding && distY < height / 2 + props.padding) {
-    isActive.value = true
-    const offsetX = (e.clientX - centerX) / props.magnetStrength
-    const offsetY = (e.clientY - centerY) / props.magnetStrength
-    position.value = { x: offsetX, y: offsetY }
+    isActive.value = true;
+    const offsetX = (e.clientX - centerX) / props.magnetStrength;
+    const offsetY = (e.clientY - centerY) / props.magnetStrength;
+    position.value = { x: offsetX, y: offsetY };
   } else {
-    isActive.value = false
-    position.value = { x: 0, y: 0 }
+    isActive.value = false;
+    position.value = { x: 0, y: 0 };
   }
-}
+};
 
 onMounted(() => {
-  window.addEventListener('mousemove', handleMouseMove)
-})
+  window.addEventListener('mousemove', handleMouseMove);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('mousemove', handleMouseMove)
-})
+  window.removeEventListener('mousemove', handleMouseMove);
+});
 
-watch(() => props.disabled, (newDisabled) => {
-  if (newDisabled) {
-    position.value = { x: 0, y: 0 }
-    isActive.value = false
+watch(
+  () => props.disabled,
+  newDisabled => {
+    if (newDisabled) {
+      position.value = { x: 0, y: 0 };
+      isActive.value = false;
+    }
   }
-})
+);
 </script>
diff --git a/src/content/Animations/MagnetLines/MagnetLines.vue b/src/content/Animations/MagnetLines/MagnetLines.vue
index 1889cd2..9ea0d84 100644
--- a/src/content/Animations/MagnetLines/MagnetLines.vue
+++ b/src/content/Animations/MagnetLines/MagnetLines.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 
 interface MagnetLinesProps {
-  rows?: number
-  columns?: number
-  containerSize?: string
-  lineColor?: string
-  lineWidth?: string
-  lineHeight?: string
-  baseAngle?: number
-  className?: string
-  style?: Record<string, string | number>
+  rows?: number;
+  columns?: number;
+  containerSize?: string;
+  lineColor?: string;
+  lineWidth?: string;
+  lineHeight?: string;
+  baseAngle?: number;
+  className?: string;
+  style?: Record<string, string | number>;
 }
 
 const props = withDefaults(defineProps<MagnetLinesProps>(), {
@@ -23,53 +23,53 @@ const props = withDefaults(defineProps<MagnetLinesProps>(), {
   baseAngle: -10,
   className: '',
   style: () => ({})
-})
+});
 
-const containerRef = ref<HTMLDivElement | null>(null)
+const containerRef = ref<HTMLDivElement | null>(null);
 
-const total = computed(() => props.rows * props.columns)
+const total = computed(() => props.rows * props.columns);
 
 const onPointerMove = (pointer: { x: number; y: number }) => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
-  const items = container.querySelectorAll<HTMLSpanElement>('span')
+  const items = container.querySelectorAll<HTMLSpanElement>('span');
 
-  items.forEach((item) => {
-    const rect = item.getBoundingClientRect()
-    const centerX = rect.x + rect.width / 2
-    const centerY = rect.y + rect.height / 2
+  items.forEach(item => {
+    const rect = item.getBoundingClientRect();
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
 
-    const b = pointer.x - centerX
-    const a = pointer.y - centerY
-    const c = Math.sqrt(a * a + b * b) || 1
-    const r = ((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1)
+    const b = pointer.x - centerX;
+    const a = pointer.y - centerY;
+    const c = Math.sqrt(a * a + b * b) || 1;
+    const r = ((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1);
 
-    item.style.setProperty('--rotate', `${r}deg`)
-  })
-}
+    item.style.setProperty('--rotate', `${r}deg`);
+  });
+};
 
 const handlePointerMove = (e: PointerEvent) => {
-  onPointerMove({ x: e.x, y: e.y })
-}
+  onPointerMove({ x: e.x, y: e.y });
+};
 
 onMounted(() => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
-  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointermove', handlePointerMove);
 
-  const items = container.querySelectorAll<HTMLSpanElement>('span')
+  const items = container.querySelectorAll<HTMLSpanElement>('span');
   if (items.length) {
-    const middleIndex = Math.floor(items.length / 2)
-    const rect = items[middleIndex].getBoundingClientRect()
-    onPointerMove({ x: rect.x, y: rect.y })
+    const middleIndex = Math.floor(items.length / 2);
+    const rect = items[middleIndex].getBoundingClientRect();
+    onPointerMove({ x: rect.x, y: rect.y });
   }
-})
+});
 
 onUnmounted(() => {
-  window.removeEventListener('pointermove', handlePointerMove)
-})
+  window.removeEventListener('pointermove', handlePointerMove);
+});
 </script>
 
 <template>
@@ -81,7 +81,7 @@ onUnmounted(() => {
       gridTemplateRows: `repeat(${props.rows}, 1fr)`,
       width: props.containerSize,
       height: props.containerSize,
-      ...props.style,
+      ...props.style
     }"
   >
     <span
@@ -94,7 +94,7 @@ onUnmounted(() => {
         height: props.lineHeight,
         '--rotate': `${props.baseAngle}deg`,
         transform: 'rotate(var(--rotate))',
-        willChange: 'transform',
+        willChange: 'transform'
       }"
     />
   </div>
diff --git a/src/content/Animations/PixelTransition/PixelTransition.vue b/src/content/Animations/PixelTransition/PixelTransition.vue
index eeff7ed..fc75d93 100644
--- a/src/content/Animations/PixelTransition/PixelTransition.vue
+++ b/src/content/Animations/PixelTransition/PixelTransition.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue'
-import { gsap } from 'gsap'
+import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
+import { gsap } from 'gsap';
 
 interface PixelTransitionProps {
-  gridSize?: number
-  pixelColor?: string
-  animationStepDuration?: number
-  className?: string
-  style?: Record<string, string | number>
-  aspectRatio?: string
+  gridSize?: number;
+  pixelColor?: string;
+  animationStepDuration?: number;
+  className?: string;
+  style?: Record<string, string | number>;
+  aspectRatio?: string;
 }
 
 const props = withDefaults(defineProps<PixelTransitionProps>(), {
@@ -18,114 +18,127 @@ const props = withDefaults(defineProps<PixelTransitionProps>(), {
   className: '',
   style: () => ({}),
   aspectRatio: '100%'
-})
+});
 
-const containerRef = ref<HTMLDivElement | null>(null)
-const pixelGridRef = ref<HTMLDivElement | null>(null)
-const activeRef = ref<HTMLDivElement | null>(null)
-const isActive = ref(false)
-let delayedCall: gsap.core.Tween | null = null
+const containerRef = ref<HTMLDivElement | null>(null);
+const pixelGridRef = ref<HTMLDivElement | null>(null);
+const activeRef = ref<HTMLDivElement | null>(null);
+const isActive = ref(false);
+let delayedCall: gsap.core.Tween | null = null;
 
 const isTouchDevice =
   typeof window !== 'undefined' &&
   ('ontouchstart' in window ||
     (navigator && navigator.maxTouchPoints > 0) ||
-    (window.matchMedia && window.matchMedia('(pointer: coarse)').matches))
+    (window.matchMedia && window.matchMedia('(pointer: coarse)').matches));
 
 function buildPixelGrid() {
-  const pixelGridEl = pixelGridRef.value
-  if (!pixelGridEl) return
-  pixelGridEl.innerHTML = ''
+  const pixelGridEl = pixelGridRef.value;
+  if (!pixelGridEl) return;
+  pixelGridEl.innerHTML = '';
   for (let row = 0; row < props.gridSize; row++) {
     for (let col = 0; col < props.gridSize; col++) {
-      const pixel = document.createElement('div')
-      pixel.classList.add('pixelated-image-card__pixel', 'absolute', 'hidden')
-      pixel.style.backgroundColor = props.pixelColor
-      const size = 100 / props.gridSize
-      pixel.style.width = `${size}%`
-      pixel.style.height = `${size}%`
-      pixel.style.left = `${col * size}%`
-      pixel.style.top = `${row * size}%`
-      pixelGridEl.appendChild(pixel)
+      const pixel = document.createElement('div');
+      pixel.classList.add('pixelated-image-card__pixel', 'absolute', 'hidden');
+      pixel.style.backgroundColor = props.pixelColor;
+      const size = 100 / props.gridSize;
+      pixel.style.width = `${size}%`;
+      pixel.style.height = `${size}%`;
+      pixel.style.left = `${col * size}%`;
+      pixel.style.top = `${row * size}%`;
+      pixelGridEl.appendChild(pixel);
     }
   }
 }
 
 async function animatePixels(activate: boolean) {
-  isActive.value = activate
-  await nextTick()
-  const pixelGridEl = pixelGridRef.value
-  const activeEl = activeRef.value
-  if (!pixelGridEl || !activeEl) return
-  const pixels = pixelGridEl.querySelectorAll<HTMLDivElement>('.pixelated-image-card__pixel')
-  if (!pixels.length) return
-  gsap.killTweensOf(pixels)
-  if (delayedCall) delayedCall.kill()
-  gsap.set(pixels, { display: 'none' })
-  const totalPixels = pixels.length
-  const staggerDuration = props.animationStepDuration / totalPixels
+  isActive.value = activate;
+  await nextTick();
+  const pixelGridEl = pixelGridRef.value;
+  const activeEl = activeRef.value;
+  if (!pixelGridEl || !activeEl) return;
+  const pixels = pixelGridEl.querySelectorAll<HTMLDivElement>('.pixelated-image-card__pixel');
+  if (!pixels.length) return;
+  gsap.killTweensOf(pixels);
+  if (delayedCall) delayedCall.kill();
+  gsap.set(pixels, { display: 'none' });
+  const totalPixels = pixels.length;
+  const staggerDuration = props.animationStepDuration / totalPixels;
   gsap.to(pixels, {
     display: 'block',
     duration: 0,
     stagger: {
       each: staggerDuration,
-      from: 'random',
-    },
-  })
+      from: 'random'
+    }
+  });
   delayedCall = gsap.delayedCall(props.animationStepDuration, () => {
-    activeEl.style.display = activate ? 'block' : 'none'
-    activeEl.style.pointerEvents = activate ? 'none' : ''
-  })
+    activeEl.style.display = activate ? 'block' : 'none';
+    activeEl.style.pointerEvents = activate ? 'none' : '';
+  });
   gsap.to(pixels, {
     display: 'none',
     duration: 0,
     delay: props.animationStepDuration,
     stagger: {
       each: staggerDuration,
-      from: 'random',
-    },
-  })
+      from: 'random'
+    }
+  });
 }
 
 function handleMouseEnter() {
-  if (isTouchDevice) return
-  if (!isActive.value) animatePixels(true)
+  if (isTouchDevice) return;
+  if (!isActive.value) animatePixels(true);
 }
 function handleMouseLeave() {
-  if (isTouchDevice) return
-  if (isActive.value) animatePixels(false)
+  if (isTouchDevice) return;
+  if (isActive.value) animatePixels(false);
 }
 function handleClick() {
-  if (!isTouchDevice) return
-  animatePixels(!isActive.value)
+  if (!isTouchDevice) return;
+  animatePixels(!isActive.value);
 }
 
 onMounted(async () => {
-  await nextTick()
-  buildPixelGrid()
-})
+  await nextTick();
+  buildPixelGrid();
+});
 
-watch(() => [props.gridSize, props.pixelColor], () => {
-  buildPixelGrid()
-})
+watch(
+  () => [props.gridSize, props.pixelColor],
+  () => {
+    buildPixelGrid();
+  }
+);
 
 onUnmounted(() => {
-  if (delayedCall) delayedCall.kill()
-})
+  if (delayedCall) delayedCall.kill();
+});
 </script>
 
 <template>
-  <div ref="containerRef" :class="[
-    props.className,
-    'bg-[#222] text-white rounded-[15px] border-2 border-white w-[300px] max-w-full relative overflow-hidden'
-  ]" :style="props.style" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @click="handleClick">
+  <div
+    ref="containerRef"
+    :class="[
+      props.className,
+      'bg-[#222] text-white rounded-[15px] border-2 border-white w-[300px] max-w-full relative overflow-hidden'
+    ]"
+    :style="props.style"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  >
     <div :style="{ paddingTop: props.aspectRatio }" />
+
     <div class="absolute inset-0 w-full h-full">
       <slot name="firstContent" />
     </div>
-    <div ref="activeRef" class="absolute inset-0 w-full h-full z-[2]" style="display: none;">
+
+    <div ref="activeRef" class="absolute inset-0 w-full h-full z-[2]" style="display: none">
       <slot name="secondContent" />
     </div>
+
     <div ref="pixelGridRef" class="absolute inset-0 w-full h-full pointer-events-none z-[3]" />
   </div>
 </template>
diff --git a/src/content/Backgrounds/Aurora/Aurora.vue b/src/content/Backgrounds/Aurora/Aurora.vue
index 14854d6..6705356 100644
--- a/src/content/Backgrounds/Aurora/Aurora.vue
+++ b/src/content/Backgrounds/Aurora/Aurora.vue
@@ -3,18 +3,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue'
-import { Renderer, Program, Mesh, Color, Triangle } from 'ogl'
+import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue';
+import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';
 
 interface AuroraProps {
-  colorStops?: string[]
-  amplitude?: number
-  blend?: number
-  time?: number
-  speed?: number
-  intensity?: number
-  className?: string
-  style?: CSSProperties
+  colorStops?: string[];
+  amplitude?: number;
+  blend?: number;
+  time?: number;
+  speed?: number;
+  intensity?: number;
+  className?: string;
+  style?: CSSProperties;
 }
 
 const props = withDefaults(defineProps<AuroraProps>(), {
@@ -25,16 +25,16 @@ const props = withDefaults(defineProps<AuroraProps>(), {
   intensity: 1.0,
   className: '',
   style: () => ({})
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
+const containerRef = ref<HTMLDivElement>();
 
 const VERT = `#version 300 es
 in vec2 position;
 void main() {
   gl_Position = vec4(position, 0.0, 1.0);
 }
-`
+`;
 
 const FRAG = `#version 300 es
 precision highp float;
@@ -136,56 +136,56 @@ void main() {
   
   fragColor = vec4(auroraColor * finalAlpha, finalAlpha);
 }
-`
+`;
 
-let renderer: Renderer | null = null
-let animateId = 0
+let renderer: Renderer | null = null;
+let animateId = 0;
 
 const initAurora = () => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
   renderer = new Renderer({
     alpha: true,
     premultipliedAlpha: true,
-    antialias: true,
-  })
+    antialias: true
+  });
 
-  const gl = renderer.gl
-  gl.clearColor(0, 0, 0, 0)
-  gl.enable(gl.BLEND)
-  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
-  gl.canvas.style.backgroundColor = 'transparent'
+  const gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+  gl.canvas.style.backgroundColor = 'transparent';
 
   // eslint-disable-next-line prefer-const
-  let program: Program | undefined
+  let program: Program | undefined;
 
   const resize = () => {
-    if (!container) return
+    if (!container) return;
 
-    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
-    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth;
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight;
 
-    const width = Math.max(parentWidth, 300)
-    const height = Math.max(parentHeight, 300)
+    const width = Math.max(parentWidth, 300);
+    const height = Math.max(parentHeight, 300);
 
-    renderer!.setSize(width, height)
+    renderer!.setSize(width, height);
     if (program) {
-      program.uniforms.uResolution.value = [width, height]
+      program.uniforms.uResolution.value = [width, height];
     }
-  }
+  };
 
-  window.addEventListener('resize', resize)
+  window.addEventListener('resize', resize);
 
-  const geometry = new Triangle(gl)
+  const geometry = new Triangle(gl);
   if (geometry.attributes.uv) {
-    delete geometry.attributes.uv
+    delete geometry.attributes.uv;
   }
 
-  const colorStopsArray = props.colorStops.map((hex) => {
-    const c = new Color(hex)
-    return [c.r, c.g, c.b]
-  })
+  const colorStopsArray = props.colorStops.map(hex => {
+    const c = new Color(hex);
+    return [c.r, c.g, c.b];
+  });
 
   program = new Program(gl, {
     vertex: VERT,
@@ -194,83 +194,88 @@ const initAurora = () => {
       uTime: { value: 0 },
       uAmplitude: { value: props.amplitude },
       uColorStops: { value: colorStopsArray },
-      uResolution: { value: [Math.max(container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth, 300), Math.max(container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight, 300)] },
+      uResolution: {
+        value: [
+          Math.max(container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth, 300),
+          Math.max(container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight, 300)
+        ]
+      },
       uBlend: { value: props.blend },
-      uIntensity: { value: props.intensity },
-    },
-  })
+      uIntensity: { value: props.intensity }
+    }
+  });
 
-  const mesh = new Mesh(gl, { geometry, program })
-  container.appendChild(gl.canvas)
+  const mesh = new Mesh(gl, { geometry, program });
+  container.appendChild(gl.canvas);
 
-  gl.canvas.style.width = '100%'
-  gl.canvas.style.height = '100%'
-  gl.canvas.style.display = 'block'
-  gl.canvas.style.position = 'absolute'
-  gl.canvas.style.top = '0'
-  gl.canvas.style.left = '0'
+  gl.canvas.style.width = '100%';
+  gl.canvas.style.height = '100%';
+  gl.canvas.style.display = 'block';
+  gl.canvas.style.position = 'absolute';
+  gl.canvas.style.top = '0';
+  gl.canvas.style.left = '0';
 
   const update = (t: number) => {
-    animateId = requestAnimationFrame(update)
-    const time = props.time ?? t * 0.01
-    const speed = props.speed ?? 1.0
+    animateId = requestAnimationFrame(update);
+    const time = props.time ?? t * 0.01;
+    const speed = props.speed ?? 1.0;
     if (program) {
-      program.uniforms.uTime.value = time * speed * 0.1
-      program.uniforms.uAmplitude.value = props.amplitude ?? 1.0
-      program.uniforms.uBlend.value = props.blend ?? 0.5
-      program.uniforms.uIntensity.value = props.intensity ?? 1.0
-      const stops = props.colorStops ?? ['#27FF64', '#7cff67', '#27FF64']
+      program.uniforms.uTime.value = time * speed * 0.1;
+      program.uniforms.uAmplitude.value = props.amplitude ?? 1.0;
+      program.uniforms.uBlend.value = props.blend ?? 0.5;
+      program.uniforms.uIntensity.value = props.intensity ?? 1.0;
+      const stops = props.colorStops ?? ['#27FF64', '#7cff67', '#27FF64'];
       program.uniforms.uColorStops.value = stops.map((hex: string) => {
-        const c = new Color(hex)
-        return [c.r, c.g, c.b]
-      })
-      renderer!.render({ scene: mesh })
+        const c = new Color(hex);
+        return [c.r, c.g, c.b];
+      });
+      renderer!.render({ scene: mesh });
     }
-  }
-  animateId = requestAnimationFrame(update)
+  };
+  animateId = requestAnimationFrame(update);
 
-  resize()
+  resize();
 
   return () => {
-    cancelAnimationFrame(animateId)
-    window.removeEventListener('resize', resize)
+    cancelAnimationFrame(animateId);
+    window.removeEventListener('resize', resize);
     if (container && gl.canvas.parentNode === container) {
-      container.removeChild(gl.canvas)
+      container.removeChild(gl.canvas);
     }
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
-  }
-}
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
+  };
+};
 
 const cleanup = () => {
   if (animateId) {
-    cancelAnimationFrame(animateId)
+    cancelAnimationFrame(animateId);
   }
   if (renderer) {
-    const gl = renderer.gl
-    const container = containerRef.value
+    const gl = renderer.gl;
+    const container = containerRef.value;
     if (container && gl.canvas.parentNode === container) {
-      container.removeChild(gl.canvas)
+      container.removeChild(gl.canvas);
     }
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
   }
-  renderer = null
-}
+  renderer = null;
+};
 
 onMounted(() => {
-  initAurora()
-})
+  initAurora();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
   () => [props.amplitude, props.intensity],
   () => {
-    cleanup()
-    initAurora()
+    cleanup();
+    initAurora();
   }
-)
+);
 </script>
 
 <style scoped>
@@ -289,4 +294,4 @@ div {
   width: 100% !important;
   height: 100% !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/content/Backgrounds/Beams/Beams.vue b/src/content/Backgrounds/Beams/Beams.vue
index 4cfde5e..ae93ab3 100644
--- a/src/content/Backgrounds/Beams/Beams.vue
+++ b/src/content/Backgrounds/Beams/Beams.vue
@@ -3,19 +3,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
-import * as THREE from 'three'
-import { degToRad } from 'three/src/math/MathUtils.js'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import * as THREE from 'three';
+import { degToRad } from 'three/src/math/MathUtils.js';
 
 interface BeamsProps {
-  beamWidth?: number
-  beamHeight?: number
-  beamNumber?: number
-  lightColor?: string
-  speed?: number
-  noiseIntensity?: number
-  scale?: number
-  rotation?: number
+  beamWidth?: number;
+  beamHeight?: number;
+  beamNumber?: number;
+  lightColor?: string;
+  speed?: number;
+  noiseIntensity?: number;
+  scale?: number;
+  rotation?: number;
 }
 
 const props = withDefaults(defineProps<BeamsProps>(), {
@@ -27,41 +27,41 @@ const props = withDefaults(defineProps<BeamsProps>(), {
   noiseIntensity: 1.75,
   scale: 0.2,
   rotation: 0
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
+const containerRef = ref<HTMLDivElement>();
 
-let renderer: THREE.WebGLRenderer | null = null
-let scene: THREE.Scene | null = null
-let camera: THREE.PerspectiveCamera | null = null
-let beamMesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> | null = null
-let directionalLight: THREE.DirectionalLight | null = null
-let ambientLight: THREE.AmbientLight | null = null
-let animationId: number | null = null
+let renderer: THREE.WebGLRenderer | null = null;
+let scene: THREE.Scene | null = null;
+let camera: THREE.PerspectiveCamera | null = null;
+let beamMesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> | null = null;
+let directionalLight: THREE.DirectionalLight | null = null;
+let ambientLight: THREE.AmbientLight | null = null;
+let animationId: number | null = null;
 
-type UniformValue = THREE.IUniform<unknown> | unknown
+type UniformValue = THREE.IUniform<unknown> | unknown;
 
 interface ExtendMaterialConfig {
-  header: string
-  vertexHeader?: string
-  fragmentHeader?: string
-  material?: THREE.MeshPhysicalMaterialParameters & { fog?: boolean }
-  uniforms?: Record<string, UniformValue>
-  vertex?: Record<string, string>
-  fragment?: Record<string, string>
+  header: string;
+  vertexHeader?: string;
+  fragmentHeader?: string;
+  material?: THREE.MeshPhysicalMaterialParameters & { fog?: boolean };
+  uniforms?: Record<string, UniformValue>;
+  vertex?: Record<string, string>;
+  fragment?: Record<string, string>;
 }
 
 type ShaderWithDefines = THREE.ShaderLibShader & {
-  defines?: Record<string, string | number | boolean>
-}
+  defines?: Record<string, string | number | boolean>;
+};
 
 const hexToNormalizedRGB = (hex: string): [number, number, number] => {
-  const clean = hex.replace('#', '')
-  const r = parseInt(clean.substring(0, 2), 16)
-  const g = parseInt(clean.substring(2, 4), 16)
-  const b = parseInt(clean.substring(4, 6), 16)
-  return [r / 255, g / 255, b / 255]
-}
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.substring(0, 2), 16);
+  const g = parseInt(clean.substring(2, 4), 16);
+  const b = parseInt(clean.substring(4, 6), 16);
+  return [r / 255, g / 255, b / 255];
+};
 
 const noise = `
 float random (in vec2 st) {
@@ -138,53 +138,47 @@ float cnoise(vec3 P){
   float n_xyz = mix(n_yz.x,n_yz.y,fade_xyz.x);
   return 2.2 * n_xyz;
 }
-`
+`;
 
 function extendMaterial<T extends THREE.Material = THREE.Material>(
   BaseMaterial: new (params?: THREE.MaterialParameters) => T,
   cfg: ExtendMaterialConfig
 ): THREE.ShaderMaterial {
-  const physical = THREE.ShaderLib.physical as ShaderWithDefines
-  const {
-    vertexShader: baseVert,
-    fragmentShader: baseFrag,
-    uniforms: baseUniforms,
-  } = physical
-  const baseDefines = physical.defines ?? {}
+  const physical = THREE.ShaderLib.physical as ShaderWithDefines;
+  const { vertexShader: baseVert, fragmentShader: baseFrag, uniforms: baseUniforms } = physical;
+  const baseDefines = physical.defines ?? {};
 
-  const uniforms: Record<string, THREE.IUniform> =
-    THREE.UniformsUtils.clone(baseUniforms)
+  const uniforms: Record<string, THREE.IUniform> = THREE.UniformsUtils.clone(baseUniforms);
 
   const defaults = new BaseMaterial(cfg.material || {}) as T & {
-    color?: THREE.Color
-    roughness?: number
-    metalness?: number
-    envMap?: THREE.Texture
-    envMapIntensity?: number
-  }
+    color?: THREE.Color;
+    roughness?: number;
+    metalness?: number;
+    envMap?: THREE.Texture;
+    envMapIntensity?: number;
+  };
 
-  if (defaults.color) uniforms.diffuse.value = defaults.color
-  if ('roughness' in defaults) uniforms.roughness.value = defaults.roughness
-  if ('metalness' in defaults) uniforms.metalness.value = defaults.metalness
-  if ('envMap' in defaults) uniforms.envMap.value = defaults.envMap
-  if ('envMapIntensity' in defaults)
-    uniforms.envMapIntensity.value = defaults.envMapIntensity
+  if (defaults.color) uniforms.diffuse.value = defaults.color;
+  if ('roughness' in defaults) uniforms.roughness.value = defaults.roughness;
+  if ('metalness' in defaults) uniforms.metalness.value = defaults.metalness;
+  if ('envMap' in defaults) uniforms.envMap.value = defaults.envMap;
+  if ('envMapIntensity' in defaults) uniforms.envMapIntensity.value = defaults.envMapIntensity;
 
   Object.entries(cfg.uniforms ?? {}).forEach(([key, u]) => {
     uniforms[key] =
       u !== null && typeof u === 'object' && 'value' in u
         ? (u as THREE.IUniform<unknown>)
-        : ({ value: u } as THREE.IUniform<unknown>)
-  })
+        : ({ value: u } as THREE.IUniform<unknown>);
+  });
 
-  let vert = `${cfg.header}\n${cfg.vertexHeader ?? ''}\n${baseVert}`
-  let frag = `${cfg.header}\n${cfg.fragmentHeader ?? ''}\n${baseFrag}`
+  let vert = `${cfg.header}\n${cfg.vertexHeader ?? ''}\n${baseVert}`;
+  let frag = `${cfg.header}\n${cfg.fragmentHeader ?? ''}\n${baseFrag}`;
 
   for (const [inc, code] of Object.entries(cfg.vertex ?? {})) {
-    vert = vert.replace(inc, `${inc}\n${code}`)
+    vert = vert.replace(inc, `${inc}\n${code}`);
   }
   for (const [inc, code] of Object.entries(cfg.fragment ?? {})) {
-    frag = frag.replace(inc, `${inc}\n${code}`)
+    frag = frag.replace(inc, `${inc}\n${code}`);
   }
 
   const mat = new THREE.ShaderMaterial({
@@ -193,10 +187,10 @@ function extendMaterial<T extends THREE.Material = THREE.Material>(
     vertexShader: vert,
     fragmentShader: frag,
     lights: true,
-    fog: !!cfg.material?.fog,
-  })
+    fog: !!cfg.material?.fog
+  });
 
-  return mat
+  return mat;
 }
 
 function createStackedPlanesBufferGeometry(
@@ -206,54 +200,51 @@ function createStackedPlanesBufferGeometry(
   spacing: number,
   heightSegments: number
 ): THREE.BufferGeometry {
-  const geometry = new THREE.BufferGeometry()
-  const numVertices = n * (heightSegments + 1) * 2
-  const numFaces = n * heightSegments * 2
-  const positions = new Float32Array(numVertices * 3)
-  const indices = new Uint32Array(numFaces * 3)
-  const uvs = new Float32Array(numVertices * 2)
+  const geometry = new THREE.BufferGeometry();
+  const numVertices = n * (heightSegments + 1) * 2;
+  const numFaces = n * heightSegments * 2;
+  const positions = new Float32Array(numVertices * 3);
+  const indices = new Uint32Array(numFaces * 3);
+  const uvs = new Float32Array(numVertices * 2);
 
-  let vertexOffset = 0
-  let indexOffset = 0
-  let uvOffset = 0
-  const totalWidth = n * width + (n - 1) * spacing
-  const xOffsetBase = -totalWidth / 2
+  let vertexOffset = 0;
+  let indexOffset = 0;
+  let uvOffset = 0;
+  const totalWidth = n * width + (n - 1) * spacing;
+  const xOffsetBase = -totalWidth / 2;
 
   for (let i = 0; i < n; i++) {
-    const xOffset = xOffsetBase + i * (width + spacing)
-    const uvXOffset = Math.random() * 300
-    const uvYOffset = Math.random() * 300
+    const xOffset = xOffsetBase + i * (width + spacing);
+    const uvXOffset = Math.random() * 300;
+    const uvYOffset = Math.random() * 300;
 
     for (let j = 0; j <= heightSegments; j++) {
-      const y = height * (j / heightSegments - 0.5)
-      const v0 = [xOffset, y, 0]
-      const v1 = [xOffset + width, y, 0]
-      positions.set([...v0, ...v1], vertexOffset * 3)
+      const y = height * (j / heightSegments - 0.5);
+      const v0 = [xOffset, y, 0];
+      const v1 = [xOffset + width, y, 0];
+      positions.set([...v0, ...v1], vertexOffset * 3);
 
-      const uvY = j / heightSegments
-      uvs.set(
-        [uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset],
-        uvOffset
-      )
+      const uvY = j / heightSegments;
+      uvs.set([uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset], uvOffset);
 
       if (j < heightSegments) {
         const a = vertexOffset,
           b = vertexOffset + 1,
           c = vertexOffset + 2,
-          d = vertexOffset + 3
-        indices.set([a, b, c, c, b, d], indexOffset)
-        indexOffset += 6
+          d = vertexOffset + 3;
+        indices.set([a, b, c, c, b, d], indexOffset);
+        indexOffset += 6;
       }
-      vertexOffset += 2
-      uvOffset += 4
+      vertexOffset += 2;
+      uvOffset += 4;
     }
   }
 
-  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
-  geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
-  geometry.setIndex(new THREE.BufferAttribute(indices, 1))
-  geometry.computeVertexNormals()
-  return geometry
+  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+  geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
+  geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+  geometry.computeVertexNormals();
+  return geometry;
 }
 
 const beamMaterial = computed(() =>
@@ -290,12 +281,12 @@ const beamMaterial = computed(() =>
     fragmentHeader: '',
     vertex: {
       '#include <begin_vertex>': `transformed.z += getPos(transformed.xyz);`,
-      '#include <beginnormal_vertex>': `objectNormal = getNormal(position.xyz);`,
+      '#include <beginnormal_vertex>': `objectNormal = getNormal(position.xyz);`
     },
     fragment: {
       '#include <dithering_fragment>': `
     float randomNoise = noise(gl_FragCoord.xy);
-    gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`,
+    gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`
     },
     material: { fog: true },
     uniforms: {
@@ -306,127 +297,120 @@ const beamMaterial = computed(() =>
       uSpeed: { shared: true, mixed: true, linked: true, value: props.speed },
       envMapIntensity: 10,
       uNoiseIntensity: props.noiseIntensity,
-      uScale: props.scale,
-    },
+      uScale: props.scale
+    }
   })
-)
+);
 
 const initThreeJS = () => {
-  if (!containerRef.value) return
+  if (!containerRef.value) return;
 
-  cleanup()
+  cleanup();
+
+  const container = containerRef.value;
+
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.setClearColor(0x000000, 1);
+
+  scene = new THREE.Scene();
+
+  camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
+  camera.position.set(0, 0, 20);
+
+  const geometry = createStackedPlanesBufferGeometry(props.beamNumber, props.beamWidth, props.beamHeight, 0, 100);
+
+  const material = beamMaterial.value;
+  beamMesh = new THREE.Mesh(geometry, material);
+
+  const group = new THREE.Group();
+  group.rotation.z = degToRad(props.rotation);
+  group.add(beamMesh);
+  scene.add(group);
+
+  directionalLight = new THREE.DirectionalLight(new THREE.Color(props.lightColor), 1);
+  directionalLight.position.set(0, 3, 10);
+  const shadowCamera = directionalLight.shadow.camera as THREE.OrthographicCamera;
+  shadowCamera.top = 24;
+  shadowCamera.bottom = -24;
+  shadowCamera.left = -24;
+  shadowCamera.right = 24;
+  shadowCamera.far = 64;
+  directionalLight.shadow.bias = -0.004;
+  scene.add(directionalLight);
+
+  ambientLight = new THREE.AmbientLight(0xffffff, 1);
+  scene.add(ambientLight);
+
+  container.appendChild(renderer.domElement);
 
-  const container = containerRef.value
-  
-  renderer = new THREE.WebGLRenderer({ antialias: true })
-  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-  renderer.setClearColor(0x000000, 1)
-  
-  scene = new THREE.Scene()
-  
-  camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000)
-  camera.position.set(0, 0, 20)
-  
-  const geometry = createStackedPlanesBufferGeometry(
-    props.beamNumber,
-    props.beamWidth,
-    props.beamHeight,
-    0,
-    100
-  )
-  
-  const material = beamMaterial.value
-  beamMesh = new THREE.Mesh(geometry, material)
-  
-  const group = new THREE.Group()
-  group.rotation.z = degToRad(props.rotation)
-  group.add(beamMesh)
-  scene.add(group)
-  
-  directionalLight = new THREE.DirectionalLight(new THREE.Color(props.lightColor), 1)
-  directionalLight.position.set(0, 3, 10)
-  const shadowCamera = directionalLight.shadow.camera as THREE.OrthographicCamera
-  shadowCamera.top = 24
-  shadowCamera.bottom = -24
-  shadowCamera.left = -24
-  shadowCamera.right = 24
-  shadowCamera.far = 64
-  directionalLight.shadow.bias = -0.004
-  scene.add(directionalLight)
-  
-  ambientLight = new THREE.AmbientLight(0xffffff, 1)
-  scene.add(ambientLight)
-  
-  container.appendChild(renderer.domElement)
-  
   const resize = () => {
-    if (!container || !renderer || !camera) return
-    
-    const width = container.offsetWidth
-    const height = container.offsetHeight
-    
-    renderer.setSize(width, height)
-    camera.aspect = width / height
-    camera.updateProjectionMatrix()
-  }
-  
-  const resizeObserver = new ResizeObserver(resize)
-  resizeObserver.observe(container)
-  
-  resize()
-  
+    if (!container || !renderer || !camera) return;
+
+    const width = container.offsetWidth;
+    const height = container.offsetHeight;
+
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  };
+
+  const resizeObserver = new ResizeObserver(resize);
+  resizeObserver.observe(container);
+
+  resize();
+
   const animate = () => {
-    animationId = requestAnimationFrame(animate)
-    
+    animationId = requestAnimationFrame(animate);
+
     if (beamMesh && beamMesh.material) {
-      beamMesh.material.uniforms.time.value += 0.1 * 0.016
+      beamMesh.material.uniforms.time.value += 0.1 * 0.016;
     }
-    
+
     if (renderer && scene && camera) {
-      renderer.render(scene, camera)
+      renderer.render(scene, camera);
     }
-  }
-  
-  animationId = requestAnimationFrame(animate)
-  
-  ;(container as HTMLDivElement & { _resizeObserver?: ResizeObserver })._resizeObserver = resizeObserver
-}
+  };
+
+  animationId = requestAnimationFrame(animate);
+  (container as HTMLDivElement & { _resizeObserver?: ResizeObserver })._resizeObserver = resizeObserver;
+};
 
 const cleanup = () => {
   if (animationId) {
-    cancelAnimationFrame(animationId)
-    animationId = null
+    cancelAnimationFrame(animationId);
+    animationId = null;
   }
-  
+
   if (containerRef.value) {
-    const container = containerRef.value as HTMLDivElement & { _resizeObserver?: ResizeObserver }
-    
+    const container = containerRef.value as HTMLDivElement & { _resizeObserver?: ResizeObserver };
+
     if (container._resizeObserver) {
-      container._resizeObserver.disconnect()
-      delete container._resizeObserver
+      container._resizeObserver.disconnect();
+      delete container._resizeObserver;
     }
-    
+
     if (renderer && renderer.domElement.parentNode === container) {
-      container.removeChild(renderer.domElement)
+      container.removeChild(renderer.domElement);
     }
   }
-  
+
   if (beamMesh) {
-    if (beamMesh.geometry) beamMesh.geometry.dispose()
-    if (beamMesh.material) beamMesh.material.dispose()
-    beamMesh = null
+    if (beamMesh.geometry) beamMesh.geometry.dispose();
+    if (beamMesh.material) beamMesh.material.dispose();
+    beamMesh = null;
   }
-  
+
   if (renderer) {
-    renderer.dispose()
-    renderer = null
+    renderer.dispose();
+    renderer = null;
   }
-  
-  scene = null
-  camera = null
-  directionalLight = null
-  ambientLight = null
-}
+
+  scene = null;
+  camera = null;
+  directionalLight = null;
+  ambientLight = null;
+};
 
 watch(
   () => [
@@ -437,19 +421,19 @@ watch(
     props.speed,
     props.noiseIntensity,
     props.scale,
-    props.rotation,
+    props.rotation
   ],
   () => {
-    initThreeJS()
+    initThreeJS();
   },
   { deep: true }
-)
+);
 
 onMounted(() => {
-  initThreeJS()
-})
+  initThreeJS();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 </script>
diff --git a/src/content/Backgrounds/DotGrid/DotGrid.vue b/src/content/Backgrounds/DotGrid/DotGrid.vue
index 4591dfa..d78600b 100644
--- a/src/content/Backgrounds/DotGrid/DotGrid.vue
+++ b/src/content/Backgrounds/DotGrid/DotGrid.vue
@@ -7,45 +7,45 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
-import { gsap } from 'gsap'
-import { InertiaPlugin } from 'gsap/InertiaPlugin'
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
+import { gsap } from 'gsap';
+import { InertiaPlugin } from 'gsap/InertiaPlugin';
 
-gsap.registerPlugin(InertiaPlugin)
+gsap.registerPlugin(InertiaPlugin);
 
 const throttle = <T extends unknown[]>(func: (...args: T) => void, limit: number) => {
-  let lastCall = 0
+  let lastCall = 0;
   return function (this: unknown, ...args: T) {
-    const now = performance.now()
+    const now = performance.now();
     if (now - lastCall >= limit) {
-      lastCall = now
-      func.apply(this, args)
+      lastCall = now;
+      func.apply(this, args);
     }
-  }
-}
+  };
+};
 
 interface Dot {
-  cx: number
-  cy: number
-  xOffset: number
-  yOffset: number
-  _inertiaApplied: boolean
+  cx: number;
+  cy: number;
+  xOffset: number;
+  yOffset: number;
+  _inertiaApplied: boolean;
 }
 
 export interface DotGridProps {
-  dotSize?: number
-  gap?: number
-  baseColor?: string
-  activeColor?: string
-  proximity?: number
-  speedTrigger?: number
-  shockRadius?: number
-  shockStrength?: number
-  maxSpeed?: number
-  resistance?: number
-  returnDuration?: number
-  className?: string
-  style?: Record<string, string | number>
+  dotSize?: number;
+  gap?: number;
+  baseColor?: string;
+  activeColor?: string;
+  proximity?: number;
+  speedTrigger?: number;
+  shockRadius?: number;
+  shockStrength?: number;
+  maxSpeed?: number;
+  resistance?: number;
+  returnDuration?: number;
+  className?: string;
+  style?: Record<string, string | number>;
 }
 
 const props = withDefaults(defineProps<DotGridProps>(), {
@@ -62,11 +62,11 @@ const props = withDefaults(defineProps<DotGridProps>(), {
   returnDuration: 1.5,
   className: '',
   style: () => ({})
-})
+});
 
-const wrapperRef = ref<HTMLDivElement>()
-const canvasRef = ref<HTMLCanvasElement>()
-const dots = ref<Dot[]>([])
+const wrapperRef = ref<HTMLDivElement>();
+const canvasRef = ref<HTMLCanvasElement>();
+const dots = ref<Dot[]>([]);
 const pointer = ref({
   x: 0,
   y: 0,
@@ -75,146 +75,146 @@ const pointer = ref({
   speed: 0,
   lastTime: 0,
   lastX: 0,
-  lastY: 0,
-})
+  lastY: 0
+});
 
 function hexToRgb(hex: string) {
-  const m = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
-  if (!m) return { r: 0, g: 0, b: 0 }
+  const m = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  if (!m) return { r: 0, g: 0, b: 0 };
   return {
     r: parseInt(m[1], 16),
     g: parseInt(m[2], 16),
-    b: parseInt(m[3], 16),
-  }
+    b: parseInt(m[3], 16)
+  };
 }
 
-const baseRgb = computed(() => hexToRgb(props.baseColor))
-const activeRgb = computed(() => hexToRgb(props.activeColor))
+const baseRgb = computed(() => hexToRgb(props.baseColor));
+const activeRgb = computed(() => hexToRgb(props.activeColor));
 
 const circlePath = computed(() => {
-  if (typeof window === 'undefined' || !window.Path2D) return null
+  if (typeof window === 'undefined' || !window.Path2D) return null;
 
-  const p = new Path2D()
-  p.arc(0, 0, props.dotSize / 2, 0, Math.PI * 2)
-  return p
-})
+  const p = new Path2D();
+  p.arc(0, 0, props.dotSize / 2, 0, Math.PI * 2);
+  return p;
+});
 
 const buildGrid = () => {
-  const wrap = wrapperRef.value
-  const canvas = canvasRef.value
-  if (!wrap || !canvas) return
+  const wrap = wrapperRef.value;
+  const canvas = canvasRef.value;
+  if (!wrap || !canvas) return;
 
-  const { width, height } = wrap.getBoundingClientRect()
-  const dpr = window.devicePixelRatio || 1
+  const { width, height } = wrap.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
 
-  canvas.width = width * dpr
-  canvas.height = height * dpr
-  canvas.style.width = `${width}px`
-  canvas.style.height = `${height}px`
-  const ctx = canvas.getContext('2d')
-  if (ctx) ctx.scale(dpr, dpr)
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const ctx = canvas.getContext('2d');
+  if (ctx) ctx.scale(dpr, dpr);
 
-  const cols = Math.floor((width + props.gap) / (props.dotSize + props.gap))
-  const rows = Math.floor((height + props.gap) / (props.dotSize + props.gap))
-  const cell = props.dotSize + props.gap
+  const cols = Math.floor((width + props.gap) / (props.dotSize + props.gap));
+  const rows = Math.floor((height + props.gap) / (props.dotSize + props.gap));
+  const cell = props.dotSize + props.gap;
 
-  const gridW = cell * cols - props.gap
-  const gridH = cell * rows - props.gap
+  const gridW = cell * cols - props.gap;
+  const gridH = cell * rows - props.gap;
 
-  const extraX = width - gridW
-  const extraY = height - gridH
+  const extraX = width - gridW;
+  const extraY = height - gridH;
 
-  const startX = extraX / 2 + props.dotSize / 2
-  const startY = extraY / 2 + props.dotSize / 2
+  const startX = extraX / 2 + props.dotSize / 2;
+  const startY = extraY / 2 + props.dotSize / 2;
 
-  const newDots: Dot[] = []
+  const newDots: Dot[] = [];
   for (let y = 0; y < rows; y++) {
     for (let x = 0; x < cols; x++) {
-      const cx = startX + x * cell
-      const cy = startY + y * cell
-      newDots.push({ cx, cy, xOffset: 0, yOffset: 0, _inertiaApplied: false })
+      const cx = startX + x * cell;
+      const cy = startY + y * cell;
+      newDots.push({ cx, cy, xOffset: 0, yOffset: 0, _inertiaApplied: false });
     }
   }
-  dots.value = newDots
-}
+  dots.value = newDots;
+};
 
-let rafId: number
-let resizeObserver: ResizeObserver | null = null
+let rafId: number;
+let resizeObserver: ResizeObserver | null = null;
 
 const draw = () => {
-  const canvas = canvasRef.value
-  if (!canvas) return
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  const { x: px, y: py } = pointer.value
-  const proxSq = props.proximity * props.proximity
+  const { x: px, y: py } = pointer.value;
+  const proxSq = props.proximity * props.proximity;
 
   for (const dot of dots.value) {
-    const ox = dot.cx + dot.xOffset
-    const oy = dot.cy + dot.yOffset
-    const dx = dot.cx - px
-    const dy = dot.cy - py
-    const dsq = dx * dx + dy * dy
+    const ox = dot.cx + dot.xOffset;
+    const oy = dot.cy + dot.yOffset;
+    const dx = dot.cx - px;
+    const dy = dot.cy - py;
+    const dsq = dx * dx + dy * dy;
 
-    let style = props.baseColor
+    let style = props.baseColor;
     if (dsq <= proxSq) {
-      const dist = Math.sqrt(dsq)
-      const t = 1 - dist / props.proximity
-      const r = Math.round(baseRgb.value.r + (activeRgb.value.r - baseRgb.value.r) * t)
-      const g = Math.round(baseRgb.value.g + (activeRgb.value.g - baseRgb.value.g) * t)
-      const b = Math.round(baseRgb.value.b + (activeRgb.value.b - baseRgb.value.b) * t)
-      style = `rgb(${r},${g},${b})`
+      const dist = Math.sqrt(dsq);
+      const t = 1 - dist / props.proximity;
+      const r = Math.round(baseRgb.value.r + (activeRgb.value.r - baseRgb.value.r) * t);
+      const g = Math.round(baseRgb.value.g + (activeRgb.value.g - baseRgb.value.g) * t);
+      const b = Math.round(baseRgb.value.b + (activeRgb.value.b - baseRgb.value.b) * t);
+      style = `rgb(${r},${g},${b})`;
     }
 
     if (circlePath.value) {
-      ctx.save()
-      ctx.translate(ox, oy)
-      ctx.fillStyle = style
-      ctx.fill(circlePath.value)
-      ctx.restore()
+      ctx.save();
+      ctx.translate(ox, oy);
+      ctx.fillStyle = style;
+      ctx.fill(circlePath.value);
+      ctx.restore();
     }
   }
 
-  rafId = requestAnimationFrame(draw)
-}
+  rafId = requestAnimationFrame(draw);
+};
 
 const onMove = (e: MouseEvent) => {
-  const now = performance.now()
-  const pr = pointer.value
-  const dt = pr.lastTime ? now - pr.lastTime : 16
-  const dx = e.clientX - pr.lastX
-  const dy = e.clientY - pr.lastY
-  let vx = (dx / dt) * 1000
-  let vy = (dy / dt) * 1000
-  let speed = Math.hypot(vx, vy)
+  const now = performance.now();
+  const pr = pointer.value;
+  const dt = pr.lastTime ? now - pr.lastTime : 16;
+  const dx = e.clientX - pr.lastX;
+  const dy = e.clientY - pr.lastY;
+  let vx = (dx / dt) * 1000;
+  let vy = (dy / dt) * 1000;
+  let speed = Math.hypot(vx, vy);
   if (speed > props.maxSpeed) {
-    const scale = props.maxSpeed / speed
-    vx *= scale
-    vy *= scale
-    speed = props.maxSpeed
+    const scale = props.maxSpeed / speed;
+    vx *= scale;
+    vy *= scale;
+    speed = props.maxSpeed;
   }
-  pr.lastTime = now
-  pr.lastX = e.clientX
-  pr.lastY = e.clientY
-  pr.vx = vx
-  pr.vy = vy
-  pr.speed = speed
+  pr.lastTime = now;
+  pr.lastX = e.clientX;
+  pr.lastY = e.clientY;
+  pr.vx = vx;
+  pr.vy = vy;
+  pr.speed = speed;
 
-  const canvas = canvasRef.value
-  if (!canvas) return
-  const rect = canvas.getBoundingClientRect()
-  pr.x = e.clientX - rect.left
-  pr.y = e.clientY - rect.top
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const rect = canvas.getBoundingClientRect();
+  pr.x = e.clientX - rect.left;
+  pr.y = e.clientY - rect.top;
 
   for (const dot of dots.value) {
-    const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y)
+    const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y);
     if (speed > props.speedTrigger && dist < props.proximity && !dot._inertiaApplied) {
-      dot._inertiaApplied = true
-      gsap.killTweensOf(dot)
-      const pushX = dot.cx - pr.x + vx * 0.005
-      const pushY = dot.cy - pr.y + vy * 0.005
+      dot._inertiaApplied = true;
+      gsap.killTweensOf(dot);
+      const pushX = dot.cx - pr.x + vx * 0.005;
+      const pushY = dot.cy - pr.y + vy * 0.005;
       gsap.to(dot, {
         inertia: { xOffset: pushX, yOffset: pushY, resistance: props.resistance },
         onComplete: () => {
@@ -222,29 +222,29 @@ const onMove = (e: MouseEvent) => {
             xOffset: 0,
             yOffset: 0,
             duration: props.returnDuration,
-            ease: 'elastic.out(1,0.75)',
-          })
-          dot._inertiaApplied = false
-        },
-      })
+            ease: 'elastic.out(1,0.75)'
+          });
+          dot._inertiaApplied = false;
+        }
+      });
     }
   }
-}
+};
 
 const onClick = (e: MouseEvent) => {
-  const canvas = canvasRef.value
-  if (!canvas) return
-  const rect = canvas.getBoundingClientRect()
-  const cx = e.clientX - rect.left
-  const cy = e.clientY - rect.top
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const rect = canvas.getBoundingClientRect();
+  const cx = e.clientX - rect.left;
+  const cy = e.clientY - rect.top;
   for (const dot of dots.value) {
-    const dist = Math.hypot(dot.cx - cx, dot.cy - cy)
+    const dist = Math.hypot(dot.cx - cx, dot.cy - cy);
     if (dist < props.shockRadius && !dot._inertiaApplied) {
-      dot._inertiaApplied = true
-      gsap.killTweensOf(dot)
-      const falloff = Math.max(0, 1 - dist / props.shockRadius)
-      const pushX = (dot.cx - cx) * props.shockStrength * falloff
-      const pushY = (dot.cy - cy) * props.shockStrength * falloff
+      dot._inertiaApplied = true;
+      gsap.killTweensOf(dot);
+      const falloff = Math.max(0, 1 - dist / props.shockRadius);
+      const pushX = (dot.cx - cx) * props.shockStrength * falloff;
+      const pushY = (dot.cy - cy) * props.shockStrength * falloff;
       gsap.to(dot, {
         inertia: { xOffset: pushX, yOffset: pushY, resistance: props.resistance },
         onComplete: () => {
@@ -252,64 +252,64 @@ const onClick = (e: MouseEvent) => {
             xOffset: 0,
             yOffset: 0,
             duration: props.returnDuration,
-            ease: 'elastic.out(1,0.75)',
-          })
-          dot._inertiaApplied = false
-        },
-      })
+            ease: 'elastic.out(1,0.75)'
+          });
+          dot._inertiaApplied = false;
+        }
+      });
     }
   }
-}
+};
 
-const throttledMove = throttle(onMove, 50)
+const throttledMove = throttle(onMove, 50);
 
 onMounted(async () => {
-  await nextTick()
+  await nextTick();
 
-  buildGrid()
+  buildGrid();
 
   if (circlePath.value) {
-    draw()
+    draw();
   }
 
   if ('ResizeObserver' in window) {
-    resizeObserver = new ResizeObserver(buildGrid)
+    resizeObserver = new ResizeObserver(buildGrid);
     if (wrapperRef.value) {
-      resizeObserver.observe(wrapperRef.value)
+      resizeObserver.observe(wrapperRef.value);
     }
   } else {
-    (window as Window).addEventListener('resize', buildGrid)
+    (window as Window).addEventListener('resize', buildGrid);
   }
 
-  window.addEventListener('mousemove', throttledMove, { passive: true })
-  window.addEventListener('click', onClick)
-})
+  window.addEventListener('mousemove', throttledMove, { passive: true });
+  window.addEventListener('click', onClick);
+});
 
 onUnmounted(() => {
   if (rafId) {
-    cancelAnimationFrame(rafId)
+    cancelAnimationFrame(rafId);
   }
 
   if (resizeObserver) {
-    resizeObserver.disconnect()
+    resizeObserver.disconnect();
   } else {
-    window.removeEventListener('resize', buildGrid)
+    window.removeEventListener('resize', buildGrid);
   }
 
-  window.removeEventListener('mousemove', throttledMove)
-  window.removeEventListener('click', onClick)
-})
+  window.removeEventListener('mousemove', throttledMove);
+  window.removeEventListener('click', onClick);
+});
 
 watch([() => props.dotSize, () => props.gap], () => {
-  buildGrid()
-})
+  buildGrid();
+});
 
 watch([() => props.proximity, () => props.baseColor, activeRgb, baseRgb, circlePath], () => {
   if (rafId) {
-    cancelAnimationFrame(rafId)
+    cancelAnimationFrame(rafId);
   }
   if (circlePath.value) {
-    draw()
+    draw();
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/content/Backgrounds/GridMotion/GridMotion.vue b/src/content/Backgrounds/GridMotion/GridMotion.vue
index 5ae8f86..4740bca 100644
--- a/src/content/Backgrounds/GridMotion/GridMotion.vue
+++ b/src/content/Backgrounds/GridMotion/GridMotion.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed } from "vue";
-import { gsap } from "gsap";
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
+import { gsap } from 'gsap';
 
 interface GridMotionProps {
   items?: string[];
@@ -9,7 +9,7 @@ interface GridMotionProps {
 
 const props = withDefaults(defineProps<GridMotionProps>(), {
   items: () => [],
-  gradientColor: "black",
+  gradientColor: 'black'
 });
 
 const gridRef = ref<HTMLElement | null>(null);
@@ -18,16 +18,14 @@ const mouseX = ref(window.innerWidth / 2);
 
 const totalItems = 28;
 const defaultItems = Array.from({ length: totalItems }, (_, i) => `Item ${i + 1}`);
-const combinedItems = computed(() =>
-  props.items.length > 0 ? props.items.slice(0, totalItems) : defaultItems,
-);
+const combinedItems = computed(() => (props.items.length > 0 ? props.items.slice(0, totalItems) : defaultItems));
 
 function isImage(item: string) {
-  return typeof item === "string" && item.startsWith("http");
+  return typeof item === 'string' && item.startsWith('http');
 }
 
 function isTag(item: string) {
-  return typeof item === "string" && item.startsWith("<") && item.endsWith(">");
+  return typeof item === 'string' && item.startsWith('<') && item.endsWith('>');
 }
 
 onMounted(() => {
@@ -44,23 +42,22 @@ onMounted(() => {
 
     rowRefs.value.forEach((row, index) => {
       const direction = index % 2 === 0 ? 1 : -1;
-      const moveAmount =
-        ((mouseX.value / window.innerWidth) * maxMoveAmount - maxMoveAmount / 2) * direction;
+      const moveAmount = ((mouseX.value / window.innerWidth) * maxMoveAmount - maxMoveAmount / 2) * direction;
 
       gsap.to(row, {
         x: moveAmount,
         duration: baseDuration + inertiaFactors[index % inertiaFactors.length],
-        ease: "power3.out",
-        overwrite: "auto",
+        ease: 'power3.out',
+        overwrite: 'auto'
       });
     });
   };
 
   const removeAnimation = gsap.ticker.add(updateMotion);
-  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener('mousemove', handleMouseMove);
 
   onBeforeUnmount(() => {
-    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener('mousemove', handleMouseMove);
     removeAnimation();
   });
 });
@@ -68,24 +65,42 @@ onMounted(() => {
 
 <template>
   <div ref="gridRef" class="w-full h-full overflow-hidden">
-    <section class="relative flex justify-center items-center w-full h-screen overflow-hidden" :style="{
-      background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
-    }">
+    <section
+      class="relative flex justify-center items-center w-full h-screen overflow-hidden"
+      :style="{
+        background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`
+      }"
+    >
       <div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div>
 
       <div
-        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center">
-        <div v-for="rowIndex in 4" :key="rowIndex" class="gap-4 grid grid-cols-7"
-          :style="{ willChange: 'transform, filter' }" ref="rowRefs">
+        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center"
+      >
+        <div
+          v-for="rowIndex in 4"
+          :key="rowIndex"
+          class="gap-4 grid grid-cols-7"
+          :style="{ willChange: 'transform, filter' }"
+          ref="rowRefs"
+        >
           <div v-for="itemIndex in 7" :key="itemIndex" class="relative">
             <div
-              class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white">
-              <div v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
-                class="top-0 left-0 absolute bg-cover bg-center w-full h-full" :style="{
-                  backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`,
-                }"></div>
-              <div v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])" class="z-[2] p-4 text-center"
-                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"></div>
+              class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
+            >
+              <div
+                v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
+                :style="{
+                  backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`
+                }"
+              ></div>
+
+              <div
+                v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                class="z-[2] p-4 text-center"
+                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
+              ></div>
+
               <div v-else class="z-[1] p-4 text-center">
                 {{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }}
               </div>
diff --git a/src/content/Backgrounds/Iridescence/Iridescence.vue b/src/content/Backgrounds/Iridescence/Iridescence.vue
index 5348e82..6f78321 100644
--- a/src/content/Backgrounds/Iridescence/Iridescence.vue
+++ b/src/content/Backgrounds/Iridescence/Iridescence.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { Renderer, Program, Mesh, Color, Triangle } from 'ogl'
-import type { OGLRenderingContext } from 'ogl'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';
+import type { OGLRenderingContext } from 'ogl';
 
 interface Props {
-  color?: [number, number, number]
-  speed?: number
-  amplitude?: number
-  mouseReact?: boolean
+  color?: [number, number, number];
+  speed?: number;
+  amplitude?: number;
+  mouseReact?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,16 +19,16 @@ const props = withDefaults(defineProps<Props>(), {
   speed: 1.0,
   amplitude: 0.1,
   mouseReact: true
-})
+});
 
-const containerRef = ref<HTMLDivElement | null>(null)
-const mousePos = ref({ x: 0.5, y: 0.5 })
+const containerRef = ref<HTMLDivElement | null>(null);
+const mousePos = ref({ x: 0.5, y: 0.5 });
 
-let renderer: Renderer | null = null
-let gl: OGLRenderingContext | null = null
-let program: Program | null = null
-let mesh: Mesh | null = null
-let animationId: number | null = null
+let renderer: Renderer | null = null;
+let gl: OGLRenderingContext | null = null;
+let program: Program | null = null;
+let mesh: Mesh | null = null;
+let animationId: number | null = null;
 
 const vertexShader = `
 attribute vec2 uv;
@@ -40,7 +40,7 @@ void main() {
   vUv = uv;
   gl_Position = vec4(position, 0, 1);
 }
-`
+`;
 
 const fragmentShader = `
 precision highp float;
@@ -71,57 +71,57 @@ void main() {
   col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5) * uColor;
   gl_FragColor = vec4(col, 1.0);
 }
-`
+`;
 
 const resize = () => {
-  if (!containerRef.value || !renderer || !program || !gl) return
+  if (!containerRef.value || !renderer || !program || !gl) return;
 
-  const container = containerRef.value
-  const scale = 1
-  renderer.setSize(container.offsetWidth * scale, container.offsetHeight * scale)
+  const container = containerRef.value;
+  const scale = 1;
+  renderer.setSize(container.offsetWidth * scale, container.offsetHeight * scale);
 
   if (program) {
     program.uniforms.uResolution.value = new Color(
       gl.canvas.width,
       gl.canvas.height,
       gl.canvas.width / gl.canvas.height
-    )
+    );
   }
-}
+};
 
 const handleMouseMove = (e: MouseEvent) => {
-  if (!containerRef.value || !program) return
+  if (!containerRef.value || !program) return;
 
-  const rect = containerRef.value.getBoundingClientRect()
-  const x = (e.clientX - rect.left) / rect.width
-  const y = 1.0 - (e.clientY - rect.top) / rect.height
+  const rect = containerRef.value.getBoundingClientRect();
+  const x = (e.clientX - rect.left) / rect.width;
+  const y = 1.0 - (e.clientY - rect.top) / rect.height;
 
-  mousePos.value = { x, y }
+  mousePos.value = { x, y };
   if (program.uniforms.uMouse.value) {
-    program.uniforms.uMouse.value[0] = x
-    program.uniforms.uMouse.value[1] = y
+    program.uniforms.uMouse.value[0] = x;
+    program.uniforms.uMouse.value[1] = y;
   }
-}
+};
 
 const update = (t: number) => {
-  if (!program || !renderer || !mesh) return
+  if (!program || !renderer || !mesh) return;
 
-  animationId = requestAnimationFrame(update)
-  program.uniforms.uTime.value = t * 0.001
-  renderer.render({ scene: mesh })
-}
+  animationId = requestAnimationFrame(update);
+  program.uniforms.uTime.value = t * 0.001;
+  renderer.render({ scene: mesh });
+};
 
 const initializeScene = () => {
-  if (!containerRef.value) return
+  if (!containerRef.value) return;
 
-  cleanup()
+  cleanup();
 
-  const container = containerRef.value
-  renderer = new Renderer()
-  gl = renderer.gl
-  gl.clearColor(1, 1, 1, 1)
+  const container = containerRef.value;
+  renderer = new Renderer();
+  gl = renderer.gl;
+  gl.clearColor(1, 1, 1, 1);
 
-  const geometry = new Triangle(gl)
+  const geometry = new Triangle(gl);
   program = new Program(gl, {
     vertex: vertexShader,
     fragment: fragmentShader,
@@ -129,76 +129,72 @@ const initializeScene = () => {
       uTime: { value: 0 },
       uColor: { value: new Color(...props.color) },
       uResolution: {
-        value: new Color(
-          gl.canvas.width,
-          gl.canvas.height,
-          gl.canvas.width / gl.canvas.height
-        )
+        value: new Color(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
       },
       uMouse: { value: new Float32Array([mousePos.value.x, mousePos.value.y]) },
       uAmplitude: { value: props.amplitude },
       uSpeed: { value: props.speed }
     }
-  })
+  });
 
-  mesh = new Mesh(gl, { geometry, program })
+  mesh = new Mesh(gl, { geometry, program });
 
-  const canvas = gl.canvas as HTMLCanvasElement
-  canvas.style.width = '100%'
-  canvas.style.height = '100%'
-  canvas.style.display = 'block'
+  const canvas = gl.canvas as HTMLCanvasElement;
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+  canvas.style.display = 'block';
 
-  container.appendChild(canvas)
+  container.appendChild(canvas);
 
-  window.addEventListener('resize', resize)
+  window.addEventListener('resize', resize);
   if (props.mouseReact) {
-    container.addEventListener('mousemove', handleMouseMove)
+    container.addEventListener('mousemove', handleMouseMove);
   }
 
-  resize()
-  animationId = requestAnimationFrame(update)
-}
+  resize();
+  animationId = requestAnimationFrame(update);
+};
 
 const cleanup = () => {
   if (animationId) {
-    cancelAnimationFrame(animationId)
-    animationId = null
+    cancelAnimationFrame(animationId);
+    animationId = null;
   }
 
-  window.removeEventListener('resize', resize)
+  window.removeEventListener('resize', resize);
 
   if (containerRef.value) {
-    containerRef.value.removeEventListener('mousemove', handleMouseMove)
+    containerRef.value.removeEventListener('mousemove', handleMouseMove);
 
-    const canvas = containerRef.value.querySelector('canvas')
+    const canvas = containerRef.value.querySelector('canvas');
     if (canvas) {
-      containerRef.value.removeChild(canvas)
+      containerRef.value.removeChild(canvas);
     }
   }
 
   if (gl) {
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
   }
 
-  renderer = null
-  gl = null
-  program = null
-  mesh = null
-}
+  renderer = null;
+  gl = null;
+  program = null;
+  mesh = null;
+};
 
 onMounted(() => {
-  initializeScene()
-})
+  initializeScene();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
   [() => props.color, () => props.speed, () => props.amplitude, () => props.mouseReact],
   () => {
-    initializeScene()
+    initializeScene();
   },
   { deep: true }
-)
-</script>
\ No newline at end of file
+);
+</script>
diff --git a/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue b/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
index 64e6895..0f8e5d6 100644
--- a/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
+++ b/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
@@ -1,79 +1,140 @@
 <template>
   <div class="relative overflow-hidden">
     <canvas ref="canvasRef" class="absolute top-0 left-0 w-full h-full" />
-    <div v-if="outerVignette"
-      class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]" />
-    <div v-if="centerVignette"
-      class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0.8)_0%,_rgba(0,0,0,0)_60%)]" />
+
+    <div
+      v-if="outerVignette"
+      class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]"
+    />
+
+    <div
+      v-if="centerVignette"
+      class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0.8)_0%,_rgba(0,0,0,0)_60%)]"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 
 interface Props {
-  glitchColors?: string[]
-  glitchSpeed?: number
-  centerVignette?: boolean
-  outerVignette?: boolean
-  smooth?: boolean
+  glitchColors?: string[];
+  glitchSpeed?: number;
+  centerVignette?: boolean;
+  outerVignette?: boolean;
+  smooth?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  glitchColors: () => ["#2b4539", "#61dca3", "#61b3dc"],
+  glitchColors: () => ['#2b4539', '#61dca3', '#61b3dc'],
   glitchSpeed: 50,
   centerVignette: false,
   outerVignette: false,
   smooth: true
-})
+});
 
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-const animationRef = ref<number | null>(null)
-const letters = ref<{
-  char: string
-  color: string
-  targetColor: string
-  colorProgress: number
-}[]>([])
-const grid = ref({ columns: 0, rows: 0 })
-const context = ref<CanvasRenderingContext2D | null>(null)
-const lastGlitchTime = ref(Date.now())
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const animationRef = ref<number | null>(null);
+const letters = ref<
+  {
+    char: string;
+    color: string;
+    targetColor: string;
+    colorProgress: number;
+  }[]
+>([]);
+const grid = ref({ columns: 0, rows: 0 });
+const context = ref<CanvasRenderingContext2D | null>(null);
+const lastGlitchTime = ref(Date.now());
 
-const fontSize = 16
-const charWidth = 10
-const charHeight = 20
+const fontSize = 16;
+const charWidth = 10;
+const charHeight = 20;
 
 const lettersAndSymbols = [
-  "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
-  "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
-  "!", "@", "#", "$", "&", "*", "(", ")", "-", "_", "+", "=", "/",
-  "[", "]", "{", "}", ";", ":", "<", ">", ",", "0", "1", "2", "3",
-  "4", "5", "6", "7", "8", "9"
-]
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z',
+  '!',
+  '@',
+  '#',
+  '$',
+  '&',
+  '*',
+  '(',
+  ')',
+  '-',
+  '_',
+  '+',
+  '=',
+  '/',
+  '[',
+  ']',
+  '{',
+  '}',
+  ';',
+  ':',
+  '<',
+  '>',
+  ',',
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9'
+];
 
 const getRandomChar = () => {
-  return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)]
-}
+  return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)];
+};
 
 const getRandomColor = () => {
-  return props.glitchColors[Math.floor(Math.random() * props.glitchColors.length)]
-}
+  return props.glitchColors[Math.floor(Math.random() * props.glitchColors.length)];
+};
 
 const hexToRgb = (hex: string) => {
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   hex = hex.replace(shorthandRegex, (m, r, g, b) => {
-    return r + r + g + g + b + b
-  })
+    return r + r + g + g + b + b;
+  });
 
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16),
-    }
-    : null
-}
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      }
+    : null;
+};
 
 const interpolateColor = (
   start: { r: number; g: number; b: number },
@@ -83,171 +144,167 @@ const interpolateColor = (
   const result = {
     r: Math.round(start.r + (end.r - start.r) * factor),
     g: Math.round(start.g + (end.g - start.g) * factor),
-    b: Math.round(start.b + (end.b - start.b) * factor),
-  }
-  return `rgb(${result.r}, ${result.g}, ${result.b})`
-}
+    b: Math.round(start.b + (end.b - start.b) * factor)
+  };
+  return `rgb(${result.r}, ${result.g}, ${result.b})`;
+};
 
 const calculateGrid = (width: number, height: number) => {
-  const columns = Math.ceil(width / charWidth)
-  const rows = Math.ceil(height / charHeight)
-  return { columns, rows }
-}
+  const columns = Math.ceil(width / charWidth);
+  const rows = Math.ceil(height / charHeight);
+  return { columns, rows };
+};
 
 const initializeLetters = (columns: number, rows: number) => {
-  grid.value = { columns, rows }
-  const totalLetters = columns * rows
+  grid.value = { columns, rows };
+  const totalLetters = columns * rows;
   letters.value = Array.from({ length: totalLetters }, () => ({
     char: getRandomChar(),
     color: getRandomColor(),
     targetColor: getRandomColor(),
-    colorProgress: 1,
-  }))
-}
+    colorProgress: 1
+  }));
+};
 
 const resizeCanvas = () => {
-  const canvas = canvasRef.value
-  if (!canvas) return
-  const parent = canvas.parentElement
-  if (!parent) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const parent = canvas.parentElement;
+  if (!parent) return;
 
-  const dpr = window.devicePixelRatio || 1
-  
-  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth
-  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight
-  
-  const width = Math.max(parentWidth, 300)
-  const height = Math.max(parentHeight, 300)
+  const dpr = window.devicePixelRatio || 1;
 
-  canvas.width = width * dpr
-  canvas.height = height * dpr
+  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth;
+  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight;
 
-  canvas.style.width = `${width}px`
-  canvas.style.height = `${height}px`
+  const width = Math.max(parentWidth, 300);
+  const height = Math.max(parentHeight, 300);
+
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
 
   if (context.value) {
-    context.value.setTransform(dpr, 0, 0, dpr, 0, 0)
+    context.value.setTransform(dpr, 0, 0, dpr, 0, 0);
   }
 
-  const { columns, rows } = calculateGrid(width, height)
-  initializeLetters(columns, rows)
-  drawLetters()
-}
+  const { columns, rows } = calculateGrid(width, height);
+  initializeLetters(columns, rows);
+  drawLetters();
+};
 
 const drawLetters = () => {
-  if (!context.value || letters.value.length === 0) return
-  const ctx = context.value
-  const { width, height } = canvasRef.value!.getBoundingClientRect()
-  ctx.clearRect(0, 0, width, height)
-  ctx.font = `${fontSize}px monospace`
-  ctx.textBaseline = "top"
+  if (!context.value || letters.value.length === 0) return;
+  const ctx = context.value;
+  const { width, height } = canvasRef.value!.getBoundingClientRect();
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = 'top';
 
   letters.value.forEach((letter, index) => {
-    const x = (index % grid.value.columns) * charWidth
-    const y = Math.floor(index / grid.value.columns) * charHeight
-    ctx.fillStyle = letter.color
-    ctx.fillText(letter.char, x, y)
-  })
-}
+    const x = (index % grid.value.columns) * charWidth;
+    const y = Math.floor(index / grid.value.columns) * charHeight;
+    ctx.fillStyle = letter.color;
+    ctx.fillText(letter.char, x, y);
+  });
+};
 
 const updateLetters = () => {
-  if (!letters.value || letters.value.length === 0) return
+  if (!letters.value || letters.value.length === 0) return;
 
-  const updateCount = Math.max(1, Math.floor(letters.value.length * 0.05))
+  const updateCount = Math.max(1, Math.floor(letters.value.length * 0.05));
 
   for (let i = 0; i < updateCount; i++) {
-    const index = Math.floor(Math.random() * letters.value.length)
-    if (!letters.value[index]) continue
+    const index = Math.floor(Math.random() * letters.value.length);
+    if (!letters.value[index]) continue;
 
-    letters.value[index].char = getRandomChar()
-    letters.value[index].targetColor = getRandomColor()
+    letters.value[index].char = getRandomChar();
+    letters.value[index].targetColor = getRandomColor();
 
     if (!props.smooth) {
-      letters.value[index].color = letters.value[index].targetColor
-      letters.value[index].colorProgress = 1
+      letters.value[index].color = letters.value[index].targetColor;
+      letters.value[index].colorProgress = 1;
     } else {
-      letters.value[index].colorProgress = 0
+      letters.value[index].colorProgress = 0;
     }
   }
-}
+};
 
 const handleSmoothTransitions = () => {
-  let needsRedraw = false
-  letters.value.forEach((letter) => {
+  let needsRedraw = false;
+  letters.value.forEach(letter => {
     if (letter.colorProgress < 1) {
-      letter.colorProgress += 0.05
-      if (letter.colorProgress > 1) letter.colorProgress = 1
+      letter.colorProgress += 0.05;
+      if (letter.colorProgress > 1) letter.colorProgress = 1;
 
-      const startRgb = hexToRgb(letter.color)
-      const endRgb = hexToRgb(letter.targetColor)
+      const startRgb = hexToRgb(letter.color);
+      const endRgb = hexToRgb(letter.targetColor);
       if (startRgb && endRgb) {
-        letter.color = interpolateColor(
-          startRgb,
-          endRgb,
-          letter.colorProgress
-        )
-        needsRedraw = true
+        letter.color = interpolateColor(startRgb, endRgb, letter.colorProgress);
+        needsRedraw = true;
       }
     }
-  })
+  });
 
   if (needsRedraw) {
-    drawLetters()
+    drawLetters();
   }
-}
+};
 
 const animate = () => {
-  const now = Date.now()
+  const now = Date.now();
   if (now - lastGlitchTime.value >= props.glitchSpeed) {
-    updateLetters()
-    drawLetters()
-    lastGlitchTime.value = now
+    updateLetters();
+    drawLetters();
+    lastGlitchTime.value = now;
   }
 
   if (props.smooth) {
-    handleSmoothTransitions()
+    handleSmoothTransitions();
   }
 
-  animationRef.value = requestAnimationFrame(animate)
-}
+  animationRef.value = requestAnimationFrame(animate);
+};
 
-let resizeTimeout: number
+let resizeTimeout: number;
 
 const handleResize = () => {
-  clearTimeout(resizeTimeout)
+  clearTimeout(resizeTimeout);
   resizeTimeout = setTimeout(() => {
     if (animationRef.value) {
-      cancelAnimationFrame(animationRef.value)
+      cancelAnimationFrame(animationRef.value);
     }
-    resizeCanvas()
-    animate()
-  }, 100)
-}
+    resizeCanvas();
+    animate();
+  }, 100);
+};
 
 onMounted(() => {
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
-  context.value = canvas.getContext("2d")
-  resizeCanvas()
-  animate()
+  context.value = canvas.getContext('2d');
+  resizeCanvas();
+  animate();
 
-  window.addEventListener("resize", handleResize)
-})
+  window.addEventListener('resize', handleResize);
+});
 
 onUnmounted(() => {
   if (animationRef.value) {
-    cancelAnimationFrame(animationRef.value)
+    cancelAnimationFrame(animationRef.value);
   }
-  window.removeEventListener("resize", handleResize)
-})
+  window.removeEventListener('resize', handleResize);
+});
 
 watch([() => props.glitchSpeed, () => props.smooth], () => {
   if (animationRef.value) {
-    cancelAnimationFrame(animationRef.value)
+    cancelAnimationFrame(animationRef.value);
   }
-  animate()
-})
+  animate();
+});
 </script>
 
 <style scoped>
@@ -266,4 +323,4 @@ div {
   width: 100% !important;
   height: 100% !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/content/Backgrounds/Lightning/Lightning.vue b/src/content/Backgrounds/Lightning/Lightning.vue
index 5663561..8ab32d6 100644
--- a/src/content/Backgrounds/Lightning/Lightning.vue
+++ b/src/content/Backgrounds/Lightning/Lightning.vue
@@ -3,14 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 
 interface LightningProps {
-  hue?: number
-  xOffset?: number
-  speed?: number
-  intensity?: number
-  size?: number
+  hue?: number;
+  xOffset?: number;
+  speed?: number;
+  intensity?: number;
+  size?: number;
 }
 
 const props = withDefaults(defineProps<LightningProps>(), {
@@ -19,20 +19,20 @@ const props = withDefaults(defineProps<LightningProps>(), {
   speed: 1,
   intensity: 1,
   size: 1
-})
+});
 
-const canvasRef = ref<HTMLCanvasElement>()
-let animationId = 0
-let gl: WebGLRenderingContext | null = null
-let program: WebGLProgram | null = null
-let startTime = 0
+const canvasRef = ref<HTMLCanvasElement>();
+let animationId = 0;
+let gl: WebGLRenderingContext | null = null;
+let program: WebGLProgram | null = null;
+let startTime = 0;
 
 const vertexShaderSource = `
 attribute vec2 aPosition;
 void main() {
   gl_Position = vec4(aPosition, 0.0, 1.0);
 }
-`
+`;
 
 const fragmentShaderSource = `
 precision mediump float;
@@ -112,155 +112,153 @@ void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
 void main() {
     mainImage(gl_FragColor, gl_FragCoord.xy);
 }
-`
+`;
 
 const compileShader = (source: string, type: number): WebGLShader | null => {
-  if (!gl) return null
-  const shader = gl.createShader(type)
-  if (!shader) return null
-  gl.shaderSource(shader, source)
-  gl.compileShader(shader)
+  if (!gl) return null;
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error('Shader compile error:', gl.getShaderInfoLog(shader))
-    gl.deleteShader(shader)
-    return null
+    console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
   }
-  return shader
-}
+  return shader;
+};
 
 const initWebGL = () => {
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
   const resizeCanvas = () => {
-    const rect = canvas.getBoundingClientRect()
-    const dpr = window.devicePixelRatio || 1
-    
-    let width = rect.width
-    let height = rect.height
-    
-    let parent = canvas.parentElement
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+
+    let width = rect.width;
+    let height = rect.height;
+
+    let parent = canvas.parentElement;
     while (parent && (!width || !height)) {
       if (parent.offsetWidth && parent.offsetHeight) {
-        width = parent.offsetWidth
-        height = parent.offsetHeight
-        break
+        width = parent.offsetWidth;
+        height = parent.offsetHeight;
+        break;
       }
-      parent = parent.parentElement
+      parent = parent.parentElement;
     }
-    
+
     if (!width || !height) {
-      width = window.innerWidth
-      height = window.innerHeight
+      width = window.innerWidth;
+      height = window.innerHeight;
     }
-    
-    width = Math.max(width, 300)
-    height = Math.max(height, 300)
-    
-    canvas.width = width * dpr
-    canvas.height = height * dpr
-    
-    canvas.style.width = '100%'
-    canvas.style.height = '100%'
-    canvas.style.display = 'block'
-    canvas.style.position = 'absolute'
-    canvas.style.top = '0'
-    canvas.style.left = '0'
-  }
 
-  resizeCanvas()
-  window.addEventListener('resize', resizeCanvas)
+    width = Math.max(width, 300);
+    height = Math.max(height, 300);
 
-  gl = canvas.getContext('webgl')
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.style.display = 'block';
+    canvas.style.position = 'absolute';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+  };
+
+  resizeCanvas();
+  window.addEventListener('resize', resizeCanvas);
+
+  gl = canvas.getContext('webgl');
   if (!gl) {
-    console.error('WebGL not supported')
-    return
+    console.error('WebGL not supported');
+    return;
   }
 
-  const vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER)
-  const fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER)
-  if (!vertexShader || !fragmentShader) return
+  const vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER);
+  const fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
+  if (!vertexShader || !fragmentShader) return;
 
-  program = gl.createProgram()
-  if (!program) return
-  gl.attachShader(program, vertexShader)
-  gl.attachShader(program, fragmentShader)
-  gl.linkProgram(program)
+  program = gl.createProgram();
+  if (!program) return;
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    console.error('Program linking error:', gl.getProgramInfoLog(program))
-    return
+    console.error('Program linking error:', gl.getProgramInfoLog(program));
+    return;
   }
-  gl.useProgram(program)
+  gl.useProgram(program);
 
-  const vertices = new Float32Array([
-    -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,
-  ])
-  const vertexBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
-  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
+  const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+  const vertexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
 
-  const aPosition = gl.getAttribLocation(program, 'aPosition')
-  gl.enableVertexAttribArray(aPosition)
-  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
+  const aPosition = gl.getAttribLocation(program, 'aPosition');
+  gl.enableVertexAttribArray(aPosition);
+  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
 
-  startTime = performance.now()
-  render()
+  startTime = performance.now();
+  render();
 
   return () => {
-    window.removeEventListener('resize', resizeCanvas)
-  }
-}
+    window.removeEventListener('resize', resizeCanvas);
+  };
+};
 
 const render = () => {
-  if (!gl || !program || !canvasRef.value) return
+  if (!gl || !program || !canvasRef.value) return;
 
-  const canvas = canvasRef.value
+  const canvas = canvasRef.value;
 
-  const rect = canvas.getBoundingClientRect()
+  const rect = canvas.getBoundingClientRect();
   if (canvas.width !== rect.width || canvas.height !== rect.height) {
-    canvas.width = rect.width
-    canvas.height = rect.height
-    canvas.style.width = rect.width + 'px'
-    canvas.style.height = rect.height + 'px'
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+    canvas.style.width = rect.width + 'px';
+    canvas.style.height = rect.height + 'px';
   }
 
-  gl.viewport(0, 0, canvas.width, canvas.height)
+  gl.viewport(0, 0, canvas.width, canvas.height);
 
-  const iResolutionLocation = gl.getUniformLocation(program, 'iResolution')
-  const iTimeLocation = gl.getUniformLocation(program, 'iTime')
-  const uHueLocation = gl.getUniformLocation(program, 'uHue')
-  const uXOffsetLocation = gl.getUniformLocation(program, 'uXOffset')
-  const uSpeedLocation = gl.getUniformLocation(program, 'uSpeed')
-  const uIntensityLocation = gl.getUniformLocation(program, 'uIntensity')
-  const uSizeLocation = gl.getUniformLocation(program, 'uSize')
+  const iResolutionLocation = gl.getUniformLocation(program, 'iResolution');
+  const iTimeLocation = gl.getUniformLocation(program, 'iTime');
+  const uHueLocation = gl.getUniformLocation(program, 'uHue');
+  const uXOffsetLocation = gl.getUniformLocation(program, 'uXOffset');
+  const uSpeedLocation = gl.getUniformLocation(program, 'uSpeed');
+  const uIntensityLocation = gl.getUniformLocation(program, 'uIntensity');
+  const uSizeLocation = gl.getUniformLocation(program, 'uSize');
 
-  gl.uniform2f(iResolutionLocation, canvas.width, canvas.height)
-  const currentTime = performance.now()
-  gl.uniform1f(iTimeLocation, (currentTime - startTime) / 1000.0)
-  gl.uniform1f(uHueLocation, props.hue)
-  gl.uniform1f(uXOffsetLocation, props.xOffset)
-  gl.uniform1f(uSpeedLocation, props.speed)
-  gl.uniform1f(uIntensityLocation, props.intensity)
-  gl.uniform1f(uSizeLocation, props.size)
+  gl.uniform2f(iResolutionLocation, canvas.width, canvas.height);
+  const currentTime = performance.now();
+  gl.uniform1f(iTimeLocation, (currentTime - startTime) / 1000.0);
+  gl.uniform1f(uHueLocation, props.hue);
+  gl.uniform1f(uXOffsetLocation, props.xOffset);
+  gl.uniform1f(uSpeedLocation, props.speed);
+  gl.uniform1f(uIntensityLocation, props.intensity);
+  gl.uniform1f(uSizeLocation, props.size);
 
-  gl.drawArrays(gl.TRIANGLES, 0, 6)
-  animationId = requestAnimationFrame(render)
-}
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  animationId = requestAnimationFrame(render);
+};
 
 onMounted(() => {
-  initWebGL()
-})
+  initWebGL();
+});
 
 onUnmounted(() => {
   if (animationId) {
-    cancelAnimationFrame(animationId)
+    cancelAnimationFrame(animationId);
   }
-})
+});
 
 watch(
   () => [props.hue, props.xOffset, props.speed, props.intensity, props.size],
   () => {}
-)
+);
 </script>
 
 <style scoped>
diff --git a/src/content/Backgrounds/Particles/Particles.vue b/src/content/Backgrounds/Particles/Particles.vue
index 4483af7..ff9d628 100644
--- a/src/content/Backgrounds/Particles/Particles.vue
+++ b/src/content/Backgrounds/Particles/Particles.vue
@@ -3,22 +3,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { Renderer, Camera, Geometry, Program, Mesh } from 'ogl'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { Renderer, Camera, Geometry, Program, Mesh } from 'ogl';
 
 interface ParticlesProps {
-  particleCount?: number
-  particleSpread?: number
-  speed?: number
-  particleColors?: string[]
-  moveParticlesOnHover?: boolean
-  particleHoverFactor?: number
-  alphaParticles?: boolean
-  particleBaseSize?: number
-  sizeRandomness?: number
-  cameraDistance?: number
-  disableRotation?: boolean
-  className?: string
+  particleCount?: number;
+  particleSpread?: number;
+  speed?: number;
+  particleColors?: string[];
+  moveParticlesOnHover?: boolean;
+  particleHoverFactor?: number;
+  alphaParticles?: boolean;
+  particleBaseSize?: number;
+  sizeRandomness?: number;
+  cameraDistance?: number;
+  disableRotation?: boolean;
+  className?: string;
 }
 
 const props = withDefaults(defineProps<ParticlesProps>(), {
@@ -34,32 +34,35 @@ const props = withDefaults(defineProps<ParticlesProps>(), {
   cameraDistance: 20,
   disableRotation: false,
   className: ''
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
-const mouseRef = ref({ x: 0, y: 0 })
+const containerRef = ref<HTMLDivElement>();
+const mouseRef = ref({ x: 0, y: 0 });
 
-let renderer: Renderer | null = null
-let camera: Camera | null = null
-let particles: Mesh | null = null
-let program: Program | null = null
-let animationFrameId: number | null = null
-let lastTime = 0
-let elapsed = 0
+let renderer: Renderer | null = null;
+let camera: Camera | null = null;
+let particles: Mesh | null = null;
+let program: Program | null = null;
+let animationFrameId: number | null = null;
+let lastTime = 0;
+let elapsed = 0;
 
-const defaultColors = ['#ffffff', '#ffffff', '#ffffff']
+const defaultColors = ['#ffffff', '#ffffff', '#ffffff'];
 
 const hexToRgb = (hex: string): [number, number, number] => {
-  hex = hex.replace(/^#/, '')
+  hex = hex.replace(/^#/, '');
   if (hex.length === 3) {
-    hex = hex.split('').map((c) => c + c).join('')
+    hex = hex
+      .split('')
+      .map(c => c + c)
+      .join('');
   }
-  const int = parseInt(hex, 16)
-  const r = ((int >> 16) & 255) / 255
-  const g = ((int >> 8) & 255) / 255
-  const b = (int & 255) / 255
-  return [r, g, b]
-}
+  const int = parseInt(hex, 16);
+  const r = ((int >> 16) & 255) / 255;
+  const g = ((int >> 8) & 255) / 255;
+  const b = (int & 255) / 255;
+  return [r, g, b];
+};
 
 const vertex = /* glsl */ `
   attribute vec3 position;
@@ -94,7 +97,7 @@ const vertex = /* glsl */ `
     gl_PointSize = (uBaseSize * (1.0 + uSizeRandomness * (random.x - 0.5))) / length(mvPos.xyz);
     gl_Position = projectionMatrix * mvPos;
   }
-`
+`;
 
 const fragment = /* glsl */ `
   precision highp float;
@@ -118,89 +121,89 @@ const fragment = /* glsl */ `
       gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), circle);
     }
   }
-`
+`;
 
 const handleMouseMove = (e: MouseEvent) => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
-  const rect = container.getBoundingClientRect()
-  const x = ((e.clientX - rect.left) / rect.width) * 2 - 1
-  const y = -(((e.clientY - rect.top) / rect.height) * 2 - 1)
-  mouseRef.value = { x, y }
-}
+  const rect = container.getBoundingClientRect();
+  const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+  const y = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
+  mouseRef.value = { x, y };
+};
 
 const initParticles = () => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
-  renderer = new Renderer({ depth: false, alpha: true })
-  const gl = renderer.gl
-  container.appendChild(gl.canvas)
-  gl.clearColor(0, 0, 0, 0)
+  renderer = new Renderer({ depth: false, alpha: true });
+  const gl = renderer.gl;
+  container.appendChild(gl.canvas);
+  gl.clearColor(0, 0, 0, 0);
 
-  gl.canvas.style.width = '100%'
-  gl.canvas.style.height = '100%'
-  gl.canvas.style.display = 'block'
-  gl.canvas.style.position = 'absolute'
-  gl.canvas.style.top = '0'
-  gl.canvas.style.left = '0'
+  gl.canvas.style.width = '100%';
+  gl.canvas.style.height = '100%';
+  gl.canvas.style.display = 'block';
+  gl.canvas.style.position = 'absolute';
+  gl.canvas.style.top = '0';
+  gl.canvas.style.left = '0';
 
-  camera = new Camera(gl, { fov: 15 })
-  camera.position.set(0, 0, props.cameraDistance)
+  camera = new Camera(gl, { fov: 15 });
+  camera.position.set(0, 0, props.cameraDistance);
 
   const resize = () => {
-    if (!container) return
-    
-    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
-    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
-    
-    const width = Math.max(parentWidth, 300)
-    const height = Math.max(parentHeight, 300)
-    
-    renderer!.setSize(width, height)
-    camera!.perspective({ aspect: width / height })
+    if (!container) return;
 
-    gl.canvas.style.width = '100%'
-    gl.canvas.style.height = '100%'
-    gl.canvas.style.display = 'block'
-    gl.canvas.style.position = 'absolute'
-    gl.canvas.style.top = '0'
-    gl.canvas.style.left = '0'
-  }
-  window.addEventListener('resize', resize, false)
-  resize()
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth;
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight;
+
+    const width = Math.max(parentWidth, 300);
+    const height = Math.max(parentHeight, 300);
+
+    renderer!.setSize(width, height);
+    camera!.perspective({ aspect: width / height });
+
+    gl.canvas.style.width = '100%';
+    gl.canvas.style.height = '100%';
+    gl.canvas.style.display = 'block';
+    gl.canvas.style.position = 'absolute';
+    gl.canvas.style.top = '0';
+    gl.canvas.style.left = '0';
+  };
+  window.addEventListener('resize', resize, false);
+  resize();
 
   if (props.moveParticlesOnHover) {
-    container.addEventListener('mousemove', handleMouseMove)
+    container.addEventListener('mousemove', handleMouseMove);
   }
 
-  const count = props.particleCount
-  const positions = new Float32Array(count * 3)
-  const randoms = new Float32Array(count * 4)
-  const colors = new Float32Array(count * 3)
-  const palette = props.particleColors && props.particleColors.length > 0 ? props.particleColors : defaultColors
+  const count = props.particleCount;
+  const positions = new Float32Array(count * 3);
+  const randoms = new Float32Array(count * 4);
+  const colors = new Float32Array(count * 3);
+  const palette = props.particleColors && props.particleColors.length > 0 ? props.particleColors : defaultColors;
 
   for (let i = 0; i < count; i++) {
-    let x: number, y: number, z: number, len: number
+    let x: number, y: number, z: number, len: number;
     do {
-      x = Math.random() * 2 - 1
-      y = Math.random() * 2 - 1
-      z = Math.random() * 2 - 1
-      len = x * x + y * y + z * z
-    } while (len > 1 || len === 0)
-    const r = Math.cbrt(Math.random())
-    positions.set([x * r, y * r, z * r], i * 3)
-    randoms.set([Math.random(), Math.random(), Math.random(), Math.random()], i * 4)
-    const col = hexToRgb(palette[Math.floor(Math.random() * palette.length)])
-    colors.set(col, i * 3)
+      x = Math.random() * 2 - 1;
+      y = Math.random() * 2 - 1;
+      z = Math.random() * 2 - 1;
+      len = x * x + y * y + z * z;
+    } while (len > 1 || len === 0);
+    const r = Math.cbrt(Math.random());
+    positions.set([x * r, y * r, z * r], i * 3);
+    randoms.set([Math.random(), Math.random(), Math.random(), Math.random()], i * 4);
+    const col = hexToRgb(palette[Math.floor(Math.random() * palette.length)]);
+    colors.set(col, i * 3);
   }
 
   const geometry = new Geometry(gl, {
     position: { size: 3, data: positions },
     random: { size: 4, data: randoms },
-    color: { size: 3, data: colors },
-  })
+    color: { size: 3, data: colors }
+  });
 
   program = new Program(gl, {
     vertex,
@@ -210,105 +213,105 @@ const initParticles = () => {
       uSpread: { value: props.particleSpread },
       uBaseSize: { value: props.particleBaseSize },
       uSizeRandomness: { value: props.sizeRandomness },
-      uAlphaParticles: { value: props.alphaParticles ? 1 : 0 },
+      uAlphaParticles: { value: props.alphaParticles ? 1 : 0 }
     },
     transparent: true,
-    depthTest: false,
-  })
+    depthTest: false
+  });
 
-  particles = new Mesh(gl, { mode: gl.POINTS, geometry, program })
+  particles = new Mesh(gl, { mode: gl.POINTS, geometry, program });
 
-  lastTime = performance.now()
-  elapsed = 0
+  lastTime = performance.now();
+  elapsed = 0;
 
   const update = (t: number) => {
-    if (!animationFrameId) return
-    animationFrameId = requestAnimationFrame(update)
-    const delta = t - lastTime
-    lastTime = t
-    elapsed += delta * props.speed
+    if (!animationFrameId) return;
+    animationFrameId = requestAnimationFrame(update);
+    const delta = t - lastTime;
+    lastTime = t;
+    elapsed += delta * props.speed;
 
     if (program) {
-      program.uniforms.uTime.value = elapsed * 0.001
-      program.uniforms.uSpread.value = props.particleSpread
-      program.uniforms.uBaseSize.value = props.particleBaseSize
-      program.uniforms.uSizeRandomness.value = props.sizeRandomness
-      program.uniforms.uAlphaParticles.value = props.alphaParticles ? 1 : 0
+      program.uniforms.uTime.value = elapsed * 0.001;
+      program.uniforms.uSpread.value = props.particleSpread;
+      program.uniforms.uBaseSize.value = props.particleBaseSize;
+      program.uniforms.uSizeRandomness.value = props.sizeRandomness;
+      program.uniforms.uAlphaParticles.value = props.alphaParticles ? 1 : 0;
     }
 
     if (particles) {
       if (props.moveParticlesOnHover) {
-        particles.position.x = -mouseRef.value.x * props.particleHoverFactor
-        particles.position.y = -mouseRef.value.y * props.particleHoverFactor
+        particles.position.x = -mouseRef.value.x * props.particleHoverFactor;
+        particles.position.y = -mouseRef.value.y * props.particleHoverFactor;
       } else {
-        particles.position.x = 0
-        particles.position.y = 0
+        particles.position.x = 0;
+        particles.position.y = 0;
       }
 
       if (!props.disableRotation) {
-        particles.rotation.x = Math.sin(elapsed * 0.0002) * 0.1
-        particles.rotation.y = Math.cos(elapsed * 0.0005) * 0.15
-        particles.rotation.z += 0.01 * props.speed
+        particles.rotation.x = Math.sin(elapsed * 0.0002) * 0.1;
+        particles.rotation.y = Math.cos(elapsed * 0.0005) * 0.15;
+        particles.rotation.z += 0.01 * props.speed;
       }
     }
 
     if (renderer && camera && particles) {
-      renderer.render({ scene: particles, camera })
+      renderer.render({ scene: particles, camera });
     }
-  }
+  };
 
-  animationFrameId = requestAnimationFrame(update)
+  animationFrameId = requestAnimationFrame(update);
 
   return () => {
-    window.removeEventListener('resize', resize)
+    window.removeEventListener('resize', resize);
     if (props.moveParticlesOnHover) {
-      container.removeEventListener('mousemove', handleMouseMove)
+      container.removeEventListener('mousemove', handleMouseMove);
     }
     if (animationFrameId) {
-      cancelAnimationFrame(animationFrameId)
-      animationFrameId = null
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
     }
     if (container.contains(gl.canvas)) {
-      container.removeChild(gl.canvas)
+      container.removeChild(gl.canvas);
     }
-  }
-}
+  };
+};
 
 const cleanup = () => {
   if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId)
-    animationFrameId = null
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
   }
   if (renderer) {
-    const container = containerRef.value
-    const gl = renderer.gl
+    const container = containerRef.value;
+    const gl = renderer.gl;
     if (container && gl.canvas.parentNode === container) {
-      container.removeChild(gl.canvas)
+      container.removeChild(gl.canvas);
     }
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
   }
-  renderer = null
-  camera = null
-  particles = null
-  program = null
-}
+  renderer = null;
+  camera = null;
+  particles = null;
+  program = null;
+};
 
 onMounted(() => {
-  initParticles()
-})
+  initParticles();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
   () => [props.particleCount, props.particleColors],
   () => {
-    cleanup()
-    initParticles()
+    cleanup();
+    initParticles();
   },
   { deep: true }
-)
+);
 
 watch(
   () => [
@@ -322,7 +325,7 @@ watch(
     props.disableRotation
   ],
   () => {}
-)
+);
 </script>
 
 <style scoped>
diff --git a/src/content/Backgrounds/Silk/Silk.vue b/src/content/Backgrounds/Silk/Silk.vue
index f52585b..4eeaa89 100644
--- a/src/content/Backgrounds/Silk/Silk.vue
+++ b/src/content/Backgrounds/Silk/Silk.vue
@@ -3,17 +3,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue'
-import { Renderer, Program, Mesh, Plane, Camera } from 'ogl'
+import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue';
+import { Renderer, Program, Mesh, Plane, Camera } from 'ogl';
 
 interface SilkProps {
-  speed?: number
-  scale?: number
-  color?: string
-  noiseIntensity?: number
-  rotation?: number
-  className?: string
-  style?: CSSProperties
+  speed?: number;
+  scale?: number;
+  color?: string;
+  noiseIntensity?: number;
+  rotation?: number;
+  className?: string;
+  style?: CSSProperties;
 }
 
 const props = withDefaults(defineProps<SilkProps>(), {
@@ -24,17 +24,17 @@ const props = withDefaults(defineProps<SilkProps>(), {
   rotation: 0,
   className: '',
   style: () => ({})
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
+const containerRef = ref<HTMLDivElement>();
 
 const hexToNormalizedRGB = (hex: string): [number, number, number] => {
-  const clean = hex.replace('#', '')
-  const r = parseInt(clean.slice(0, 2), 16) / 255
-  const g = parseInt(clean.slice(2, 4), 16) / 255
-  const b = parseInt(clean.slice(4, 6), 16) / 255
-  return [r, g, b]
-}
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.slice(0, 2), 16) / 255;
+  const g = parseInt(clean.slice(2, 4), 16) / 255;
+  const b = parseInt(clean.slice(4, 6), 16) / 255;
+  return [r, g, b];
+};
 
 const vertexShader = `
 attribute vec2 uv;
@@ -51,7 +51,7 @@ void main() {
   vUv = uv;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }
-`
+`;
 
 const fragmentShader = `
 precision highp float;
@@ -99,75 +99,75 @@ void main() {
   col.a = 1.0;
   gl_FragColor = col;
 }
-`
+`;
 
-let renderer: Renderer | null = null
-let mesh: Mesh | null = null
-let program: Program | null = null
-let camera: Camera | null = null
-let animateId = 0
+let renderer: Renderer | null = null;
+let mesh: Mesh | null = null;
+let program: Program | null = null;
+let camera: Camera | null = null;
+let animateId = 0;
 
 const initSilk = () => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
   renderer = new Renderer({
     alpha: true,
-    antialias: true,
-  })
+    antialias: true
+  });
 
-  const gl = renderer.gl
-  gl.clearColor(0, 0, 0, 0)
-  gl.canvas.style.backgroundColor = 'transparent'
+  const gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 0);
+  gl.canvas.style.backgroundColor = 'transparent';
 
-  camera = new Camera(gl, { fov: 75 })
-  camera.position.z = 1
+  camera = new Camera(gl, { fov: 75 });
+  camera.position.z = 1;
 
   const resize = () => {
-    if (!container || !camera) return
-    
-    let width = container.offsetWidth
-    let height = container.offsetHeight
-    
-    let parent = container.parentElement
+    if (!container || !camera) return;
+
+    let width = container.offsetWidth;
+    let height = container.offsetHeight;
+
+    let parent = container.parentElement;
     while (parent && (!width || !height)) {
       if (parent.offsetWidth && parent.offsetHeight) {
-        width = parent.offsetWidth
-        height = parent.offsetHeight
-        break
+        width = parent.offsetWidth;
+        height = parent.offsetHeight;
+        break;
       }
-      parent = parent.parentElement
+      parent = parent.parentElement;
     }
-    
+
     if (!width || !height) {
-      width = window.innerWidth
-      height = window.innerHeight
+      width = window.innerWidth;
+      height = window.innerHeight;
     }
-    
-    width = Math.max(width, 300)
-    height = Math.max(height, 300)
-        
-    renderer!.setSize(width, height)
-    camera.perspective({ aspect: width / height })
+
+    width = Math.max(width, 300);
+    height = Math.max(height, 300);
+
+    renderer!.setSize(width, height);
+    camera.perspective({ aspect: width / height });
 
     if (mesh) {
-      const distance = camera.position.z
-      const fov = camera.fov * (Math.PI / 180)
-      const height2 = 2 * Math.tan(fov / 2) * distance
-      const width2 = height2 * (width / height)
+      const distance = camera.position.z;
+      const fov = camera.fov * (Math.PI / 180);
+      const height2 = 2 * Math.tan(fov / 2) * distance;
+      const width2 = height2 * (width / height);
 
-      mesh.scale.set(width2, height2, 1)
+      mesh.scale.set(width2, height2, 1);
     }
-  }
+  };
 
-  window.addEventListener('resize', resize)
+  window.addEventListener('resize', resize);
 
   const geometry = new Plane(gl, {
     width: 1,
-    height: 1,
-  })
+    height: 1
+  });
 
-  const colorRGB = hexToNormalizedRGB(props.color)
+  const colorRGB = hexToNormalizedRGB(props.color);
 
   program = new Program(gl, {
     vertex: vertexShader,
@@ -178,81 +178,81 @@ const initSilk = () => {
       uNoiseIntensity: { value: props.noiseIntensity },
       uColor: { value: colorRGB },
       uRotation: { value: props.rotation },
-      uTime: { value: 0 },
-    },
-  })
+      uTime: { value: 0 }
+    }
+  });
 
-  mesh = new Mesh(gl, { geometry, program })
-  container.appendChild(gl.canvas)
+  mesh = new Mesh(gl, { geometry, program });
+  container.appendChild(gl.canvas);
 
-  gl.canvas.style.width = '100%'
-  gl.canvas.style.height = '100%'
-  gl.canvas.style.display = 'block'
-  gl.canvas.style.position = 'absolute'
-  gl.canvas.style.top = '0'
-  gl.canvas.style.left = '0'
-  gl.canvas.style.zIndex = '1'
+  gl.canvas.style.width = '100%';
+  gl.canvas.style.height = '100%';
+  gl.canvas.style.display = 'block';
+  gl.canvas.style.position = 'absolute';
+  gl.canvas.style.top = '0';
+  gl.canvas.style.left = '0';
+  gl.canvas.style.zIndex = '1';
 
-  let lastTime = 0
+  let lastTime = 0;
   const update = (t: number) => {
-    animateId = requestAnimationFrame(update)
-    const deltaTime = (t - lastTime) / 1000
-    lastTime = t
+    animateId = requestAnimationFrame(update);
+    const deltaTime = (t - lastTime) / 1000;
+    lastTime = t;
 
     if (program && mesh && camera) {
-      program.uniforms.uTime.value += 0.1 * deltaTime
-      program.uniforms.uSpeed.value = props.speed
-      program.uniforms.uScale.value = props.scale
-      program.uniforms.uNoiseIntensity.value = props.noiseIntensity
-      program.uniforms.uColor.value = hexToNormalizedRGB(props.color)
-      program.uniforms.uRotation.value = props.rotation
-      renderer!.render({ scene: mesh, camera })
+      program.uniforms.uTime.value += 0.1 * deltaTime;
+      program.uniforms.uSpeed.value = props.speed;
+      program.uniforms.uScale.value = props.scale;
+      program.uniforms.uNoiseIntensity.value = props.noiseIntensity;
+      program.uniforms.uColor.value = hexToNormalizedRGB(props.color);
+      program.uniforms.uRotation.value = props.rotation;
+      renderer!.render({ scene: mesh, camera });
     }
-  }
-  animateId = requestAnimationFrame(update)
+  };
+  animateId = requestAnimationFrame(update);
 
-  resize()
+  resize();
 
   return () => {
-    cancelAnimationFrame(animateId)
-    window.removeEventListener('resize', resize)
+    cancelAnimationFrame(animateId);
+    window.removeEventListener('resize', resize);
     if (container && gl.canvas.parentNode === container) {
-      container.removeChild(gl.canvas)
+      container.removeChild(gl.canvas);
     }
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
-  }
-}
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
+  };
+};
 
 const cleanup = () => {
   if (animateId) {
-    cancelAnimationFrame(animateId)
+    cancelAnimationFrame(animateId);
   }
   if (renderer) {
-    const gl = renderer.gl
-    const container = containerRef.value
+    const gl = renderer.gl;
+    const container = containerRef.value;
     if (container && gl.canvas.parentNode === container) {
-      container.removeChild(gl.canvas)
+      container.removeChild(gl.canvas);
     }
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
   }
-  renderer = null
-  mesh = null
-  camera = null
-  program = null
-}
+  renderer = null;
+  mesh = null;
+  camera = null;
+  program = null;
+};
 
 onMounted(() => {
-  initSilk()
-})
+  initSilk();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
   () => [props.speed, props.scale, props.color, props.noiseIntensity, props.rotation],
   () => {}
-)
+);
 </script>
 
 <style scoped>
diff --git a/src/content/Backgrounds/Squares/Squares.vue b/src/content/Backgrounds/Squares/Squares.vue
index 8b8bb29..f1c0f6d 100644
--- a/src/content/Backgrounds/Squares/Squares.vue
+++ b/src/content/Backgrounds/Squares/Squares.vue
@@ -3,75 +3,75 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 
-type CanvasStrokeStyle = string | CanvasGradient | CanvasPattern
+type CanvasStrokeStyle = string | CanvasGradient | CanvasPattern;
 
 interface GridOffset {
-  x: number
-  y: number
+  x: number;
+  y: number;
 }
 
 interface Props {
-  direction?: "diagonal" | "up" | "right" | "down" | "left"
-  speed?: number
-  borderColor?: CanvasStrokeStyle
-  squareSize?: number
-  hoverFillColor?: CanvasStrokeStyle
+  direction?: 'diagonal' | 'up' | 'right' | 'down' | 'left';
+  speed?: number;
+  borderColor?: CanvasStrokeStyle;
+  squareSize?: number;
+  hoverFillColor?: CanvasStrokeStyle;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  direction: "right",
+  direction: 'right',
   speed: 1,
-  borderColor: "#999",
+  borderColor: '#999',
   squareSize: 40,
-  hoverFillColor: "#222"
-})
+  hoverFillColor: '#222'
+});
 
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-const requestRef = ref<number | null>(null)
-const numSquaresX = ref<number>(0)
-const numSquaresY = ref<number>(0)
-const gridOffset = ref<GridOffset>({ x: 0, y: 0 })
-const hoveredSquareRef = ref<GridOffset | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const requestRef = ref<number | null>(null);
+const numSquaresX = ref<number>(0);
+const numSquaresY = ref<number>(0);
+const gridOffset = ref<GridOffset>({ x: 0, y: 0 });
+const hoveredSquareRef = ref<GridOffset | null>(null);
 
-let ctx: CanvasRenderingContext2D | null = null
+let ctx: CanvasRenderingContext2D | null = null;
 
 const resizeCanvas = () => {
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
-  canvas.width = canvas.offsetWidth
-  canvas.height = canvas.offsetHeight
-  numSquaresX.value = Math.ceil(canvas.width / props.squareSize) + 1
-  numSquaresY.value = Math.ceil(canvas.height / props.squareSize) + 1
-}
+  canvas.width = canvas.offsetWidth;
+  canvas.height = canvas.offsetHeight;
+  numSquaresX.value = Math.ceil(canvas.width / props.squareSize) + 1;
+  numSquaresY.value = Math.ceil(canvas.height / props.squareSize) + 1;
+};
 
 const drawGrid = () => {
-  const canvas = canvasRef.value
-  if (!ctx || !canvas) return
+  const canvas = canvasRef.value;
+  if (!ctx || !canvas) return;
 
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  const startX = Math.floor(gridOffset.value.x / props.squareSize) * props.squareSize
-  const startY = Math.floor(gridOffset.value.y / props.squareSize) * props.squareSize
+  const startX = Math.floor(gridOffset.value.x / props.squareSize) * props.squareSize;
+  const startY = Math.floor(gridOffset.value.y / props.squareSize) * props.squareSize;
 
   for (let x = startX; x < canvas.width + props.squareSize; x += props.squareSize) {
     for (let y = startY; y < canvas.height + props.squareSize; y += props.squareSize) {
-      const squareX = x - (gridOffset.value.x % props.squareSize)
-      const squareY = y - (gridOffset.value.y % props.squareSize)
+      const squareX = x - (gridOffset.value.x % props.squareSize);
+      const squareY = y - (gridOffset.value.y % props.squareSize);
 
       if (
         hoveredSquareRef.value &&
         Math.floor((x - startX) / props.squareSize) === hoveredSquareRef.value.x &&
         Math.floor((y - startY) / props.squareSize) === hoveredSquareRef.value.y
       ) {
-        ctx.fillStyle = props.hoverFillColor
-        ctx.fillRect(squareX, squareY, props.squareSize, props.squareSize)
+        ctx.fillStyle = props.hoverFillColor;
+        ctx.fillRect(squareX, squareY, props.squareSize, props.squareSize);
       }
 
-      ctx.strokeStyle = props.borderColor
-      ctx.strokeRect(squareX, squareY, props.squareSize, props.squareSize)
+      ctx.strokeStyle = props.borderColor;
+      ctx.strokeRect(squareX, squareY, props.squareSize, props.squareSize);
     }
   }
 
@@ -82,116 +82,118 @@ const drawGrid = () => {
     canvas.width / 2,
     canvas.height / 2,
     Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2
-  )
-  gradient.addColorStop(0, "rgba(0, 0, 0, 0)")
-  gradient.addColorStop(1, "#0b0b0b")
+  );
+  gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+  gradient.addColorStop(1, '#0b0b0b');
 
-  ctx.fillStyle = gradient
-  ctx.fillRect(0, 0, canvas.width, canvas.height)
-}
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+};
 
 const updateAnimation = () => {
-  const effectiveSpeed = Math.max(props.speed, 0.1)
+  const effectiveSpeed = Math.max(props.speed, 0.1);
 
   switch (props.direction) {
-    case "right":
-      gridOffset.value.x = (gridOffset.value.x - effectiveSpeed + props.squareSize) % props.squareSize
-      break
-    case "left":
-      gridOffset.value.x = (gridOffset.value.x + effectiveSpeed + props.squareSize) % props.squareSize
-      break
-    case "up":
-      gridOffset.value.y = (gridOffset.value.y + effectiveSpeed + props.squareSize) % props.squareSize
-      break
-    case "down":
-      gridOffset.value.y = (gridOffset.value.y - effectiveSpeed + props.squareSize) % props.squareSize
-      break
-    case "diagonal":
-      gridOffset.value.x = (gridOffset.value.x - effectiveSpeed + props.squareSize) % props.squareSize
-      gridOffset.value.y = (gridOffset.value.y - effectiveSpeed + props.squareSize) % props.squareSize
-      break
+    case 'right':
+      gridOffset.value.x = (gridOffset.value.x - effectiveSpeed + props.squareSize) % props.squareSize;
+      break;
+    case 'left':
+      gridOffset.value.x = (gridOffset.value.x + effectiveSpeed + props.squareSize) % props.squareSize;
+      break;
+    case 'up':
+      gridOffset.value.y = (gridOffset.value.y + effectiveSpeed + props.squareSize) % props.squareSize;
+      break;
+    case 'down':
+      gridOffset.value.y = (gridOffset.value.y - effectiveSpeed + props.squareSize) % props.squareSize;
+      break;
+    case 'diagonal':
+      gridOffset.value.x = (gridOffset.value.x - effectiveSpeed + props.squareSize) % props.squareSize;
+      gridOffset.value.y = (gridOffset.value.y - effectiveSpeed + props.squareSize) % props.squareSize;
+      break;
     default:
-      break
+      break;
   }
 
-  drawGrid()
-  requestRef.value = requestAnimationFrame(updateAnimation)
-}
+  drawGrid();
+  requestRef.value = requestAnimationFrame(updateAnimation);
+};
 
 const handleMouseMove = (event: MouseEvent) => {
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
-  const rect = canvas.getBoundingClientRect()
-  const mouseX = event.clientX - rect.left
-  const mouseY = event.clientY - rect.top
+  const rect = canvas.getBoundingClientRect();
+  const mouseX = event.clientX - rect.left;
+  const mouseY = event.clientY - rect.top;
 
-  const startX = Math.floor(gridOffset.value.x / props.squareSize) * props.squareSize
-  const startY = Math.floor(gridOffset.value.y / props.squareSize) * props.squareSize
+  const startX = Math.floor(gridOffset.value.x / props.squareSize) * props.squareSize;
+  const startY = Math.floor(gridOffset.value.y / props.squareSize) * props.squareSize;
 
-  const hoveredSquareX = Math.floor(
-    (mouseX + gridOffset.value.x - startX) / props.squareSize
-  )
-  const hoveredSquareY = Math.floor(
-    (mouseY + gridOffset.value.y - startY) / props.squareSize
-  )
+  const hoveredSquareX = Math.floor((mouseX + gridOffset.value.x - startX) / props.squareSize);
+  const hoveredSquareY = Math.floor((mouseY + gridOffset.value.y - startY) / props.squareSize);
 
   if (
     !hoveredSquareRef.value ||
     hoveredSquareRef.value.x !== hoveredSquareX ||
     hoveredSquareRef.value.y !== hoveredSquareY
   ) {
-    hoveredSquareRef.value = { x: hoveredSquareX, y: hoveredSquareY }
+    hoveredSquareRef.value = { x: hoveredSquareX, y: hoveredSquareY };
   }
-}
+};
 
 const handleMouseLeave = () => {
-  hoveredSquareRef.value = null
-}
+  hoveredSquareRef.value = null;
+};
 
 const initializeCanvas = () => {
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
-  ctx = canvas.getContext("2d")
-  resizeCanvas()
+  ctx = canvas.getContext('2d');
+  resizeCanvas();
 
-  canvas.addEventListener("mousemove", handleMouseMove)
-  canvas.addEventListener("mouseleave", handleMouseLeave)
-  window.addEventListener("resize", resizeCanvas)
+  canvas.addEventListener('mousemove', handleMouseMove);
+  canvas.addEventListener('mouseleave', handleMouseLeave);
+  window.addEventListener('resize', resizeCanvas);
 
-  requestRef.value = requestAnimationFrame(updateAnimation)
-}
+  requestRef.value = requestAnimationFrame(updateAnimation);
+};
 
 const cleanup = () => {
-  const canvas = canvasRef.value
+  const canvas = canvasRef.value;
 
   if (requestRef.value) {
-    cancelAnimationFrame(requestRef.value)
-    requestRef.value = null
+    cancelAnimationFrame(requestRef.value);
+    requestRef.value = null;
   }
 
   if (canvas) {
-    canvas.removeEventListener("mousemove", handleMouseMove)
-    canvas.removeEventListener("mouseleave", handleMouseLeave)
+    canvas.removeEventListener('mousemove', handleMouseMove);
+    canvas.removeEventListener('mouseleave', handleMouseLeave);
   }
 
-  window.removeEventListener("resize", resizeCanvas)
-}
+  window.removeEventListener('resize', resizeCanvas);
+};
 
 onMounted(() => {
-  initializeCanvas()
-})
+  initializeCanvas();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
-  [() => props.direction, () => props.speed, () => props.borderColor, () => props.hoverFillColor, () => props.squareSize],
+  [
+    () => props.direction,
+    () => props.speed,
+    () => props.borderColor,
+    () => props.hoverFillColor,
+    () => props.squareSize
+  ],
   () => {
-    cleanup()
-    initializeCanvas()
+    cleanup();
+    initializeCanvas();
   }
-)
-</script>
\ No newline at end of file
+);
+</script>
diff --git a/src/content/Backgrounds/Threads/Threads.vue b/src/content/Backgrounds/Threads/Threads.vue
index 6450ddf..669c100 100644
--- a/src/content/Backgrounds/Threads/Threads.vue
+++ b/src/content/Backgrounds/Threads/Threads.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { Renderer, Program, Mesh, Triangle, Color } from 'ogl'
-import type { OGLRenderingContext } from 'ogl'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { Renderer, Program, Mesh, Triangle, Color } from 'ogl';
+import type { OGLRenderingContext } from 'ogl';
 
 interface Props {
-  color?: [number, number, number]
-  amplitude?: number
-  distance?: number
-  enableMouseInteraction?: boolean
+  color?: [number, number, number];
+  amplitude?: number;
+  distance?: number;
+  enableMouseInteraction?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,17 +19,17 @@ const props = withDefaults(defineProps<Props>(), {
   amplitude: 1,
   distance: 0,
   enableMouseInteraction: false
-})
+});
 
-const containerRef = ref<HTMLDivElement | null>(null)
+const containerRef = ref<HTMLDivElement | null>(null);
 
-let renderer: Renderer | null = null
-let gl: OGLRenderingContext | null = null
-let program: Program | null = null
-let mesh: Mesh | null = null
-let animationId: number | null = null
-let currentMouse = [0.5, 0.5]
-let targetMouse = [0.5, 0.5]
+let renderer: Renderer | null = null;
+let gl: OGLRenderingContext | null = null;
+let program: Program | null = null;
+let mesh: Mesh | null = null;
+let animationId: number | null = null;
+let currentMouse = [0.5, 0.5];
+let targetMouse = [0.5, 0.5];
 
 const vertexShader = `
 attribute vec2 position;
@@ -39,7 +39,7 @@ void main() {
   vUv = uv;
   gl_Position = vec4(position, 0.0, 1.0);
 }
-`
+`;
 
 const fragmentShader = `
 precision highp float;
@@ -146,145 +146,141 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 void main() {
     mainImage(gl_FragColor, gl_FragCoord.xy);
 }
-`
+`;
 
 const resize = () => {
-  if (!containerRef.value || !renderer || !program) return
+  if (!containerRef.value || !renderer || !program) return;
 
-  const container = containerRef.value
-  const { clientWidth, clientHeight } = container
-  renderer.setSize(clientWidth, clientHeight)
-  program.uniforms.iResolution.value.r = clientWidth
-  program.uniforms.iResolution.value.g = clientHeight
-  program.uniforms.iResolution.value.b = clientWidth / clientHeight
-}
+  const container = containerRef.value;
+  const { clientWidth, clientHeight } = container;
+  renderer.setSize(clientWidth, clientHeight);
+  program.uniforms.iResolution.value.r = clientWidth;
+  program.uniforms.iResolution.value.g = clientHeight;
+  program.uniforms.iResolution.value.b = clientWidth / clientHeight;
+};
 
 const handleMouseMove = (e: MouseEvent) => {
-  if (!containerRef.value) return
+  if (!containerRef.value) return;
 
-  const rect = containerRef.value.getBoundingClientRect()
-  const x = (e.clientX - rect.left) / rect.width
-  const y = 1.0 - (e.clientY - rect.top) / rect.height
-  targetMouse = [x, y]
-}
+  const rect = containerRef.value.getBoundingClientRect();
+  const x = (e.clientX - rect.left) / rect.width;
+  const y = 1.0 - (e.clientY - rect.top) / rect.height;
+  targetMouse = [x, y];
+};
 
 const handleMouseLeave = () => {
-  targetMouse = [0.5, 0.5]
-}
+  targetMouse = [0.5, 0.5];
+};
 
 const update = (t: number) => {
-  if (!program || !renderer || !mesh) return
+  if (!program || !renderer || !mesh) return;
 
   if (props.enableMouseInteraction) {
-    const smoothing = 0.05
-    currentMouse[0] += smoothing * (targetMouse[0] - currentMouse[0])
-    currentMouse[1] += smoothing * (targetMouse[1] - currentMouse[1])
-    program.uniforms.uMouse.value[0] = currentMouse[0]
-    program.uniforms.uMouse.value[1] = currentMouse[1]
+    const smoothing = 0.05;
+    currentMouse[0] += smoothing * (targetMouse[0] - currentMouse[0]);
+    currentMouse[1] += smoothing * (targetMouse[1] - currentMouse[1]);
+    program.uniforms.uMouse.value[0] = currentMouse[0];
+    program.uniforms.uMouse.value[1] = currentMouse[1];
   } else {
-    program.uniforms.uMouse.value[0] = 0.5
-    program.uniforms.uMouse.value[1] = 0.5
+    program.uniforms.uMouse.value[0] = 0.5;
+    program.uniforms.uMouse.value[1] = 0.5;
   }
 
-  program.uniforms.iTime.value = t * 0.001
-  renderer.render({ scene: mesh })
-  animationId = requestAnimationFrame(update)
-}
+  program.uniforms.iTime.value = t * 0.001;
+  renderer.render({ scene: mesh });
+  animationId = requestAnimationFrame(update);
+};
 
 const initializeScene = () => {
-  if (!containerRef.value) return
+  if (!containerRef.value) return;
 
-  cleanup()
+  cleanup();
 
-  const container = containerRef.value
-  renderer = new Renderer({ alpha: true })
-  gl = renderer.gl
-  gl.clearColor(0, 0, 0, 0)
-  gl.enable(gl.BLEND)
-  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+  const container = containerRef.value;
+  renderer = new Renderer({ alpha: true });
+  gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
-  const geometry = new Triangle(gl)
+  const geometry = new Triangle(gl);
   program = new Program(gl, {
     vertex: vertexShader,
     fragment: fragmentShader,
     uniforms: {
       iTime: { value: 0 },
       iResolution: {
-        value: new Color(
-          gl.canvas.width,
-          gl.canvas.height,
-          gl.canvas.width / gl.canvas.height
-        )
+        value: new Color(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
       },
       uColor: { value: new Color(...props.color) },
       uAmplitude: { value: props.amplitude },
       uDistance: { value: props.distance },
       uMouse: { value: new Float32Array([0.5, 0.5]) }
     }
-  })
+  });
 
-  mesh = new Mesh(gl, { geometry, program })
+  mesh = new Mesh(gl, { geometry, program });
 
-  const canvas = gl.canvas as HTMLCanvasElement
-  canvas.style.width = '100%'
-  canvas.style.height = '100%'
-  canvas.style.display = 'block'
+  const canvas = gl.canvas as HTMLCanvasElement;
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+  canvas.style.display = 'block';
 
-  container.appendChild(canvas)
+  container.appendChild(canvas);
 
-  window.addEventListener('resize', resize)
+  window.addEventListener('resize', resize);
   if (props.enableMouseInteraction) {
-    container.addEventListener('mousemove', handleMouseMove)
-    container.addEventListener('mouseleave', handleMouseLeave)
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
   }
 
-  resize()
-  animationId = requestAnimationFrame(update)
-}
+  resize();
+  animationId = requestAnimationFrame(update);
+};
 
 const cleanup = () => {
   if (animationId) {
-    cancelAnimationFrame(animationId)
-    animationId = null
+    cancelAnimationFrame(animationId);
+    animationId = null;
   }
 
-  window.removeEventListener('resize', resize)
+  window.removeEventListener('resize', resize);
 
   if (containerRef.value) {
-    containerRef.value.removeEventListener('mousemove', handleMouseMove)
-    containerRef.value.removeEventListener('mouseleave', handleMouseLeave)
+    containerRef.value.removeEventListener('mousemove', handleMouseMove);
+    containerRef.value.removeEventListener('mouseleave', handleMouseLeave);
 
-    const canvas = containerRef.value.querySelector('canvas')
+    const canvas = containerRef.value.querySelector('canvas');
     if (canvas) {
-      containerRef.value.removeChild(canvas)
+      containerRef.value.removeChild(canvas);
     }
   }
 
   if (gl) {
-    gl.getExtension('WEBGL_lose_context')?.loseContext()
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
   }
 
-  renderer = null
-  gl = null
-  program = null
-  mesh = null
-  currentMouse = [0.5, 0.5]
-  targetMouse = [0.5, 0.5]
-}
+  renderer = null;
+  gl = null;
+  program = null;
+  mesh = null;
+  currentMouse = [0.5, 0.5];
+  targetMouse = [0.5, 0.5];
+};
 
 onMounted(() => {
-  initializeScene()
-})
+  initializeScene();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
   [() => props.color, () => props.amplitude, () => props.distance, () => props.enableMouseInteraction],
   () => {
-    initializeScene()
+    initializeScene();
   },
   { deep: true }
-)
-</script>
\ No newline at end of file
+);
+</script>
diff --git a/src/content/Backgrounds/Waves/Waves.vue b/src/content/Backgrounds/Waves/Waves.vue
index 1e31cff..1a0e528 100644
--- a/src/content/Backgrounds/Waves/Waves.vue
+++ b/src/content/Backgrounds/Waves/Waves.vue
@@ -1,38 +1,46 @@
 <template>
-  <div ref="containerRef" :class="className" :style="{ backgroundColor, ...style }"
-    class="absolute top-0 left-0 w-full h-full overflow-hidden">
-    <div class="absolute top-0 left-0 bg-[#160000] rounded-full w-[0.5rem] h-[0.5rem]" :style="{
-      transform: 'translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0)',
-      willChange: 'transform',
-    }" />
+  <div
+    ref="containerRef"
+    :class="className"
+    :style="{ backgroundColor, ...style }"
+    class="absolute top-0 left-0 w-full h-full overflow-hidden"
+  >
+    <div
+      class="absolute top-0 left-0 bg-[#160000] rounded-full w-[0.5rem] h-[0.5rem]"
+      :style="{
+        transform: 'translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0)',
+        willChange: 'transform'
+      }"
+    />
+
     <canvas ref="canvasRef" class="block w-full h-full" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue'
+import { ref, onMounted, onUnmounted, watch, type CSSProperties } from 'vue';
 
 class Grad {
-  x: number
-  y: number
-  z: number
+  x: number;
+  y: number;
+  z: number;
 
   constructor(x: number, y: number, z: number) {
-    this.x = x
-    this.y = y
-    this.z = z
+    this.x = x;
+    this.y = y;
+    this.z = z;
   }
 
   dot2(x: number, y: number): number {
-    return this.x * x + this.y * y
+    return this.x * x + this.y * y;
   }
 }
 
 class Noise {
-  grad3: Grad[]
-  p: number[]
-  perm: number[]
-  gradP: Grad[]
+  grad3: Grad[];
+  p: number[];
+  perm: number[];
+  gradP: Grad[];
 
   constructor(seed = 0) {
     this.grad3 = [
@@ -47,122 +55,113 @@ class Noise {
       new Grad(0, 1, 1),
       new Grad(0, -1, 1),
       new Grad(0, 1, -1),
-      new Grad(0, -1, -1),
-    ]
+      new Grad(0, -1, -1)
+    ];
 
     this.p = [
-      151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225,
-      140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247,
-      120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177,
-      33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165,
-      71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211,
-      133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25,
-      63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196,
-      135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217,
-      226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206,
-      59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248,
-      152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22,
-      39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218,
-      246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241,
-      81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157,
-      184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93,
-      222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180,
-    ]
+      151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240,
+      21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88,
+      237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83,
+      111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216,
+      80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186,
+      3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58,
+      17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9,
+      129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193,
+      238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157,
+      184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128,
+      195, 78, 66, 215, 61, 156, 180
+    ];
 
-    this.perm = new Array(512)
-    this.gradP = new Array(512)
-    this.seed(seed)
+    this.perm = new Array(512);
+    this.gradP = new Array(512);
+    this.seed(seed);
   }
 
   seed(seed: number) {
-    if (seed > 0 && seed < 1) seed *= 65536
-    seed = Math.floor(seed)
-    if (seed < 256) seed |= seed << 8
+    if (seed > 0 && seed < 1) seed *= 65536;
+    seed = Math.floor(seed);
+    if (seed < 256) seed |= seed << 8;
 
     for (let i = 0; i < 256; i++) {
-      const v = i & 1 ? this.p[i] ^ (seed & 255) : this.p[i] ^ ((seed >> 8) & 255)
-      this.perm[i] = this.perm[i + 256] = v
-      this.gradP[i] = this.gradP[i + 256] = this.grad3[v % 12]
+      const v = i & 1 ? this.p[i] ^ (seed & 255) : this.p[i] ^ ((seed >> 8) & 255);
+      this.perm[i] = this.perm[i + 256] = v;
+      this.gradP[i] = this.gradP[i + 256] = this.grad3[v % 12];
     }
   }
 
   fade(t: number): number {
-    return t * t * t * (t * (t * 6 - 15) + 10)
+    return t * t * t * (t * (t * 6 - 15) + 10);
   }
 
   lerp(a: number, b: number, t: number): number {
-    return (1 - t) * a + t * b
+    return (1 - t) * a + t * b;
   }
 
   perlin2(x: number, y: number): number {
     let X = Math.floor(x),
-      Y = Math.floor(y)
-    x -= X
-    y -= Y
-    X &= 255
-    Y &= 255
+      Y = Math.floor(y);
+    x -= X;
+    y -= Y;
+    X &= 255;
+    Y &= 255;
 
-    const n00 = this.gradP[X + this.perm[Y]].dot2(x, y)
-    const n01 = this.gradP[X + this.perm[Y + 1]].dot2(x, y - 1)
-    const n10 = this.gradP[X + 1 + this.perm[Y]].dot2(x - 1, y)
-    const n11 = this.gradP[X + 1 + this.perm[Y + 1]].dot2(x - 1, y - 1)
-    const u = this.fade(x)
+    const n00 = this.gradP[X + this.perm[Y]].dot2(x, y);
+    const n01 = this.gradP[X + this.perm[Y + 1]].dot2(x, y - 1);
+    const n10 = this.gradP[X + 1 + this.perm[Y]].dot2(x - 1, y);
+    const n11 = this.gradP[X + 1 + this.perm[Y + 1]].dot2(x - 1, y - 1);
+    const u = this.fade(x);
 
-    return this.lerp(
-      this.lerp(n00, n10, u),
-      this.lerp(n01, n11, u),
-      this.fade(y)
-    )
+    return this.lerp(this.lerp(n00, n10, u), this.lerp(n01, n11, u), this.fade(y));
   }
 }
 
 interface Point {
-  x: number
-  y: number
-  wave: { x: number; y: number }
-  cursor: { x: number; y: number; vx: number; vy: number }
+  x: number;
+  y: number;
+  wave: { x: number; y: number };
+  cursor: { x: number; y: number; vx: number; vy: number };
 }
 
 interface Mouse {
-  x: number
-  y: number
-  lx: number
-  ly: number
-  sx: number
-  sy: number
-  v: number
-  vs: number
-  a: number
-  set: boolean
+  x: number;
+  y: number;
+  lx: number;
+  ly: number;
+  sx: number;
+  sy: number;
+  v: number;
+  vs: number;
+  a: number;
+  set: boolean;
 }
 
 interface Config {
-  lineColor: string
-  waveSpeedX: number
-  waveSpeedY: number
-  waveAmpX: number
-  waveAmpY: number
-  friction: number
-  tension: number
-  maxCursorMove: number
-  xGap: number
-  yGap: number
+  lineColor: string;
+  waveSpeedX: number;
+  waveSpeedY: number;
+  waveAmpX: number;
+  waveAmpY: number;
+  friction: number;
+  tension: number;
+  maxCursorMove: number;
+  xGap: number;
+  yGap: number;
 }
 
 interface WavesProps {
-  lineColor?: string
-  backgroundColor?: string
-  waveSpeedX?: number
-  waveSpeedY?: number
-  waveAmpX?: number
-  waveAmpY?: number
-  xGap?: number
-  yGap?: number
-  friction?: number
-  tension?: number
-  maxCursorMove?: number
-  style?: CSSProperties
-  className?: string
+  lineColor?: string;
+  backgroundColor?: string;
+  waveSpeedX?: number;
+  waveSpeedY?: number;
+  waveAmpX?: number;
+  waveAmpY?: number;
+  xGap?: number;
+  yGap?: number;
+  friction?: number;
+  tension?: number;
+  maxCursorMove?: number;
+  style?: CSSProperties;
+  className?: string;
 }
 
 const props = withDefaults(defineProps<WavesProps>(), {
@@ -179,15 +178,15 @@ const props = withDefaults(defineProps<WavesProps>(), {
   maxCursorMove: 100,
   style: () => ({}),
   className: ''
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
-const canvasRef = ref<HTMLCanvasElement>()
+const containerRef = ref<HTMLDivElement>();
+const canvasRef = ref<HTMLCanvasElement>();
 
-let ctx: CanvasRenderingContext2D | null = null
-let bounding = { width: 0, height: 0, left: 0, top: 0 }
-let noise: Noise | null = null
-let lines: Point[][] = []
+let ctx: CanvasRenderingContext2D | null = null;
+let bounding = { width: 0, height: 0, left: 0, top: 0 };
+let noise: Noise | null = null;
+let lines: Point[][] = [];
 const mouse: Mouse = {
   x: -10,
   y: 0,
@@ -198,8 +197,8 @@ const mouse: Mouse = {
   v: 0,
   vs: 0,
   a: 0,
-  set: false,
-}
+  set: false
+};
 let config: Config = {
   lineColor: props.lineColor,
   waveSpeedX: props.waveSpeedX,
@@ -210,207 +209,187 @@ let config: Config = {
   tension: props.tension,
   maxCursorMove: props.maxCursorMove,
   xGap: props.xGap,
-  yGap: props.yGap,
-}
-let frameId: number | null = null
+  yGap: props.yGap
+};
+let frameId: number | null = null;
 
 const setSize = () => {
-  const container = containerRef.value
-  const canvas = canvasRef.value
-  if (!container || !canvas) return
+  const container = containerRef.value;
+  const canvas = canvasRef.value;
+  if (!container || !canvas) return;
 
-  const rect = container.getBoundingClientRect()
+  const rect = container.getBoundingClientRect();
   bounding = {
     width: rect.width,
     height: rect.height,
     left: rect.left,
-    top: rect.top,
-  }
-  canvas.width = rect.width
-  canvas.height = rect.height
-}
+    top: rect.top
+  };
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+};
 
 const setLines = () => {
-  const { width, height } = bounding
-  lines = []
+  const { width, height } = bounding;
+  lines = [];
   const oWidth = width + 200,
-    oHeight = height + 30
-  const { xGap, yGap } = config
-  const totalLines = Math.ceil(oWidth / xGap)
-  const totalPoints = Math.ceil(oHeight / yGap)
-  const xStart = (width - xGap * totalLines) / 2
-  const yStart = (height - yGap * totalPoints) / 2
+    oHeight = height + 30;
+  const { xGap, yGap } = config;
+  const totalLines = Math.ceil(oWidth / xGap);
+  const totalPoints = Math.ceil(oHeight / yGap);
+  const xStart = (width - xGap * totalLines) / 2;
+  const yStart = (height - yGap * totalPoints) / 2;
 
   for (let i = 0; i <= totalLines; i++) {
-    const pts: Point[] = []
+    const pts: Point[] = [];
     for (let j = 0; j <= totalPoints; j++) {
       pts.push({
         x: xStart + xGap * i,
         y: yStart + yGap * j,
         wave: { x: 0, y: 0 },
-        cursor: { x: 0, y: 0, vx: 0, vy: 0 },
-      })
+        cursor: { x: 0, y: 0, vx: 0, vy: 0 }
+      });
     }
-    lines.push(pts)
+    lines.push(pts);
   }
-}
+};
 
 const movePoints = (time: number) => {
-  if (!noise) return
+  if (!noise) return;
 
-  const {
-    waveSpeedX,
-    waveSpeedY,
-    waveAmpX,
-    waveAmpY,
-    friction,
-    tension,
-    maxCursorMove,
-  } = config
+  const { waveSpeedX, waveSpeedY, waveAmpX, waveAmpY, friction, tension, maxCursorMove } = config;
 
-  lines.forEach((pts) => {
-    pts.forEach((p) => {
-      const move = noise!.perlin2(
-        (p.x + time * waveSpeedX) * 0.002,
-        (p.y + time * waveSpeedY) * 0.0015
-      ) * 12
-      p.wave.x = Math.cos(move) * waveAmpX
-      p.wave.y = Math.sin(move) * waveAmpY
+  lines.forEach(pts => {
+    pts.forEach(p => {
+      const move = noise!.perlin2((p.x + time * waveSpeedX) * 0.002, (p.y + time * waveSpeedY) * 0.0015) * 12;
+      p.wave.x = Math.cos(move) * waveAmpX;
+      p.wave.y = Math.sin(move) * waveAmpY;
 
       const dx = p.x - mouse.sx,
-        dy = p.y - mouse.sy
-      const dist = Math.hypot(dx, dy)
-      const l = Math.max(175, mouse.vs)
+        dy = p.y - mouse.sy;
+      const dist = Math.hypot(dx, dy);
+      const l = Math.max(175, mouse.vs);
       if (dist < l) {
-        const s = 1 - dist / l
-        const f = Math.cos(dist * 0.001) * s
-        p.cursor.vx += Math.cos(mouse.a) * f * l * mouse.vs * 0.00065
-        p.cursor.vy += Math.sin(mouse.a) * f * l * mouse.vs * 0.00065
+        const s = 1 - dist / l;
+        const f = Math.cos(dist * 0.001) * s;
+        p.cursor.vx += Math.cos(mouse.a) * f * l * mouse.vs * 0.00065;
+        p.cursor.vy += Math.sin(mouse.a) * f * l * mouse.vs * 0.00065;
       }
 
-      p.cursor.vx += (0 - p.cursor.x) * tension
-      p.cursor.vy += (0 - p.cursor.y) * tension
-      p.cursor.vx *= friction
-      p.cursor.vy *= friction
-      p.cursor.x += p.cursor.vx * 2
-      p.cursor.y += p.cursor.vy * 2
-      p.cursor.x = Math.min(
-        maxCursorMove,
-        Math.max(-maxCursorMove, p.cursor.x)
-      )
-      p.cursor.y = Math.min(
-        maxCursorMove,
-        Math.max(-maxCursorMove, p.cursor.y)
-      )
-    })
-  })
-}
+      p.cursor.vx += (0 - p.cursor.x) * tension;
+      p.cursor.vy += (0 - p.cursor.y) * tension;
+      p.cursor.vx *= friction;
+      p.cursor.vy *= friction;
+      p.cursor.x += p.cursor.vx * 2;
+      p.cursor.y += p.cursor.vy * 2;
+      p.cursor.x = Math.min(maxCursorMove, Math.max(-maxCursorMove, p.cursor.x));
+      p.cursor.y = Math.min(maxCursorMove, Math.max(-maxCursorMove, p.cursor.y));
+    });
+  });
+};
 
 const moved = (point: Point, withCursor = true): { x: number; y: number } => {
-  const x = point.x + point.wave.x + (withCursor ? point.cursor.x : 0)
-  const y = point.y + point.wave.y + (withCursor ? point.cursor.y : 0)
-  return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 }
-}
+  const x = point.x + point.wave.x + (withCursor ? point.cursor.x : 0);
+  const y = point.y + point.wave.y + (withCursor ? point.cursor.y : 0);
+  return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
+};
 
 const drawLines = () => {
-  const { width, height } = bounding
-  if (!ctx) return
+  const { width, height } = bounding;
+  if (!ctx) return;
 
-  ctx.clearRect(0, 0, width, height)
-  ctx.beginPath()
-  ctx.strokeStyle = config.lineColor
+  ctx.clearRect(0, 0, width, height);
+  ctx.beginPath();
+  ctx.strokeStyle = config.lineColor;
 
-  lines.forEach((points) => {
-    let p1 = moved(points[0], false)
-    ctx!.moveTo(p1.x, p1.y)
+  lines.forEach(points => {
+    let p1 = moved(points[0], false);
+    ctx!.moveTo(p1.x, p1.y);
     points.forEach((p, idx) => {
-      const isLast = idx === points.length - 1
-      p1 = moved(p, !isLast)
-      const p2 = moved(
-        points[idx + 1] || points[points.length - 1],
-        !isLast
-      )
-      ctx!.lineTo(p1.x, p1.y)
-      if (isLast) ctx!.moveTo(p2.x, p2.y)
-    })
-  })
-  ctx.stroke()
-}
+      const isLast = idx === points.length - 1;
+      p1 = moved(p, !isLast);
+      const p2 = moved(points[idx + 1] || points[points.length - 1], !isLast);
+      ctx!.lineTo(p1.x, p1.y);
+      if (isLast) ctx!.moveTo(p2.x, p2.y);
+    });
+  });
+  ctx.stroke();
+};
 
 const tick = (t: number) => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
-  mouse.sx += (mouse.x - mouse.sx) * 0.1
-  mouse.sy += (mouse.y - mouse.sy) * 0.1
+  mouse.sx += (mouse.x - mouse.sx) * 0.1;
+  mouse.sy += (mouse.y - mouse.sy) * 0.1;
   const dx = mouse.x - mouse.lx,
-    dy = mouse.y - mouse.ly
-  const d = Math.hypot(dx, dy)
-  mouse.v = d
-  mouse.vs += (d - mouse.vs) * 0.1
-  mouse.vs = Math.min(100, mouse.vs)
-  mouse.lx = mouse.x
-  mouse.ly = mouse.y
-  mouse.a = Math.atan2(dy, dx)
-  container.style.setProperty('--x', `${mouse.sx}px`)
-  container.style.setProperty('--y', `${mouse.sy}px`)
+    dy = mouse.y - mouse.ly;
+  const d = Math.hypot(dx, dy);
+  mouse.v = d;
+  mouse.vs += (d - mouse.vs) * 0.1;
+  mouse.vs = Math.min(100, mouse.vs);
+  mouse.lx = mouse.x;
+  mouse.ly = mouse.y;
+  mouse.a = Math.atan2(dy, dx);
+  container.style.setProperty('--x', `${mouse.sx}px`);
+  container.style.setProperty('--y', `${mouse.sy}px`);
 
-  movePoints(t)
-  drawLines()
-  frameId = requestAnimationFrame(tick)
-}
+  movePoints(t);
+  drawLines();
+  frameId = requestAnimationFrame(tick);
+};
 
 const onResize = () => {
-  setSize()
-  setLines()
-}
+  setSize();
+  setLines();
+};
 
 const updateMouse = (x: number, y: number) => {
-  mouse.x = x - bounding.left
-  mouse.y = y - bounding.top
+  mouse.x = x - bounding.left;
+  mouse.y = y - bounding.top;
   if (!mouse.set) {
-    mouse.sx = mouse.x
-    mouse.sy = mouse.y
-    mouse.lx = mouse.x
-    mouse.ly = mouse.y
-    mouse.set = true
+    mouse.sx = mouse.x;
+    mouse.sy = mouse.y;
+    mouse.lx = mouse.x;
+    mouse.ly = mouse.y;
+    mouse.set = true;
   }
-}
+};
 
 const onMouseMove = (e: MouseEvent) => {
-  updateMouse(e.clientX, e.clientY)
-}
+  updateMouse(e.clientX, e.clientY);
+};
 
 const onTouchMove = (e: TouchEvent) => {
-  const touch = e.touches[0]
-  updateMouse(touch.clientX, touch.clientY)
-}
+  const touch = e.touches[0];
+  updateMouse(touch.clientX, touch.clientY);
+};
 
 onMounted(() => {
-  const canvas = canvasRef.value
-  const container = containerRef.value
-  if (!canvas || !container) return
+  const canvas = canvasRef.value;
+  const container = containerRef.value;
+  if (!canvas || !container) return;
 
-  ctx = canvas.getContext('2d')
-  noise = new Noise(Math.random())
+  ctx = canvas.getContext('2d');
+  noise = new Noise(Math.random());
 
-  setSize()
-  setLines()
-  frameId = requestAnimationFrame(tick)
+  setSize();
+  setLines();
+  frameId = requestAnimationFrame(tick);
 
-  window.addEventListener('resize', onResize)
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('touchmove', onTouchMove, { passive: false })
-})
+  window.addEventListener('resize', onResize);
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('touchmove', onTouchMove, { passive: false });
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', onResize)
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('touchmove', onTouchMove)
+  window.removeEventListener('resize', onResize);
+  window.removeEventListener('mousemove', onMouseMove);
+  window.removeEventListener('touchmove', onTouchMove);
   if (frameId !== null) {
-    cancelAnimationFrame(frameId)
+    cancelAnimationFrame(frameId);
   }
-})
+});
 
 watch(
   () => [
@@ -423,7 +402,7 @@ watch(
     props.tension,
     props.maxCursorMove,
     props.xGap,
-    props.yGap,
+    props.yGap
   ],
   () => {
     config = {
@@ -436,8 +415,8 @@ watch(
       tension: props.tension,
       maxCursorMove: props.maxCursorMove,
       xGap: props.xGap,
-      yGap: props.yGap,
-    }
+      yGap: props.yGap
+    };
   }
-)
+);
 </script>
diff --git a/src/content/Components/CardSwap/CardSwap.vue b/src/content/Components/CardSwap/CardSwap.vue
index 97923db..fbc5dc2 100644
--- a/src/content/Components/CardSwap/CardSwap.vue
+++ b/src/content/Components/CardSwap/CardSwap.vue
@@ -2,14 +2,20 @@
   <div
     ref="containerRef"
     class="card-swap-container absolute bottom-0 right-0 transform translate-x-[5%] translate-y-[20%] origin-bottom-right perspective-[900px] overflow-visible max-[768px]:translate-x-[25%] max-[768px]:translate-y-[25%] max-[768px]:scale-[0.75] max-[480px]:translate-x-[25%] max-[480px]:translate-y-[25%] max-[480px]:scale-[0.55]"
-    :style="{ width: typeof width === 'number' ? `${width}px` : width, height: typeof height === 'number' ? `${height}px` : height }"
+    :style="{
+      width: typeof width === 'number' ? `${width}px` : width,
+      height: typeof height === 'number' ? `${height}px` : height
+    }"
   >
     <div
       v-for="(_, index) in 3"
       :key="index"
       ref="cardRefs"
       class="card-swap-card absolute top-1/2 left-1/2 rounded-xl border border-white bg-black [transform-style:preserve-3d] [will-change:transform] [backface-visibility:hidden]"
-      :style="{ width: typeof width === 'number' ? `${width}px` : width, height: typeof height === 'number' ? `${height}px` : height }"
+      :style="{
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height
+      }"
       @click="handleCardClick(index)"
     >
       <slot :name="`card-${index}`" :index="index" />
@@ -18,38 +24,33 @@
 </template>
 
 <script lang="ts">
-import gsap from 'gsap'
+import gsap from 'gsap';
 
 export interface CardSwapProps {
-  width?: number | string
-  height?: number | string
-  cardDistance?: number
-  verticalDistance?: number
-  delay?: number
-  pauseOnHover?: boolean
-  onCardClick?: (idx: number) => void
-  skewAmount?: number
-  easing?: 'linear' | 'elastic'
+  width?: number | string;
+  height?: number | string;
+  cardDistance?: number;
+  verticalDistance?: number;
+  delay?: number;
+  pauseOnHover?: boolean;
+  onCardClick?: (idx: number) => void;
+  skewAmount?: number;
+  easing?: 'linear' | 'elastic';
 }
 
 interface Slot {
-  x: number
-  y: number
-  z: number
-  zIndex: number
+  x: number;
+  y: number;
+  z: number;
+  zIndex: number;
 }
 
-const makeSlot = (
-  i: number,
-  distX: number,
-  distY: number,
-  total: number
-): Slot => ({
+const makeSlot = (i: number, distX: number, distY: number, total: number): Slot => ({
   x: i * distX,
   y: -i * distY,
   z: -i * distX * 1.5,
-  zIndex: total - i,
-})
+  zIndex: total - i
+});
 
 const placeNow = (el: HTMLElement, slot: Slot, skew: number) => {
   gsap.set(el, {
@@ -61,15 +62,15 @@ const placeNow = (el: HTMLElement, slot: Slot, skew: number) => {
     skewY: skew,
     transformOrigin: 'center center',
     zIndex: slot.zIndex,
-    force3D: true,
-  })
-}
+    force3D: true
+  });
+};
 
-export { makeSlot, placeNow }
+export { makeSlot, placeNow };
 </script>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
 
 const props = withDefaults(defineProps<CardSwapProps>(), {
   width: 500,
@@ -79,23 +80,23 @@ const props = withDefaults(defineProps<CardSwapProps>(), {
   delay: 5000,
   pauseOnHover: false,
   skewAmount: 6,
-  easing: 'elastic',
-})
+  easing: 'elastic'
+});
 
 const emit = defineEmits<{
-  'card-click': [index: number]
-}>()
+  'card-click': [index: number];
+}>();
 
-const containerRef = ref<HTMLDivElement>()
-const cardRefs = ref<HTMLElement[]>([])
-const order = ref<number[]>([0, 1, 2])
-const tlRef = ref<gsap.core.Timeline | null>(null)
-const intervalRef = ref<number>()
+const containerRef = ref<HTMLDivElement>();
+const cardRefs = ref<HTMLElement[]>([]);
+const order = ref<number[]>([0, 1, 2]);
+const tlRef = ref<gsap.core.Timeline | null>(null);
+const intervalRef = ref<number>();
 
 const handleCardClick = (index: number) => {
-  emit('card-click', index)
-  props.onCardClick?.(index)
-}
+  emit('card-click', index);
+  props.onCardClick?.(index);
+};
 
 const config = computed(() => {
   return props.easing === 'elastic'
@@ -105,7 +106,7 @@ const config = computed(() => {
         durMove: 2,
         durReturn: 2,
         promoteOverlap: 0.9,
-        returnDelay: 0.05,
+        returnDelay: 0.05
       }
     : {
         ease: 'power1.inOut',
@@ -113,63 +114,63 @@ const config = computed(() => {
         durMove: 0.8,
         durReturn: 0.8,
         promoteOverlap: 0.45,
-        returnDelay: 0.2,
-      }
-})
+        returnDelay: 0.2
+      };
+});
 
 const initializeCards = () => {
-  if (!cardRefs.value.length) return
-  
-  const total = cardRefs.value.length
-  
+  if (!cardRefs.value.length) return;
+
+  const total = cardRefs.value.length;
+
   cardRefs.value.forEach((el, i) => {
     if (el) {
-      placeNow(el, makeSlot(i, props.cardDistance, props.verticalDistance, total), props.skewAmount)
+      placeNow(el, makeSlot(i, props.cardDistance, props.verticalDistance, total), props.skewAmount);
     }
-  })
-}
+  });
+};
 
 const updateCardPositions = () => {
-  if (!cardRefs.value.length) return
-  
-  const total = cardRefs.value.length
-  
+  if (!cardRefs.value.length) return;
+
+  const total = cardRefs.value.length;
+
   cardRefs.value.forEach((el, i) => {
     if (el) {
-      const slot = makeSlot(i, props.cardDistance, props.verticalDistance, total)
+      const slot = makeSlot(i, props.cardDistance, props.verticalDistance, total);
       gsap.set(el, {
         x: slot.x,
         y: slot.y,
         z: slot.z,
-        skewY: props.skewAmount,
-      })
+        skewY: props.skewAmount
+      });
     }
-  })
-}
+  });
+};
 
 const swap = () => {
-  if (order.value.length < 2) return
+  if (order.value.length < 2) return;
 
-  const [front, ...rest] = order.value
-  const elFront = cardRefs.value[front]
-  if (!elFront) return
+  const [front, ...rest] = order.value;
+  const elFront = cardRefs.value[front];
+  if (!elFront) return;
 
-  const tl = gsap.timeline()
-  tlRef.value = tl
+  const tl = gsap.timeline();
+  tlRef.value = tl;
 
   tl.to(elFront, {
     y: '+=500',
     duration: config.value.durDrop,
-    ease: config.value.ease,
-  })
+    ease: config.value.ease
+  });
 
-  tl.addLabel('promote', `-=${config.value.durDrop * config.value.promoteOverlap}`)
+  tl.addLabel('promote', `-=${config.value.durDrop * config.value.promoteOverlap}`);
   rest.forEach((idx, i) => {
-    const el = cardRefs.value[idx]
-    if (!el) return
-    
-    const slot = makeSlot(i, props.cardDistance, props.verticalDistance, cardRefs.value.length)
-    tl.set(el, { zIndex: slot.zIndex }, 'promote')
+    const el = cardRefs.value[idx];
+    if (!el) return;
+
+    const slot = makeSlot(i, props.cardDistance, props.verticalDistance, cardRefs.value.length);
+    tl.set(el, { zIndex: slot.zIndex }, 'promote');
     tl.to(
       el,
       {
@@ -177,114 +178,114 @@ const swap = () => {
         y: slot.y,
         z: slot.z,
         duration: config.value.durMove,
-        ease: config.value.ease,
+        ease: config.value.ease
       },
       `promote+=${i * 0.15}`
-    )
-  })
+    );
+  });
 
   const backSlot = makeSlot(
     cardRefs.value.length - 1,
     props.cardDistance,
     props.verticalDistance,
     cardRefs.value.length
-  )
-  tl.addLabel('return', `promote+=${config.value.durMove * config.value.returnDelay}`)
+  );
+  tl.addLabel('return', `promote+=${config.value.durMove * config.value.returnDelay}`);
   tl.call(
     () => {
-      gsap.set(elFront, { zIndex: backSlot.zIndex })
+      gsap.set(elFront, { zIndex: backSlot.zIndex });
     },
     undefined,
     'return'
-  )
-  tl.set(elFront, { x: backSlot.x, z: backSlot.z }, 'return')
+  );
+  tl.set(elFront, { x: backSlot.x, z: backSlot.z }, 'return');
   tl.to(
     elFront,
     {
       y: backSlot.y,
       duration: config.value.durReturn,
-      ease: config.value.ease,
+      ease: config.value.ease
     },
     'return'
-  )
+  );
 
   tl.call(() => {
-    order.value = [...rest, front]
-  })
-}
+    order.value = [...rest, front];
+  });
+};
 
 const startAnimation = () => {
-  stopAnimation()
-  swap()
-  intervalRef.value = window.setInterval(swap, props.delay)
-}
+  stopAnimation();
+  swap();
+  intervalRef.value = window.setInterval(swap, props.delay);
+};
 
 const stopAnimation = () => {
-  tlRef.value?.kill()
+  tlRef.value?.kill();
   if (intervalRef.value) {
-    clearInterval(intervalRef.value)
+    clearInterval(intervalRef.value);
   }
-}
+};
 
 const resumeAnimation = () => {
-  tlRef.value?.play()
-  intervalRef.value = window.setInterval(swap, props.delay)
-}
+  tlRef.value?.play();
+  intervalRef.value = window.setInterval(swap, props.delay);
+};
 
 const setupHoverListeners = () => {
   if (props.pauseOnHover && containerRef.value) {
-    containerRef.value.addEventListener('mouseenter', stopAnimation)
-    containerRef.value.addEventListener('mouseleave', resumeAnimation)
+    containerRef.value.addEventListener('mouseenter', stopAnimation);
+    containerRef.value.addEventListener('mouseleave', resumeAnimation);
   }
-}
+};
 
 const removeHoverListeners = () => {
   if (containerRef.value) {
-    containerRef.value.removeEventListener('mouseenter', stopAnimation)
-    containerRef.value.removeEventListener('mouseleave', resumeAnimation)
+    containerRef.value.removeEventListener('mouseenter', stopAnimation);
+    containerRef.value.removeEventListener('mouseleave', resumeAnimation);
   }
-}
+};
 
 watch(
   () => [props.cardDistance, props.verticalDistance, props.skewAmount],
   () => {
-    updateCardPositions()
+    updateCardPositions();
   }
-)
+);
 
 watch(
   () => props.delay,
   () => {
     if (intervalRef.value) {
-      clearInterval(intervalRef.value)
-      intervalRef.value = window.setInterval(swap, props.delay)
+      clearInterval(intervalRef.value);
+      intervalRef.value = window.setInterval(swap, props.delay);
     }
   }
-)
+);
 
 watch(
   () => props.pauseOnHover,
   () => {
-    removeHoverListeners()
-    setupHoverListeners()
+    removeHoverListeners();
+    setupHoverListeners();
   }
-)
+);
 
 watch(
   () => props.easing,
   () => {}
-)
+);
 
 onMounted(() => {
   nextTick(() => {
-    initializeCards()
-    startAnimation()
-    setupHoverListeners()
-  })
-})
+    initializeCards();
+    startAnimation();
+    setupHoverListeners();
+  });
+});
 
 onUnmounted(() => {
-  stopAnimation()
-  removeHoverListeners()
-})
+  stopAnimation();
+  removeHoverListeners();
+});
 </script>
diff --git a/src/content/Components/Carousel/Carousel.vue b/src/content/Components/Carousel/Carousel.vue
index dbb9697..21d5072 100644
--- a/src/content/Components/Carousel/Carousel.vue
+++ b/src/content/Components/Carousel/Carousel.vue
@@ -1,62 +1,86 @@
 <template>
-  <div ref="containerRef" :class="[
-    'relative overflow-hidden p-4',
-    round
-      ? 'rounded-full border border-[#333]'
-      : 'rounded-[24px] border border-[#333]'
-  ]" :style="{
-    width: `${baseWidth}px`,
-    ...(round && { height: `${baseWidth}px` }),
-  }">
-    <Motion tag="div" class="flex" drag="x" :dragConstraints="dragConstraints" :style="{
-      width: itemWidth + 'px',
-      gap: `${GAP}px`,
-      perspective: 1000,
-      perspectiveOrigin: `${currentIndex * trackItemOffset + itemWidth / 2}px 50%`,
-      x: motionX,
-    }" @dragEnd="handleDragEnd" :animate="{ x: -(currentIndex * trackItemOffset) }" :transition="effectiveTransition"
-      @animationComplete="handleAnimationComplete">
-      <Motion v-for="(item, index) in carouselItems" :key="index" tag="div" :class="[
-        'relative shrink-0 flex flex-col overflow-hidden cursor-grab active:cursor-grabbing',
-        round
-          ? 'items-center justify-center text-center bg-[#111] border border-[#333] rounded-full'
-          : 'items-start justify-between bg-[#111] border border-[#333] rounded-[12px]'
-      ]" :style="{
+  <div
+    ref="containerRef"
+    :class="[
+      'relative overflow-hidden p-4',
+      round ? 'rounded-full border border-[#333]' : 'rounded-[24px] border border-[#333]'
+    ]"
+    :style="{
+      width: `${baseWidth}px`,
+      ...(round && { height: `${baseWidth}px` })
+    }"
+  >
+    <Motion
+      tag="div"
+      class="flex"
+      drag="x"
+      :dragConstraints="dragConstraints"
+      :style="{
         width: itemWidth + 'px',
-        height: round ? itemWidth + 'px' : '100%',
-        rotateY: getRotateY(index),
-        ...(round && { borderRadius: '50%' }),
-      }" :transition="effectiveTransition">
+        gap: `${GAP}px`,
+        perspective: 1000,
+        perspectiveOrigin: `${currentIndex * trackItemOffset + itemWidth / 2}px 50%`,
+        x: motionX
+      }"
+      @dragEnd="handleDragEnd"
+      :animate="{ x: -(currentIndex * trackItemOffset) }"
+      :transition="effectiveTransition"
+      @animationComplete="handleAnimationComplete"
+    >
+      <Motion
+        v-for="(item, index) in carouselItems"
+        :key="index"
+        tag="div"
+        :class="[
+          'relative shrink-0 flex flex-col overflow-hidden cursor-grab active:cursor-grabbing',
+          round
+            ? 'items-center justify-center text-center bg-[#111] border border-[#333] rounded-full'
+            : 'items-start justify-between bg-[#111] border border-[#333] rounded-[12px]'
+        ]"
+        :style="{
+          width: itemWidth + 'px',
+          height: round ? itemWidth + 'px' : '100%',
+          rotateY: getRotateY(index),
+          ...(round && { borderRadius: '50%' })
+        }"
+        :transition="effectiveTransition"
+      >
         <div :class="round ? 'p-0 m-0' : 'mb-4 p-5'">
           <span class="flex h-[28px] w-[28px] items-center justify-center rounded-full bg-[#060010]">
             <i :class="item.icon" class="text-white text-base"></i>
           </span>
         </div>
+
         <div class="p-5">
-          <div class="mb-1 font-black text-lg text-white">
-            {{ item.title }}
-          </div>
+          <div class="mb-1 font-black text-lg text-white">{{ item.title }}</div>
+
           <p class="text-sm text-white">{{ item.description }}</p>
         </div>
       </Motion>
     </Motion>
-    <div :class="[
-      'flex w-full justify-center',
-      round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : ''
-    ]">
+
+    <div :class="['flex w-full justify-center', round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : '']">
       <div class="mt-4 flex w-[150px] justify-between px-8">
-        <Motion v-for="(_, index) in items" :key="index" tag="div" :class="[
-          'h-2 w-2 rounded-full cursor-pointer transition-colors duration-150',
-          currentIndex % items.length === index
-            ? round
-              ? 'bg-white'
-              : 'bg-[#333333]'
-            : round
-              ? 'bg-[#555]'
-              : 'bg-[rgba(51,51,51,0.4)]'
-        ]" :animate="{
-          scale: currentIndex % items.length === index ? 1.2 : 1,
-        }" @click="() => setCurrentIndex(index)" :transition="{ duration: 0.15 }" />
+        <Motion
+          v-for="(_, index) in items"
+          :key="index"
+          tag="div"
+          :class="[
+            'h-2 w-2 rounded-full cursor-pointer transition-colors duration-150',
+            currentIndex % items.length === index
+              ? round
+                ? 'bg-white'
+                : 'bg-[#333333]'
+              : round
+                ? 'bg-[#555]'
+                : 'bg-[rgba(51,51,51,0.4)]'
+          ]"
+          :animate="{
+            scale: currentIndex % items.length === index ? 1.2 : 1
+          }"
+          @click="() => setCurrentIndex(index)"
+          :transition="{ duration: 0.15 }"
+        />
       </div>
     </div>
   </div>
@@ -64,64 +88,64 @@
 
 <script lang="ts">
 export interface CarouselItem {
-  title: string
-  description: string
-  id: number
-  icon: string
+  title: string;
+  description: string;
+  id: number;
+  icon: string;
 }
 
 export interface CarouselProps {
-  items?: CarouselItem[]
-  baseWidth?: number
-  autoplay?: boolean
-  autoplayDelay?: number
-  pauseOnHover?: boolean
-  loop?: boolean
-  round?: boolean
+  items?: CarouselItem[];
+  baseWidth?: number;
+  autoplay?: boolean;
+  autoplayDelay?: number;
+  pauseOnHover?: boolean;
+  loop?: boolean;
+  round?: boolean;
 }
 
 export const DEFAULT_ITEMS: CarouselItem[] = [
   {
-    title: "Text Animations",
-    description: "Cool text animations for your projects.",
+    title: 'Text Animations',
+    description: 'Cool text animations for your projects.',
     id: 1,
-    icon: "pi pi-file",
+    icon: 'pi pi-file'
   },
   {
-    title: "Animations",
-    description: "Smooth animations for your projects.",
+    title: 'Animations',
+    description: 'Smooth animations for your projects.',
     id: 2,
-    icon: "pi pi-circle",
+    icon: 'pi pi-circle'
   },
   {
-    title: "Components",
-    description: "Reusable components for your projects.",
+    title: 'Components',
+    description: 'Reusable components for your projects.',
     id: 3,
-    icon: "pi pi-objects-column",
+    icon: 'pi pi-objects-column'
   },
   {
-    title: "Backgrounds",
-    description: "Beautiful backgrounds and patterns for your projects.",
+    title: 'Backgrounds',
+    description: 'Beautiful backgrounds and patterns for your projects.',
     id: 4,
-    icon: "pi pi-table",
+    icon: 'pi pi-table'
   },
   {
-    title: "Common UI",
-    description: "Common UI components are coming soon!",
+    title: 'Common UI',
+    description: 'Common UI components are coming soon!',
     id: 5,
-    icon: "pi pi-code",
-  },
-]
+    icon: 'pi pi-code'
+  }
+];
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import { Motion, useMotionValue, useTransform } from 'motion-v'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { Motion, useMotionValue, useTransform } from 'motion-v';
 
-const DRAG_BUFFER = 0
-const VELOCITY_THRESHOLD = 500
-const GAP = 16
-const SPRING_OPTIONS = { type: "spring" as const, stiffness: 300, damping: 30 }
+const DRAG_BUFFER = 0;
+const VELOCITY_THRESHOLD = 500;
+const GAP = 16;
+const SPRING_OPTIONS = { type: 'spring' as const, stiffness: 300, damping: 30 };
 
 const props = withDefaults(defineProps<CarouselProps>(), {
   items: () => DEFAULT_ITEMS,
@@ -130,148 +154,154 @@ const props = withDefaults(defineProps<CarouselProps>(), {
   autoplayDelay: 3000,
   pauseOnHover: false,
   loop: false,
-  round: false,
-})
+  round: false
+});
 
-const containerPadding = 16
-const itemWidth = computed(() => props.baseWidth - containerPadding * 2)
-const trackItemOffset = computed(() => itemWidth.value + GAP)
+const containerPadding = 16;
+const itemWidth = computed(() => props.baseWidth - containerPadding * 2);
+const trackItemOffset = computed(() => itemWidth.value + GAP);
 
-const carouselItems = computed(() => props.loop ? [...props.items, props.items[0]] : props.items)
-const currentIndex = ref<number>(0)
-const motionX = useMotionValue(0)
-const isHovered = ref<boolean>(false)
-const isResetting = ref<boolean>(false)
+const carouselItems = computed(() => (props.loop ? [...props.items, props.items[0]] : props.items));
+const currentIndex = ref<number>(0);
+const motionX = useMotionValue(0);
+const isHovered = ref<boolean>(false);
+const isResetting = ref<boolean>(false);
 
-const containerRef = ref<HTMLDivElement>()
-let autoplayTimer: number | null = null
+const containerRef = ref<HTMLDivElement>();
+let autoplayTimer: number | null = null;
 
 const dragConstraints = computed(() => {
   return props.loop
     ? {}
     : {
-      left: -trackItemOffset.value * (carouselItems.value.length - 1),
-      right: 0,
-    }
-})
+        left: -trackItemOffset.value * (carouselItems.value.length - 1),
+        right: 0
+      };
+});
 
-const effectiveTransition = computed(() =>
-  isResetting.value ? { duration: 0 } : SPRING_OPTIONS
-)
+const effectiveTransition = computed(() => (isResetting.value ? { duration: 0 } : SPRING_OPTIONS));
 
-const maxItems = Math.max(props.items.length + 1, 10)
+const maxItems = Math.max(props.items.length + 1, 10);
 const rotateYTransforms = Array.from({ length: maxItems }, (_, index) => {
   const range = computed(() => [
     -(index + 1) * trackItemOffset.value,
     -index * trackItemOffset.value,
-    -(index - 1) * trackItemOffset.value,
-  ])
-  const outputRange = [90, 0, -90]
-  return useTransform(motionX, range, outputRange, { clamp: false })
-})
+    -(index - 1) * trackItemOffset.value
+  ]);
+  const outputRange = [90, 0, -90];
+  return useTransform(motionX, range, outputRange, { clamp: false });
+});
 
 const getRotateY = (index: number) => {
-  return rotateYTransforms[index] || rotateYTransforms[0]
-}
+  return rotateYTransforms[index] || rotateYTransforms[0];
+};
 
 const setCurrentIndex = (index: number) => {
-  currentIndex.value = index
-}
+  currentIndex.value = index;
+};
 
 const handleAnimationComplete = () => {
   if (props.loop && currentIndex.value === carouselItems.value.length - 1) {
-    isResetting.value = true
-    motionX.set(0)
-    currentIndex.value = 0
+    isResetting.value = true;
+    motionX.set(0);
+    currentIndex.value = 0;
     setTimeout(() => {
-      isResetting.value = false
-    }, 50)
+      isResetting.value = false;
+    }, 50);
   }
-}
+};
 
 interface DragInfo {
-  offset: { x: number; y: number }
-  velocity: { x: number; y: number }
+  offset: { x: number; y: number };
+  velocity: { x: number; y: number };
 }
 
 const handleDragEnd = (event: Event, info: DragInfo) => {
-  const offset = info.offset.x
-  const velocity = info.velocity.x
+  const offset = info.offset.x;
+  const velocity = info.velocity.x;
 
   if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {
     if (props.loop && currentIndex.value === props.items.length - 1) {
-      currentIndex.value = currentIndex.value + 1
+      currentIndex.value = currentIndex.value + 1;
     } else {
-      currentIndex.value = Math.min(currentIndex.value + 1, carouselItems.value.length - 1)
+      currentIndex.value = Math.min(currentIndex.value + 1, carouselItems.value.length - 1);
     }
   } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {
     if (props.loop && currentIndex.value === 0) {
-      currentIndex.value = props.items.length - 1
+      currentIndex.value = props.items.length - 1;
     } else {
-      currentIndex.value = Math.max(currentIndex.value - 1, 0)
+      currentIndex.value = Math.max(currentIndex.value - 1, 0);
     }
   }
-}
+};
 
 const startAutoplay = () => {
   if (props.autoplay && (!props.pauseOnHover || !isHovered.value)) {
     autoplayTimer = window.setInterval(() => {
       currentIndex.value = (() => {
-        const prev = currentIndex.value
+        const prev = currentIndex.value;
         if (prev === props.items.length - 1 && props.loop) {
-          return prev + 1
+          return prev + 1;
         }
         if (prev === carouselItems.value.length - 1) {
-          return props.loop ? 0 : prev
+          return props.loop ? 0 : prev;
         }
-        return prev + 1
-      })()
-    }, props.autoplayDelay)
+        return prev + 1;
+      })();
+    }, props.autoplayDelay);
   }
-}
+};
 
 const stopAutoplay = () => {
   if (autoplayTimer) {
-    clearInterval(autoplayTimer)
-    autoplayTimer = null
+    clearInterval(autoplayTimer);
+    autoplayTimer = null;
   }
-}
+};
 
 const handleMouseEnter = () => {
-  isHovered.value = true
+  isHovered.value = true;
   if (props.pauseOnHover) {
-    stopAutoplay()
+    stopAutoplay();
   }
-}
+};
 
 const handleMouseLeave = () => {
-  isHovered.value = false
+  isHovered.value = false;
   if (props.pauseOnHover) {
-    startAutoplay()
+    startAutoplay();
   }
-}
+};
 
 watch(
-  [() => props.autoplay, () => props.autoplayDelay, isHovered, () => props.loop, () => props.items.length, () => carouselItems.value.length, () => props.pauseOnHover],
+  [
+    () => props.autoplay,
+    () => props.autoplayDelay,
+    isHovered,
+    () => props.loop,
+    () => props.items.length,
+    () => carouselItems.value.length,
+    () => props.pauseOnHover
+  ],
   () => {
-    stopAutoplay()
-    startAutoplay()
+    stopAutoplay();
+    startAutoplay();
   }
-)
+);
 
 onMounted(() => {
   if (props.pauseOnHover && containerRef.value) {
-    containerRef.value.addEventListener('mouseenter', handleMouseEnter)
-    containerRef.value.addEventListener('mouseleave', handleMouseLeave)
+    containerRef.value.addEventListener('mouseenter', handleMouseEnter);
+    containerRef.value.addEventListener('mouseleave', handleMouseLeave);
   }
-  startAutoplay()
-})
+  startAutoplay();
+});
 
 onUnmounted(() => {
   if (containerRef.value) {
-    containerRef.value.removeEventListener('mouseenter', handleMouseEnter)
-    containerRef.value.removeEventListener('mouseleave', handleMouseLeave)
+    containerRef.value.removeEventListener('mouseenter', handleMouseEnter);
+    containerRef.value.removeEventListener('mouseleave', handleMouseLeave);
   }
-  stopAutoplay()
-})
-</script>
\ No newline at end of file
+  stopAutoplay();
+});
+</script>
diff --git a/src/content/Components/CircularGallery/CircularGallery.vue b/src/content/Components/CircularGallery/CircularGallery.vue
index 66be81e..10f12e7 100644
--- a/src/content/Components/CircularGallery/CircularGallery.vue
+++ b/src/content/Components/CircularGallery/CircularGallery.vue
@@ -3,17 +3,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl';
 
 interface CircularGalleryProps {
-  items?: { image: string; text: string }[]
-  bend?: number
-  textColor?: string
-  borderRadius?: number
-  font?: string
-  scrollSpeed?: number
-  scrollEase?: number
+  items?: { image: string; text: string }[];
+  bend?: number;
+  textColor?: string;
+  borderRadius?: number;
+  font?: string;
+  scrollSpeed?: number;
+  scrollEase?: number;
 }
 
 const props = withDefaults(defineProps<CircularGalleryProps>(), {
@@ -23,38 +23,38 @@ const props = withDefaults(defineProps<CircularGalleryProps>(), {
   font: 'bold 30px Figtree',
   scrollSpeed: 2,
   scrollEase: 0.05
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
-let app: App | null = null
+const containerRef = ref<HTMLDivElement>();
+let app: App | null = null;
 
-type GL = Renderer['gl']
+type GL = Renderer['gl'];
 
 function debounce<T extends (...args: unknown[]) => void>(func: T, wait: number) {
-  let timeout: number
+  let timeout: number;
   return function (this: unknown, ...args: Parameters<T>) {
-    window.clearTimeout(timeout)
-    timeout = window.setTimeout(() => func.apply(this, args), wait)
-  }
+    window.clearTimeout(timeout);
+    timeout = window.setTimeout(() => func.apply(this, args), wait);
+  };
 }
 
 function lerp(p1: number, p2: number, t: number): number {
-  return p1 + (p2 - p1) * t
+  return p1 + (p2 - p1) * t;
 }
 
 function autoBind(instance: Record<string, unknown>): void {
-  const proto = Object.getPrototypeOf(instance)
-  Object.getOwnPropertyNames(proto).forEach((key) => {
+  const proto = Object.getPrototypeOf(instance);
+  Object.getOwnPropertyNames(proto).forEach(key => {
     if (key !== 'constructor' && typeof instance[key] === 'function') {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      instance[key] = (instance[key] as any).bind(instance)
+      instance[key] = (instance[key] as any).bind(instance);
     }
-  })
+  });
 }
 
 function getFontSize(font: string): number {
-  const match = font.match(/(\d+)px/)
-  return match ? parseInt(match[1], 10) : 30
+  const match = font.match(/(\d+)px/);
+  return match ? parseInt(match[1], 10) : 30;
 }
 
 function createTextTexture(
@@ -63,64 +63,64 @@ function createTextTexture(
   font: string = 'bold 30px monospace',
   color: string = 'black'
 ): { texture: Texture; width: number; height: number } {
-  const canvas = document.createElement('canvas')
-  const context = canvas.getContext('2d')
-  if (!context) throw new Error('Could not get 2d context')
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) throw new Error('Could not get 2d context');
 
-  context.font = font
-  const metrics = context.measureText(text)
-  const textWidth = Math.ceil(metrics.width)
-  const fontSize = getFontSize(font)
-  const textHeight = Math.ceil(fontSize * 1.2)
+  context.font = font;
+  const metrics = context.measureText(text);
+  const textWidth = Math.ceil(metrics.width);
+  const fontSize = getFontSize(font);
+  const textHeight = Math.ceil(fontSize * 1.2);
 
-  canvas.width = textWidth + 20
-  canvas.height = textHeight + 20
+  canvas.width = textWidth + 20;
+  canvas.height = textHeight + 20;
 
-  context.font = font
-  context.fillStyle = color
-  context.textBaseline = 'middle'
-  context.textAlign = 'center'
-  context.clearRect(0, 0, canvas.width, canvas.height)
-  context.fillText(text, canvas.width / 2, canvas.height / 2)
+  context.font = font;
+  context.fillStyle = color;
+  context.textBaseline = 'middle';
+  context.textAlign = 'center';
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.fillText(text, canvas.width / 2, canvas.height / 2);
 
-  const texture = new Texture(gl, { generateMipmaps: false })
-  texture.image = canvas
-  return { texture, width: canvas.width, height: canvas.height }
+  const texture = new Texture(gl, { generateMipmaps: false });
+  texture.image = canvas;
+  return { texture, width: canvas.width, height: canvas.height };
 }
 
 interface TitleProps {
-  gl: GL
-  plane: Mesh
-  renderer: Renderer
-  text: string
-  textColor?: string
-  font?: string
+  gl: GL;
+  plane: Mesh;
+  renderer: Renderer;
+  text: string;
+  textColor?: string;
+  font?: string;
 }
 
 class Title {
-  gl: GL
-  plane: Mesh
-  renderer: Renderer
-  text: string
-  textColor: string
-  font: string
-  mesh!: Mesh
+  gl: GL;
+  plane: Mesh;
+  renderer: Renderer;
+  text: string;
+  textColor: string;
+  font: string;
+  mesh!: Mesh;
 
   constructor({ gl, plane, renderer, text, textColor = '#545050', font = '30px sans-serif' }: TitleProps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    autoBind(this as any)
-    this.gl = gl
-    this.plane = plane
-    this.renderer = renderer
-    this.text = text
-    this.textColor = textColor
-    this.font = font
-    this.createMesh()
+    autoBind(this as any);
+    this.gl = gl;
+    this.plane = plane;
+    this.renderer = renderer;
+    this.text = text;
+    this.textColor = textColor;
+    this.font = font;
+    this.createMesh();
   }
 
   createMesh() {
-    const { texture, width, height } = createTextTexture(this.gl, this.text, this.font, this.textColor)
-    const geometry = new Plane(this.gl)
+    const { texture, width, height } = createTextTexture(this.gl, this.text, this.font, this.textColor);
+    const geometry = new Plane(this.gl);
     const program = new Program(this.gl, {
       vertex: `
         attribute vec3 position;
@@ -144,72 +144,72 @@ class Title {
         }
       `,
       uniforms: { tMap: { value: texture } },
-      transparent: true,
-    })
-    this.mesh = new Mesh(this.gl, { geometry, program })
-    const aspect = width / height
-    const textHeightScaled = this.plane.scale.y * 0.15
-    const textWidthScaled = textHeightScaled * aspect
-    this.mesh.scale.set(textWidthScaled, textHeightScaled, 1)
-    this.mesh.position.y = -this.plane.scale.y * 0.5 - textHeightScaled * 0.5 - 0.05
-    this.mesh.setParent(this.plane)
+      transparent: true
+    });
+    this.mesh = new Mesh(this.gl, { geometry, program });
+    const aspect = width / height;
+    const textHeightScaled = this.plane.scale.y * 0.15;
+    const textWidthScaled = textHeightScaled * aspect;
+    this.mesh.scale.set(textWidthScaled, textHeightScaled, 1);
+    this.mesh.position.y = -this.plane.scale.y * 0.5 - textHeightScaled * 0.5 - 0.05;
+    this.mesh.setParent(this.plane);
   }
 }
 
 interface ScreenSize {
-  width: number
-  height: number
+  width: number;
+  height: number;
 }
 
 interface Viewport {
-  width: number
-  height: number
+  width: number;
+  height: number;
 }
 
 interface MediaProps {
-  geometry: Plane
-  gl: GL
-  image: string
-  index: number
-  length: number
-  renderer: Renderer
-  scene: Transform
-  screen: ScreenSize
-  text: string
-  viewport: Viewport
-  bend: number
-  textColor: string
-  borderRadius?: number
-  font?: string
+  geometry: Plane;
+  gl: GL;
+  image: string;
+  index: number;
+  length: number;
+  renderer: Renderer;
+  scene: Transform;
+  screen: ScreenSize;
+  text: string;
+  viewport: Viewport;
+  bend: number;
+  textColor: string;
+  borderRadius?: number;
+  font?: string;
 }
 
 class Media {
-  extra: number = 0
-  geometry: Plane
-  gl: GL
-  image: string
-  index: number
-  length: number
-  renderer: Renderer
-  scene: Transform
-  screen: ScreenSize
-  text: string
-  viewport: Viewport
-  bend: number
-  textColor: string
-  borderRadius: number
-  font?: string
-  program!: Program
-  plane!: Mesh
-  title!: Title
-  scale!: number
-  padding!: number
-  width!: number
-  widthTotal!: number
-  x!: number
-  speed: number = 0
-  isBefore: boolean = false
-  isAfter: boolean = false
+  extra: number = 0;
+  geometry: Plane;
+  gl: GL;
+  image: string;
+  index: number;
+  length: number;
+  renderer: Renderer;
+  scene: Transform;
+  screen: ScreenSize;
+  text: string;
+  viewport: Viewport;
+  bend: number;
+  textColor: string;
+  borderRadius: number;
+  font?: string;
+  program!: Program;
+  plane!: Mesh;
+  title!: Title;
+  scale!: number;
+  padding!: number;
+  width!: number;
+  widthTotal!: number;
+  x!: number;
+  speed: number = 0;
+  isBefore: boolean = false;
+  isAfter: boolean = false;
 
   constructor({
     geometry,
@@ -225,30 +225,30 @@ class Media {
     bend,
     textColor,
     borderRadius = 0,
-    font,
+    font
   }: MediaProps) {
-    this.geometry = geometry
-    this.gl = gl
-    this.image = image
-    this.index = index
-    this.length = length
-    this.renderer = renderer
-    this.scene = scene
-    this.screen = screen
-    this.text = text
-    this.viewport = viewport
-    this.bend = bend
-    this.textColor = textColor
-    this.borderRadius = borderRadius
-    this.font = font
-    this.createShader()
-    this.createMesh()
-    this.createTitle()
-    this.onResize()
+    this.geometry = geometry;
+    this.gl = gl;
+    this.image = image;
+    this.index = index;
+    this.length = length;
+    this.renderer = renderer;
+    this.scene = scene;
+    this.screen = screen;
+    this.text = text;
+    this.viewport = viewport;
+    this.bend = bend;
+    this.textColor = textColor;
+    this.borderRadius = borderRadius;
+    this.font = font;
+    this.createShader();
+    this.createMesh();
+    this.createTitle();
+    this.onResize();
   }
 
   createShader() {
-    const texture = new Texture(this.gl, { generateMipmaps: false })
+    const texture = new Texture(this.gl, { generateMipmaps: false });
     this.program = new Program(this.gl, {
       depthTest: false,
       depthWrite: false,
@@ -306,25 +306,25 @@ class Media {
         uImageSizes: { value: [0, 0] },
         uSpeed: { value: 0 },
         uTime: { value: 100 * Math.random() },
-        uBorderRadius: { value: this.borderRadius },
+        uBorderRadius: { value: this.borderRadius }
       },
-      transparent: true,
-    })
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-    img.src = this.image
+      transparent: true
+    });
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.src = this.image;
     img.onload = () => {
-      texture.image = img
-      this.program.uniforms.uImageSizes.value = [img.naturalWidth, img.naturalHeight]
-    }
+      texture.image = img;
+      this.program.uniforms.uImageSizes.value = [img.naturalWidth, img.naturalHeight];
+    };
   }
 
   createMesh() {
     this.plane = new Mesh(this.gl, {
       geometry: this.geometry,
-      program: this.program,
-    })
-    this.plane.setParent(this.scene)
+      program: this.program
+    });
+    this.plane.setParent(this.scene);
   }
 
   createTitle() {
@@ -334,111 +334,111 @@ class Media {
       renderer: this.renderer,
       text: this.text,
       textColor: this.textColor,
-      font: this.font,
-    })
+      font: this.font
+    });
   }
 
   update(scroll: { current: number; last: number }, direction: 'right' | 'left') {
-    this.plane.position.x = this.x - scroll.current - this.extra
+    this.plane.position.x = this.x - scroll.current - this.extra;
 
-    const x = this.plane.position.x
-    const H = this.viewport.width / 2
+    const x = this.plane.position.x;
+    const H = this.viewport.width / 2;
 
     if (this.bend === 0) {
-      this.plane.position.y = 0
-      this.plane.rotation.z = 0
+      this.plane.position.y = 0;
+      this.plane.rotation.z = 0;
     } else {
-      const B_abs = Math.abs(this.bend)
-      const R = (H * H + B_abs * B_abs) / (2 * B_abs)
-      const effectiveX = Math.min(Math.abs(x), H)
+      const B_abs = Math.abs(this.bend);
+      const R = (H * H + B_abs * B_abs) / (2 * B_abs);
+      const effectiveX = Math.min(Math.abs(x), H);
 
-      const arc = R - Math.sqrt(R * R - effectiveX * effectiveX)
+      const arc = R - Math.sqrt(R * R - effectiveX * effectiveX);
       if (this.bend > 0) {
-        this.plane.position.y = -arc
-        this.plane.rotation.z = -Math.sign(x) * Math.asin(effectiveX / R)
+        this.plane.position.y = -arc;
+        this.plane.rotation.z = -Math.sign(x) * Math.asin(effectiveX / R);
       } else {
-        this.plane.position.y = arc
-        this.plane.rotation.z = Math.sign(x) * Math.asin(effectiveX / R)
+        this.plane.position.y = arc;
+        this.plane.rotation.z = Math.sign(x) * Math.asin(effectiveX / R);
       }
     }
 
-    this.speed = scroll.current - scroll.last
-    this.program.uniforms.uTime.value += 0.04
-    this.program.uniforms.uSpeed.value = this.speed
+    this.speed = scroll.current - scroll.last;
+    this.program.uniforms.uTime.value += 0.04;
+    this.program.uniforms.uSpeed.value = this.speed;
 
-    const planeOffset = this.plane.scale.x / 2
-    const viewportOffset = this.viewport.width / 2
-    this.isBefore = this.plane.position.x + planeOffset < -viewportOffset
-    this.isAfter = this.plane.position.x - planeOffset > viewportOffset
+    const planeOffset = this.plane.scale.x / 2;
+    const viewportOffset = this.viewport.width / 2;
+    this.isBefore = this.plane.position.x + planeOffset < -viewportOffset;
+    this.isAfter = this.plane.position.x - planeOffset > viewportOffset;
     if (direction === 'right' && this.isBefore) {
-      this.extra -= this.widthTotal
-      this.isBefore = this.isAfter = false
+      this.extra -= this.widthTotal;
+      this.isBefore = this.isAfter = false;
     }
     if (direction === 'left' && this.isAfter) {
-      this.extra += this.widthTotal
-      this.isBefore = this.isAfter = false
+      this.extra += this.widthTotal;
+      this.isBefore = this.isAfter = false;
     }
   }
 
   onResize({ screen, viewport }: { screen?: ScreenSize; viewport?: Viewport } = {}) {
-    if (screen) this.screen = screen
+    if (screen) this.screen = screen;
     if (viewport) {
-      this.viewport = viewport
+      this.viewport = viewport;
       if (this.plane.program.uniforms.uViewportSizes) {
-        this.plane.program.uniforms.uViewportSizes.value = [this.viewport.width, this.viewport.height]
+        this.plane.program.uniforms.uViewportSizes.value = [this.viewport.width, this.viewport.height];
       }
     }
-    this.scale = this.screen.height / 1500
-    this.plane.scale.y = (this.viewport.height * (900 * this.scale)) / this.screen.height
-    this.plane.scale.x = (this.viewport.width * (700 * this.scale)) / this.screen.width
-    this.plane.program.uniforms.uPlaneSizes.value = [this.plane.scale.x, this.plane.scale.y]
-    this.padding = 2
-    this.width = this.plane.scale.x + this.padding
-    this.widthTotal = this.width * this.length
-    this.x = this.width * this.index
+    this.scale = this.screen.height / 1500;
+    this.plane.scale.y = (this.viewport.height * (900 * this.scale)) / this.screen.height;
+    this.plane.scale.x = (this.viewport.width * (700 * this.scale)) / this.screen.width;
+    this.plane.program.uniforms.uPlaneSizes.value = [this.plane.scale.x, this.plane.scale.y];
+    this.padding = 2;
+    this.width = this.plane.scale.x + this.padding;
+    this.widthTotal = this.width * this.length;
+    this.x = this.width * this.index;
   }
 }
 
 interface AppConfig {
-  items?: { image: string; text: string }[]
-  bend?: number
-  textColor?: string
-  borderRadius?: number
-  font?: string
-  scrollSpeed?: number
-  scrollEase?: number
+  items?: { image: string; text: string }[];
+  bend?: number;
+  textColor?: string;
+  borderRadius?: number;
+  font?: string;
+  scrollSpeed?: number;
+  scrollEase?: number;
 }
 
 class App {
-  container: HTMLElement
-  scrollSpeed: number
+  container: HTMLElement;
+  scrollSpeed: number;
   scroll: {
-    ease: number
-    current: number
-    target: number
-    last: number
-    position?: number
-  }
-  onCheckDebounce: (...args: unknown[]) => void
-  renderer!: Renderer
-  gl!: GL
-  camera!: Camera
-  scene!: Transform
-  planeGeometry!: Plane
-  medias: Media[] = []
-  mediasImages: { image: string; text: string }[] = []
-  screen!: { width: number; height: number }
-  viewport!: { width: number; height: number }
-  raf: number = 0
+    ease: number;
+    current: number;
+    target: number;
+    last: number;
+    position?: number;
+  };
+  onCheckDebounce: (...args: unknown[]) => void;
+  renderer!: Renderer;
+  gl!: GL;
+  camera!: Camera;
+  scene!: Transform;
+  planeGeometry!: Plane;
+  medias: Media[] = [];
+  mediasImages: { image: string; text: string }[] = [];
+  screen!: { width: number; height: number };
+  viewport!: { width: number; height: number };
+  raf: number = 0;
 
-  boundOnResize!: () => void
-  boundOnWheel!: (e: Event) => void
-  boundOnTouchDown!: (e: MouseEvent | TouchEvent) => void
-  boundOnTouchMove!: (e: MouseEvent | TouchEvent) => void
-  boundOnTouchUp!: () => void
+  boundOnResize!: () => void;
+  boundOnWheel!: (e: Event) => void;
+  boundOnTouchDown!: (e: MouseEvent | TouchEvent) => void;
+  boundOnTouchMove!: (e: MouseEvent | TouchEvent) => void;
+  boundOnTouchUp!: () => void;
 
-  isDown: boolean = false
-  start: number = 0
+  isDown: boolean = false;
+  start: number = 0;
 
   constructor(
     container: HTMLElement,
@@ -449,46 +449,46 @@ class App {
       borderRadius = 0,
       font = 'bold 30px Figtree',
       scrollSpeed = 2,
-      scrollEase = 0.05,
+      scrollEase = 0.05
     }: AppConfig
   ) {
-    document.documentElement.classList.remove('no-js')
-    this.container = container
-    this.scrollSpeed = scrollSpeed
-    this.scroll = { ease: scrollEase, current: 0, target: 0, last: 0 }
-    this.onCheckDebounce = debounce(this.onCheck.bind(this), 200)
-    this.createRenderer()
-    this.createCamera()
-    this.createScene()
-    this.onResize()
-    this.createGeometry()
-    this.createMedias(items, bend, textColor, borderRadius, font)
-    this.update()
-    this.addEventListeners()
+    document.documentElement.classList.remove('no-js');
+    this.container = container;
+    this.scrollSpeed = scrollSpeed;
+    this.scroll = { ease: scrollEase, current: 0, target: 0, last: 0 };
+    this.onCheckDebounce = debounce(this.onCheck.bind(this), 200);
+    this.createRenderer();
+    this.createCamera();
+    this.createScene();
+    this.onResize();
+    this.createGeometry();
+    this.createMedias(items, bend, textColor, borderRadius, font);
+    this.update();
+    this.addEventListeners();
   }
 
   createRenderer() {
-    this.renderer = new Renderer({ alpha: true })
-    this.gl = this.renderer.gl
-    this.gl.clearColor(0, 0, 0, 0)
-    this.container.appendChild(this.renderer.gl.canvas as HTMLCanvasElement)
+    this.renderer = new Renderer({ alpha: true });
+    this.gl = this.renderer.gl;
+    this.gl.clearColor(0, 0, 0, 0);
+    this.container.appendChild(this.renderer.gl.canvas as HTMLCanvasElement);
   }
 
   createCamera() {
-    this.camera = new Camera(this.gl)
-    this.camera.fov = 45
-    this.camera.position.z = 20
+    this.camera = new Camera(this.gl);
+    this.camera.fov = 45;
+    this.camera.position.z = 20;
   }
 
   createScene() {
-    this.scene = new Transform()
+    this.scene = new Transform();
   }
 
   createGeometry() {
     this.planeGeometry = new Plane(this.gl, {
       heightSegments: 50,
-      widthSegments: 100,
-    })
+      widthSegments: 100
+    });
   }
 
   createMedias(
@@ -501,55 +501,55 @@ class App {
     const defaultItems = [
       {
         image: `https://picsum.photos/seed/1/800/600?grayscale`,
-        text: 'Bridge',
+        text: 'Bridge'
       },
       {
         image: `https://picsum.photos/seed/2/800/600?grayscale`,
-        text: 'Desk Setup',
+        text: 'Desk Setup'
       },
       {
         image: `https://picsum.photos/seed/3/800/600?grayscale`,
-        text: 'Waterfall',
+        text: 'Waterfall'
       },
       {
         image: `https://picsum.photos/seed/4/800/600?grayscale`,
-        text: 'Strawberries',
+        text: 'Strawberries'
       },
       {
         image: `https://picsum.photos/seed/5/800/600?grayscale`,
-        text: 'Deep Diving',
+        text: 'Deep Diving'
       },
       {
         image: `https://picsum.photos/seed/16/800/600?grayscale`,
-        text: 'Train Track',
+        text: 'Train Track'
       },
       {
         image: `https://picsum.photos/seed/17/800/600?grayscale`,
-        text: 'Santorini',
+        text: 'Santorini'
       },
       {
         image: `https://picsum.photos/seed/8/800/600?grayscale`,
-        text: 'Blurry Lights',
+        text: 'Blurry Lights'
       },
       {
         image: `https://picsum.photos/seed/9/800/600?grayscale`,
-        text: 'New York',
+        text: 'New York'
       },
       {
         image: `https://picsum.photos/seed/10/800/600?grayscale`,
-        text: 'Good Boy',
+        text: 'Good Boy'
       },
       {
         image: `https://picsum.photos/seed/21/800/600?grayscale`,
-        text: 'Coastline',
+        text: 'Coastline'
       },
       {
         image: `https://picsum.photos/seed/12/800/600?grayscale`,
-        text: 'Palm Trees',
-      },
-    ]
-    const galleryItems = items && items.length ? items : defaultItems
-    this.mediasImages = galleryItems.concat(galleryItems)
+        text: 'Palm Trees'
+      }
+    ];
+    const galleryItems = items && items.length ? items : defaultItems;
+    this.mediasImages = galleryItems.concat(galleryItems);
     this.medias = this.mediasImages.map((data, index) => {
       return new Media({
         geometry: this.planeGeometry,
@@ -565,114 +565,114 @@ class App {
         bend,
         textColor,
         borderRadius,
-        font,
-      })
-    })
+        font
+      });
+    });
   }
 
   onTouchDown(e: MouseEvent | TouchEvent) {
-    this.isDown = true
-    this.scroll.position = this.scroll.current
-    this.start = 'touches' in e ? e.touches[0].clientX : e.clientX
+    this.isDown = true;
+    this.scroll.position = this.scroll.current;
+    this.start = 'touches' in e ? e.touches[0].clientX : e.clientX;
   }
 
   onTouchMove(e: MouseEvent | TouchEvent) {
-    if (!this.isDown) return
-    const x = 'touches' in e ? e.touches[0].clientX : e.clientX
-    const distance = (this.start - x) * (this.scrollSpeed * 0.025)
-    this.scroll.target = (this.scroll.position ?? 0) + distance
+    if (!this.isDown) return;
+    const x = 'touches' in e ? e.touches[0].clientX : e.clientX;
+    const distance = (this.start - x) * (this.scrollSpeed * 0.025);
+    this.scroll.target = (this.scroll.position ?? 0) + distance;
   }
 
   onTouchUp() {
-    this.isDown = false
-    this.onCheck()
+    this.isDown = false;
+    this.onCheck();
   }
 
   onWheel(e: Event) {
-    const wheelEvent = e as WheelEvent
+    const wheelEvent = e as WheelEvent;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const delta = wheelEvent.deltaY || (wheelEvent as any).wheelDelta || (wheelEvent as any).detail
-    this.scroll.target += delta > 0 ? this.scrollSpeed : -this.scrollSpeed
-    this.onCheckDebounce()
+    const delta = wheelEvent.deltaY || (wheelEvent as any).wheelDelta || (wheelEvent as any).detail;
+    this.scroll.target += delta > 0 ? this.scrollSpeed : -this.scrollSpeed;
+    this.onCheckDebounce();
   }
 
   onCheck() {
-    if (!this.medias || !this.medias[0]) return
-    const width = this.medias[0].width
-    const itemIndex = Math.round(Math.abs(this.scroll.target) / width)
-    const item = width * itemIndex
-    this.scroll.target = this.scroll.target < 0 ? -item : item
+    if (!this.medias || !this.medias[0]) return;
+    const width = this.medias[0].width;
+    const itemIndex = Math.round(Math.abs(this.scroll.target) / width);
+    const item = width * itemIndex;
+    this.scroll.target = this.scroll.target < 0 ? -item : item;
   }
 
   onResize() {
     this.screen = {
       width: this.container.clientWidth,
-      height: this.container.clientHeight,
-    }
-    this.renderer.setSize(this.screen.width, this.screen.height)
+      height: this.container.clientHeight
+    };
+    this.renderer.setSize(this.screen.width, this.screen.height);
     this.camera.perspective({
-      aspect: this.screen.width / this.screen.height,
-    })
-    const fov = (this.camera.fov * Math.PI) / 180
-    const height = 2 * Math.tan(fov / 2) * this.camera.position.z
-    const width = height * this.camera.aspect
-    this.viewport = { width, height }
+      aspect: this.screen.width / this.screen.height
+    });
+    const fov = (this.camera.fov * Math.PI) / 180;
+    const height = 2 * Math.tan(fov / 2) * this.camera.position.z;
+    const width = height * this.camera.aspect;
+    this.viewport = { width, height };
     if (this.medias) {
-      this.medias.forEach((media) => media.onResize({ screen: this.screen, viewport: this.viewport }))
+      this.medias.forEach(media => media.onResize({ screen: this.screen, viewport: this.viewport }));
     }
   }
 
   update() {
-    this.scroll.current = lerp(this.scroll.current, this.scroll.target, this.scroll.ease)
-    const direction = this.scroll.current > this.scroll.last ? 'right' : 'left'
+    this.scroll.current = lerp(this.scroll.current, this.scroll.target, this.scroll.ease);
+    const direction = this.scroll.current > this.scroll.last ? 'right' : 'left';
     if (this.medias) {
-      this.medias.forEach((media) => media.update(this.scroll, direction))
+      this.medias.forEach(media => media.update(this.scroll, direction));
     }
-    this.renderer.render({ scene: this.scene, camera: this.camera })
-    this.scroll.last = this.scroll.current
-    this.raf = window.requestAnimationFrame(this.update.bind(this))
+    this.renderer.render({ scene: this.scene, camera: this.camera });
+    this.scroll.last = this.scroll.current;
+    this.raf = window.requestAnimationFrame(this.update.bind(this));
   }
 
   addEventListeners() {
-    this.boundOnResize = this.onResize.bind(this)
-    this.boundOnWheel = this.onWheel.bind(this)
-    this.boundOnTouchDown = this.onTouchDown.bind(this)
-    this.boundOnTouchMove = this.onTouchMove.bind(this)
-    this.boundOnTouchUp = this.onTouchUp.bind(this)
-    
-    window.addEventListener('resize', this.boundOnResize)
-    
-    this.container.addEventListener('wheel', this.boundOnWheel)
-    this.container.addEventListener('mousedown', this.boundOnTouchDown)
-    this.container.addEventListener('touchstart', this.boundOnTouchDown)
-    
-    window.addEventListener('mousemove', this.boundOnTouchMove)
-    window.addEventListener('mouseup', this.boundOnTouchUp)
-    window.addEventListener('touchmove', this.boundOnTouchMove)
-    window.addEventListener('touchend', this.boundOnTouchUp)
+    this.boundOnResize = this.onResize.bind(this);
+    this.boundOnWheel = this.onWheel.bind(this);
+    this.boundOnTouchDown = this.onTouchDown.bind(this);
+    this.boundOnTouchMove = this.onTouchMove.bind(this);
+    this.boundOnTouchUp = this.onTouchUp.bind(this);
+
+    window.addEventListener('resize', this.boundOnResize);
+
+    this.container.addEventListener('wheel', this.boundOnWheel);
+    this.container.addEventListener('mousedown', this.boundOnTouchDown);
+    this.container.addEventListener('touchstart', this.boundOnTouchDown);
+
+    window.addEventListener('mousemove', this.boundOnTouchMove);
+    window.addEventListener('mouseup', this.boundOnTouchUp);
+    window.addEventListener('touchmove', this.boundOnTouchMove);
+    window.addEventListener('touchend', this.boundOnTouchUp);
   }
 
   destroy() {
-    window.cancelAnimationFrame(this.raf)
-    
-    window.removeEventListener('resize', this.boundOnResize)
-    window.removeEventListener('mousemove', this.boundOnTouchMove)
-    window.removeEventListener('mouseup', this.boundOnTouchUp)
-    window.removeEventListener('touchmove', this.boundOnTouchMove)
-    window.removeEventListener('touchend', this.boundOnTouchUp)
-    
-    this.container.removeEventListener('wheel', this.boundOnWheel)
-    this.container.removeEventListener('mousedown', this.boundOnTouchDown)
-    this.container.removeEventListener('touchstart', this.boundOnTouchDown)
-    
+    window.cancelAnimationFrame(this.raf);
+
+    window.removeEventListener('resize', this.boundOnResize);
+    window.removeEventListener('mousemove', this.boundOnTouchMove);
+    window.removeEventListener('mouseup', this.boundOnTouchUp);
+    window.removeEventListener('touchmove', this.boundOnTouchMove);
+    window.removeEventListener('touchend', this.boundOnTouchUp);
+
+    this.container.removeEventListener('wheel', this.boundOnWheel);
+    this.container.removeEventListener('mousedown', this.boundOnTouchDown);
+    this.container.removeEventListener('touchstart', this.boundOnTouchDown);
+
     if (this.renderer && this.renderer.gl && this.renderer.gl.canvas.parentNode) {
-      this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas as HTMLCanvasElement)
+      this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas as HTMLCanvasElement);
     }
   }
 }
 
 onMounted(() => {
-  if (!containerRef.value) return
+  if (!containerRef.value) return;
 
   app = new App(containerRef.value, {
     items: props.items,
@@ -681,16 +681,16 @@ onMounted(() => {
     borderRadius: props.borderRadius,
     font: props.font,
     scrollSpeed: props.scrollSpeed,
-    scrollEase: props.scrollEase,
-  })
-})
+    scrollEase: props.scrollEase
+  });
+});
 
 onUnmounted(() => {
   if (app) {
-    app.destroy()
-    app = null
+    app.destroy();
+    app = null;
   }
-})
+});
 
 watch(
   () => ({
@@ -700,16 +700,16 @@ watch(
     borderRadius: props.borderRadius,
     font: props.font,
     scrollSpeed: props.scrollSpeed,
-    scrollEase: props.scrollEase,
+    scrollEase: props.scrollEase
   }),
-  (newProps) => {
+  newProps => {
     if (app) {
-      app.destroy()
+      app.destroy();
     }
     if (containerRef.value) {
-      app = new App(containerRef.value, newProps)
+      app = new App(containerRef.value, newProps);
     }
   },
   { deep: true }
-)
+);
 </script>
diff --git a/src/content/Components/DecayCard/DecayCard.vue b/src/content/Components/DecayCard/DecayCard.vue
index a695d7f..f89a9cf 100644
--- a/src/content/Components/DecayCard/DecayCard.vue
+++ b/src/content/Components/DecayCard/DecayCard.vue
@@ -1,161 +1,167 @@
 <template>
   <div ref="svgRef" class="relative" :style="{ width: `${width}px`, height: `${height}px` }">
-    <svg viewBox="-60 -75 720 900" preserveAspectRatio="xMidYMid slice"
-      class="relative w-full h-full block [will-change:transform]">
+    <svg
+      viewBox="-60 -75 720 900"
+      preserveAspectRatio="xMidYMid slice"
+      class="relative w-full h-full block [will-change:transform]"
+    >
       <filter id="imgFilter">
-        <feTurbulence type="turbulence" baseFrequency="0.015" numOctaves="5" seed="4" stitchTiles="stitch" x="0%" y="0%"
-          width="100%" height="100%" result="turbulence1" />
-        <feDisplacementMap ref="displacementMapRef" in="SourceGraphic" in2="turbulence1" scale="0" xChannelSelector="R"
-          yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap3" />
+        <feTurbulence
+          type="turbulence"
+          baseFrequency="0.015"
+          numOctaves="5"
+          seed="4"
+          stitchTiles="stitch"
+          x="0%"
+          y="0%"
+          width="100%"
+          height="100%"
+          result="turbulence1"
+        />
+
+        <feDisplacementMap
+          ref="displacementMapRef"
+          in="SourceGraphic"
+          in2="turbulence1"
+          scale="0"
+          xChannelSelector="R"
+          yChannelSelector="B"
+          x="0%"
+          y="0%"
+          width="100%"
+          height="100%"
+          result="displacementMap3"
+        />
       </filter>
+
       <g>
-        <image :href="image" x="0" y="0" width="600" height="750" filter="url(#imgFilter)"
-          preserveAspectRatio="xMidYMid slice" />
+        <image
+          :href="image"
+          x="0"
+          y="0"
+          width="600"
+          height="750"
+          filter="url(#imgFilter)"
+          preserveAspectRatio="xMidYMid slice"
+        />
       </g>
     </svg>
+
     <div
-      class="absolute bottom-[1.2em] left-[1em] tracking-[-0.5px] font-black text-[2rem] leading-[1.5em] first-line:text-[4rem]">
+      class="absolute bottom-[1.2em] left-[1em] tracking-[-0.5px] font-black text-[2rem] leading-[1.5em] first-line:text-[4rem]"
+    >
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { gsap } from 'gsap'
+import { ref, onMounted, onUnmounted } from 'vue';
+import { gsap } from 'gsap';
 
 interface Props {
-  width?: number
-  height?: number
-  image?: string
+  width?: number;
+  height?: number;
+  image?: string;
 }
 
 withDefaults(defineProps<Props>(), {
   width: 300,
   height: 400,
   image: 'https://picsum.photos/300/400?grayscale'
-})
+});
 
-const svgRef = ref<HTMLDivElement | null>(null)
-const displacementMapRef = ref<SVGFEDisplacementMapElement | null>(null)
+const svgRef = ref<HTMLDivElement | null>(null);
+const displacementMapRef = ref<SVGFEDisplacementMapElement | null>(null);
 
 let cursor = {
   x: typeof window !== 'undefined' ? window.innerWidth / 2 : 0,
   y: typeof window !== 'undefined' ? window.innerHeight / 2 : 0
-}
+};
 
-let cachedCursor = { ...cursor }
+let cachedCursor = { ...cursor };
 
 let winsize = {
   width: typeof window !== 'undefined' ? window.innerWidth : 0,
   height: typeof window !== 'undefined' ? window.innerHeight : 0
-}
+};
 
-let animationFrameId: number | null = null
+let animationFrameId: number | null = null;
 
-const lerp = (a: number, b: number, n: number): number =>
-  (1 - n) * a + n * b
+const lerp = (a: number, b: number, n: number): number => (1 - n) * a + n * b;
 
-const map = (
-  x: number,
-  a: number,
-  b: number,
-  c: number,
-  d: number
-): number => ((x - a) * (d - c)) / (b - a) + c
+const map = (x: number, a: number, b: number, c: number, d: number): number => ((x - a) * (d - c)) / (b - a) + c;
 
-const distance = (x1: number, x2: number, y1: number, y2: number): number =>
-  Math.hypot(x1 - x2, y1 - y2)
+const distance = (x1: number, x2: number, y1: number, y2: number): number => Math.hypot(x1 - x2, y1 - y2);
 
 const handleResize = (): void => {
   winsize = {
     width: window.innerWidth,
     height: window.innerHeight
-  }
-}
+  };
+};
 
 const handleMouseMove = (ev: MouseEvent): void => {
-  cursor = { x: ev.clientX, y: ev.clientY }
-}
+  cursor = { x: ev.clientX, y: ev.clientY };
+};
 
 const imgValues = {
   imgTransforms: { x: 0, y: 0, rz: 0 },
   displacementScale: 0
-}
+};
 
 const render = () => {
-  let targetX = lerp(
-    imgValues.imgTransforms.x,
-    map(cursor.x, 0, winsize.width, -120, 120),
-    0.1
-  )
-  let targetY = lerp(
-    imgValues.imgTransforms.y,
-    map(cursor.y, 0, winsize.height, -120, 120),
-    0.1
-  )
-  const targetRz = lerp(
-    imgValues.imgTransforms.rz,
-    map(cursor.x, 0, winsize.width, -10, 10),
-    0.1
-  )
+  let targetX = lerp(imgValues.imgTransforms.x, map(cursor.x, 0, winsize.width, -120, 120), 0.1);
+  let targetY = lerp(imgValues.imgTransforms.y, map(cursor.y, 0, winsize.height, -120, 120), 0.1);
+  const targetRz = lerp(imgValues.imgTransforms.rz, map(cursor.x, 0, winsize.width, -10, 10), 0.1);
 
-  const bound = 50
-  if (targetX > bound) targetX = bound + (targetX - bound) * 0.2
-  if (targetX < -bound) targetX = -bound + (targetX + bound) * 0.2
-  if (targetY > bound) targetY = bound + (targetY - bound) * 0.2
-  if (targetY < -bound) targetY = -bound + (targetY + bound) * 0.2
+  const bound = 50;
+  if (targetX > bound) targetX = bound + (targetX - bound) * 0.2;
+  if (targetX < -bound) targetX = -bound + (targetX + bound) * 0.2;
+  if (targetY > bound) targetY = bound + (targetY - bound) * 0.2;
+  if (targetY < -bound) targetY = -bound + (targetY + bound) * 0.2;
 
-  imgValues.imgTransforms.x = targetX
-  imgValues.imgTransforms.y = targetY
-  imgValues.imgTransforms.rz = targetRz
+  imgValues.imgTransforms.x = targetX;
+  imgValues.imgTransforms.y = targetY;
+  imgValues.imgTransforms.rz = targetRz;
 
   if (svgRef.value) {
     gsap.set(svgRef.value, {
       x: imgValues.imgTransforms.x,
       y: imgValues.imgTransforms.y,
       rotateZ: imgValues.imgTransforms.rz
-    })
+    });
   }
 
-  const cursorTravelledDistance = distance(
-    cachedCursor.x,
-    cursor.x,
-    cachedCursor.y,
-    cursor.y
-  )
-  imgValues.displacementScale = lerp(
-    imgValues.displacementScale,
-    map(cursorTravelledDistance, 0, 200, 0, 400),
-    0.06
-  )
+  const cursorTravelledDistance = distance(cachedCursor.x, cursor.x, cachedCursor.y, cursor.y);
+  imgValues.displacementScale = lerp(imgValues.displacementScale, map(cursorTravelledDistance, 0, 200, 0, 400), 0.06);
 
   if (displacementMapRef.value) {
     gsap.set(displacementMapRef.value, {
       attr: { scale: imgValues.displacementScale }
-    })
+    });
   }
 
-  cachedCursor = { ...cursor }
+  cachedCursor = { ...cursor };
 
-  animationFrameId = requestAnimationFrame(render)
-}
+  animationFrameId = requestAnimationFrame(render);
+};
 
 onMounted(() => {
   if (typeof window !== 'undefined') {
-    window.addEventListener('resize', handleResize)
-    window.addEventListener('mousemove', handleMouseMove)
-    render()
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('mousemove', handleMouseMove);
+    render();
   }
-})
+});
 
 onUnmounted(() => {
   if (typeof window !== 'undefined') {
-    window.removeEventListener('resize', handleResize)
-    window.removeEventListener('mousemove', handleMouseMove)
+    window.removeEventListener('resize', handleResize);
+    window.removeEventListener('mousemove', handleMouseMove);
   }
   if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId)
+    cancelAnimationFrame(animationFrameId);
   }
-})
+});
 </script>
diff --git a/src/content/Components/Dock/Dock.vue b/src/content/Components/Dock/Dock.vue
index ca03545..1fc3b6a 100644
--- a/src/content/Components/Dock/Dock.vue
+++ b/src/content/Components/Dock/Dock.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue'
-import { useMotionValue, useSpring, useTransform, type SpringOptions } from 'motion-v'
+import { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue';
+import { useMotionValue, useSpring, useTransform, type SpringOptions } from 'motion-v';
 
 export type DockItemData = {
-  icon: unknown
-  label: unknown
-  onClick: () => void
-  className?: string
-}
+  icon: unknown;
+  label: unknown;
+  onClick: () => void;
+  className?: string;
+};
 
 export type DockProps = {
-  items: DockItemData[]
-  className?: string
-  distance?: number
-  panelHeight?: number
-  baseItemSize?: number
-  dockHeight?: number
-  magnification?: number
-  spring?: SpringOptions
-}
+  items: DockItemData[];
+  className?: string;
+  distance?: number;
+  panelHeight?: number;
+  baseItemSize?: number;
+  dockHeight?: number;
+  magnification?: number;
+  spring?: SpringOptions;
+};
 
 const props = withDefaults(defineProps<DockProps>(), {
   className: '',
@@ -28,52 +28,64 @@ const props = withDefaults(defineProps<DockProps>(), {
   dockHeight: 256,
   magnification: 70,
   spring: () => ({ mass: 0.1, stiffness: 150, damping: 12 })
-})
+});
 
-const mouseX = useMotionValue(Infinity)
-const isHovered = useMotionValue(0)
-const currentHeight = ref(props.panelHeight)
+const mouseX = useMotionValue(Infinity);
+const isHovered = useMotionValue(0);
+const currentHeight = ref(props.panelHeight);
 
-const maxHeight = computed(() =>
-  Math.max(props.dockHeight, props.magnification + props.magnification / 2 + 4)
-)
+const maxHeight = computed(() => Math.max(props.dockHeight, props.magnification + props.magnification / 2 + 4));
 
-const heightRow = useTransform(isHovered, [0, 1], [props.panelHeight, maxHeight.value])
-const height = useSpring(heightRow, props.spring)
+const heightRow = useTransform(isHovered, [0, 1], [props.panelHeight, maxHeight.value]);
+const height = useSpring(heightRow, props.spring);
 
-let unsubscribeHeight: (() => void) | null = null
+let unsubscribeHeight: (() => void) | null = null;
 
 onMounted(() => {
   unsubscribeHeight = height.on('change', (latest: number) => {
-    currentHeight.value = latest
-  })
-})
+    currentHeight.value = latest;
+  });
+});
 
 onUnmounted(() => {
   if (unsubscribeHeight) {
-    unsubscribeHeight()
+    unsubscribeHeight();
   }
-})
+});
 
 const handleMouseMove = (event: MouseEvent) => {
-  isHovered.set(1)
-  mouseX.set(event.pageX)
-}
+  isHovered.set(1);
+  mouseX.set(event.pageX);
+};
 
 const handleMouseLeave = () => {
-  isHovered.set(0)
-  mouseX.set(Infinity)
-}
+  isHovered.set(0);
+  mouseX.set(Infinity);
+};
 </script>
 
 <template>
   <div :style="{ height: currentHeight + 'px', scrollbarWidth: 'none' }" class="mx-2 flex max-w-full items-center">
-    <div @mousemove="handleMouseMove" @mouseleave="handleMouseLeave"
+    <div
+      @mousemove="handleMouseMove"
+      @mouseleave="handleMouseLeave"
       :class="`${props.className} absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-end w-fit gap-4 rounded-2xl border-neutral-700 border-2 pb-2 px-4`"
-      :style="{ height: props.panelHeight + 'px' }" role="toolbar" aria-="Application dock">
-      <DockItem v-for="(item, index) in props.items" :key="index" :onClick="item.onClick" :className="item.className"
-        :mouseX="mouseX" :spring="props.spring" :distance="props.distance" :magnification="props.magnification"
-        :baseItemSize="props.baseItemSize" :item="item" />
+      :style="{ height: props.panelHeight + 'px' }"
+      role="toolbar"
+      aria-="Application dock"
+    >
+      <DockItem
+        v-for="(item, index) in props.items"
+        :key="index"
+        :onClick="item.onClick"
+        :className="item.className"
+        :mouseX="mouseX"
+        :spring="props.spring"
+        :distance="props.distance"
+        :magnification="props.magnification"
+        :baseItemSize="props.baseItemSize"
+        :item="item"
+      />
     </div>
   </div>
 </template>
@@ -88,7 +100,7 @@ const DockItem = defineComponent({
     },
     onClick: {
       type: Function,
-      default: () => { }
+      default: () => {}
     },
     mouseX: {
       type: Object as () => ReturnType<typeof useMotionValue<number>>,
@@ -116,43 +128,43 @@ const DockItem = defineComponent({
     }
   },
   setup(props) {
-    const itemRef = ref<HTMLDivElement>()
-    const isHovered = useMotionValue(0)
-    const currentSize = ref(props.baseItemSize)
+    const itemRef = ref<HTMLDivElement>();
+    const isHovered = useMotionValue(0);
+    const currentSize = ref(props.baseItemSize);
 
     const mouseDistance = useTransform(props.mouseX, (val: number) => {
       const rect = itemRef.value?.getBoundingClientRect() ?? {
         x: 0,
-        width: props.baseItemSize,
-      }
-      return val - rect.x - props.baseItemSize / 2
-    })
+        width: props.baseItemSize
+      };
+      return val - rect.x - props.baseItemSize / 2;
+    });
 
     const targetSize = useTransform(
       mouseDistance,
       [-props.distance, 0, props.distance],
       [props.baseItemSize, props.magnification, props.baseItemSize]
-    )
-    const size = useSpring(targetSize, props.spring)
+    );
+    const size = useSpring(targetSize, props.spring);
 
-    let unsubscribeSize: (() => void) | null = null
+    let unsubscribeSize: (() => void) | null = null;
 
     onMounted(() => {
       unsubscribeSize = size.on('change', (latest: number) => {
-        currentSize.value = latest
-      })
-    })
+        currentSize.value = latest;
+      });
+    });
 
     onUnmounted(() => {
       if (unsubscribeSize) {
-        unsubscribeSize()
+        unsubscribeSize();
       }
-    })
+    });
 
-    const handleHoverStart = () => isHovered.set(1)
-    const handleHoverEnd = () => isHovered.set(0)
-    const handleFocus = () => isHovered.set(1)
-    const handleBlur = () => isHovered.set(0)
+    const handleHoverStart = () => isHovered.set(1);
+    const handleHoverEnd = () => isHovered.set(0);
+    const handleFocus = () => isHovered.set(1);
+    const handleBlur = () => isHovered.set(0);
 
     return {
       itemRef,
@@ -163,33 +175,37 @@ const DockItem = defineComponent({
       handleHoverEnd,
       handleFocus,
       handleBlur
-    }
+    };
   },
   render() {
-    const icon = typeof this.item.icon === 'function' ? this.item.icon() : this.item.icon
-    const label = typeof this.item.label === 'function' ? this.item.label() : this.item.label
+    const icon = typeof this.item.icon === 'function' ? this.item.icon() : this.item.icon;
+    const label = typeof this.item.label === 'function' ? this.item.label() : this.item.label;
 
-    return h('div', {
-      ref: 'itemRef',
-      style: {
-        width: this.currentSize + 'px',
-        height: this.currentSize + 'px',
+    return h(
+      'div',
+      {
+        ref: 'itemRef',
+        style: {
+          width: this.currentSize + 'px',
+          height: this.currentSize + 'px'
+        },
+        onMouseenter: this.handleHoverStart,
+        onMouseleave: this.handleHoverEnd,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onClick: this.onClick,
+        class: `relative cursor-pointer inline-flex items-center justify-center rounded-full bg-[#111] border-neutral-700 border-2 shadow-md ${this.className}`,
+        tabindex: 0,
+        role: 'button',
+        'aria-haspopup': 'true'
       },
-      onMouseenter: this.handleHoverStart,
-      onMouseleave: this.handleHoverEnd,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onClick: this.onClick,
-      class: `relative cursor-pointer inline-flex items-center justify-center rounded-full bg-[#111] border-neutral-700 border-2 shadow-md ${this.className}`,
-      tabindex: 0,
-      role: 'button',
-      'aria-haspopup': 'true'
-    }, [
-      h(DockIcon, {}, () => [icon]),
-      h(DockLabel, { isHovered: this.isHovered }, () => [typeof label === 'string' ? label : label])
-    ])
+      [
+        h(DockIcon, {}, () => [icon]),
+        h(DockLabel, { isHovered: this.isHovered }, () => [typeof label === 'string' ? label : label])
+      ]
+    );
   }
-})
+});
 
 const DockLabel = defineComponent({
   name: 'DockLabel',
@@ -204,38 +220,42 @@ const DockLabel = defineComponent({
     }
   },
   setup(props) {
-    const isVisible = ref(false)
+    const isVisible = ref(false);
 
-    let unsubscribe: (() => void) | null = null
+    let unsubscribe: (() => void) | null = null;
 
     onMounted(() => {
       unsubscribe = props.isHovered.on('change', (latest: number) => {
-        isVisible.value = latest === 1
-      })
-    })
+        isVisible.value = latest === 1;
+      });
+    });
 
     onUnmounted(() => {
       if (unsubscribe) {
-        unsubscribe()
+        unsubscribe();
       }
-    })
+    });
 
     return {
       isVisible
-    }
+    };
   },
   render() {
-    return h('div', {
-      class: `${this.className} absolute -top-8 left-1/2 w-fit whitespace-pre rounded-md border border-neutral-700 bg-[#111] px-2 py-0.5 text-xs text-white transition-all duration-200`,
-      role: 'tooltip',
-      style: {
-        transform: 'translateX(-50%)',
-        opacity: this.isVisible ? 1 : 0,
-        visibility: this.isVisible ? 'visible' : 'hidden'
-      }
-    }, this.$slots.default?.())
+    return h(
+      'div',
+      {
+        class: `${this.className} absolute -top-8 left-1/2 w-fit whitespace-pre rounded-md border border-neutral-700 bg-[#111] px-2 py-0.5 text-xs text-white transition-all duration-200`,
+        role: 'tooltip',
+        style: {
+          transform: 'translateX(-50%)',
+          opacity: this.isVisible ? 1 : 0,
+          visibility: this.isVisible ? 'visible' : 'hidden'
+        }
+      },
+      this.$slots.default?.()
+    );
   }
-})
+});
 
 const DockIcon = defineComponent({
   name: 'DockIcon',
@@ -246,16 +266,20 @@ const DockIcon = defineComponent({
     }
   },
   render() {
-    return h('div', {
-      class: `flex items-center justify-center ${this.className}`
-    }, this.$slots.default?.())
+    return h(
+      'div',
+      {
+        class: `flex items-center justify-center ${this.className}`
+      },
+      this.$slots.default?.()
+    );
   }
-})
+});
 
 export default defineComponent({
   name: 'Dock',
   components: {
     DockItem
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/content/Components/ElasticSlider/ElasticSlider.vue b/src/content/Components/ElasticSlider/ElasticSlider.vue
index 9ba39b6..2f53b08 100644
--- a/src/content/Components/ElasticSlider/ElasticSlider.vue
+++ b/src/content/Components/ElasticSlider/ElasticSlider.vue
@@ -1,67 +1,90 @@
 <template>
   <div :class="`flex flex-col items-center justify-center gap-4 w-48 ${className}`">
-    <div class="flex w-full touch-none select-none items-center justify-center gap-4" :style="{
-      scale: scale,
-      opacity: sliderOpacity
-    }" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @touchstart="handleTouchStart"
-      @touchend="handleTouchEnd">
-      <div ref="leftIconRef" :style="{
-        transform: `translateX(${leftIconTranslateX}px) scale(${leftIconScale})`,
-      }" class="transition-transform duration-200 ease-out">
+    <div
+      class="flex w-full touch-none select-none items-center justify-center gap-4"
+      :style="{
+        scale: scale,
+        opacity: sliderOpacity
+      }"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @touchstart="handleTouchStart"
+      @touchend="handleTouchEnd"
+    >
+      <div
+        ref="leftIconRef"
+        :style="{
+          transform: `translateX(${leftIconTranslateX}px) scale(${leftIconScale})`
+        }"
+        class="transition-transform duration-200 ease-out"
+      >
         <slot name="left-icon">
           <component :is="leftIcon" v-if="leftIcon && typeof leftIcon === 'object'" />
+
           <span v-else-if="leftIcon">{{ leftIcon }}</span>
+
           <span v-else>-</span>
         </slot>
       </div>
 
-      <div ref="sliderRef"
+      <div
+        ref="sliderRef"
         class="relative flex w-full max-w-xs flex-grow cursor-grab touch-none select-none items-center py-4"
-        @pointermove="handlePointerMove" @pointerdown="handlePointerDown" @pointerup="handlePointerUp">
-        <div :style="{
-          transform: `scaleX(${sliderScaleX}) scaleY(${sliderScaleY})`,
-          transformOrigin: transformOrigin,
-          height: `${sliderHeight}px`,
-          marginTop: `${sliderMarginTop}px`,
-          marginBottom: `${sliderMarginBottom}px`,
-        }" class="flex flex-grow">
+        @pointermove="handlePointerMove"
+        @pointerdown="handlePointerDown"
+        @pointerup="handlePointerUp"
+      >
+        <div
+          :style="{
+            transform: `scaleX(${sliderScaleX}) scaleY(${sliderScaleY})`,
+            transformOrigin: transformOrigin,
+            height: `${sliderHeight}px`,
+            marginTop: `${sliderMarginTop}px`,
+            marginBottom: `${sliderMarginBottom}px`
+          }"
+          class="flex flex-grow"
+        >
           <div class="relative h-full flex-grow overflow-hidden rounded-full bg-gray-400">
             <div class="absolute h-full bg-[#27FF64] rounded-full" :style="{ width: `${rangePercentage}%` }" />
           </div>
         </div>
       </div>
 
-      <div ref="rightIconRef" :style="{
-        transform: `translateX(${rightIconTranslateX}px) scale(${rightIconScale})`,
-      }" class="transition-transform duration-200 ease-out">
+      <div
+        ref="rightIconRef"
+        :style="{
+          transform: `translateX(${rightIconTranslateX}px) scale(${rightIconScale})`
+        }"
+        class="transition-transform duration-200 ease-out"
+      >
         <slot name="right-icon">
           <component :is="rightIcon" v-if="rightIcon && typeof rightIcon === 'object'" />
+
           <span v-else-if="rightIcon">{{ rightIcon }}</span>
+
           <span v-else>+</span>
         </slot>
       </div>
     </div>
 
-    <p class="absolute text-gray-400 transform -translate-y-6 font-medium tracking-wide">
-      {{ Math.round(value) }}
-    </p>
+    <p class="absolute text-gray-400 transform -translate-y-6 font-medium tracking-wide">{{ Math.round(value) }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, type Component } from 'vue'
+import { ref, computed, watch, onMounted, type Component } from 'vue';
 
-const MAX_OVERFLOW = 50
+const MAX_OVERFLOW = 50;
 
 interface Props {
-  defaultValue?: number
-  startingValue?: number
-  maxValue?: number
-  className?: string
-  isStepped?: boolean
-  stepSize?: number
-  leftIcon?: Component | string
-  rightIcon?: Component | string
+  defaultValue?: number;
+  startingValue?: number;
+  maxValue?: number;
+  className?: string;
+  isStepped?: boolean;
+  stepSize?: number;
+  leftIcon?: Component | string;
+  rightIcon?: Component | string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -73,256 +96,263 @@ const props = withDefaults(defineProps<Props>(), {
   stepSize: 1,
   leftIcon: '-',
   rightIcon: '+'
-})
+});
 
-const sliderRef = ref<HTMLDivElement>()
-const leftIconRef = ref<HTMLDivElement>()
-const rightIconRef = ref<HTMLDivElement>()
+const sliderRef = ref<HTMLDivElement>();
+const leftIconRef = ref<HTMLDivElement>();
+const rightIconRef = ref<HTMLDivElement>();
 
-const value = ref(props.defaultValue)
-const region = ref<'left' | 'middle' | 'right'>('middle')
-const clientX = ref(0)
-const overflow = ref(0)
-const scale = ref(1)
-const leftIconScale = ref(1)
-const rightIconScale = ref(1)
+const value = ref(props.defaultValue);
+const region = ref<'left' | 'middle' | 'right'>('middle');
+const clientX = ref(0);
+const overflow = ref(0);
+const scale = ref(1);
+const leftIconScale = ref(1);
+const rightIconScale = ref(1);
 
-let scaleAnimation: number | null = null
-let overflowAnimation: number | null = null
+let scaleAnimation: number | null = null;
+let overflowAnimation: number | null = null;
 
-watch(() => props.defaultValue, (newValue) => {
-  value.value = newValue
-})
-
-watch(clientX, (latest) => {
-  if (sliderRef.value) {
-    const { left, right } = sliderRef.value.getBoundingClientRect()
-    let newValue: number
-    if (latest < left) {
-      region.value = 'left'
-      newValue = left - latest
-    } else if (latest > right) {
-      region.value = 'right'
-      newValue = latest - right
-    } else {
-      region.value = 'middle'
-      newValue = 0
-    }
-    overflow.value = decay(newValue, MAX_OVERFLOW)
+watch(
+  () => props.defaultValue,
+  newValue => {
+    value.value = newValue;
   }
-})
+);
+
+watch(clientX, latest => {
+  if (sliderRef.value) {
+    const { left, right } = sliderRef.value.getBoundingClientRect();
+    let newValue: number;
+    if (latest < left) {
+      region.value = 'left';
+      newValue = left - latest;
+    } else if (latest > right) {
+      region.value = 'right';
+      newValue = latest - right;
+    } else {
+      region.value = 'middle';
+      newValue = 0;
+    }
+    overflow.value = decay(newValue, MAX_OVERFLOW);
+  }
+});
 
 const rangePercentage = computed(() => {
-  const totalRange = props.maxValue - props.startingValue
-  if (totalRange === 0) return 0
-  return ((value.value - props.startingValue) / totalRange) * 100
-})
+  const totalRange = props.maxValue - props.startingValue;
+  if (totalRange === 0) return 0;
+  return ((value.value - props.startingValue) / totalRange) * 100;
+});
 
 const sliderScaleX = computed(() => {
-  if (!sliderRef.value) return 1
-  const { width } = sliderRef.value.getBoundingClientRect()
-  return 1 + overflow.value / width
-})
+  if (!sliderRef.value) return 1;
+  const { width } = sliderRef.value.getBoundingClientRect();
+  return 1 + overflow.value / width;
+});
 
 const sliderScaleY = computed(() => {
-  const t = overflow.value / MAX_OVERFLOW
-  return 1 + t * (0.8 - 1)
-})
+  const t = overflow.value / MAX_OVERFLOW;
+  return 1 + t * (0.8 - 1);
+});
 
 const transformOrigin = computed(() => {
-  if (!sliderRef.value) return 'center'
-  const { left, width } = sliderRef.value.getBoundingClientRect()
-  return clientX.value < left + width / 2 ? 'right' : 'left'
-})
+  if (!sliderRef.value) return 'center';
+  const { left, width } = sliderRef.value.getBoundingClientRect();
+  return clientX.value < left + width / 2 ? 'right' : 'left';
+});
 
 const sliderHeight = computed(() => {
-  const t = (scale.value - 1) / (1.2 - 1)
-  return 6 + t * (12 - 6)
-})
+  const t = (scale.value - 1) / (1.2 - 1);
+  return 6 + t * (12 - 6);
+});
 
 const sliderMarginTop = computed(() => {
-  const t = (scale.value - 1) / (1.2 - 1)
-  return 0 + t * (-3 - 0)
-})
+  const t = (scale.value - 1) / (1.2 - 1);
+  return 0 + t * (-3 - 0);
+});
 
 const sliderMarginBottom = computed(() => {
-  const t = (scale.value - 1) / (1.2 - 1)
-  return 0 + t * (-3 - 0)
-})
+  const t = (scale.value - 1) / (1.2 - 1);
+  return 0 + t * (-3 - 0);
+});
 
 const sliderOpacity = computed(() => {
-  const t = (scale.value - 1) / (1.2 - 1)
-  return 0.7 + t * (1 - 0.7)
-})
+  const t = (scale.value - 1) / (1.2 - 1);
+  return 0.7 + t * (1 - 0.7);
+});
 
 const leftIconTranslateX = computed(() => {
-  return region.value === 'left' ? -overflow.value / scale.value : 0
-})
+  return region.value === 'left' ? -overflow.value / scale.value : 0;
+});
 
 const rightIconTranslateX = computed(() => {
-  return region.value === 'right' ? overflow.value / scale.value : 0
-})
+  return region.value === 'right' ? overflow.value / scale.value : 0;
+});
 
 const decay = (inputValue: number, max: number): number => {
-  if (max === 0) return 0
-  const entry = inputValue / max
-  const sigmoid = 2 * (1 / (1 + Math.exp(-entry)) - 0.5)
-  return sigmoid * max
-}
+  if (max === 0) return 0;
+  const entry = inputValue / max;
+  const sigmoid = 2 * (1 / (1 + Math.exp(-entry)) - 0.5);
+  return sigmoid * max;
+};
 
-const animate = (target: { value: number }, to: number, options: { type?: string; bounce?: number; duration?: number } = {}) => {
-  const { type = 'tween', bounce = 0, duration = 0.3 } = options
+const animate = (
+  target: { value: number },
+  to: number,
+  options: { type?: string; bounce?: number; duration?: number } = {}
+) => {
+  const { type = 'tween', bounce = 0, duration = 0.3 } = options;
 
   if (type === 'spring') {
-    return animateSpring(target, to, bounce, duration)
+    return animateSpring(target, to, bounce, duration);
   } else {
-    return animateValue(target, to, duration)
+    return animateValue(target, to, duration);
   }
-}
+};
 
 const animateValue = (target: { value: number }, to: number, duration = 300) => {
-  const start = target.value
-  const diff = to - start
-  const startTime = performance.now()
+  const start = target.value;
+  const diff = to - start;
+  const startTime = performance.now();
 
   const animateFrame = (currentTime: number) => {
-    const elapsed = currentTime - startTime
-    const progress = Math.min(elapsed / duration, 1)
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / duration, 1);
 
-    const easeOut = 1 - Math.pow(1 - progress, 3)
-    target.value = start + diff * easeOut
+    const easeOut = 1 - Math.pow(1 - progress, 3);
+    target.value = start + diff * easeOut;
 
     if (progress < 1) {
-      return requestAnimationFrame(animateFrame)
+      return requestAnimationFrame(animateFrame);
     }
-    return null
-  }
+    return null;
+  };
 
-  return requestAnimationFrame(animateFrame)
-}
+  return requestAnimationFrame(animateFrame);
+};
 
 const animateSpring = (target: { value: number }, to: number, bounce = 0.5, duration = 600) => {
-  const start = target.value
-  const startTime = performance.now()
+  const start = target.value;
+  const startTime = performance.now();
 
-  const mass = 1
-  const stiffness = 170
-  const damping = 26 * (1 - bounce)
+  const mass = 1;
+  const stiffness = 170;
+  const damping = 26 * (1 - bounce);
 
-  const dampingRatio = damping / (2 * Math.sqrt(mass * stiffness))
-  const angularFreq = Math.sqrt(stiffness / mass)
-  const dampedFreq = angularFreq * Math.sqrt(1 - dampingRatio * dampingRatio)
+  const dampingRatio = damping / (2 * Math.sqrt(mass * stiffness));
+  const angularFreq = Math.sqrt(stiffness / mass);
+  const dampedFreq = angularFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 
   const animateFrame = (currentTime: number) => {
-    const elapsed = currentTime - startTime
-    const t = elapsed / 1000
+    const elapsed = currentTime - startTime;
+    const t = elapsed / 1000;
 
-    let displacement: number
+    let displacement: number;
 
     if (dampingRatio < 1) {
-      const envelope = Math.exp(-dampingRatio * angularFreq * t)
-      const cos = Math.cos(dampedFreq * t)
-      const sin = Math.sin(dampedFreq * t)
+      const envelope = Math.exp(-dampingRatio * angularFreq * t);
+      const cos = Math.cos(dampedFreq * t);
+      const sin = Math.sin(dampedFreq * t);
 
-      displacement = envelope * (cos + (dampingRatio * angularFreq / dampedFreq) * sin)
+      displacement = envelope * (cos + ((dampingRatio * angularFreq) / dampedFreq) * sin);
     } else {
-      displacement = Math.exp(-angularFreq * t)
+      displacement = Math.exp(-angularFreq * t);
     }
 
-    const currentValue = to + (start - to) * displacement
-    target.value = currentValue
+    const currentValue = to + (start - to) * displacement;
+    target.value = currentValue;
 
-    const velocity = Math.abs(currentValue - to)
-    const isSettled = velocity < 0.01 && elapsed > 100
+    const velocity = Math.abs(currentValue - to);
+    const isSettled = velocity < 0.01 && elapsed > 100;
 
     if (!isSettled && elapsed < duration * 3) {
-      return requestAnimationFrame(animateFrame)
+      return requestAnimationFrame(animateFrame);
     } else {
-      target.value = to
-      return null
+      target.value = to;
+      return null;
     }
-  }
+  };
 
-  return requestAnimationFrame(animateFrame)
-}
+  return requestAnimationFrame(animateFrame);
+};
 
 const animateIconScale = (target: { value: number }, isActive: boolean) => {
   if (isActive) {
-    animate(target, 1.4, { duration: 125 })
+    animate(target, 1.4, { duration: 125 });
     setTimeout(() => {
-      animate(target, 1, { duration: 125 })
-    }, 125)
+      animate(target, 1, { duration: 125 });
+    }, 125);
   } else {
-    animate(target, 1, { duration: 250 })
+    animate(target, 1, { duration: 250 });
   }
-}
+};
 
 watch(region, (newRegion, oldRegion) => {
   if (newRegion === 'left' && oldRegion !== 'left') {
-    animateIconScale(leftIconScale, true)
+    animateIconScale(leftIconScale, true);
   } else if (newRegion === 'right' && oldRegion !== 'right') {
-    animateIconScale(rightIconScale, true)
+    animateIconScale(rightIconScale, true);
   }
-})
+});
 
 const handlePointerMove = (e: PointerEvent) => {
   if (e.buttons > 0 && sliderRef.value) {
-    const { left, width } = sliderRef.value.getBoundingClientRect()
+    const { left, width } = sliderRef.value.getBoundingClientRect();
 
-    let newValue = props.startingValue + ((e.clientX - left) / width) * (props.maxValue - props.startingValue)
+    let newValue = props.startingValue + ((e.clientX - left) / width) * (props.maxValue - props.startingValue);
 
     if (props.isStepped) {
-      newValue = Math.round(newValue / props.stepSize) * props.stepSize
+      newValue = Math.round(newValue / props.stepSize) * props.stepSize;
     }
 
-    newValue = Math.min(Math.max(newValue, props.startingValue), props.maxValue)
-    value.value = newValue
+    newValue = Math.min(Math.max(newValue, props.startingValue), props.maxValue);
+    value.value = newValue;
 
-    clientX.value = e.clientX
+    clientX.value = e.clientX;
   }
-}
+};
 
 const handlePointerDown = (e: PointerEvent) => {
-  handlePointerMove(e)
-    ; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-}
+  handlePointerMove(e);
+  (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+};
 
 const handlePointerUp = () => {
   if (overflowAnimation) {
-    cancelAnimationFrame(overflowAnimation)
+    cancelAnimationFrame(overflowAnimation);
   }
-  overflowAnimation = animate(overflow, 0, { type: 'spring', bounce: 0.4, duration: 500 })
-}
+  overflowAnimation = animate(overflow, 0, { type: 'spring', bounce: 0.4, duration: 500 });
+};
 
 const handleMouseEnter = () => {
   if (scaleAnimation) {
-    cancelAnimationFrame(scaleAnimation)
+    cancelAnimationFrame(scaleAnimation);
   }
-  scaleAnimation = animate(scale, 1.2, { duration: 200 })
-}
+  scaleAnimation = animate(scale, 1.2, { duration: 200 });
+};
 
 const handleMouseLeave = () => {
   if (scaleAnimation) {
-    cancelAnimationFrame(scaleAnimation)
+    cancelAnimationFrame(scaleAnimation);
   }
-  scaleAnimation = animate(scale, 1, { duration: 200 })
-}
+  scaleAnimation = animate(scale, 1, { duration: 200 });
+};
 
 const handleTouchStart = () => {
   if (scaleAnimation) {
-    cancelAnimationFrame(scaleAnimation)
+    cancelAnimationFrame(scaleAnimation);
   }
-  scaleAnimation = animate(scale, 1.2, { duration: 200 })
-}
+  scaleAnimation = animate(scale, 1.2, { duration: 200 });
+};
 
 const handleTouchEnd = () => {
   if (scaleAnimation) {
-    cancelAnimationFrame(scaleAnimation)
+    cancelAnimationFrame(scaleAnimation);
   }
-  scaleAnimation = animate(scale, 1, { duration: 200 })
-}
+  scaleAnimation = animate(scale, 1, { duration: 200 });
+};
 
 onMounted(() => {
-  value.value = props.defaultValue
-})
+  value.value = props.defaultValue;
+});
 </script>
diff --git a/src/content/Components/FlowingMenu/FlowingMenu.vue b/src/content/Components/FlowingMenu/FlowingMenu.vue
index a168523..53c3be4 100644
--- a/src/content/Components/FlowingMenu/FlowingMenu.vue
+++ b/src/content/Components/FlowingMenu/FlowingMenu.vue
@@ -1,24 +1,36 @@
 <template>
   <div class="w-full h-full overflow-hidden">
     <nav class="flex flex-col h-full m-0 p-0">
-      <div v-for="(item, idx) in items" :key="idx"
+      <div
+        v-for="(item, idx) in items"
+        :key="idx"
         class="flex-1 relative overflow-hidden text-center shadow-[0_-1px_0_0_#fff]"
-        :ref="(el) => setItemRef(el as HTMLDivElement, idx)">
-        <a class="flex items-center justify-center h-full relative cursor-pointer uppercase no-underline font-semibold text-white text-[4vh] hover:text-[#060010] focus:text-white focus-visible:text-[#060010]"
-          :href="item.link" @mouseenter="(ev) => handleMouseEnter(ev, idx)"
-          @mouseleave="(ev) => handleMouseLeave(ev, idx)">
+        :ref="el => setItemRef(el as HTMLDivElement, idx)"
+      >
+        <a
+          class="flex items-center justify-center h-full relative cursor-pointer uppercase no-underline font-semibold text-white text-[4vh] hover:text-[#060010] focus:text-white focus-visible:text-[#060010]"
+          :href="item.link"
+          @mouseenter="ev => handleMouseEnter(ev, idx)"
+          @mouseleave="ev => handleMouseLeave(ev, idx)"
+        >
           {{ item.text }}
         </a>
-        <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none bg-white translate-y-[101%]"
-          :ref="(el) => marqueeRefs[idx] = el as HTMLDivElement">
-          <div class="h-full w-[200%] flex" :ref="(el) => marqueeInnerRefs[idx] = el as HTMLDivElement">
+
+        <div
+          class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none bg-white translate-y-[101%]"
+          :ref="el => (marqueeRefs[idx] = el as HTMLDivElement)"
+        >
+          <div class="h-full w-[200%] flex" :ref="el => (marqueeInnerRefs[idx] = el as HTMLDivElement)">
             <div class="flex items-center relative h-full w-[200%] will-change-transform animate-marquee">
               <template v-for="i in 4" :key="`${idx}-${i}`">
                 <span class="text-[#060010] uppercase font-normal text-[4vh] leading-[1.2] p-[1vh_1vw_0]">
                   {{ item.text }}
                 </span>
-                <div class="w-[200px] h-[7vh] my-[2em] mx-[2vw] p-[1em_0] rounded-[50px] bg-cover bg-center"
-                  :style="{ backgroundImage: `url(${item.image})` }" />
+
+                <div
+                  class="w-[200px] h-[7vh] my-[2em] mx-[2vw] p-[1em_0] rounded-[50px] bg-cover bg-center"
+                  :style="{ backgroundImage: `url(${item.image})` }"
+                />
               </template>
             </div>
           </div>
@@ -29,89 +41,72 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { gsap } from 'gsap'
+import { ref } from 'vue';
+import { gsap } from 'gsap';
 
 interface MenuItemProps {
-  link: string
-  text: string
-  image: string
+  link: string;
+  text: string;
+  image: string;
 }
 
 interface Props {
-  items?: MenuItemProps[]
+  items?: MenuItemProps[];
 }
 
 withDefaults(defineProps<Props>(), {
   items: () => []
-})
+});
 
-const itemRefs = ref<(HTMLDivElement | null)[]>([])
-const marqueeRefs = ref<(HTMLDivElement | null)[]>([])
-const marqueeInnerRefs = ref<(HTMLDivElement | null)[]>([])
+const itemRefs = ref<(HTMLDivElement | null)[]>([]);
+const marqueeRefs = ref<(HTMLDivElement | null)[]>([]);
+const marqueeInnerRefs = ref<(HTMLDivElement | null)[]>([]);
 
-const animationDefaults = { duration: 0.6, ease: 'expo' }
+const animationDefaults = { duration: 0.6, ease: 'expo' };
 
 const setItemRef = (el: HTMLDivElement | null, idx: number) => {
   if (el) {
-    itemRefs.value[idx] = el
+    itemRefs.value[idx] = el;
   }
-}
+};
 
-const findClosestEdge = (
-  mouseX: number,
-  mouseY: number,
-  width: number,
-  height: number
-): 'top' | 'bottom' => {
-  const topEdgeDist = Math.pow(mouseX - width / 2, 2) + Math.pow(mouseY, 2)
-  const bottomEdgeDist =
-    Math.pow(mouseX - width / 2, 2) + Math.pow(mouseY - height, 2)
-  return topEdgeDist < bottomEdgeDist ? 'top' : 'bottom'
-}
+const findClosestEdge = (mouseX: number, mouseY: number, width: number, height: number): 'top' | 'bottom' => {
+  const topEdgeDist = Math.pow(mouseX - width / 2, 2) + Math.pow(mouseY, 2);
+  const bottomEdgeDist = Math.pow(mouseX - width / 2, 2) + Math.pow(mouseY - height, 2);
+  return topEdgeDist < bottomEdgeDist ? 'top' : 'bottom';
+};
 
 const handleMouseEnter = (ev: MouseEvent, idx: number) => {
-  const itemRef = itemRefs.value[idx]
-  const marqueeRef = marqueeRefs.value[idx]
-  const marqueeInnerRef = marqueeInnerRefs.value[idx]
+  const itemRef = itemRefs.value[idx];
+  const marqueeRef = marqueeRefs.value[idx];
+  const marqueeInnerRef = marqueeInnerRefs.value[idx];
 
-  if (!itemRef || !marqueeRef || !marqueeInnerRef) return
+  if (!itemRef || !marqueeRef || !marqueeInnerRef) return;
 
-  const rect = itemRef.getBoundingClientRect()
-  const edge = findClosestEdge(
-    ev.clientX - rect.left,
-    ev.clientY - rect.top,
-    rect.width,
-    rect.height
-  )
+  const rect = itemRef.getBoundingClientRect();
+  const edge = findClosestEdge(ev.clientX - rect.left, ev.clientY - rect.top, rect.width, rect.height);
 
-  const tl = gsap.timeline({ defaults: animationDefaults })
+  const tl = gsap.timeline({ defaults: animationDefaults });
   tl.set(marqueeRef, { y: edge === 'top' ? '-101%' : '101%' })
     .set(marqueeInnerRef, { y: edge === 'top' ? '101%' : '-101%' })
-    .to([marqueeRef, marqueeInnerRef], { y: '0%' })
-}
+    .to([marqueeRef, marqueeInnerRef], { y: '0%' });
+};
 
 const handleMouseLeave = (ev: MouseEvent, idx: number) => {
-  const itemRef = itemRefs.value[idx]
-  const marqueeRef = marqueeRefs.value[idx]
-  const marqueeInnerRef = marqueeInnerRefs.value[idx]
+  const itemRef = itemRefs.value[idx];
+  const marqueeRef = marqueeRefs.value[idx];
+  const marqueeInnerRef = marqueeInnerRefs.value[idx];
 
-  if (!itemRef || !marqueeRef || !marqueeInnerRef) return
+  if (!itemRef || !marqueeRef || !marqueeInnerRef) return;
 
-  const rect = itemRef.getBoundingClientRect()
-  const edge = findClosestEdge(
-    ev.clientX - rect.left,
-    ev.clientY - rect.top,
-    rect.width,
-    rect.height
-  )
+  const rect = itemRef.getBoundingClientRect();
+  const edge = findClosestEdge(ev.clientX - rect.left, ev.clientY - rect.top, rect.width, rect.height);
 
-  const tl = gsap.timeline({ defaults: animationDefaults })
-  tl.to(marqueeRef, { y: edge === 'top' ? '-101%' : '101%' }).to(
-    marqueeInnerRef,
-    { y: edge === 'top' ? '101%' : '-101%' }
-  )
-}
+  const tl = gsap.timeline({ defaults: animationDefaults });
+  tl.to(marqueeRef, { y: edge === 'top' ? '-101%' : '101%' }).to(marqueeInnerRef, {
+    y: edge === 'top' ? '101%' : '-101%'
+  });
+};
 </script>
 
 <style scoped>
diff --git a/src/content/Components/FlyingPosters/FlyingPosters.vue b/src/content/Components/FlyingPosters/FlyingPosters.vue
index 1f528e6..96c51aa 100644
--- a/src/content/Components/FlyingPosters/FlyingPosters.vue
+++ b/src/content/Components/FlyingPosters/FlyingPosters.vue
@@ -1,23 +1,11 @@
 <template>
-  <div ref="containerRef" :class="[
-    'w-full h-full overflow-hidden relative z-2',
-    className
-  ]" v-bind="$attrs">
+  <div ref="containerRef" :class="['w-full h-full overflow-hidden relative z-2', className]" v-bind="$attrs">
     <canvas ref="canvasRef" class="block w-full h-full" />
   </div>
 </template>
 
 <script lang="ts">
-import {
-  Renderer,
-  Camera,
-  Transform,
-  Plane,
-  Program,
-  Mesh,
-  Texture,
-  type OGLRenderingContext,
-} from "ogl";
+import { Renderer, Camera, Transform, Plane, Program, Mesh, Texture, type OGLRenderingContext } from 'ogl';
 
 type GL = OGLRenderingContext;
 type OGLProgram = Program;
@@ -177,18 +165,13 @@ function AutoBind(self: any, { include, exclude }: AutoBindOptions = {}) {
       for (const key of Reflect.ownKeys(currentObject)) {
         properties.add([currentObject, key]);
       }
-    } while (
-      (currentObject = Reflect.getPrototypeOf(currentObject)) &&
-      currentObject !== Object.prototype
-    );
+    } while ((currentObject = Reflect.getPrototypeOf(currentObject)) && currentObject !== Object.prototype);
     return properties;
   };
 
   const filter = (key: string | symbol) => {
     const match = (pattern: string | RegExp) =>
-      typeof pattern === "string"
-        ? key === pattern
-        : (pattern as RegExp).test(key.toString());
+      typeof pattern === 'string' ? key === pattern : (pattern as RegExp).test(key.toString());
 
     if (include) return include.some(match);
     if (exclude) return !exclude.some(match);
@@ -196,9 +179,9 @@ function AutoBind(self: any, { include, exclude }: AutoBindOptions = {}) {
   };
 
   for (const [object, key] of getAllProperties(self.constructor.prototype)) {
-    if (key === "constructor" || !filter(key)) continue;
+    if (key === 'constructor' || !filter(key)) continue;
     const descriptor = Reflect.getOwnPropertyDescriptor(object, key);
-    if (descriptor && typeof descriptor.value === "function" && typeof key === "string") {
+    if (descriptor && typeof descriptor.value === 'function' && typeof key === 'string') {
       self[key] = self[key].bind(self);
     }
   }
@@ -209,14 +192,7 @@ function lerp(p1: number, p2: number, t: number): number {
   return p1 + (p2 - p1) * t;
 }
 
-function map(
-  num: number,
-  min1: number,
-  max1: number,
-  min2: number,
-  max2: number,
-  round = false
-): number {
+function map(num: number, min1: number, max1: number, min2: number, max2: number, round = false): number {
   const num1 = (num - min1) / (max1 - min1);
   const num2 = num1 * (max2 - min2) + min2;
   return round ? Math.round(num2) : num2;
@@ -254,7 +230,7 @@ class Media {
     index,
     planeWidth,
     planeHeight,
-    distortion,
+    distortion
   }: MediaParams) {
     this.gl = gl;
     this.geometry = geometry;
@@ -290,54 +266,40 @@ class Media {
         distortionAxis: { value: [1, 1, 0] },
         uDistortion: { value: this.distortion },
         uViewportSize: { value: [this.viewport.width, this.viewport.height] },
-        uTime: { value: 0 },
+        uTime: { value: 0 }
       },
-      cullFace: false,
+      cullFace: false
     });
 
     const img = new Image();
-    img.crossOrigin = "anonymous";
+    img.crossOrigin = 'anonymous';
     img.src = this.image;
     img.onload = () => {
       texture.image = img;
-      this.program.uniforms.uImageSize.value = [
-        img.naturalWidth,
-        img.naturalHeight,
-      ];
+      this.program.uniforms.uImageSize.value = [img.naturalWidth, img.naturalHeight];
     };
   }
 
   createMesh() {
     this.plane = new Mesh(this.gl, {
       geometry: this.geometry,
-      program: this.program,
+      program: this.program
     });
     this.plane.setParent(this.scene);
   }
 
   setScale() {
-    this.plane.scale.x =
-      (this.viewport.width * this.planeWidth) / this.screen.width;
-    this.plane.scale.y =
-      (this.viewport.height * this.planeHeight) / this.screen.height;
+    this.plane.scale.x = (this.viewport.width * this.planeWidth) / this.screen.width;
+    this.plane.scale.y = (this.viewport.height * this.planeHeight) / this.screen.height;
     this.plane.position.x = 0;
-    this.program.uniforms.uPlaneSize.value = [
-      this.plane.scale.x,
-      this.plane.scale.y,
-    ];
+    this.program.uniforms.uPlaneSize.value = [this.plane.scale.x, this.plane.scale.y];
   }
 
-  onResize({
-    screen,
-    viewport,
-  }: { screen?: ScreenSize; viewport?: ViewportSize } = {}) {
+  onResize({ screen, viewport }: { screen?: ScreenSize; viewport?: ViewportSize } = {}) {
     if (screen) this.screen = screen;
     if (viewport) {
       this.viewport = viewport;
-      this.program.uniforms.uViewportSize.value = [
-        viewport.width,
-        viewport.height,
-      ];
+      this.program.uniforms.uViewportSize.value = [viewport.width, viewport.height];
     }
     this.setScale();
 
@@ -349,13 +311,7 @@ class Media {
 
   update(scroll: ScrollState) {
     this.plane.position.y = this.y - scroll.current - this.extra;
-    const position = map(
-      this.plane.position.y,
-      -this.viewport.height,
-      this.viewport.height,
-      5,
-      15
-    );
+    const position = map(this.plane.position.y, -this.viewport.height, this.viewport.height, 5, 15);
 
     this.program.uniforms.uPosition.value = position;
     this.program.uniforms.uTime.value += 0.04;
@@ -406,7 +362,7 @@ class Canvas {
     distortion,
     scrollEase,
     cameraFov,
-    cameraZ,
+    cameraZ
   }: CanvasParams) {
     this.container = container;
     this.canvas = canvas;
@@ -418,7 +374,7 @@ class Canvas {
       ease: scrollEase,
       current: 0,
       target: 0,
-      last: 0,
+      last: 0
     };
     this.cameraFov = cameraFov;
     this.cameraZ = cameraZ;
@@ -441,7 +397,7 @@ class Canvas {
       canvas: this.canvas,
       alpha: true,
       antialias: true,
-      dpr: Math.min(window.devicePixelRatio, 2),
+      dpr: Math.min(window.devicePixelRatio, 2)
     });
     this.gl = this.renderer.gl;
   }
@@ -459,7 +415,7 @@ class Canvas {
   createGeometry() {
     this.planeGeometry = new Plane(this.gl, {
       heightSegments: 1,
-      widthSegments: 100,
+      widthSegments: 100
     });
   }
 
@@ -477,7 +433,7 @@ class Canvas {
           index,
           planeWidth: this.planeWidth,
           planeHeight: this.planeHeight,
-          distortion: this.distortion,
+          distortion: this.distortion
         })
     );
   }
@@ -493,14 +449,14 @@ class Canvas {
 
   createPreloader() {
     this.loaded = 0;
-    this.items.forEach((src) => {
+    this.items.forEach(src => {
       const image = new Image();
-      image.crossOrigin = "anonymous";
+      image.crossOrigin = 'anonymous';
       image.src = src;
       image.onload = () => {
         if (++this.loaded === this.items.length) {
-          document.documentElement.classList.remove("loading");
-          document.documentElement.classList.add("loaded");
+          document.documentElement.classList.remove('loading');
+          document.documentElement.classList.add('loaded');
         }
       };
     });
@@ -512,7 +468,7 @@ class Canvas {
     this.renderer.setSize(this.screen.width, this.screen.height);
 
     this.camera.perspective({
-      aspect: this.gl.canvas.width / this.gl.canvas.height,
+      aspect: this.gl.canvas.width / this.gl.canvas.height
     });
 
     const fov = (this.camera.fov * Math.PI) / 180;
@@ -520,9 +476,7 @@ class Canvas {
     const width = height * this.camera.aspect;
     this.viewport = { width, height };
 
-    this.medias?.forEach((media) =>
-      media.onResize({ screen: this.screen, viewport: this.viewport })
-    );
+    this.medias?.forEach(media => media.onResize({ screen: this.screen, viewport: this.viewport }));
   }
 
   onTouchDown(e: MouseEvent | TouchEvent) {
@@ -547,37 +501,33 @@ class Canvas {
   }
 
   update() {
-    this.scroll.current = lerp(
-      this.scroll.current,
-      this.scroll.target,
-      this.scroll.ease
-    );
-    this.medias?.forEach((media) => media.update(this.scroll));
+    this.scroll.current = lerp(this.scroll.current, this.scroll.target, this.scroll.ease);
+    this.medias?.forEach(media => media.update(this.scroll));
     this.renderer.render({ scene: this.scene, camera: this.camera });
     this.scroll.last = this.scroll.current;
     requestAnimationFrame(this.update);
   }
 
   addEventListeners() {
-    window.addEventListener("resize", this.onResize);
-    window.addEventListener("wheel", this.onWheel);
-    window.addEventListener("mousedown", this.onTouchDown);
-    window.addEventListener("mousemove", this.onTouchMove);
-    window.addEventListener("mouseup", this.onTouchUp);
-    window.addEventListener("touchstart", this.onTouchDown as EventListener);
-    window.addEventListener("touchmove", this.onTouchMove as EventListener);
-    window.addEventListener("touchend", this.onTouchUp as EventListener);
+    window.addEventListener('resize', this.onResize);
+    window.addEventListener('wheel', this.onWheel);
+    window.addEventListener('mousedown', this.onTouchDown);
+    window.addEventListener('mousemove', this.onTouchMove);
+    window.addEventListener('mouseup', this.onTouchUp);
+    window.addEventListener('touchstart', this.onTouchDown as EventListener);
+    window.addEventListener('touchmove', this.onTouchMove as EventListener);
+    window.addEventListener('touchend', this.onTouchUp as EventListener);
   }
 
   destroy() {
-    window.removeEventListener("resize", this.onResize);
-    window.removeEventListener("wheel", this.onWheel);
-    window.removeEventListener("mousedown", this.onTouchDown);
-    window.removeEventListener("mousemove", this.onTouchMove);
-    window.removeEventListener("mouseup", this.onTouchUp);
-    window.removeEventListener("touchstart", this.onTouchDown as EventListener);
-    window.removeEventListener("touchmove", this.onTouchMove as EventListener);
-    window.removeEventListener("touchend", this.onTouchUp as EventListener);
+    window.removeEventListener('resize', this.onResize);
+    window.removeEventListener('wheel', this.onWheel);
+    window.removeEventListener('mousedown', this.onTouchDown);
+    window.removeEventListener('mousemove', this.onTouchMove);
+    window.removeEventListener('mouseup', this.onTouchUp);
+    window.removeEventListener('touchstart', this.onTouchDown as EventListener);
+    window.removeEventListener('touchmove', this.onTouchMove as EventListener);
+    window.removeEventListener('touchend', this.onTouchUp as EventListener);
   }
 }
 
@@ -596,7 +546,7 @@ export { Canvas, Media };
 </script>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 
 const props = withDefaults(defineProps<FlyingPostersProps>(), {
   items: () => [],
@@ -606,15 +556,15 @@ const props = withDefaults(defineProps<FlyingPostersProps>(), {
   scrollEase: 0.01,
   cameraFov: 45,
   cameraZ: 20,
-  className: '',
-})
+  className: ''
+});
 
-const containerRef = ref<HTMLDivElement>()
-const canvasRef = ref<HTMLCanvasElement>()
-const instanceRef = ref<Canvas | null>(null)
+const containerRef = ref<HTMLDivElement>();
+const canvasRef = ref<HTMLCanvasElement>();
+const instanceRef = ref<Canvas | null>(null);
 
 const initCanvas = () => {
-  if (!containerRef.value || !canvasRef.value) return
+  if (!containerRef.value || !canvasRef.value) return;
 
   instanceRef.value = new Canvas({
     container: containerRef.value,
@@ -625,27 +575,27 @@ const initCanvas = () => {
     distortion: props.distortion,
     scrollEase: props.scrollEase,
     cameraFov: props.cameraFov,
-    cameraZ: props.cameraZ,
-  })
-}
+    cameraZ: props.cameraZ
+  });
+};
 
 const destroyCanvas = () => {
   if (instanceRef.value) {
-    instanceRef.value.destroy()
-    instanceRef.value = null
+    instanceRef.value.destroy();
+    instanceRef.value = null;
   }
-}
+};
 
 const handleWheel = (e: WheelEvent) => {
-  e.preventDefault()
+  e.preventDefault();
   if (instanceRef.value) {
-    instanceRef.value.onWheel(e)
+    instanceRef.value.onWheel(e);
   }
-}
+};
 
 const handleTouchMove = (e: TouchEvent) => {
-  e.preventDefault()
-}
+  e.preventDefault();
+};
 
 watch(
   () => [
@@ -655,32 +605,32 @@ watch(
     props.distortion,
     props.scrollEase,
     props.cameraFov,
-    props.cameraZ,
+    props.cameraZ
   ],
   () => {
-    destroyCanvas()
-    initCanvas()
+    destroyCanvas();
+    initCanvas();
   },
   { deep: true }
-)
+);
 
 onMounted(() => {
-  initCanvas()
+  initCanvas();
 
   if (canvasRef.value) {
-    const canvasEl = canvasRef.value
-    canvasEl.addEventListener('wheel', handleWheel, { passive: false })
-    canvasEl.addEventListener('touchmove', handleTouchMove, { passive: false })
+    const canvasEl = canvasRef.value;
+    canvasEl.addEventListener('wheel', handleWheel, { passive: false });
+    canvasEl.addEventListener('touchmove', handleTouchMove, { passive: false });
   }
-})
+});
 
 onUnmounted(() => {
-  destroyCanvas()
+  destroyCanvas();
 
   if (canvasRef.value) {
-    const canvasEl = canvasRef.value
-    canvasEl.removeEventListener('wheel', handleWheel)
-    canvasEl.removeEventListener('touchmove', handleTouchMove)
+    const canvasEl = canvasRef.value;
+    canvasEl.removeEventListener('wheel', handleWheel);
+    canvasEl.removeEventListener('touchmove', handleTouchMove);
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/content/Components/GlassIcons/GlassIcons.vue b/src/content/Components/GlassIcons/GlassIcons.vue
index b5f38ee..4d8e0b3 100644
--- a/src/content/Components/GlassIcons/GlassIcons.vue
+++ b/src/content/Components/GlassIcons/GlassIcons.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    :class="[
-      'grid gap-[5em] grid-cols-2 md:grid-cols-3 mx-auto py-[3em] overflow-visible',
-      className
-    ]"
-  >
+  <div :class="['grid gap-[5em] grid-cols-2 md:grid-cols-3 mx-auto py-[3em] overflow-visible', className]">
     <button
       v-for="(item, index) in items"
       :key="index"
@@ -29,15 +24,14 @@
           boxShadow: '0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset'
         }"
       >
-        <span
-          class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center"
-          aria-hidden="true"
-        >
+        <span class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center" aria-hidden="true">
           <i :class="item.icon" class="text-xl"></i>
         </span>
       </span>
 
-      <span class="absolute top-full left-0 right-0 text-center whitespace-nowrap leading-[2] text-base opacity-0 transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0 group-hover:opacity-100 group-hover:[transform:translateY(20%)]">
+      <span
+        class="absolute top-full left-0 right-0 text-center whitespace-nowrap leading-[2] text-base opacity-0 transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0 group-hover:opacity-100 group-hover:[transform:translateY(20%)]"
+      >
         {{ item.label }}
       </span>
     </button>
@@ -46,21 +40,21 @@
 
 <script setup lang="ts">
 interface GlassIconsItem {
-  icon: string
-  color: string
-  label: string
-  customClass?: string
+  icon: string;
+  color: string;
+  label: string;
+  customClass?: string;
 }
 
 interface Props {
-  items: GlassIconsItem[]
-  className?: string
+  items: GlassIconsItem[];
+  className?: string;
 }
 
 withDefaults(defineProps<Props>(), {
   items: () => [],
   className: ''
-})
+});
 
 const gradientMapping: Record<string, string> = {
   blue: 'linear-gradient(hsl(223, 90%, 50%), hsl(208, 90%, 50%))',
@@ -69,12 +63,12 @@ const gradientMapping: Record<string, string> = {
   indigo: 'linear-gradient(hsl(253, 90%, 50%), hsl(238, 90%, 50%))',
   orange: 'linear-gradient(hsl(43, 90%, 50%), hsl(28, 90%, 50%))',
   green: 'linear-gradient(hsl(123, 90%, 40%), hsl(108, 90%, 40%))'
-}
+};
 
 const getBackgroundStyle = (color: string): Record<string, string> => {
   if (gradientMapping[color]) {
-    return { background: gradientMapping[color] }
+    return { background: gradientMapping[color] };
   }
-  return { background: color }
-}
+  return { background: color };
+};
 </script>
diff --git a/src/content/Components/GooeyNav/GooeyNav.vue b/src/content/Components/GooeyNav/GooeyNav.vue
index 60983f3..39edb98 100644
--- a/src/content/Components/GooeyNav/GooeyNav.vue
+++ b/src/content/Components/GooeyNav/GooeyNav.vue
@@ -1,16 +1,13 @@
 <template>
   <div>
     <div class="relative" ref="containerRef">
-      <nav
-        class="flex relative"
-        :style="{ transform: 'translate3d(0,0,0.01px)' }"
-      >
+      <nav class="flex relative" :style="{ transform: 'translate3d(0,0,0.01px)' }">
         <ul
           ref="navRef"
           class="flex gap-8 list-none p-0 px-4 m-0 relative z-[3]"
           :style="{
             color: 'white',
-            textShadow: '0 1px 1px hsl(205deg 30% 10% / 0.2)',
+            textShadow: '0 1px 1px hsl(205deg 30% 10% / 0.2)'
           }"
         >
           <li
@@ -23,8 +20,8 @@
           >
             <a
               :href="item.href || undefined"
-              @click="(e) => handleClick(e, index)"
-              @keydown="(e) => handleKeyDown(e, index)"
+              @click="e => handleClick(e, index)"
+              @keydown="e => handleKeyDown(e, index)"
               class="outline-none py-[0.6em] px-[1em] inline-block"
             >
               {{ item.label }}
@@ -32,29 +29,31 @@
           </li>
         </ul>
       </nav>
+
       <span class="effect filter" ref="filterRef" />
+
       <span class="effect text" ref="textRef" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 
 interface GooeyNavItem {
-  label: string
-  href: string | null
+  label: string;
+  href: string | null;
 }
 
 interface GooeyNavProps {
-  items: GooeyNavItem[]
-  animationTime?: number
-  particleCount?: number
-  particleDistances?: [number, number]
-  particleR?: number
-  timeVariance?: number
-  colors?: number[]
-  initialActiveIndex?: number
+  items: GooeyNavItem[];
+  animationTime?: number;
+  particleCount?: number;
+  particleDistances?: [number, number];
+  particleR?: number;
+  timeVariance?: number;
+  colors?: number[];
+  initialActiveIndex?: number;
 }
 
 const props = withDefaults(defineProps<GooeyNavProps>(), {
@@ -64,172 +63,181 @@ const props = withDefaults(defineProps<GooeyNavProps>(), {
   particleR: 100,
   timeVariance: 300,
   colors: () => [1, 2, 3, 1, 2, 3, 1, 4],
-  initialActiveIndex: 0,
-})
+  initialActiveIndex: 0
+});
 
-const containerRef = ref<HTMLDivElement>()
-const navRef = ref<HTMLUListElement>()
-const filterRef = ref<HTMLSpanElement>()
-const textRef = ref<HTMLSpanElement>()
-const activeIndex = ref<number>(props.initialActiveIndex)
+const containerRef = ref<HTMLDivElement>();
+const navRef = ref<HTMLUListElement>();
+const filterRef = ref<HTMLSpanElement>();
+const textRef = ref<HTMLSpanElement>();
+const activeIndex = ref<number>(props.initialActiveIndex);
 
-let resizeObserver: ResizeObserver | null = null
+let resizeObserver: ResizeObserver | null = null;
 
-const noise = (n = 1) => n / 2 - Math.random() * n
+const noise = (n = 1) => n / 2 - Math.random() * n;
 
-const getXY = (
-  distance: number,
-  pointIndex: number,
-  totalPoints: number
-): [number, number] => {
-  const angle =
-    ((360 + noise(8)) / totalPoints) * pointIndex * (Math.PI / 180)
-  return [distance * Math.cos(angle), distance * Math.sin(angle)]
-}
+const getXY = (distance: number, pointIndex: number, totalPoints: number): [number, number] => {
+  const angle = ((360 + noise(8)) / totalPoints) * pointIndex * (Math.PI / 180);
+  return [distance * Math.cos(angle), distance * Math.sin(angle)];
+};
 
-const createParticle = (
-  i: number,
-  t: number,
-  d: [number, number],
-  r: number
-) => {
-  const rotate = noise(r / 10)
+const createParticle = (i: number, t: number, d: [number, number], r: number) => {
+  const rotate = noise(r / 10);
   return {
     start: getXY(d[0], props.particleCount - i, props.particleCount),
     end: getXY(d[1] + noise(7), props.particleCount - i, props.particleCount),
     time: t,
     scale: 1 + noise(0.2),
     color: props.colors[Math.floor(Math.random() * props.colors.length)],
-    rotate: rotate > 0 ? (rotate + r / 20) * 10 : (rotate - r / 20) * 10,
-  }
-}
+    rotate: rotate > 0 ? (rotate + r / 20) * 10 : (rotate - r / 20) * 10
+  };
+};
 
 const makeParticles = (element: HTMLElement) => {
-  const d: [number, number] = props.particleDistances
-  const r = props.particleR
-  const bubbleTime = props.animationTime * 2 + props.timeVariance
-  element.style.setProperty('--time', `${bubbleTime}ms`)
+  const d: [number, number] = props.particleDistances;
+  const r = props.particleR;
+  const bubbleTime = props.animationTime * 2 + props.timeVariance;
+  element.style.setProperty('--time', `${bubbleTime}ms`);
   for (let i = 0; i < props.particleCount; i++) {
-    const t = props.animationTime * 2 + noise(props.timeVariance * 2)
-    const p = createParticle(i, t, d, r)
-    element.classList.remove('active')
+    const t = props.animationTime * 2 + noise(props.timeVariance * 2);
+    const p = createParticle(i, t, d, r);
+    element.classList.remove('active');
     setTimeout(() => {
-      const particle = document.createElement('span')
-      const point = document.createElement('span')
-      particle.classList.add('particle')
-      particle.style.setProperty('--start-x', `${p.start[0]}px`)
-      particle.style.setProperty('--start-y', `${p.start[1]}px`)
-      particle.style.setProperty('--end-x', `${p.end[0]}px`)
-      particle.style.setProperty('--end-y', `${p.end[1]}px`)
-      particle.style.setProperty('--time', `${p.time}ms`)
-      particle.style.setProperty('--scale', `${p.scale}`)
-      particle.style.setProperty('--color', `var(--color-${p.color}, white)`)
-      particle.style.setProperty('--rotate', `${p.rotate}deg`)
-      point.classList.add('point')
-      particle.appendChild(point)
-      element.appendChild(particle)
+      const particle = document.createElement('span');
+      const point = document.createElement('span');
+      particle.classList.add('particle');
+      particle.style.setProperty('--start-x', `${p.start[0]}px`);
+      particle.style.setProperty('--start-y', `${p.start[1]}px`);
+      particle.style.setProperty('--end-x', `${p.end[0]}px`);
+      particle.style.setProperty('--end-y', `${p.end[1]}px`);
+      particle.style.setProperty('--time', `${p.time}ms`);
+      particle.style.setProperty('--scale', `${p.scale}`);
+      particle.style.setProperty('--color', `var(--color-${p.color}, white)`);
+      particle.style.setProperty('--rotate', `${p.rotate}deg`);
+      point.classList.add('point');
+      particle.appendChild(point);
+      element.appendChild(particle);
       requestAnimationFrame(() => {
-        element.classList.add('active')
-      })
+        element.classList.add('active');
+      });
       setTimeout(() => {
         try {
-          element.removeChild(particle)
+          element.removeChild(particle);
         } catch {}
-      }, t)
-    }, 30)
+      }, t);
+    }, 30);
   }
-}
+};
 
 const updateEffectPosition = (element: HTMLElement) => {
-  if (!containerRef.value || !filterRef.value || !textRef.value) return
-  const containerRect = containerRef.value.getBoundingClientRect()
-  const pos = element.getBoundingClientRect()
+  if (!containerRef.value || !filterRef.value || !textRef.value) return;
+  const containerRect = containerRef.value.getBoundingClientRect();
+  const pos = element.getBoundingClientRect();
   const styles = {
     left: `${pos.x - containerRect.x}px`,
     top: `${pos.y - containerRect.y}px`,
     width: `${pos.width}px`,
-    height: `${pos.height}px`,
-  }
-  Object.assign(filterRef.value.style, styles)
-  Object.assign(textRef.value.style, styles)
-  textRef.value.innerText = element.innerText
-}
+    height: `${pos.height}px`
+  };
+  Object.assign(filterRef.value.style, styles);
+  Object.assign(textRef.value.style, styles);
+  textRef.value.innerText = element.innerText;
+};
 
 const handleClick = (e: Event, index: number) => {
-  const liEl = (e.currentTarget as HTMLElement).parentElement as HTMLElement
-  if (activeIndex.value === index) return
-  activeIndex.value = index
-  updateEffectPosition(liEl)
+  const liEl = (e.currentTarget as HTMLElement).parentElement as HTMLElement;
+  if (activeIndex.value === index) return;
+  activeIndex.value = index;
+  updateEffectPosition(liEl);
   if (filterRef.value) {
-    const particles = filterRef.value.querySelectorAll('.particle')
-    particles.forEach((p) => filterRef.value!.removeChild(p))
+    const particles = filterRef.value.querySelectorAll('.particle');
+    particles.forEach(p => filterRef.value!.removeChild(p));
   }
   if (textRef.value) {
-    textRef.value.classList.remove('active')
-    void textRef.value.offsetWidth
-    textRef.value.classList.add('active')
+    textRef.value.classList.remove('active');
+    void textRef.value.offsetWidth;
+    textRef.value.classList.add('active');
   }
   if (filterRef.value) {
-    makeParticles(filterRef.value)
+    makeParticles(filterRef.value);
   }
-}
+};
 
 const handleKeyDown = (e: KeyboardEvent, index: number) => {
   if (e.key === 'Enter' || e.key === ' ') {
-    e.preventDefault()
-    const liEl = (e.currentTarget as HTMLElement).parentElement
+    e.preventDefault();
+    const liEl = (e.currentTarget as HTMLElement).parentElement;
     if (liEl) {
       handleClick(
         {
-          currentTarget: liEl,
+          currentTarget: liEl
         } as unknown as Event,
         index
-      )
+      );
     }
   }
-}
+};
 
 watch(activeIndex, () => {
-  if (!navRef.value || !containerRef.value) return
-  const activeLi = navRef.value.querySelectorAll('li')[
-    activeIndex.value
-  ] as HTMLElement
+  if (!navRef.value || !containerRef.value) return;
+  const activeLi = navRef.value.querySelectorAll('li')[activeIndex.value] as HTMLElement;
   if (activeLi) {
-    updateEffectPosition(activeLi)
-    textRef.value?.classList.add('active')
+    updateEffectPosition(activeLi);
+    textRef.value?.classList.add('active');
   }
-})
+});
 
 onMounted(() => {
-  if (!navRef.value || !containerRef.value) return
-  const activeLi = navRef.value.querySelectorAll('li')[
-    activeIndex.value
-  ] as HTMLElement
+  if (!navRef.value || !containerRef.value) return;
+  const activeLi = navRef.value.querySelectorAll('li')[activeIndex.value] as HTMLElement;
   if (activeLi) {
-    updateEffectPosition(activeLi)
-    textRef.value?.classList.add('active')
+    updateEffectPosition(activeLi);
+    textRef.value?.classList.add('active');
   }
   resizeObserver = new ResizeObserver(() => {
-    const currentActiveLi = navRef.value?.querySelectorAll('li')[
-      activeIndex.value
-    ] as HTMLElement
+    const currentActiveLi = navRef.value?.querySelectorAll('li')[activeIndex.value] as HTMLElement;
     if (currentActiveLi) {
-      updateEffectPosition(currentActiveLi)
+      updateEffectPosition(currentActiveLi);
     }
-  })
-  resizeObserver.observe(containerRef.value)
-})
+  });
+  resizeObserver.observe(containerRef.value);
+});
 
 onUnmounted(() => {
   if (resizeObserver) {
-    resizeObserver.disconnect()
+    resizeObserver.disconnect();
   }
-})
+});
 </script>
 
 <style>
 :root {
-  --linear-ease: linear(0, 0.068, 0.19 2.7%, 0.804 8.1%, 1.037, 1.199 13.2%, 1.245, 1.27 15.8%, 1.274, 1.272 17.4%, 1.249 19.1%, 0.996 28%, 0.949, 0.928 33.3%, 0.926, 0.933 36.8%, 1.001 45.6%, 1.013, 1.019 50.8%, 1.018 54.4%, 1 63.1%, 0.995 68%, 1.001 85%, 1);
+  --linear-ease: linear(
+    0,
+    0.068,
+    0.19 2.7%,
+    0.804 8.1%,
+    1.037,
+    1.199 13.2%,
+    1.245,
+    1.27 15.8%,
+    1.274,
+    1.272 17.4%,
+    1.249 19.1%,
+    0.996 28%,
+    0.949,
+    0.928 33.3%,
+    0.926,
+    0.933 36.8%,
+    1.001 45.6%,
+    1.013,
+    1.019 50.8%,
+    1.018 54.4%,
+    1 63.1%,
+    0.995 68%,
+    1.001 85%,
+    1
+  );
 }
 
 .effect {
@@ -256,7 +264,7 @@ onUnmounted(() => {
 }
 
 .effect.filter::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: -75px;
   z-index: -2;
@@ -264,7 +272,7 @@ onUnmounted(() => {
 }
 
 .effect.filter::after {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   background: white;
@@ -368,7 +376,7 @@ li.active::after {
 }
 
 li::after {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   border-radius: 8px;
@@ -378,4 +386,4 @@ li::after {
   transition: all 0.3s ease;
   z-index: -1;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/content/Components/InfiniteScroll/InfiniteScroll.vue b/src/content/Components/InfiniteScroll/InfiniteScroll.vue
index cdb8844..25993ef 100644
--- a/src/content/Components/InfiniteScroll/InfiniteScroll.vue
+++ b/src/content/Components/InfiniteScroll/InfiniteScroll.vue
@@ -1,24 +1,35 @@
 <template>
   <div class="w-full">
-    <div class="infinite-scroll-wrapper relative flex items-center justify-center w-full overflow-hidden"
-      ref="wrapperRef" :style="{
+    <div
+      class="infinite-scroll-wrapper relative flex items-center justify-center w-full overflow-hidden"
+      ref="wrapperRef"
+      :style="{
         maxHeight: maxHeight,
         overscrollBehavior: 'none'
-      }">
-      <div class="infinite-scroll-container flex flex-col px-4 cursor-grab" ref="containerRef" :style="{
-        transform: getTiltTransform(),
-        width: width,
-        overscrollBehavior: 'contain',
-        transformOrigin: 'center center',
-        transformStyle: 'preserve-3d'
-      }">
-        <div v-for="(item, index) in items" :key="index"
+      }"
+    >
+      <div
+        class="infinite-scroll-container flex flex-col px-4 cursor-grab"
+        ref="containerRef"
+        :style="{
+          transform: getTiltTransform(),
+          width: width,
+          overscrollBehavior: 'contain',
+          transformOrigin: 'center center',
+          transformStyle: 'preserve-3d'
+        }"
+      >
+        <div
+          v-for="(item, index) in items"
+          :key="index"
           class="infinite-scroll-item rounded-2xl flex items-center justify-center p-4 text-xl font-semibold text-center border-2 border-white select-none box-border relative"
           :style="{
             height: itemMinHeight + 'px',
             marginTop: negativeMargin
-          }">
+          }"
+        >
           <component :is="item.content" v-if="typeof item.content === 'object'" />
+
           <template v-else>{{ item.content }}</template>
         </div>
       </div>
@@ -27,28 +38,28 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { gsap } from 'gsap'
-import { Observer } from 'gsap/Observer'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { Observer } from 'gsap/Observer';
 
-gsap.registerPlugin(Observer)
+gsap.registerPlugin(Observer);
 
 interface InfiniteScrollItem {
-  content: string | object
+  content: string | object;
 }
 
 interface Props {
-  width?: string
-  maxHeight?: string
-  negativeMargin?: string
-  items?: InfiniteScrollItem[]
-  itemMinHeight?: number
-  isTilted?: boolean
-  tiltDirection?: 'left' | 'right'
-  autoplay?: boolean
-  autoplaySpeed?: number
-  autoplayDirection?: 'down' | 'up'
-  pauseOnHover?: boolean
+  width?: string;
+  maxHeight?: string;
+  negativeMargin?: string;
+  items?: InfiniteScrollItem[];
+  itemMinHeight?: number;
+  isTilted?: boolean;
+  tiltDirection?: 'left' | 'right';
+  autoplay?: boolean;
+  autoplaySpeed?: number;
+  autoplayDirection?: 'down' | 'up';
+  pauseOnHover?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -63,57 +74,57 @@ const props = withDefaults(defineProps<Props>(), {
   autoplaySpeed: 0.5,
   autoplayDirection: 'down',
   pauseOnHover: false
-})
+});
 
-const wrapperRef = ref<HTMLDivElement | null>(null)
-const containerRef = ref<HTMLDivElement | null>(null)
-let observer: Observer | null = null
-let rafId: number | null = null
-let velocity = 0
-let stopTicker: (() => void) | null = null
-let startTicker: (() => void) | null = null
+const wrapperRef = ref<HTMLDivElement | null>(null);
+const containerRef = ref<HTMLDivElement | null>(null);
+let observer: Observer | null = null;
+let rafId: number | null = null;
+let velocity = 0;
+let stopTicker: (() => void) | null = null;
+let startTicker: (() => void) | null = null;
 
 const getTiltTransform = (): string => {
-  if (!props.isTilted) return 'none'
+  if (!props.isTilted) return 'none';
   return props.tiltDirection === 'left'
     ? 'rotateX(20deg) rotateZ(-20deg) skewX(20deg)'
-    : 'rotateX(20deg) rotateZ(20deg) skewX(-20deg)'
-}
+    : 'rotateX(20deg) rotateZ(20deg) skewX(-20deg)';
+};
 
 const initializeScroll = () => {
-  const container = containerRef.value
-  if (!container) return
-  if (props.items.length === 0) return
+  const container = containerRef.value;
+  if (!container) return;
+  if (props.items.length === 0) return;
 
-  const divItems = gsap.utils.toArray<HTMLDivElement>(container.children)
-  if (!divItems.length) return
+  const divItems = gsap.utils.toArray<HTMLDivElement>(container.children);
+  if (!divItems.length) return;
 
-  const firstItem = divItems[0]
-  const itemStyle = getComputedStyle(firstItem)
-  const itemHeight = firstItem.offsetHeight
-  const itemMarginTop = parseFloat(itemStyle.marginTop) || 0
-  const totalItemHeight = itemHeight + itemMarginTop
-  const totalHeight = itemHeight * props.items.length + itemMarginTop * (props.items.length - 1)
+  const firstItem = divItems[0];
+  const itemStyle = getComputedStyle(firstItem);
+  const itemHeight = firstItem.offsetHeight;
+  const itemMarginTop = parseFloat(itemStyle.marginTop) || 0;
+  const totalItemHeight = itemHeight + itemMarginTop;
+  const totalHeight = itemHeight * props.items.length + itemMarginTop * (props.items.length - 1);
 
-  const wrapFn = gsap.utils.wrap(-totalHeight, totalHeight)
+  const wrapFn = gsap.utils.wrap(-totalHeight, totalHeight);
 
   divItems.forEach((child, i) => {
-    const y = i * totalItemHeight
-    gsap.set(child, { y })
-  })
+    const y = i * totalItemHeight;
+    gsap.set(child, { y });
+  });
 
   observer = Observer.create({
     target: container,
     type: 'wheel,touch,pointer',
     preventDefault: true,
     onPress: ({ target }) => {
-      ; (target as HTMLElement).style.cursor = 'grabbing'
+      (target as HTMLElement).style.cursor = 'grabbing';
     },
     onRelease: ({ target }) => {
-      ; (target as HTMLElement).style.cursor = 'grab'
+      (target as HTMLElement).style.cursor = 'grab';
       if (Math.abs(velocity) > 0.1) {
-        const momentum = velocity * 0.8
-        divItems.forEach((child) => {
+        const momentum = velocity * 0.8;
+        divItems.forEach(child => {
           gsap.to(child, {
             duration: 1.5,
             ease: 'power2.out',
@@ -121,18 +132,18 @@ const initializeScroll = () => {
             modifiers: {
               y: gsap.utils.unitize(wrapFn)
             }
-          })
-        })
+          });
+        });
       }
-      velocity = 0
+      velocity = 0;
     },
     onChange: ({ deltaY, isDragging, event }) => {
-      const d = event.type === 'wheel' ? -deltaY : deltaY
-      const distance = isDragging ? d * 5 : d * 1.5
+      const d = event.type === 'wheel' ? -deltaY : deltaY;
+      const distance = isDragging ? d * 5 : d * 1.5;
 
-      velocity = distance * 0.5
+      velocity = distance * 0.5;
 
-      divItems.forEach((child) => {
+      divItems.forEach(child => {
         gsap.to(child, {
           duration: isDragging ? 0.3 : 1.2,
           ease: isDragging ? 'power1.out' : 'power3.out',
@@ -140,70 +151,70 @@ const initializeScroll = () => {
           modifiers: {
             y: gsap.utils.unitize(wrapFn)
           }
-        })
-      })
+        });
+      });
     }
-  })
+  });
 
   if (props.autoplay) {
-    const directionFactor = props.autoplayDirection === 'down' ? 1 : -1
-    const speedPerFrame = props.autoplaySpeed * directionFactor
+    const directionFactor = props.autoplayDirection === 'down' ? 1 : -1;
+    const speedPerFrame = props.autoplaySpeed * directionFactor;
 
     const tick = () => {
-      divItems.forEach((child) => {
+      divItems.forEach(child => {
         gsap.set(child, {
           y: `+=${speedPerFrame}`,
           modifiers: {
             y: gsap.utils.unitize(wrapFn)
           }
-        })
-      })
-      rafId = requestAnimationFrame(tick)
-    }
+        });
+      });
+      rafId = requestAnimationFrame(tick);
+    };
 
-    rafId = requestAnimationFrame(tick)
+    rafId = requestAnimationFrame(tick);
 
     if (props.pauseOnHover) {
-      stopTicker = () => rafId && cancelAnimationFrame(rafId)
+      stopTicker = () => rafId && cancelAnimationFrame(rafId);
       startTicker = () => {
-        rafId = requestAnimationFrame(tick)
-      }
+        rafId = requestAnimationFrame(tick);
+      };
 
-      container.addEventListener('mouseenter', stopTicker)
-      container.addEventListener('mouseleave', startTicker)
+      container.addEventListener('mouseenter', stopTicker);
+      container.addEventListener('mouseleave', startTicker);
     }
   }
-}
+};
 
 const cleanup = () => {
   if (observer) {
-    observer.kill()
-    observer = null
+    observer.kill();
+    observer = null;
   }
   if (rafId) {
-    cancelAnimationFrame(rafId)
-    rafId = null
+    cancelAnimationFrame(rafId);
+    rafId = null;
   }
 
-  velocity = 0
+  velocity = 0;
 
-  const container = containerRef.value
+  const container = containerRef.value;
   if (container && props.pauseOnHover && stopTicker && startTicker) {
-    container.removeEventListener('mouseenter', stopTicker)
-    container.removeEventListener('mouseleave', startTicker)
+    container.removeEventListener('mouseenter', stopTicker);
+    container.removeEventListener('mouseleave', startTicker);
   }
 
-  stopTicker = null
-  startTicker = null
-}
+  stopTicker = null;
+  startTicker = null;
+};
 
 onMounted(() => {
-  initializeScroll()
-})
+  initializeScroll();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
   [
@@ -217,18 +228,18 @@ watch(
     () => props.negativeMargin
   ],
   () => {
-    cleanup()
+    cleanup();
     setTimeout(() => {
-      initializeScroll()
-    }, 0)
+      initializeScroll();
+    }, 0);
   }
-)
+);
 </script>
 
 <style scoped>
 .infinite-scroll-wrapper::before,
 .infinite-scroll-wrapper::after {
-  content: "";
+  content: '';
   position: absolute;
   background: linear-gradient(var(--dir, to bottom), #060010, transparent);
   height: 25%;
diff --git a/src/content/Components/Masonry/Masonry.vue b/src/content/Components/Masonry/Masonry.vue
index 40d96bd..72e9004 100644
--- a/src/content/Components/Masonry/Masonry.vue
+++ b/src/content/Components/Masonry/Masonry.vue
@@ -1,40 +1,49 @@
 <template>
   <div ref="containerRef" class="relative w-full h-full">
-    <div v-for="item in grid" :key="item.id" :data-key="item.id" class="absolute box-content"
-      :style="{ willChange: 'transform, width, height, opacity' }" @click="openUrl(item.url)"
-      @mouseenter="(e) => handleMouseEnter(item.id, e.currentTarget as HTMLElement)"
-      @mouseleave="(e) => handleMouseLeave(item.id, e.currentTarget as HTMLElement)">
+    <div
+      v-for="item in grid"
+      :key="item.id"
+      :data-key="item.id"
+      class="absolute box-content"
+      :style="{ willChange: 'transform, width, height, opacity' }"
+      @click="openUrl(item.url)"
+      @mouseenter="e => handleMouseEnter(item.id, e.currentTarget as HTMLElement)"
+      @mouseleave="e => handleMouseLeave(item.id, e.currentTarget as HTMLElement)"
+    >
       <div
         class="relative w-full h-full bg-cover bg-center rounded-[10px] shadow-[0px_10px_50px_-10px_rgba(0,0,0,0.2)] uppercase text-[10px] leading-[10px]"
-        :style="{ backgroundImage: `url(${item.img})` }">
-        <div v-if="colorShiftOnHover"
-          class="color-overlay absolute inset-0 rounded-[10px] bg-gradient-to-tr from-pink-500/50 to-sky-500/50 opacity-0 pointer-events-none" />
+        :style="{ backgroundImage: `url(${item.img})` }"
+      >
+        <div
+          v-if="colorShiftOnHover"
+          class="color-overlay absolute inset-0 rounded-[10px] bg-gradient-to-tr from-pink-500/50 to-sky-500/50 opacity-0 pointer-events-none"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watchEffect, nextTick } from 'vue'
-import { gsap } from 'gsap'
+import { ref, computed, onMounted, onUnmounted, watchEffect, nextTick } from 'vue';
+import { gsap } from 'gsap';
 
 interface Item {
-  id: string
-  img: string
-  url: string
-  height: number
+  id: string;
+  img: string;
+  url: string;
+  height: number;
 }
 
 interface MasonryProps {
-  items: Item[]
-  ease?: string
-  duration?: number
-  stagger?: number
-  animateFrom?: 'bottom' | 'top' | 'left' | 'right' | 'center' | 'random'
-  scaleOnHover?: boolean
-  hoverScale?: number
-  blurToFocus?: boolean
-  colorShiftOnHover?: boolean
+  items: Item[];
+  ease?: string;
+  duration?: number;
+  stagger?: number;
+  animateFrom?: 'bottom' | 'top' | 'left' | 'right' | 'center' | 'random';
+  scaleOnHover?: boolean;
+  hoverScale?: number;
+  blurToFocus?: boolean;
+  colorShiftOnHover?: boolean;
 }
 
 const props = withDefaults(defineProps<MasonryProps>(), {
@@ -46,134 +55,129 @@ const props = withDefaults(defineProps<MasonryProps>(), {
   hoverScale: 0.95,
   blurToFocus: true,
   colorShiftOnHover: false
-})
+});
 
 const useMedia = (queries: string[], values: number[], defaultValue: number) => {
-  const get = () => values[queries.findIndex((q) => matchMedia(q).matches)] ?? defaultValue
-  const value = ref<number>(get())
+  const get = () => values[queries.findIndex(q => matchMedia(q).matches)] ?? defaultValue;
+  const value = ref<number>(get());
 
   onMounted(() => {
-    const handler = () => value.value = get()
-    queries.forEach((q) => matchMedia(q).addEventListener('change', handler))
+    const handler = () => (value.value = get());
+    queries.forEach(q => matchMedia(q).addEventListener('change', handler));
 
     onUnmounted(() => {
-      queries.forEach((q) => matchMedia(q).removeEventListener('change', handler))
-    })
-  })
+      queries.forEach(q => matchMedia(q).removeEventListener('change', handler));
+    });
+  });
 
-  return value
-}
+  return value;
+};
 
 const useMeasure = () => {
-  const containerRef = ref<HTMLDivElement | null>(null)
-  const size = ref({ width: 0, height: 0 })
-  let resizeObserver: ResizeObserver | null = null
+  const containerRef = ref<HTMLDivElement | null>(null);
+  const size = ref({ width: 0, height: 0 });
+  let resizeObserver: ResizeObserver | null = null;
 
   onMounted(() => {
-    if (!containerRef.value) return
+    if (!containerRef.value) return;
 
     resizeObserver = new ResizeObserver(([entry]) => {
-      const { width, height } = entry.contentRect
-      size.value = { width, height }
-    })
+      const { width, height } = entry.contentRect;
+      size.value = { width, height };
+    });
 
-    resizeObserver.observe(containerRef.value)
-  })
+    resizeObserver.observe(containerRef.value);
+  });
 
   onUnmounted(() => {
     if (resizeObserver) {
-      resizeObserver.disconnect()
+      resizeObserver.disconnect();
     }
-  })
+  });
 
-  return [containerRef, size] as const
-}
+  return [containerRef, size] as const;
+};
 
 const preloadImages = async (urls: string[]): Promise<void> => {
   await Promise.all(
     urls.map(
-      (src) =>
-        new Promise<void>((resolve) => {
-          const img = new Image()
-          img.src = src
-          img.onload = img.onerror = () => resolve()
+      src =>
+        new Promise<void>(resolve => {
+          const img = new Image();
+          img.src = src;
+          img.onload = img.onerror = () => resolve();
         })
     )
-  )
-}
+  );
+};
 
 const columns = useMedia(
-  [
-    '(min-width:1500px)',
-    '(min-width:1000px)',
-    '(min-width:600px)',
-    '(min-width:400px)'
-  ],
+  ['(min-width:1500px)', '(min-width:1000px)', '(min-width:600px)', '(min-width:400px)'],
   [5, 4, 3, 2],
   1
-)
+);
 
-const [containerRef, size] = useMeasure()
-const imagesReady = ref(false)
-const hasMounted = ref(false)
+const [containerRef, size] = useMeasure();
+const imagesReady = ref(false);
+const hasMounted = ref(false);
 
 const grid = computed(() => {
-  if (!size.value.width) return []
-  const colHeights = new Array(columns.value).fill(0)
-  const gap = 16
-  const totalGaps = (columns.value - 1) * gap
-  const columnWidth = (size.value.width - totalGaps) / columns.value
+  if (!size.value.width) return [];
+  const colHeights = new Array(columns.value).fill(0);
+  const gap = 16;
+  const totalGaps = (columns.value - 1) * gap;
+  const columnWidth = (size.value.width - totalGaps) / columns.value;
 
-  return props.items.map((child) => {
-    const col = colHeights.indexOf(Math.min(...colHeights))
-    const x = col * (columnWidth + gap)
-    const height = child.height / 2
-    const y = colHeights[col]
+  return props.items.map(child => {
+    const col = colHeights.indexOf(Math.min(...colHeights));
+    const x = col * (columnWidth + gap);
+    const height = child.height / 2;
+    const y = colHeights[col];
 
-    colHeights[col] += height + gap
-    return { ...child, x, y, w: columnWidth, h: height }
-  })
-})
+    colHeights[col] += height + gap;
+    return { ...child, x, y, w: columnWidth, h: height };
+  });
+});
 
 const openUrl = (url: string) => {
-  window.open(url, '_blank', 'noopener')
-}
+  window.open(url, '_blank', 'noopener');
+};
 
 interface GridItem extends Item {
-  x: number
-  y: number
-  w: number
-  h: number
+  x: number;
+  y: number;
+  w: number;
+  h: number;
 }
 
 const getInitialPosition = (item: GridItem) => {
-  const containerRect = containerRef.value?.getBoundingClientRect()
-  if (!containerRect) return { x: item.x, y: item.y }
+  const containerRect = containerRef.value?.getBoundingClientRect();
+  if (!containerRect) return { x: item.x, y: item.y };
 
-  let direction = props.animateFrom
+  let direction = props.animateFrom;
   if (props.animateFrom === 'random') {
-    const dirs = ['top', 'bottom', 'left', 'right']
-    direction = dirs[Math.floor(Math.random() * dirs.length)] as typeof props.animateFrom
+    const dirs = ['top', 'bottom', 'left', 'right'];
+    direction = dirs[Math.floor(Math.random() * dirs.length)] as typeof props.animateFrom;
   }
 
   switch (direction) {
     case 'top':
-      return { x: item.x, y: -200 }
+      return { x: item.x, y: -200 };
     case 'bottom':
-      return { x: item.x, y: window.innerHeight + 200 }
+      return { x: item.x, y: window.innerHeight + 200 };
     case 'left':
-      return { x: -200, y: item.y }
+      return { x: -200, y: item.y };
     case 'right':
-      return { x: window.innerWidth + 200, y: item.y }
+      return { x: window.innerWidth + 200, y: item.y };
     case 'center':
       return {
         x: containerRect.width / 2 - item.w / 2,
         y: containerRect.height / 2 - item.h / 2
-      }
+      };
     default:
-      return { x: item.x, y: item.y + 100 }
+      return { x: item.x, y: item.y + 100 };
   }
-}
+};
 
 const handleMouseEnter = (id: string, element: HTMLElement) => {
   if (props.scaleOnHover) {
@@ -181,13 +185,13 @@ const handleMouseEnter = (id: string, element: HTMLElement) => {
       scale: props.hoverScale,
       duration: 0.3,
       ease: 'power2.out'
-    })
+    });
   }
   if (props.colorShiftOnHover) {
-    const overlay = element.querySelector('.color-overlay') as HTMLElement
-    if (overlay) gsap.to(overlay, { opacity: 0.3, duration: 0.3 })
+    const overlay = element.querySelector('.color-overlay') as HTMLElement;
+    if (overlay) gsap.to(overlay, { opacity: 0.3, duration: 0.3 });
   }
-}
+};
 
 const handleMouseLeave = (id: string, element: HTMLElement) => {
   if (props.scaleOnHover) {
@@ -195,37 +199,37 @@ const handleMouseLeave = (id: string, element: HTMLElement) => {
       scale: 1,
       duration: 0.3,
       ease: 'power2.out'
-    })
+    });
   }
   if (props.colorShiftOnHover) {
-    const overlay = element.querySelector('.color-overlay') as HTMLElement
-    if (overlay) gsap.to(overlay, { opacity: 0, duration: 0.3 })
+    const overlay = element.querySelector('.color-overlay') as HTMLElement;
+    if (overlay) gsap.to(overlay, { opacity: 0, duration: 0.3 });
   }
-}
+};
 
 watchEffect(() => {
-  preloadImages(props.items.map((i) => i.img)).then(() => {
-    imagesReady.value = true
-  })
-})
+  preloadImages(props.items.map(i => i.img)).then(() => {
+    imagesReady.value = true;
+  });
+});
 
 watchEffect(() => {
-  if (!imagesReady.value) return
+  if (!imagesReady.value) return;
 
-  const currentGrid = grid.value
-  void props.items.length
-  void columns.value
-  void size.value.width
+  const currentGrid = grid.value;
+  void props.items.length;
+  void columns.value;
+  void size.value.width;
 
-  if (!currentGrid.length) return
+  if (!currentGrid.length) return;
 
   nextTick(() => {
     currentGrid.forEach((item, index) => {
-      const selector = `[data-key="${item.id}"]`
-      const animProps = { x: item.x, y: item.y, width: item.w, height: item.h }
+      const selector = `[data-key="${item.id}"]`;
+      const animProps = { x: item.x, y: item.y, width: item.w, height: item.h };
 
       if (!hasMounted.value) {
-        const start = getInitialPosition(item)
+        const start = getInitialPosition(item);
         gsap.fromTo(
           selector,
           {
@@ -244,18 +248,18 @@ watchEffect(() => {
             ease: 'power3.out',
             delay: index * props.stagger
           }
-        )
+        );
       } else {
         gsap.to(selector, {
           ...animProps,
           duration: props.duration,
           ease: props.ease,
           overwrite: 'auto'
-        })
+        });
       }
-    })
+    });
 
-    hasMounted.value = true
-  })
-})
-</script>
\ No newline at end of file
+    hasMounted.value = true;
+  });
+});
+</script>
diff --git a/src/content/Components/PixelCard/PixelCard.vue b/src/content/Components/PixelCard/PixelCard.vue
index d960c1b..53111fd 100644
--- a/src/content/Components/PixelCard/PixelCard.vue
+++ b/src/content/Components/PixelCard/PixelCard.vue
@@ -1,36 +1,44 @@
 <template>
-  <div ref="containerRef" :class="[
-    'h-[400px] w-[300px] relative overflow-hidden grid place-items-center aspect-[4/5] border border-[#27272a] rounded-[25px] isolate transition-colors duration-200 ease-[cubic-bezier(0.5,1,0.89,1)] select-none',
-    className
-  ]" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @focus="finalNoFocus ? undefined : onFocus"
-    @blur="finalNoFocus ? undefined : onBlur" :tabindex="finalNoFocus ? -1 : 0">
+  <div
+    ref="containerRef"
+    :class="[
+      'h-[400px] w-[300px] relative overflow-hidden grid place-items-center aspect-[4/5] border border-[#27272a] rounded-[25px] isolate transition-colors duration-200 ease-[cubic-bezier(0.5,1,0.89,1)] select-none',
+      className
+    ]"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @focus="finalNoFocus ? undefined : onFocus"
+    @blur="finalNoFocus ? undefined : onBlur"
+    :tabindex="finalNoFocus ? -1 : 0"
+  >
     <canvas class="w-full h-full block" ref="canvasRef" />
+
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 
 class Pixel {
-  width: number
-  height: number
-  ctx: CanvasRenderingContext2D
-  x: number
-  y: number
-  color: string
-  speed: number
-  size: number
-  sizeStep: number
-  minSize: number
-  maxSizeInteger: number
-  maxSize: number
-  delay: number
-  counter: number
-  counterStep: number
-  isIdle: boolean
-  isReverse: boolean
-  isShimmer: boolean
+  width: number;
+  height: number;
+  ctx: CanvasRenderingContext2D;
+  x: number;
+  y: number;
+  color: string;
+  speed: number;
+  size: number;
+  sizeStep: number;
+  minSize: number;
+  maxSizeInteger: number;
+  maxSize: number;
+  delay: number;
+  counter: number;
+  counterStep: number;
+  isIdle: boolean;
+  isReverse: boolean;
+  isShimmer: boolean;
 
   constructor(
     canvas: HTMLCanvasElement,
@@ -41,95 +49,90 @@ class Pixel {
     speed: number,
     delay: number
   ) {
-    this.width = canvas.width
-    this.height = canvas.height
-    this.ctx = context
-    this.x = x
-    this.y = y
-    this.color = color
-    this.speed = this.getRandomValue(0.1, 0.9) * speed
-    this.size = 0
-    this.sizeStep = Math.random() * 0.4
-    this.minSize = 0.5
-    this.maxSizeInteger = 2
-    this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger)
-    this.delay = delay
-    this.counter = 0
-    this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01
-    this.isIdle = false
-    this.isReverse = false
-    this.isShimmer = false
+    this.width = canvas.width;
+    this.height = canvas.height;
+    this.ctx = context;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.speed = this.getRandomValue(0.1, 0.9) * speed;
+    this.size = 0;
+    this.sizeStep = Math.random() * 0.4;
+    this.minSize = 0.5;
+    this.maxSizeInteger = 2;
+    this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);
+    this.delay = delay;
+    this.counter = 0;
+    this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;
+    this.isIdle = false;
+    this.isReverse = false;
+    this.isShimmer = false;
   }
 
   getRandomValue(min: number, max: number) {
-    return Math.random() * (max - min) + min
+    return Math.random() * (max - min) + min;
   }
 
   draw() {
-    const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5
-    this.ctx.fillStyle = this.color
-    this.ctx.fillRect(
-      this.x + centerOffset,
-      this.y + centerOffset,
-      this.size,
-      this.size
-    )
+    const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;
+    this.ctx.fillStyle = this.color;
+    this.ctx.fillRect(this.x + centerOffset, this.y + centerOffset, this.size, this.size);
   }
 
   appear() {
-    this.isIdle = false
+    this.isIdle = false;
     if (this.counter <= this.delay) {
-      this.counter += this.counterStep
-      return
+      this.counter += this.counterStep;
+      return;
     }
     if (this.size >= this.maxSize) {
-      this.isShimmer = true
+      this.isShimmer = true;
     }
     if (this.isShimmer) {
-      this.shimmer()
+      this.shimmer();
     } else {
-      this.size += this.sizeStep
+      this.size += this.sizeStep;
     }
-    this.draw()
+    this.draw();
   }
 
   disappear() {
-    this.isShimmer = false
-    this.counter = 0
+    this.isShimmer = false;
+    this.counter = 0;
     if (this.size <= 0) {
-      this.isIdle = true
-      return
+      this.isIdle = true;
+      return;
     } else {
-      this.size -= 0.1
+      this.size -= 0.1;
     }
-    this.draw()
+    this.draw();
   }
 
   shimmer() {
     if (this.size >= this.maxSize) {
-      this.isReverse = true
+      this.isReverse = true;
     } else if (this.size <= this.minSize) {
-      this.isReverse = false
+      this.isReverse = false;
     }
     if (this.isReverse) {
-      this.size -= this.speed
+      this.size -= this.speed;
     } else {
-      this.size += this.speed
+      this.size += this.speed;
     }
   }
 }
 
 function getEffectiveSpeed(value: number, reducedMotion: boolean) {
-  const min = 0
-  const max = 100
-  const throttle = 0.001
+  const min = 0;
+  const max = 100;
+  const throttle = 0.001;
 
   if (value <= min || reducedMotion) {
-    return min
+    return min;
   } else if (value >= max) {
-    return max * throttle
+    return max * throttle;
   } else {
-    return value * throttle
+    return value * throttle;
   }
 }
 
@@ -139,177 +142,166 @@ const VARIANTS = {
     gap: 5,
     speed: 35,
     colors: '#f8fafc,#f1f5f9,#cbd5e1',
-    noFocus: false,
+    noFocus: false
   },
   blue: {
     activeColor: '#e0f2fe',
     gap: 10,
     speed: 25,
     colors: '#e0f2fe,#7dd3fc,#0ea5e9',
-    noFocus: false,
+    noFocus: false
   },
   yellow: {
     activeColor: '#fef08a',
     gap: 3,
     speed: 20,
     colors: '#fef08a,#fde047,#eab308',
-    noFocus: false,
+    noFocus: false
   },
   pink: {
     activeColor: '#fecdd3',
     gap: 6,
     speed: 80,
     colors: '#fecdd3,#fda4af,#e11d48',
-    noFocus: true,
-  },
-}
+    noFocus: true
+  }
+};
 
 interface PixelCardProps {
-  variant?: 'default' | 'blue' | 'yellow' | 'pink'
-  gap?: number
-  speed?: number
-  colors?: string
-  noFocus?: boolean
-  className?: string
+  variant?: 'default' | 'blue' | 'yellow' | 'pink';
+  gap?: number;
+  speed?: number;
+  colors?: string;
+  noFocus?: boolean;
+  className?: string;
 }
 
 interface VariantConfig {
-  activeColor: string | null
-  gap: number
-  speed: number
-  colors: string
-  noFocus: boolean
+  activeColor: string | null;
+  gap: number;
+  speed: number;
+  colors: string;
+  noFocus: boolean;
 }
 
 const props = withDefaults(defineProps<PixelCardProps>(), {
   variant: 'default',
-  className: '',
-})
+  className: ''
+});
 
-const containerRef = ref<HTMLDivElement>()
-const canvasRef = ref<HTMLCanvasElement>()
-const pixelsRef = ref<Pixel[]>([])
-const animationRef = ref<number | null>(null)
-const timePreviousRef = ref(performance.now())
-const reducedMotion = ref(
-  window.matchMedia('(prefers-reduced-motion: reduce)').matches
-)
+const containerRef = ref<HTMLDivElement>();
+const canvasRef = ref<HTMLCanvasElement>();
+const pixelsRef = ref<Pixel[]>([]);
+const animationRef = ref<number | null>(null);
+const timePreviousRef = ref(performance.now());
+const reducedMotion = ref(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
 
-const variantCfg = computed((): VariantConfig => VARIANTS[props.variant] || VARIANTS.default)
-const finalGap = computed(() => props.gap ?? variantCfg.value.gap)
-const finalSpeed = computed(() => props.speed ?? variantCfg.value.speed)
-const finalColors = computed(() => props.colors ?? variantCfg.value.colors)
-const finalNoFocus = computed(() => props.noFocus ?? variantCfg.value.noFocus)
+const variantCfg = computed((): VariantConfig => VARIANTS[props.variant] || VARIANTS.default);
+const finalGap = computed(() => props.gap ?? variantCfg.value.gap);
+const finalSpeed = computed(() => props.speed ?? variantCfg.value.speed);
+const finalColors = computed(() => props.colors ?? variantCfg.value.colors);
+const finalNoFocus = computed(() => props.noFocus ?? variantCfg.value.noFocus);
 
-let resizeObserver: ResizeObserver | null = null
+let resizeObserver: ResizeObserver | null = null;
 
 const initPixels = () => {
-  if (!containerRef.value || !canvasRef.value) return
+  if (!containerRef.value || !canvasRef.value) return;
 
-  const rect = containerRef.value.getBoundingClientRect()
-  const width = Math.floor(rect.width)
-  const height = Math.floor(rect.height)
-  const ctx = canvasRef.value.getContext('2d')
+  const rect = containerRef.value.getBoundingClientRect();
+  const width = Math.floor(rect.width);
+  const height = Math.floor(rect.height);
+  const ctx = canvasRef.value.getContext('2d');
 
-  canvasRef.value.width = width
-  canvasRef.value.height = height
-  canvasRef.value.style.width = `${width}px`
-  canvasRef.value.style.height = `${height}px`
+  canvasRef.value.width = width;
+  canvasRef.value.height = height;
+  canvasRef.value.style.width = `${width}px`;
+  canvasRef.value.style.height = `${height}px`;
 
-  const colorsArray = finalColors.value.split(',')
-  const pxs = []
+  const colorsArray = finalColors.value.split(',');
+  const pxs = [];
   for (let x = 0; x < width; x += parseInt(finalGap.value.toString(), 10)) {
     for (let y = 0; y < height; y += parseInt(finalGap.value.toString(), 10)) {
-      const color =
-        colorsArray[Math.floor(Math.random() * colorsArray.length)]
+      const color = colorsArray[Math.floor(Math.random() * colorsArray.length)];
 
-      const dx = x - width / 2
-      const dy = y - height / 2
-      const distance = Math.sqrt(dx * dx + dy * dy)
-      const delay = reducedMotion.value ? 0 : distance
-      if (!ctx) return
+      const dx = x - width / 2;
+      const dy = y - height / 2;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      const delay = reducedMotion.value ? 0 : distance;
+      if (!ctx) return;
       pxs.push(
-        new Pixel(
-          canvasRef.value,
-          ctx,
-          x,
-          y,
-          color,
-          getEffectiveSpeed(finalSpeed.value, reducedMotion.value),
-          delay
-        )
-      )
+        new Pixel(canvasRef.value, ctx, x, y, color, getEffectiveSpeed(finalSpeed.value, reducedMotion.value), delay)
+      );
     }
   }
-  pixelsRef.value = pxs
-}
+  pixelsRef.value = pxs;
+};
 
 const doAnimate = (fnName: keyof Pixel) => {
-  animationRef.value = requestAnimationFrame(() => doAnimate(fnName))
-  const timeNow = performance.now()
-  const timePassed = timeNow - timePreviousRef.value
-  const timeInterval = 1000 / 60
+  animationRef.value = requestAnimationFrame(() => doAnimate(fnName));
+  const timeNow = performance.now();
+  const timePassed = timeNow - timePreviousRef.value;
+  const timeInterval = 1000 / 60;
 
-  if (timePassed < timeInterval) return
-  timePreviousRef.value = timeNow - (timePassed % timeInterval)
+  if (timePassed < timeInterval) return;
+  timePreviousRef.value = timeNow - (timePassed % timeInterval);
 
-  const ctx = canvasRef.value?.getContext('2d')
-  if (!ctx || !canvasRef.value) return
+  const ctx = canvasRef.value?.getContext('2d');
+  if (!ctx || !canvasRef.value) return;
 
-  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
 
-  let allIdle = true
+  let allIdle = true;
   for (let i = 0; i < pixelsRef.value.length; i++) {
-    const pixel = pixelsRef.value[i]
+    const pixel = pixelsRef.value[i];
     // @ts-expect-error - Dynamic method call on Pixel class
-    pixel[fnName]()
+    pixel[fnName]();
     if (!pixel.isIdle) {
-      allIdle = false
+      allIdle = false;
     }
   }
   if (allIdle && animationRef.value) {
-    cancelAnimationFrame(animationRef.value)
+    cancelAnimationFrame(animationRef.value);
   }
-}
+};
 
 const handleAnimation = (name: keyof Pixel) => {
   if (animationRef.value !== null) {
-    cancelAnimationFrame(animationRef.value)
+    cancelAnimationFrame(animationRef.value);
   }
-  animationRef.value = requestAnimationFrame(() => doAnimate(name))
-}
+  animationRef.value = requestAnimationFrame(() => doAnimate(name));
+};
 
-const onMouseEnter = () => handleAnimation('appear')
-const onMouseLeave = () => handleAnimation('disappear')
+const onMouseEnter = () => handleAnimation('appear');
+const onMouseLeave = () => handleAnimation('disappear');
 const onFocus = (e: FocusEvent) => {
-  if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) return
-  handleAnimation('appear')
-}
+  if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) return;
+  handleAnimation('appear');
+};
 const onBlur = (e: FocusEvent) => {
-  if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) return
-  handleAnimation('disappear')
-}
+  if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) return;
+  handleAnimation('disappear');
+};
 
 watch([finalGap, finalSpeed, finalColors, finalNoFocus], () => {
-  initPixels()
-})
+  initPixels();
+});
 
 onMounted(() => {
-  initPixels()
+  initPixels();
   resizeObserver = new ResizeObserver(() => {
-    initPixels()
-  })
+    initPixels();
+  });
   if (containerRef.value) {
-    resizeObserver.observe(containerRef.value)
+    resizeObserver.observe(containerRef.value);
   }
-})
+});
 
 onUnmounted(() => {
   if (resizeObserver) {
-    resizeObserver.disconnect()
+    resizeObserver.disconnect();
   }
   if (animationRef.value !== null) {
-    cancelAnimationFrame(animationRef.value)
+    cancelAnimationFrame(animationRef.value);
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/content/Components/ProfileCard/ProfileCard.vue b/src/content/Components/ProfileCard/ProfileCard.vue
index 926edea..58afb90 100644
--- a/src/content/Components/ProfileCard/ProfileCard.vue
+++ b/src/content/Components/ProfileCard/ProfileCard.vue
@@ -3,30 +3,52 @@
     <section ref="cardRef" class="pc-card">
       <div class="pc-inside">
         <div class="pc-shine" />
+
         <div class="pc-glare" />
+
         <div class="pc-content pc-avatar-content">
-          <img class="avatar" :src="avatarUrl" :alt="`${name || 'User'} avatar`" loading="lazy"
-            @error="handleAvatarError" />
+          <img
+            class="avatar"
+            :src="avatarUrl"
+            :alt="`${name || 'User'} avatar`"
+            loading="lazy"
+            @error="handleAvatarError"
+          />
+
           <div v-if="showUserInfo" class="pc-user-info">
             <div class="pc-user-details">
               <div class="pc-mini-avatar">
-                <img :src="miniAvatarUrl || avatarUrl" :alt="`${name || 'User'} mini avatar`" loading="lazy"
-                  @error="handleMiniAvatarError" />
+                <img
+                  :src="miniAvatarUrl || avatarUrl"
+                  :alt="`${name || 'User'} mini avatar`"
+                  loading="lazy"
+                  @error="handleMiniAvatarError"
+                />
               </div>
+
               <div class="pc-user-text">
                 <div class="pc-handle">@{{ handle }}</div>
+
                 <div class="pc-status">{{ status }}</div>
               </div>
             </div>
-            <button class="pc-contact-btn" @click="handleContactClick" style="pointer-events: auto" type="button"
-              :aria-label="`Contact ${name || 'user'}`">
+
+            <button
+              class="pc-contact-btn"
+              @click="handleContactClick"
+              style="pointer-events: auto"
+              type="button"
+              :aria-label="`Contact ${name || 'user'}`"
+            >
               {{ contactText }}
             </button>
           </div>
         </div>
+
         <div class="pc-content">
           <div class="pc-details">
             <h3>{{ name }}</h3>
+
             <p>{{ title }}</p>
           </div>
         </div>
@@ -36,24 +58,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 interface Props {
-  avatarUrl?: string
-  iconUrl?: string
-  grainUrl?: string
-  behindGradient?: string
-  innerGradient?: string
-  showBehindGradient?: boolean
-  className?: string
-  enableTilt?: boolean
-  miniAvatarUrl?: string
-  name?: string
-  title?: string
-  handle?: string
-  status?: string
-  contactText?: string
-  showUserInfo?: boolean
+  avatarUrl?: string;
+  iconUrl?: string;
+  grainUrl?: string;
+  behindGradient?: string;
+  innerGradient?: string;
+  showBehindGradient?: boolean;
+  className?: string;
+  enableTilt?: boolean;
+  miniAvatarUrl?: string;
+  name?: string;
+  title?: string;
+  handle?: string;
+  status?: string;
+  contactText?: string;
+  showUserInfo?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -72,60 +94,47 @@ const props = withDefaults(defineProps<Props>(), {
   status: 'Online',
   contactText: 'Contact',
   showUserInfo: true
-})
+});
 
 const emit = defineEmits<{
-  contactClick: []
-}>()
+  contactClick: [];
+}>();
 
-const wrapRef = ref<HTMLDivElement>()
-const cardRef = ref<HTMLElement>()
+const wrapRef = ref<HTMLDivElement>();
+const cardRef = ref<HTMLElement>();
 
-const DEFAULT_BEHIND_GRADIENT = "radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(266,100%,90%,var(--card-opacity)) 4%,hsla(266,50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%)"
+const DEFAULT_BEHIND_GRADIENT =
+  'radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(266,100%,90%,var(--card-opacity)) 4%,hsla(266,50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%)';
 
-const DEFAULT_INNER_GRADIENT = "linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)"
+const DEFAULT_INNER_GRADIENT = 'linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)';
 
 const ANIMATION_CONFIG = {
   SMOOTH_DURATION: 600,
   INITIAL_DURATION: 1500,
   INITIAL_X_OFFSET: 70,
-  INITIAL_Y_OFFSET: 60,
-} as const
+  INITIAL_Y_OFFSET: 60
+} as const;
 
-const clamp = (value: number, min = 0, max = 100): number =>
-  Math.min(Math.max(value, min), max)
+const clamp = (value: number, min = 0, max = 100): number => Math.min(Math.max(value, min), max);
 
-const round = (value: number, precision = 3): number =>
-  parseFloat(value.toFixed(precision))
+const round = (value: number, precision = 3): number => parseFloat(value.toFixed(precision));
 
-const adjust = (
-  value: number,
-  fromMin: number,
-  fromMax: number,
-  toMin: number,
-  toMax: number
-): number =>
-  round(toMin + ((toMax - toMin) * (value - fromMin)) / (fromMax - fromMin))
+const adjust = (value: number, fromMin: number, fromMax: number, toMin: number, toMax: number): number =>
+  round(toMin + ((toMax - toMin) * (value - fromMin)) / (fromMax - fromMin));
 
-const easeInOutCubic = (x: number): number =>
-  x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2
+const easeInOutCubic = (x: number): number => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);
 
-let rafId: number | null = null
+let rafId: number | null = null;
 
-const updateCardTransform = (
-  offsetX: number,
-  offsetY: number,
-  card: HTMLElement,
-  wrap: HTMLElement
-) => {
-  const width = card.clientWidth
-  const height = card.clientHeight
+const updateCardTransform = (offsetX: number, offsetY: number, card: HTMLElement, wrap: HTMLElement) => {
+  const width = card.clientWidth;
+  const height = card.clientHeight;
 
-  const percentX = clamp((100 / width) * offsetX)
-  const percentY = clamp((100 / height) * offsetY)
+  const percentX = clamp((100 / width) * offsetX);
+  const percentY = clamp((100 / height) * offsetY);
 
-  const centerX = percentX - 50
-  const centerY = percentY - 50
+  const centerX = percentX - 50;
+  const centerY = percentY - 50;
 
   const properties = {
     '--pointer-x': `${percentX}%`,
@@ -136,13 +145,13 @@ const updateCardTransform = (
     '--pointer-from-top': `${percentY / 100}`,
     '--pointer-from-left': `${percentX / 100}`,
     '--rotate-x': `${round(-(centerX / 5))}deg`,
-    '--rotate-y': `${round(centerY / 4)}deg`,
-  }
+    '--rotate-y': `${round(centerY / 4)}deg`
+  };
 
   Object.entries(properties).forEach(([property, value]) => {
-    wrap.style.setProperty(property, value)
-  })
-}
+    wrap.style.setProperty(property, value);
+  });
+};
 
 const createSmoothAnimation = (
   duration: number,
@@ -151,138 +160,119 @@ const createSmoothAnimation = (
   card: HTMLElement,
   wrap: HTMLElement
 ) => {
-  const startTime = performance.now()
-  const targetX = wrap.clientWidth / 2
-  const targetY = wrap.clientHeight / 2
+  const startTime = performance.now();
+  const targetX = wrap.clientWidth / 2;
+  const targetY = wrap.clientHeight / 2;
 
   const animationLoop = (currentTime: number) => {
-    const elapsed = currentTime - startTime
-    const progress = clamp(elapsed / duration)
-    const easedProgress = easeInOutCubic(progress)
+    const elapsed = currentTime - startTime;
+    const progress = clamp(elapsed / duration);
+    const easedProgress = easeInOutCubic(progress);
 
-    const currentX = adjust(easedProgress, 0, 1, startX, targetX)
-    const currentY = adjust(easedProgress, 0, 1, startY, targetY)
+    const currentX = adjust(easedProgress, 0, 1, startX, targetX);
+    const currentY = adjust(easedProgress, 0, 1, startY, targetY);
 
-    updateCardTransform(currentX, currentY, card, wrap)
+    updateCardTransform(currentX, currentY, card, wrap);
 
     if (progress < 1) {
-      rafId = requestAnimationFrame(animationLoop)
+      rafId = requestAnimationFrame(animationLoop);
     }
-  }
+  };
 
-  rafId = requestAnimationFrame(animationLoop)
-}
+  rafId = requestAnimationFrame(animationLoop);
+};
 
 const cancelAnimation = () => {
   if (rafId) {
-    cancelAnimationFrame(rafId)
-    rafId = null
+    cancelAnimationFrame(rafId);
+    rafId = null;
   }
-}
+};
 
 const handlePointerMove = (event: PointerEvent) => {
-  const card = cardRef.value
-  const wrap = wrapRef.value
+  const card = cardRef.value;
+  const wrap = wrapRef.value;
 
-  if (!card || !wrap || !props.enableTilt) return
+  if (!card || !wrap || !props.enableTilt) return;
 
-  const rect = card.getBoundingClientRect()
-  updateCardTransform(
-    event.clientX - rect.left,
-    event.clientY - rect.top,
-    card,
-    wrap
-  )
-}
+  const rect = card.getBoundingClientRect();
+  updateCardTransform(event.clientX - rect.left, event.clientY - rect.top, card, wrap);
+};
 
 const handlePointerEnter = () => {
-  const card = cardRef.value
-  const wrap = wrapRef.value
+  const card = cardRef.value;
+  const wrap = wrapRef.value;
 
-  if (!card || !wrap || !props.enableTilt) return
+  if (!card || !wrap || !props.enableTilt) return;
 
-  cancelAnimation()
-  wrap.classList.add('active')
-  card.classList.add('active')
-}
+  cancelAnimation();
+  wrap.classList.add('active');
+  card.classList.add('active');
+};
 
 const handlePointerLeave = (event: PointerEvent) => {
-  const card = cardRef.value
-  const wrap = wrapRef.value
+  const card = cardRef.value;
+  const wrap = wrapRef.value;
 
-  if (!card || !wrap || !props.enableTilt) return
+  if (!card || !wrap || !props.enableTilt) return;
 
-  createSmoothAnimation(
-    ANIMATION_CONFIG.SMOOTH_DURATION,
-    event.offsetX,
-    event.offsetY,
-    card,
-    wrap
-  )
-  wrap.classList.remove('active')
-  card.classList.remove('active')
-}
+  createSmoothAnimation(ANIMATION_CONFIG.SMOOTH_DURATION, event.offsetX, event.offsetY, card, wrap);
+  wrap.classList.remove('active');
+  card.classList.remove('active');
+};
 
 const cardStyle = computed(() => ({
   '--icon': props.iconUrl ? `url(${props.iconUrl})` : 'none',
   '--grain': props.grainUrl ? `url(${props.grainUrl})` : 'none',
-  '--behind-gradient': props.showBehindGradient
-    ? (props.behindGradient ?? DEFAULT_BEHIND_GRADIENT)
-    : 'none',
-  '--inner-gradient': props.innerGradient ?? DEFAULT_INNER_GRADIENT,
-}))
+  '--behind-gradient': props.showBehindGradient ? (props.behindGradient ?? DEFAULT_BEHIND_GRADIENT) : 'none',
+  '--inner-gradient': props.innerGradient ?? DEFAULT_INNER_GRADIENT
+}));
 
 const handleContactClick = () => {
-  emit('contactClick')
-}
+  emit('contactClick');
+};
 
 const handleAvatarError = (event: Event) => {
-  const target = event.target as HTMLImageElement
-  target.style.display = 'none'
-}
+  const target = event.target as HTMLImageElement;
+  target.style.display = 'none';
+};
 
 const handleMiniAvatarError = (event: Event) => {
-  const target = event.target as HTMLImageElement
-  target.style.opacity = '0.5'
-  target.src = props.avatarUrl
-}
+  const target = event.target as HTMLImageElement;
+  target.style.opacity = '0.5';
+  target.src = props.avatarUrl;
+};
 
 onMounted(() => {
-  if (!props.enableTilt) return
+  if (!props.enableTilt) return;
 
-  const card = cardRef.value
-  const wrap = wrapRef.value
+  const card = cardRef.value;
+  const wrap = wrapRef.value;
 
-  if (!card || !wrap) return
+  if (!card || !wrap) return;
 
-  card.addEventListener('pointerenter', handlePointerEnter)
-  card.addEventListener('pointermove', handlePointerMove)
-  card.addEventListener('pointerleave', handlePointerLeave)
+  card.addEventListener('pointerenter', handlePointerEnter);
+  card.addEventListener('pointermove', handlePointerMove);
+  card.addEventListener('pointerleave', handlePointerLeave);
 
-  const initialX = wrap.clientWidth - ANIMATION_CONFIG.INITIAL_X_OFFSET
-  const initialY = ANIMATION_CONFIG.INITIAL_Y_OFFSET
+  const initialX = wrap.clientWidth - ANIMATION_CONFIG.INITIAL_X_OFFSET;
+  const initialY = ANIMATION_CONFIG.INITIAL_Y_OFFSET;
 
-  updateCardTransform(initialX, initialY, card, wrap)
-  createSmoothAnimation(
-    ANIMATION_CONFIG.INITIAL_DURATION,
-    initialX,
-    initialY,
-    card,
-    wrap
-  )
-})
+  updateCardTransform(initialX, initialY, card, wrap);
+  createSmoothAnimation(ANIMATION_CONFIG.INITIAL_DURATION, initialX, initialY, card, wrap);
+});
 
 onUnmounted(() => {
-  const card = cardRef.value
+  const card = cardRef.value;
 
   if (card) {
-    card.removeEventListener('pointerenter', handlePointerEnter)
-    card.removeEventListener('pointermove', handlePointerMove)
-    card.removeEventListener('pointerleave', handlePointerLeave)
+    card.removeEventListener('pointerenter', handlePointerEnter);
+    card.removeEventListener('pointermove', handlePointerMove);
+    card.removeEventListener('pointerleave', handlePointerLeave);
   }
 
-  cancelAnimation()
-})
+  cancelAnimation();
+});
 </script>
 
 <style scoped>
@@ -357,12 +347,27 @@ onUnmounted(() => {
   position: relative;
   background-blend-mode: color-dodge, normal, normal, normal;
   animation: glow-bg 12s linear infinite;
-  box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px) calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
+  box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px)
+    calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
   transition: transform 1s ease;
   transform: translate3d(0, 0, 0.1px) rotateX(0deg) rotateY(0deg);
   background-size: 100% 100%;
-  background-position: 0 0, 0 0, 50% 50%, 0 0;
-  background-image: radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y), hsla(266, 100%, 90%, var(--card-opacity)) 4%, hsla(266, 50%, 80%, calc(var(--card-opacity) * 0.75)) 10%, hsla(266, 25%, 70%, calc(var(--card-opacity) * 0.5)) 50%, hsla(266, 0%, 60%, 0) 100%), radial-gradient(35% 52% at 55% 20%, #00ffaac4 0%, #073aff00 100%), radial-gradient(100% 100% at 50% 50%, #00c1ffff 1%, #073aff00 76%), conic-gradient(from 124deg at 50% 50%, #c137ffff 0%, #07c6ffff 40%, #07c6ffff 60%, #c137ffff 100%);
+  background-position:
+    0 0,
+    0 0,
+    50% 50%,
+    0 0;
+  background-image:
+    radial-gradient(
+      farthest-side circle at var(--pointer-x) var(--pointer-y),
+      hsla(266, 100%, 90%, var(--card-opacity)) 4%,
+      hsla(266, 50%, 80%, calc(var(--card-opacity) * 0.75)) 10%,
+      hsla(266, 25%, 70%, calc(var(--card-opacity) * 0.5)) 50%,
+      hsla(266, 0%, 60%, 0) 100%
+    ),
+    radial-gradient(35% 52% at 55% 20%, #00ffaac4 0%, #073aff00 100%),
+    radial-gradient(100% 100% at 50% 50%, #00c1ffff 1%, #073aff00 76%),
+    conic-gradient(from 124deg at 50% 50%, #c137ffff 0%, #07c6ffff 40%, #07c6ffff 60%, #c137ffff 100%);
   overflow: hidden;
 }
 
@@ -415,10 +420,41 @@ onUnmounted(() => {
   background: transparent;
   background-size: cover;
   background-position: center;
-  background-image: repeating-linear-gradient(0deg, var(--sunpillar-clr-1) calc(var(--space) * 1), var(--sunpillar-clr-2) calc(var(--space) * 2), var(--sunpillar-clr-3) calc(var(--space) * 3), var(--sunpillar-clr-4) calc(var(--space) * 4), var(--sunpillar-clr-5) calc(var(--space) * 5), var(--sunpillar-clr-6) calc(var(--space) * 6), var(--sunpillar-clr-1) calc(var(--space) * 7)), repeating-linear-gradient(var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120%);
-  background-position: 0 var(--background-y), var(--background-x) var(--background-y), center;
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      var(--sunpillar-clr-1) calc(var(--space) * 1),
+      var(--sunpillar-clr-2) calc(var(--space) * 2),
+      var(--sunpillar-clr-3) calc(var(--space) * 3),
+      var(--sunpillar-clr-4) calc(var(--space) * 4),
+      var(--sunpillar-clr-5) calc(var(--space) * 5),
+      var(--sunpillar-clr-6) calc(var(--space) * 6),
+      var(--sunpillar-clr-1) calc(var(--space) * 7)
+    ),
+    repeating-linear-gradient(
+      var(--angle),
+      #0e152e 0%,
+      hsl(180, 10%, 60%) 3.8%,
+      hsl(180, 29%, 66%) 4.5%,
+      hsl(180, 10%, 60%) 5.2%,
+      #0e152e 10%,
+      #0e152e 12%
+    ),
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(0, 0%, 0%, 0.1) 12%,
+      hsla(0, 0%, 0%, 0.15) 20%,
+      hsla(0, 0%, 0%, 0.25) 120%
+    );
+  background-position:
+    0 var(--background-y),
+    var(--background-x) var(--background-y),
+    center;
   background-blend-mode: color, hard-light;
-  background-size: 500% 500%, 300% 300%, 200% 200%;
+  background-size:
+    500% 500%,
+    300% 300%,
+    200% 200%;
   background-repeat: repeat;
 }
 
@@ -445,19 +481,68 @@ onUnmounted(() => {
 }
 
 .pc-shine::before {
-  background-image: linear-gradient(45deg, var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3)), radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%), var(--grain);
-  background-size: 250% 250%, 100% 100%, 220px 220px;
-  background-position: var(--pointer-x) var(--pointer-y), center, calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
+  background-image:
+    linear-gradient(
+      45deg,
+      var(--sunpillar-4),
+      var(--sunpillar-5),
+      var(--sunpillar-6),
+      var(--sunpillar-1),
+      var(--sunpillar-2),
+      var(--sunpillar-3)
+    ),
+    radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%),
+    var(--grain);
+  background-size:
+    250% 250%,
+    100% 100%,
+    220px 220px;
+  background-position:
+    var(--pointer-x) var(--pointer-y),
+    center,
+    calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
   background-blend-mode: color-dodge;
-  filter: brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2)) saturate(calc(0.5 + var(--pointer-from-center)));
+  filter: brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2))
+    saturate(calc(0.5 + var(--pointer-from-center)));
   mix-blend-mode: luminosity;
 }
 
 .pc-shine::after {
   content: '';
-  background-image: repeating-linear-gradient(0deg, var(--sunpillar-clr-1) calc(5% * 1), var(--sunpillar-clr-2) calc(5% * 2), var(--sunpillar-clr-3) calc(5% * 3), var(--sunpillar-clr-4) calc(5% * 4), var(--sunpillar-clr-5) calc(5% * 5), var(--sunpillar-clr-6) calc(5% * 6), var(--sunpillar-clr-1) calc(5% * 7)), repeating-linear-gradient(-45deg, #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120%);
-  background-position: 0 var(--background-y), calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5), center;
-  background-size: 200% 300%, 700% 700%, 100% 100%;
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      var(--sunpillar-clr-1) calc(5% * 1),
+      var(--sunpillar-clr-2) calc(5% * 2),
+      var(--sunpillar-clr-3) calc(5% * 3),
+      var(--sunpillar-clr-4) calc(5% * 4),
+      var(--sunpillar-clr-5) calc(5% * 5),
+      var(--sunpillar-clr-6) calc(5% * 6),
+      var(--sunpillar-clr-1) calc(5% * 7)
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      #0e152e 0%,
+      hsl(180, 10%, 60%) 3.8%,
+      hsl(180, 29%, 66%) 4.5%,
+      hsl(180, 10%, 60%) 5.2%,
+      #0e152e 10%,
+      #0e152e 12%
+    ),
+    radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      hsla(0, 0%, 0%, 0.1) 12%,
+      hsla(0, 0%, 0%, 0.15) 20%,
+      hsla(0, 0%, 0%, 0.25) 120%
+    );
+  background-position:
+    0 var(--background-y),
+    calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5),
+    center;
+  background-size:
+    200% 300%,
+    700% 700%,
+    100% 100%;
   mix-blend-mode: difference;
   filter: brightness(0.8) contrast(1.5);
 }
@@ -465,7 +550,11 @@ onUnmounted(() => {
 .pc-glare {
   transform: translate3d(0, 0, 1.1px);
   overflow: hidden;
-  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(248, 25%, 80%) 12%, hsla(207, 40%, 30%, 0.8) 90%);
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsl(248, 25%, 80%) 12%,
+    hsla(207, 40%, 30%, 0.8) 90%
+  );
   mix-blend-mode: overlay;
   filter: brightness(0.8) contrast(1.2);
   z-index: 4;
@@ -486,16 +575,18 @@ onUnmounted(() => {
 }
 
 .pc-avatar-content::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
   backdrop-filter: blur(30px);
-  mask: linear-gradient(to bottom,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 60%,
-      rgba(0, 0, 0, 1) 90%,
-      rgba(0, 0, 0, 1) 100%);
+  mask: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0) 60%,
+    rgba(0, 0, 0, 1) 90%,
+    rgba(0, 0, 0, 1) 100%
+  );
   pointer-events: none;
 }
 
@@ -582,7 +673,11 @@ onUnmounted(() => {
   overflow: hidden;
   text-align: center;
   position: relative;
-  transform: translate3d(calc(var(--pointer-from-left) * -6px + 3px), calc(var(--pointer-from-top) * -6px + 3px), 0.1px) !important;
+  transform: translate3d(
+    calc(var(--pointer-from-left) * -6px + 3px),
+    calc(var(--pointer-from-top) * -6px + 3px),
+    0.1px
+  ) !important;
   z-index: 5;
   mix-blend-mode: luminosity;
 }
@@ -634,11 +729,17 @@ onUnmounted(() => {
 
 @keyframes holo-bg {
   0% {
-    background-position: 0 var(--background-y), 0 0, center;
+    background-position:
+      0 var(--background-y),
+      0 0,
+      center;
   }
 
   100% {
-    background-position: 0 var(--background-y), 90% 90%, center;
+    background-position:
+      0 var(--background-y),
+      90% 90%,
+      center;
   }
 }
 
@@ -783,4 +884,4 @@ onUnmounted(() => {
     border-radius: 50px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/content/Components/SpotlightCard/SpotlightCard.vue b/src/content/Components/SpotlightCard/SpotlightCard.vue
index f2eacb3..04933c0 100644
--- a/src/content/Components/SpotlightCard/SpotlightCard.vue
+++ b/src/content/Components/SpotlightCard/SpotlightCard.vue
@@ -1,59 +1,67 @@
 <template>
-  <div ref="divRef" @mousemove="handleMouseMove" @focus="handleFocus" @blur="handleBlur" @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave" :class="[
-      'relative rounded-3xl border overflow-hidden p-8',
-      className
-    ]">
-    <div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out" :style="{
-      opacity,
-      background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
-    }" />
+  <div
+    ref="divRef"
+    @mousemove="handleMouseMove"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    :class="['relative rounded-3xl border overflow-hidden p-8', className]"
+  >
+    <div
+      class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out"
+      :style="{
+        opacity,
+        background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`
+      }"
+    />
+
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from 'vue';
 
 interface Position {
-  x: number
-  y: number
+  x: number;
+  y: number;
 }
 
 interface SpotlightCardProps {
-  className?: string
-  spotlightColor?: string
+  className?: string;
+  spotlightColor?: string;
 }
 
-const { className = '', spotlightColor = 'rgba(255, 255, 255, 0.25)' } = defineProps<SpotlightCardProps>()
+const { className = '', spotlightColor = 'rgba(255, 255, 255, 0.25)' } = defineProps<SpotlightCardProps>();
 
-const divRef = ref<HTMLDivElement>()
-const isFocused = ref<boolean>(false)
-const position = ref<Position>({ x: 0, y: 0 })
-const opacity = ref<number>(0)
+const divRef = ref<HTMLDivElement>();
+const isFocused = ref<boolean>(false);
+const position = ref<Position>({ x: 0, y: 0 });
+const opacity = ref<number>(0);
 
 const handleMouseMove = (e: MouseEvent) => {
-  if (!divRef.value || isFocused.value) return
+  if (!divRef.value || isFocused.value) return;
 
-  const rect = divRef.value.getBoundingClientRect()
-  position.value = { x: e.clientX - rect.left, y: e.clientY - rect.top }
-}
+  const rect = divRef.value.getBoundingClientRect();
+  position.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+};
 
 const handleFocus = () => {
-  isFocused.value = true
-  opacity.value = 0.6
-}
+  isFocused.value = true;
+  opacity.value = 0.6;
+};
 
 const handleBlur = () => {
-  isFocused.value = false
-  opacity.value = 0
-}
+  isFocused.value = false;
+  opacity.value = 0;
+};
 
 const handleMouseEnter = () => {
-  opacity.value = 0.6
-}
+  opacity.value = 0.6;
+};
 
 const handleMouseLeave = () => {
-  opacity.value = 0
-}
-</script>
\ No newline at end of file
+  opacity.value = 0;
+};
+</script>
diff --git a/src/content/Components/TiltedCard/TiltedCard.vue b/src/content/Components/TiltedCard/TiltedCard.vue
index 8516b8f..7f70d65 100644
--- a/src/content/Components/TiltedCard/TiltedCard.vue
+++ b/src/content/Components/TiltedCard/TiltedCard.vue
@@ -1,65 +1,87 @@
 <template>
-  <figure ref="cardRef" class="relative w-full h-full [perspective:800px] flex flex-col items-center justify-center"
+  <figure
+    ref="cardRef"
+    class="relative w-full h-full [perspective:800px] flex flex-col items-center justify-center"
     :style="{
       height: containerHeight,
-      width: containerWidth,
-    }" @mousemove="handleMouse" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+      width: containerWidth
+    }"
+    @mousemove="handleMouse"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
     <div v-if="showMobileWarning" class="absolute top-4 text-center text-sm block sm:hidden">
       This effect is not optimized for mobile. Check on desktop.
     </div>
 
-    <Motion tag="div" class="relative [transform-style:preserve-3d]" :style="{
-      width: imageWidth,
-      height: imageHeight,
-    }" :animate="{
+    <Motion
+      tag="div"
+      class="relative [transform-style:preserve-3d]"
+      :style="{
+        width: imageWidth,
+        height: imageHeight
+      }"
+      :animate="{
         rotateX: rotateXValue,
         rotateY: rotateYValue,
-        scale: scaleValue,
-      }" :transition="springTransition">
-      <img :src="imageSrc" :alt="altText"
+        scale: scaleValue
+      }"
+      :transition="springTransition"
+    >
+      <img
+        :src="imageSrc"
+        :alt="altText"
         class="absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]"
         :style="{
           width: imageWidth,
-          height: imageHeight,
-        }" />
+          height: imageHeight
+        }"
+      />
 
-      <Motion v-if="displayOverlayContent && overlayContent" tag="div"
-        class="absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]">
+      <Motion
+        v-if="displayOverlayContent && overlayContent"
+        tag="div"
+        class="absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]"
+      >
         <slot name="overlay" />
       </Motion>
     </Motion>
 
-    <Motion v-if="showTooltip && captionText" tag="figcaption"
+    <Motion
+      v-if="showTooltip && captionText"
+      tag="figcaption"
       class="pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block"
       :animate="{
         x: xValue,
         y: yValue,
         opacity: opacityValue,
-        rotate: rotateFigcaptionValue,
-      }" :transition="tooltipTransition">
+        rotate: rotateFigcaptionValue
+      }"
+      :transition="tooltipTransition"
+    >
       {{ captionText }}
     </Motion>
   </figure>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Motion } from 'motion-v'
+import { ref, computed } from 'vue';
+import { Motion } from 'motion-v';
 
 interface TiltedCardProps {
-  imageSrc: string
-  altText?: string
-  captionText?: string
-  containerHeight?: string
-  containerWidth?: string
-  imageHeight?: string
-  imageWidth?: string
-  scaleOnHover?: number
-  rotateAmplitude?: number
-  showMobileWarning?: boolean
-  showTooltip?: boolean
-  overlayContent?: boolean
-  displayOverlayContent?: boolean
+  imageSrc: string;
+  altText?: string;
+  captionText?: string;
+  containerHeight?: string;
+  containerWidth?: string;
+  imageHeight?: string;
+  imageWidth?: string;
+  scaleOnHover?: number;
+  rotateAmplitude?: number;
+  showMobileWarning?: boolean;
+  showTooltip?: boolean;
+  overlayContent?: boolean;
+  displayOverlayContent?: boolean;
 }
 
 const props = withDefaults(defineProps<TiltedCardProps>(), {
@@ -74,64 +96,64 @@ const props = withDefaults(defineProps<TiltedCardProps>(), {
   showMobileWarning: true,
   showTooltip: true,
   overlayContent: false,
-  displayOverlayContent: false,
-})
+  displayOverlayContent: false
+});
 
-const cardRef = ref<HTMLElement | null>(null)
-const xValue = ref(0)
-const yValue = ref(0)
-const rotateXValue = ref(0)
-const rotateYValue = ref(0)
-const scaleValue = ref(1)
-const opacityValue = ref(0)
-const rotateFigcaptionValue = ref(0)
-const lastY = ref(0)
+const cardRef = ref<HTMLElement | null>(null);
+const xValue = ref(0);
+const yValue = ref(0);
+const rotateXValue = ref(0);
+const rotateYValue = ref(0);
+const scaleValue = ref(1);
+const opacityValue = ref(0);
+const rotateFigcaptionValue = ref(0);
+const lastY = ref(0);
 
 const springTransition = computed(() => ({
   type: 'spring' as const,
   damping: 30,
   stiffness: 100,
-  mass: 2,
-}))
+  mass: 2
+}));
 
 const tooltipTransition = computed(() => ({
   type: 'spring' as const,
   damping: 30,
   stiffness: 350,
-  mass: 1,
-}))
+  mass: 1
+}));
 
 function handleMouse(e: MouseEvent) {
-  if (!cardRef.value) return
+  if (!cardRef.value) return;
 
-  const rect = cardRef.value.getBoundingClientRect()
-  const offsetX = e.clientX - rect.left - rect.width / 2
-  const offsetY = e.clientY - rect.top - rect.height / 2
+  const rect = cardRef.value.getBoundingClientRect();
+  const offsetX = e.clientX - rect.left - rect.width / 2;
+  const offsetY = e.clientY - rect.top - rect.height / 2;
 
-  const rotationX = (offsetY / (rect.height / 2)) * -props.rotateAmplitude
-  const rotationY = (offsetX / (rect.width / 2)) * props.rotateAmplitude
+  const rotationX = (offsetY / (rect.height / 2)) * -props.rotateAmplitude;
+  const rotationY = (offsetX / (rect.width / 2)) * props.rotateAmplitude;
 
-  rotateXValue.value = rotationX
-  rotateYValue.value = rotationY
+  rotateXValue.value = rotationX;
+  rotateYValue.value = rotationY;
 
-  xValue.value = e.clientX - rect.left
-  yValue.value = e.clientY - rect.top
+  xValue.value = e.clientX - rect.left;
+  yValue.value = e.clientY - rect.top;
 
-  const velocityY = offsetY - lastY.value
-  rotateFigcaptionValue.value = -velocityY * 0.6
-  lastY.value = offsetY
+  const velocityY = offsetY - lastY.value;
+  rotateFigcaptionValue.value = -velocityY * 0.6;
+  lastY.value = offsetY;
 }
 
 function handleMouseEnter() {
-  scaleValue.value = props.scaleOnHover
-  opacityValue.value = 1
+  scaleValue.value = props.scaleOnHover;
+  opacityValue.value = 1;
 }
 
 function handleMouseLeave() {
-  opacityValue.value = 0
-  scaleValue.value = 1
-  rotateXValue.value = 0
-  rotateYValue.value = 0
-  rotateFigcaptionValue.value = 0
+  opacityValue.value = 0;
+  scaleValue.value = 1;
+  rotateXValue.value = 0;
+  rotateYValue.value = 0;
+  rotateFigcaptionValue.value = 0;
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/content/TextAnimations/BlurText/BlurText.vue b/src/content/TextAnimations/BlurText/BlurText.vue
index 04cebd7..d430a8e 100644
--- a/src/content/TextAnimations/BlurText/BlurText.vue
+++ b/src/content/TextAnimations/BlurText/BlurText.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import { Motion } from 'motion-v'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { Motion } from 'motion-v';
 
 interface BlurTextProps {
-  text?: string
-  delay?: number
-  className?: string
-  animateBy?: 'words' | 'letters'
-  direction?: 'top' | 'bottom'
-  threshold?: number
-  rootMargin?: string
-  animationFrom?: Record<string, string | number>
-  animationTo?: Array<Record<string, string | number>>
-  easing?: (t: number) => number
-  onAnimationComplete?: () => void
-  stepDuration?: number
+  text?: string;
+  delay?: number;
+  className?: string;
+  animateBy?: 'words' | 'letters';
+  direction?: 'top' | 'bottom';
+  threshold?: number;
+  rootMargin?: string;
+  animationFrom?: Record<string, string | number>;
+  animationTo?: Array<Record<string, string | number>>;
+  easing?: (t: number) => number;
+  onAnimationComplete?: () => void;
+  stepDuration?: number;
 }
 
 const props = withDefaults(defineProps<BlurTextProps>(), {
@@ -27,37 +27,30 @@ const props = withDefaults(defineProps<BlurTextProps>(), {
   rootMargin: '0px',
   easing: (t: number) => t,
   stepDuration: 0.35
-})
+});
 
 const buildKeyframes = (
   from: Record<string, string | number>,
   steps: Array<Record<string, string | number>>
 ): Record<string, Array<string | number>> => {
-  const keys = new Set<string>([
-    ...Object.keys(from),
-    ...steps.flatMap((s) => Object.keys(s))
-  ])
+  const keys = new Set<string>([...Object.keys(from), ...steps.flatMap(s => Object.keys(s))]);
 
-  const keyframes: Record<string, Array<string | number>> = {}
-  keys.forEach((k) => {
-    keyframes[k] = [from[k], ...steps.map((s) => s[k])]
-  })
-  return keyframes
-}
+  const keyframes: Record<string, Array<string | number>> = {};
+  keys.forEach(k => {
+    keyframes[k] = [from[k], ...steps.map(s => s[k])];
+  });
+  return keyframes;
+};
 
-const elements = computed(() =>
-  props.animateBy === 'words' ? props.text.split(' ') : props.text.split('')
-)
+const elements = computed(() => (props.animateBy === 'words' ? props.text.split(' ') : props.text.split('')));
 
-const inView = ref(false)
-const rootRef = ref<HTMLParagraphElement | null>(null)
-let observer: IntersectionObserver | null = null
+const inView = ref(false);
+const rootRef = ref<HTMLParagraphElement | null>(null);
+let observer: IntersectionObserver | null = null;
 
 const defaultFrom = computed(() =>
-  props.direction === 'top'
-    ? { filter: 'blur(10px)', opacity: 0, y: -50 }
-    : { filter: 'blur(10px)', opacity: 0, y: 50 }
-)
+  props.direction === 'top' ? { filter: 'blur(10px)', opacity: 0, y: -50 } : { filter: 'blur(10px)', opacity: 0, y: 50 }
+);
 
 const defaultTo = computed(() => [
   {
@@ -66,51 +59,49 @@ const defaultTo = computed(() => [
     y: props.direction === 'top' ? 5 : -5
   },
   { filter: 'blur(0px)', opacity: 1, y: 0 }
-])
+]);
 
-const fromSnapshot = computed(() => props.animationFrom ?? defaultFrom.value)
-const toSnapshots = computed(() => props.animationTo ?? defaultTo.value)
+const fromSnapshot = computed(() => props.animationFrom ?? defaultFrom.value);
+const toSnapshots = computed(() => props.animationTo ?? defaultTo.value);
 
-const stepCount = computed(() => toSnapshots.value.length + 1)
-const totalDuration = computed(() => props.stepDuration * (stepCount.value - 1))
+const stepCount = computed(() => toSnapshots.value.length + 1);
+const totalDuration = computed(() => props.stepDuration * (stepCount.value - 1));
 const times = computed(() =>
-  Array.from({ length: stepCount.value }, (_, i) =>
-    stepCount.value === 1 ? 0 : i / (stepCount.value - 1)
-  )
-)
+  Array.from({ length: stepCount.value }, (_, i) => (stepCount.value === 1 ? 0 : i / (stepCount.value - 1)))
+);
 
 const setupObserver = () => {
-  if (!rootRef.value) return
+  if (!rootRef.value) return;
 
   observer = new IntersectionObserver(
     ([entry]) => {
       if (entry.isIntersecting) {
-        inView.value = true
-        observer?.unobserve(rootRef.value as Element)
+        inView.value = true;
+        observer?.unobserve(rootRef.value as Element);
       }
     },
     { threshold: props.threshold, rootMargin: props.rootMargin }
-  )
+  );
 
-  observer.observe(rootRef.value)
-}
+  observer.observe(rootRef.value);
+};
 
 onMounted(() => {
-  setupObserver()
-})
+  setupObserver();
+});
 
 onUnmounted(() => {
-  observer?.disconnect()
-})
+  observer?.disconnect();
+});
 
 watch([() => props.threshold, () => props.rootMargin], () => {
-  observer?.disconnect()
-  setupObserver()
-})
+  observer?.disconnect();
+  setupObserver();
+});
 
 const getAnimateKeyframes = () => {
-  return buildKeyframes(fromSnapshot.value, toSnapshots.value)
-}
+  return buildKeyframes(fromSnapshot.value, toSnapshots.value);
+};
 
 const getTransition = (index: number) => {
   return {
@@ -118,24 +109,33 @@ const getTransition = (index: number) => {
     times: times.value,
     delay: (index * props.delay) / 1000,
     ease: props.easing
-  }
-}
+  };
+};
 
 const handleAnimationComplete = (index: number) => {
   if (index === elements.value.length - 1 && props.onAnimationComplete) {
-    props.onAnimationComplete()
+    props.onAnimationComplete();
   }
-}
+};
 </script>
 
 <template>
   <p ref="rootRef" :class="`blur-text ${className} flex flex-wrap`">
-    <Motion v-for="(segment, index) in elements" :key="index" tag="span" :initial="fromSnapshot"
-      :animate="inView ? getAnimateKeyframes() : fromSnapshot" :transition="getTransition(index)" :style="{
+    <Motion
+      v-for="(segment, index) in elements"
+      :key="index"
+      tag="span"
+      :initial="fromSnapshot"
+      :animate="inView ? getAnimateKeyframes() : fromSnapshot"
+      :transition="getTransition(index)"
+      :style="{
         display: 'inline-block',
         willChange: 'transform, filter, opacity'
-      }" @animation-complete="handleAnimationComplete(index)">
-      {{ segment === ' ' ? '\u00A0' : segment }}{{ animateBy === 'words' && index < elements.length - 1 ? '\u00A0' : ''
-        }} </Motion>
+      }"
+      @animation-complete="handleAnimationComplete(index)"
+    >
+      {{ segment === ' ' ? '\u00A0' : segment
+      }}{{ animateBy === 'words' && index < elements.length - 1 ? '\u00A0' : '' }}
+    </Motion>
   </p>
 </template>
diff --git a/src/content/TextAnimations/CircularText/CircularText.vue b/src/content/TextAnimations/CircularText/CircularText.vue
index ebe59ea..5daea6e 100644
--- a/src/content/TextAnimations/CircularText/CircularText.vue
+++ b/src/content/TextAnimations/CircularText/CircularText.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect, onUnmounted } from 'vue'
-import { Motion } from 'motion-v'
+import { computed, ref, watchEffect, onUnmounted } from 'vue';
+import { Motion } from 'motion-v';
 
 interface CircularTextProps {
-  text: string
-  spinDuration?: number
-  onHover?: 'slowDown' | 'speedUp' | 'pause' | 'goBonkers'
-  className?: string
+  text: string;
+  spinDuration?: number;
+  onHover?: 'slowDown' | 'speedUp' | 'pause' | 'goBonkers';
+  className?: string;
 }
 
 const props = withDefaults(defineProps<CircularTextProps>(), {
@@ -14,99 +14,101 @@ const props = withDefaults(defineProps<CircularTextProps>(), {
   spinDuration: 20,
   onHover: 'speedUp',
   className: ''
-})
+});
 
-const letters = computed(() => Array.from(props.text))
-const isHovered = ref(false)
+const letters = computed(() => Array.from(props.text));
+const isHovered = ref(false);
 
-const currentRotation = ref(0)
-const animationId = ref<number | null>(null)
-const lastTime = ref<number>(Date.now())
-const rotationSpeed = ref<number>(0)
+const currentRotation = ref(0);
+const animationId = ref<number | null>(null);
+const lastTime = ref<number>(Date.now());
+const rotationSpeed = ref<number>(0);
 
 const getCurrentSpeed = () => {
-  if (isHovered.value && props.onHover === 'pause') return 0
+  if (isHovered.value && props.onHover === 'pause') return 0;
 
-  const baseDuration = props.spinDuration
-  const baseSpeed = 360 / baseDuration
+  const baseDuration = props.spinDuration;
+  const baseSpeed = 360 / baseDuration;
 
-  if (!isHovered.value) return baseSpeed
+  if (!isHovered.value) return baseSpeed;
 
   switch (props.onHover) {
     case 'slowDown':
-      return baseSpeed / 2
+      return baseSpeed / 2;
     case 'speedUp':
-      return baseSpeed * 4
+      return baseSpeed * 4;
     case 'goBonkers':
-      return baseSpeed * 20
+      return baseSpeed * 20;
     default:
-      return baseSpeed
+      return baseSpeed;
   }
-}
+};
 
 const getCurrentScale = () => {
-  return (isHovered.value && props.onHover === 'goBonkers') ? 0.8 : 1
-}
+  return isHovered.value && props.onHover === 'goBonkers' ? 0.8 : 1;
+};
 
 const animate = () => {
-  const now = Date.now()
-  const deltaTime = (now - lastTime.value) / 1000
-  lastTime.value = now
+  const now = Date.now();
+  const deltaTime = (now - lastTime.value) / 1000;
+  lastTime.value = now;
 
-  const targetSpeed = getCurrentSpeed()
+  const targetSpeed = getCurrentSpeed();
 
-  const speedDiff = targetSpeed - rotationSpeed.value
-  const smoothingFactor = Math.min(1, deltaTime * 5)
-  rotationSpeed.value += speedDiff * smoothingFactor
+  const speedDiff = targetSpeed - rotationSpeed.value;
+  const smoothingFactor = Math.min(1, deltaTime * 5);
+  rotationSpeed.value += speedDiff * smoothingFactor;
 
-  currentRotation.value = (currentRotation.value + rotationSpeed.value * deltaTime) % 360
+  currentRotation.value = (currentRotation.value + rotationSpeed.value * deltaTime) % 360;
 
-  animationId.value = requestAnimationFrame(animate)
-}
+  animationId.value = requestAnimationFrame(animate);
+};
 
 const startAnimation = () => {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
+    cancelAnimationFrame(animationId.value);
   }
-  lastTime.value = Date.now()
-  rotationSpeed.value = getCurrentSpeed()
-  animate()
-}
+  lastTime.value = Date.now();
+  rotationSpeed.value = getCurrentSpeed();
+  animate();
+};
 
 watchEffect(() => {
-  startAnimation()
-})
+  startAnimation();
+});
 
-startAnimation()
+startAnimation();
 
 onUnmounted(() => {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
+    cancelAnimationFrame(animationId.value);
   }
-})
+});
 
 const handleHoverStart = () => {
-  isHovered.value = true
-}
+  isHovered.value = true;
+};
 
 const handleHoverEnd = () => {
-  isHovered.value = false
-}
+  isHovered.value = false;
+};
 
 const getLetterTransform = (index: number) => {
-  const rotationDeg = (360 / letters.value.length) * index
-  const factor = Math.PI / letters.value.length
-  const x = factor * index
-  const y = factor * index
-  return `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`
-}
+  const rotationDeg = (360 / letters.value.length) * index;
+  const factor = Math.PI / letters.value.length;
+  const x = factor * index;
+  const y = factor * index;
+  return `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;
+};
 </script>
 
 <template>
-  <Motion :animate="{
-    rotate: currentRotation,
-    scale: getCurrentScale()
-  }" :transition="{
+  <Motion
+    :animate="{
+      rotate: currentRotation,
+      scale: getCurrentScale()
+    }"
+    :transition="{
       rotate: {
         duration: 0
       },
@@ -117,13 +119,19 @@ const getLetterTransform = (index: number) => {
       }
     }"
     :class="`m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-white text-center cursor-pointer origin-center ${props.className}`"
-    @mouseenter="handleHoverStart" @mouseleave="handleHoverEnd">
-    <span v-for="(letter, i) in letters" :key="i"
-      class="absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]" :style="{
+    @mouseenter="handleHoverStart"
+    @mouseleave="handleHoverEnd"
+  >
+    <span
+      v-for="(letter, i) in letters"
+      :key="i"
+      class="absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]"
+      :style="{
         transform: getLetterTransform(i),
         WebkitTransform: getLetterTransform(i)
-      }">
+      }"
+    >
       {{ letter }}
     </span>
   </Motion>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/content/TextAnimations/CurvedLoop/CurvedLoop.vue b/src/content/TextAnimations/CurvedLoop/CurvedLoop.vue
index d46011a..0a05995 100644
--- a/src/content/TextAnimations/CurvedLoop/CurvedLoop.vue
+++ b/src/content/TextAnimations/CurvedLoop/CurvedLoop.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
 
 interface CurvedLoopProps {
-  marqueeText?: string
-  speed?: number
-  className?: string
-  curveAmount?: number
-  direction?: 'left' | 'right'
-  interactive?: boolean
+  marqueeText?: string;
+  speed?: number;
+  className?: string;
+  curveAmount?: number;
+  direction?: 'left' | 'right';
+  interactive?: boolean;
 }
 
 const props = withDefaults(defineProps<CurvedLoopProps>(), {
@@ -17,161 +17,166 @@ const props = withDefaults(defineProps<CurvedLoopProps>(), {
   curveAmount: 400,
   direction: 'left',
   interactive: true
-})
+});
 
 const text = computed(() => {
-  const hasTrailing = /\s|\u00A0$/.test(props.marqueeText)
-  return (
-    (hasTrailing ? props.marqueeText.replace(/\s+$/, '') : props.marqueeText) + '\u00A0'
-  )
-})
+  const hasTrailing = /\s|\u00A0$/.test(props.marqueeText);
+  return (hasTrailing ? props.marqueeText.replace(/\s+$/, '') : props.marqueeText) + '\u00A0';
+});
 
-const measureRef = ref<SVGTextElement | null>(null)
-const tspansRef = ref<SVGTSpanElement[]>([])
-const pathRef = ref<SVGPathElement | null>(null)
-const pathLength = ref(0)
-const spacing = ref(0)
-const uid = Math.random().toString(36).substr(2, 9)
-const pathId = `curve-${uid}`
+const measureRef = ref<SVGTextElement | null>(null);
+const tspansRef = ref<SVGTSpanElement[]>([]);
+const pathRef = ref<SVGPathElement | null>(null);
+const pathLength = ref(0);
+const spacing = ref(0);
+const uid = Math.random().toString(36).substr(2, 9);
+const pathId = `curve-${uid}`;
 
-const pathD = computed(() => `M-100,40 Q500,${40 + props.curveAmount} 1540,40`)
+const pathD = computed(() => `M-100,40 Q500,${40 + props.curveAmount} 1540,40`);
 
-const dragRef = ref(false)
-const lastXRef = ref(0)
-const dirRef = ref<'left' | 'right'>(props.direction)
-const velRef = ref(0)
+const dragRef = ref(false);
+const lastXRef = ref(0);
+const dirRef = ref<'left' | 'right'>(props.direction);
+const velRef = ref(0);
 
-let animationFrame: number | null = null
+let animationFrame: number | null = null;
 
 const updateSpacing = () => {
   if (measureRef.value) {
-    spacing.value = measureRef.value.getComputedTextLength()
+    spacing.value = measureRef.value.getComputedTextLength();
   }
-}
+};
 
 const updatePathLength = () => {
   if (pathRef.value) {
-    pathLength.value = pathRef.value.getTotalLength()
+    pathLength.value = pathRef.value.getTotalLength();
   }
-}
+};
 
 const animate = () => {
-  if (!spacing.value) return
+  if (!spacing.value) return;
 
   const step = () => {
-    tspansRef.value.forEach((t) => {
-      if (!t) return
-      let x = parseFloat(t.getAttribute('x') || '0')
+    tspansRef.value.forEach(t => {
+      if (!t) return;
+      let x = parseFloat(t.getAttribute('x') || '0');
       if (!dragRef.value) {
-        const delta = dirRef.value === 'right' ? Math.abs(props.speed) : -Math.abs(props.speed)
-        x += delta
+        const delta = dirRef.value === 'right' ? Math.abs(props.speed) : -Math.abs(props.speed);
+        x += delta;
       }
-      const maxX = (tspansRef.value.length - 1) * spacing.value
-      if (x < -spacing.value) x = maxX
-      if (x > maxX) x = -spacing.value
-      t.setAttribute('x', x.toString())
-    })
-    animationFrame = requestAnimationFrame(step)
-  }
-  step()
-}
+      const maxX = (tspansRef.value.length - 1) * spacing.value;
+      if (x < -spacing.value) x = maxX;
+      if (x > maxX) x = -spacing.value;
+      t.setAttribute('x', x.toString());
+    });
+    animationFrame = requestAnimationFrame(step);
+  };
+  step();
+};
 
 const stopAnimation = () => {
   if (animationFrame) {
-    cancelAnimationFrame(animationFrame)
-    animationFrame = null
+    cancelAnimationFrame(animationFrame);
+    animationFrame = null;
   }
-}
+};
 
 const repeats = computed(() => {
-  return pathLength.value && spacing.value ? Math.ceil(pathLength.value / spacing.value) + 2 : 0
-})
+  return pathLength.value && spacing.value ? Math.ceil(pathLength.value / spacing.value) + 2 : 0;
+});
 
-const ready = computed(() => pathLength.value > 0 && spacing.value > 0)
+const ready = computed(() => pathLength.value > 0 && spacing.value > 0);
 
 const onPointerDown = (e: PointerEvent) => {
-  if (!props.interactive) return
-  dragRef.value = true
-  lastXRef.value = e.clientX
-  velRef.value = 0
-    ; (e.target as HTMLElement).setPointerCapture(e.pointerId)
-}
+  if (!props.interactive) return;
+  dragRef.value = true;
+  lastXRef.value = e.clientX;
+  velRef.value = 0;
+  (e.target as HTMLElement).setPointerCapture(e.pointerId);
+};
 
 const onPointerMove = (e: PointerEvent) => {
-  if (!props.interactive || !dragRef.value) return
-  const dx = e.clientX - lastXRef.value
-  lastXRef.value = e.clientX
-  velRef.value = dx
-  tspansRef.value.forEach((t) => {
-    if (!t) return
-    let x = parseFloat(t.getAttribute('x') || '0')
-    x += dx
-    const maxX = (tspansRef.value.length - 1) * spacing.value
-    if (x < -spacing.value) x = maxX
-    if (x > maxX) x = -spacing.value
-    t.setAttribute('x', x.toString())
-  })
-}
+  if (!props.interactive || !dragRef.value) return;
+  const dx = e.clientX - lastXRef.value;
+  lastXRef.value = e.clientX;
+  velRef.value = dx;
+  tspansRef.value.forEach(t => {
+    if (!t) return;
+    let x = parseFloat(t.getAttribute('x') || '0');
+    x += dx;
+    const maxX = (tspansRef.value.length - 1) * spacing.value;
+    if (x < -spacing.value) x = maxX;
+    if (x > maxX) x = -spacing.value;
+    t.setAttribute('x', x.toString());
+  });
+};
 
 const endDrag = () => {
-  if (!props.interactive) return
-  dragRef.value = false
-  dirRef.value = velRef.value > 0 ? 'right' : 'left'
-}
+  if (!props.interactive) return;
+  dragRef.value = false;
+  dirRef.value = velRef.value > 0 ? 'right' : 'left';
+};
 
 const cursorStyle = computed(() => {
-  return props.interactive
-    ? dragRef.value
-      ? 'grabbing'
-      : 'grab'
-    : 'auto'
-})
+  return props.interactive ? (dragRef.value ? 'grabbing' : 'grab') : 'auto';
+});
 
 onMounted(() => {
   nextTick(() => {
-    updateSpacing()
-    updatePathLength()
-    animate()
-  })
-})
+    updateSpacing();
+    updatePathLength();
+    animate();
+  });
+});
 
 onUnmounted(() => {
-  stopAnimation()
-})
+  stopAnimation();
+});
 
 watch([text, () => props.className], () => {
   nextTick(() => {
-    updateSpacing()
-  })
-})
+    updateSpacing();
+  });
+});
 
-watch(() => props.curveAmount, () => {
-  nextTick(() => {
-    updatePathLength()
-  })
-})
+watch(
+  () => props.curveAmount,
+  () => {
+    nextTick(() => {
+      updatePathLength();
+    });
+  }
+);
 
 watch([spacing, () => props.speed], () => {
-  stopAnimation()
+  stopAnimation();
   if (spacing.value) {
-    animate()
+    animate();
   }
-})
+});
 
 watch(repeats, () => {
-  tspansRef.value = []
-})
+  tspansRef.value = [];
+});
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center w-full" :style="{
-    visibility: ready ? 'visible' : 'hidden',
-    cursor: cursorStyle
-  }" @pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="endDrag" @pointerleave="endDrag">
+  <div
+    class="min-h-screen flex items-center justify-center w-full"
+    :style="{
+      visibility: ready ? 'visible' : 'hidden',
+      cursor: cursorStyle
+    }"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="endDrag"
+    @pointerleave="endDrag"
+  >
     <svg
       class="select-none w-full overflow-visible block aspect-[100/12] text-[6rem] font-bold tracking-[5px] uppercase leading-none"
-      viewBox="0 0 1440 120">
-      <text ref="measureRef" xml:space="preserve" style="visibility: hidden; opacity: 0; pointer-events: none;">
+      viewBox="0 0 1440 120"
+    >
+      <text ref="measureRef" xml:space="preserve" style="visibility: hidden; opacity: 0; pointer-events: none">
         {{ text }}
       </text>
 
@@ -181,9 +186,16 @@ watch(repeats, () => {
 
       <text v-if="ready" xml:space="preserve" :class="`fill-white ${className}`">
         <textPath :href="`#${pathId}`" xml:space="preserve">
-          <tspan v-for="i in repeats" :key="i" :x="(i - 1) * spacing" :ref="(el) => {
-            if (el) tspansRef[i - 1] = el as SVGTSpanElement
-          }">
+          <tspan
+            v-for="i in repeats"
+            :key="i"
+            :x="(i - 1) * spacing"
+            :ref="
+              el => {
+                if (el) tspansRef[i - 1] = el as SVGTSpanElement;
+              }
+            "
+          >
             {{ text }}
           </tspan>
         </textPath>
diff --git a/src/content/TextAnimations/DecryptedText/DecryptedText.vue b/src/content/TextAnimations/DecryptedText/DecryptedText.vue
index 1f291bc..05c6516 100644
--- a/src/content/TextAnimations/DecryptedText/DecryptedText.vue
+++ b/src/content/TextAnimations/DecryptedText/DecryptedText.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 interface DecryptedTextProps {
-  text: string
-  speed?: number
-  maxIterations?: number
-  sequential?: boolean
-  revealDirection?: 'start' | 'end' | 'center'
-  useOriginalCharsOnly?: boolean
-  characters?: string
-  className?: string
-  encryptedClassName?: string
-  parentClassName?: string
-  animateOn?: 'view' | 'hover'
+  text: string;
+  speed?: number;
+  maxIterations?: number;
+  sequential?: boolean;
+  revealDirection?: 'start' | 'end' | 'center';
+  useOriginalCharsOnly?: boolean;
+  characters?: string;
+  className?: string;
+  encryptedClassName?: string;
+  parentClassName?: string;
+  animateOn?: 'view' | 'hover';
 }
 
 const props = withDefaults(defineProps<DecryptedTextProps>(), {
@@ -27,201 +27,205 @@ const props = withDefaults(defineProps<DecryptedTextProps>(), {
   parentClassName: '',
   encryptedClassName: '',
   animateOn: 'hover'
-})
+});
 
 const emit = defineEmits<{
-  animationComplete: []
-}>()
+  animationComplete: [];
+}>();
 
-const containerRef = ref<HTMLSpanElement>()
-const displayText = ref(props.text)
-const isHovering = ref(false)
-const isScrambling = ref(false)
-const revealedIndices = ref(new Set<number>())
-const hasAnimated = ref(false)
+const containerRef = ref<HTMLSpanElement>();
+const displayText = ref(props.text);
+const isHovering = ref(false);
+const isScrambling = ref(false);
+const revealedIndices = ref(new Set<number>());
+const hasAnimated = ref(false);
 
-let interval: number | null = null
-let intersectionObserver: IntersectionObserver | null = null
+let interval: number | null = null;
+let intersectionObserver: IntersectionObserver | null = null;
 
-watch([
-  () => isHovering.value,
-  () => props.text,
-  () => props.speed,
-  () => props.maxIterations,
-  () => props.sequential,
-  () => props.revealDirection,
-  () => props.characters,
-  () => props.useOriginalCharsOnly
-], () => {
-  let currentIteration = 0
+watch(
+  [
+    () => isHovering.value,
+    () => props.text,
+    () => props.speed,
+    () => props.maxIterations,
+    () => props.sequential,
+    () => props.revealDirection,
+    () => props.characters,
+    () => props.useOriginalCharsOnly
+  ],
+  () => {
+    let currentIteration = 0;
 
-  const getNextIndex = (revealedSet: Set<number>): number => {
-    const textLength = props.text.length
-    switch (props.revealDirection) {
-      case 'start':
-        return revealedSet.size
-      case 'end':
-        return textLength - 1 - revealedSet.size
-      case 'center': {
-        const middle = Math.floor(textLength / 2)
-        const offset = Math.floor(revealedSet.size / 2)
-        const nextIndex =
-          revealedSet.size % 2 === 0
-            ? middle + offset
-            : middle - offset - 1
+    const getNextIndex = (revealedSet: Set<number>): number => {
+      const textLength = props.text.length;
+      switch (props.revealDirection) {
+        case 'start':
+          return revealedSet.size;
+        case 'end':
+          return textLength - 1 - revealedSet.size;
+        case 'center': {
+          const middle = Math.floor(textLength / 2);
+          const offset = Math.floor(revealedSet.size / 2);
+          const nextIndex = revealedSet.size % 2 === 0 ? middle + offset : middle - offset - 1;
 
-        if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) {
-          return nextIndex
+          if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) {
+            return nextIndex;
+          }
+          for (let i = 0; i < textLength; i++) {
+            if (!revealedSet.has(i)) return i;
+          }
+          return 0;
         }
-        for (let i = 0; i < textLength; i++) {
-          if (!revealedSet.has(i)) return i
-        }
-        return 0
+        default:
+          return revealedSet.size;
       }
-      default:
-        return revealedSet.size
-    }
-  }
+    };
 
-  const availableChars = props.useOriginalCharsOnly
-    ? Array.from(new Set(props.text.split(''))).filter((char) => char !== ' ')
-    : props.characters.split('')
+    const availableChars = props.useOriginalCharsOnly
+      ? Array.from(new Set(props.text.split(''))).filter(char => char !== ' ')
+      : props.characters.split('');
 
-  const shuffleText = (originalText: string, currentRevealed: Set<number>): string => {
-    if (props.useOriginalCharsOnly) {
-      const positions = originalText.split('').map((char, i) => ({
-        char,
-        isSpace: char === ' ',
-        index: i,
-        isRevealed: currentRevealed.has(i)
-      }))
+    const shuffleText = (originalText: string, currentRevealed: Set<number>): string => {
+      if (props.useOriginalCharsOnly) {
+        const positions = originalText.split('').map((char, i) => ({
+          char,
+          isSpace: char === ' ',
+          index: i,
+          isRevealed: currentRevealed.has(i)
+        }));
 
-      const nonSpaceChars = positions
-        .filter((p) => !p.isSpace && !p.isRevealed)
-        .map((p) => p.char)
+        const nonSpaceChars = positions.filter(p => !p.isSpace && !p.isRevealed).map(p => p.char);
 
-      for (let i = nonSpaceChars.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1))
-          ;[nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]]
-      }
-
-      let charIndex = 0
-      return positions
-        .map((p) => {
-          if (p.isSpace) return ' '
-          if (p.isRevealed) return originalText[p.index]
-          return nonSpaceChars[charIndex++]
-        })
-        .join('')
-    } else {
-      return originalText
-        .split('')
-        .map((char, i) => {
-          if (char === ' ') return ' '
-          if (currentRevealed.has(i)) return originalText[i]
-          return availableChars[Math.floor(Math.random() * availableChars.length)]
-        })
-        .join('')
-    }
-  }
-
-  if (interval) {
-    clearInterval(interval)
-    interval = null
-  }
-
-  if (isHovering.value) {
-    isScrambling.value = true
-    interval = setInterval(() => {
-      if (props.sequential) {
-        if (revealedIndices.value.size < props.text.length) {
-          const nextIndex = getNextIndex(revealedIndices.value)
-          const newRevealed = new Set(revealedIndices.value)
-          newRevealed.add(nextIndex)
-          revealedIndices.value = newRevealed
-          displayText.value = shuffleText(props.text, newRevealed)
-        } else {
-          clearInterval(interval!)
-          interval = null
-          isScrambling.value = false
-          emit('animationComplete')
+        for (let i = nonSpaceChars.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]];
         }
+
+        let charIndex = 0;
+        return positions
+          .map(p => {
+            if (p.isSpace) return ' ';
+            if (p.isRevealed) return originalText[p.index];
+            return nonSpaceChars[charIndex++];
+          })
+          .join('');
       } else {
-        displayText.value = shuffleText(props.text, revealedIndices.value)
-        currentIteration++
-        if (currentIteration >= props.maxIterations) {
-          clearInterval(interval!)
-          interval = null
-          isScrambling.value = false
-          displayText.value = props.text
-          emit('animationComplete')
-        }
+        return originalText
+          .split('')
+          .map((char, i) => {
+            if (char === ' ') return ' ';
+            if (currentRevealed.has(i)) return originalText[i];
+            return availableChars[Math.floor(Math.random() * availableChars.length)];
+          })
+          .join('');
       }
-    }, props.speed)
-  } else {
-    displayText.value = props.text
-    revealedIndices.value = new Set()
-    isScrambling.value = false
+    };
+
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+
+    if (isHovering.value) {
+      isScrambling.value = true;
+      interval = setInterval(() => {
+        if (props.sequential) {
+          if (revealedIndices.value.size < props.text.length) {
+            const nextIndex = getNextIndex(revealedIndices.value);
+            const newRevealed = new Set(revealedIndices.value);
+            newRevealed.add(nextIndex);
+            revealedIndices.value = newRevealed;
+            displayText.value = shuffleText(props.text, newRevealed);
+          } else {
+            clearInterval(interval!);
+            interval = null;
+            isScrambling.value = false;
+            emit('animationComplete');
+          }
+        } else {
+          displayText.value = shuffleText(props.text, revealedIndices.value);
+          currentIteration++;
+          if (currentIteration >= props.maxIterations) {
+            clearInterval(interval!);
+            interval = null;
+            isScrambling.value = false;
+            displayText.value = props.text;
+            emit('animationComplete');
+          }
+        }
+      }, props.speed);
+    } else {
+      displayText.value = props.text;
+      revealedIndices.value = new Set();
+      isScrambling.value = false;
+    }
   }
-})
+);
 
 const handleMouseEnter = () => {
   if (props.animateOn === 'hover') {
-    isHovering.value = true
+    isHovering.value = true;
   }
-}
+};
 
 const handleMouseLeave = () => {
   if (props.animateOn === 'hover') {
-    isHovering.value = false
+    isHovering.value = false;
   }
-}
+};
 
 onMounted(async () => {
   if (props.animateOn === 'view') {
-    await nextTick()
+    await nextTick();
 
     const observerCallback = (entries: IntersectionObserverEntry[]) => {
-      entries.forEach((entry) => {
+      entries.forEach(entry => {
         if (entry.isIntersecting && !hasAnimated.value) {
-          isHovering.value = true
-          hasAnimated.value = true
+          isHovering.value = true;
+          hasAnimated.value = true;
         }
-      })
-    }
+      });
+    };
 
     const observerOptions = {
       root: null,
       rootMargin: '0px',
       threshold: 0.1
-    }
+    };
 
-    intersectionObserver = new IntersectionObserver(observerCallback, observerOptions)
+    intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
     if (containerRef.value) {
-      intersectionObserver.observe(containerRef.value)
+      intersectionObserver.observe(containerRef.value);
     }
   }
-})
+});
 
 onUnmounted(() => {
   if (interval) {
-    clearInterval(interval)
+    clearInterval(interval);
   }
   if (intersectionObserver && containerRef.value) {
-    intersectionObserver.unobserve(containerRef.value)
+    intersectionObserver.unobserve(containerRef.value);
   }
-})
+});
 </script>
 
 <template>
-  <span ref="containerRef" :class="`inline-block whitespace-pre-wrap ${props.parentClassName}`"
-    @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+  <span
+    ref="containerRef"
+    :class="`inline-block whitespace-pre-wrap ${props.parentClassName}`"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
     <span class="sr-only">{{ displayText }}</span>
 
     <span aria-hidden="true">
-      <span v-for="(char, index) in displayText.split('')" :key="index" :class="(revealedIndices.has(index) || !isScrambling || !isHovering)
-        ? props.className
-        : props.encryptedClassName">
+      <span
+        v-for="(char, index) in displayText.split('')"
+        :key="index"
+        :class="revealedIndices.has(index) || !isScrambling || !isHovering ? props.className : props.encryptedClassName"
+      >
         {{ char }}
       </span>
     </span>
diff --git a/src/content/TextAnimations/FallingText/FallingText.vue b/src/content/TextAnimations/FallingText/FallingText.vue
index 24ffedf..70a822d 100644
--- a/src/content/TextAnimations/FallingText/FallingText.vue
+++ b/src/content/TextAnimations/FallingText/FallingText.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import Matter from 'matter-js'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import Matter from 'matter-js';
 
 interface FallingTextProps {
-  text?: string
-  highlightWords?: string[]
-  trigger?: 'auto' | 'scroll' | 'click' | 'hover'
-  backgroundColor?: string
-  wireframes?: boolean
-  gravity?: number
-  mouseConstraintStiffness?: number
-  fontSize?: string
+  text?: string;
+  highlightWords?: string[];
+  trigger?: 'auto' | 'scroll' | 'click' | 'hover';
+  backgroundColor?: string;
+  wireframes?: boolean;
+  gravity?: number;
+  mouseConstraintStiffness?: number;
+  fontSize?: string;
 }
 
 const props = withDefaults(defineProps<FallingTextProps>(), {
@@ -22,80 +22,79 @@ const props = withDefaults(defineProps<FallingTextProps>(), {
   gravity: 1,
   mouseConstraintStiffness: 0.2,
   fontSize: '1rem'
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
-const textRef = ref<HTMLDivElement>()
-const canvasContainerRef = ref<HTMLDivElement>()
+const containerRef = ref<HTMLDivElement>();
+const textRef = ref<HTMLDivElement>();
+const canvasContainerRef = ref<HTMLDivElement>();
 
-const effectStarted = ref(false)
+const effectStarted = ref(false);
 
-let engine: Matter.Engine | null = null
-let render: Matter.Render | null = null
-let runner: Matter.Runner | null = null
-let mouseConstraint: Matter.MouseConstraint | null = null
-let wordBodies: Array<{ elem: HTMLElement; body: Matter.Body }> = []
-let intersectionObserver: IntersectionObserver | null = null
-let animationFrameId: number | null = null
+let engine: Matter.Engine | null = null;
+let render: Matter.Render | null = null;
+let runner: Matter.Runner | null = null;
+let mouseConstraint: Matter.MouseConstraint | null = null;
+let wordBodies: Array<{ elem: HTMLElement; body: Matter.Body }> = [];
+let intersectionObserver: IntersectionObserver | null = null;
+let animationFrameId: number | null = null;
 
 const createTextHTML = () => {
-  if (!textRef.value) return
+  if (!textRef.value) return;
 
-  const words = props.text.split(' ')
+  const words = props.text.split(' ');
   const newHTML = words
-    .map((word) => {
-      const isHighlighted = props.highlightWords.some((hw) => word.startsWith(hw))
-      return `<span class="inline-block mx-[2px] select-none ${isHighlighted ? 'text-green-500 font-bold' : ''
-        }">${word}</span>`
+    .map(word => {
+      const isHighlighted = props.highlightWords.some(hw => word.startsWith(hw));
+      return `<span class="inline-block mx-[2px] select-none ${isHighlighted ? 'text-green-500 font-bold' : ''}">${word}</span>`;
     })
-    .join(' ')
+    .join(' ');
 
-  textRef.value.innerHTML = newHTML
-}
+  textRef.value.innerHTML = newHTML;
+};
 
 const setupTrigger = () => {
   if (props.trigger === 'auto') {
     setTimeout(() => {
-      effectStarted.value = true
-    }, 100)
-    return
+      effectStarted.value = true;
+    }, 100);
+    return;
   }
 
   if (props.trigger === 'scroll' && containerRef.value) {
     intersectionObserver = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
-          effectStarted.value = true
-          intersectionObserver?.disconnect()
+          effectStarted.value = true;
+          intersectionObserver?.disconnect();
         }
       },
       { threshold: 0.1 }
-    )
-    intersectionObserver.observe(containerRef.value)
+    );
+    intersectionObserver.observe(containerRef.value);
   }
-}
+};
 
 const handleTrigger = () => {
   if (!effectStarted.value && (props.trigger === 'click' || props.trigger === 'hover')) {
-    effectStarted.value = true
+    effectStarted.value = true;
   }
-}
+};
 
 const startPhysics = async () => {
-  if (!containerRef.value || !canvasContainerRef.value || !textRef.value) return
+  if (!containerRef.value || !canvasContainerRef.value || !textRef.value) return;
 
-  await nextTick()
+  await nextTick();
 
-  const { Engine, Render, World, Bodies, Runner, Mouse, MouseConstraint } = Matter
+  const { Engine, Render, World, Bodies, Runner, Mouse, MouseConstraint } = Matter;
 
-  const containerRect = containerRef.value.getBoundingClientRect()
-  const width = containerRect.width
-  const height = containerRect.height
+  const containerRect = containerRef.value.getBoundingClientRect();
+  const width = containerRect.width;
+  const height = containerRect.height;
 
-  if (width <= 0 || height <= 0) return
+  if (width <= 0 || height <= 0) return;
 
-  engine = Engine.create()
-  engine.world.gravity.y = props.gravity
+  engine = Engine.create();
+  engine.world.gravity.y = props.gravity;
 
   render = Render.create({
     element: canvasContainerRef.value,
@@ -106,180 +105,175 @@ const startPhysics = async () => {
       background: props.backgroundColor,
       wireframes: props.wireframes
     }
-  })
+  });
 
   const boundaryOptions = {
     isStatic: true,
     render: { fillStyle: 'transparent' }
-  }
+  };
 
-  const floor = Bodies.rectangle(width / 2, height + 25, width, 50, boundaryOptions)
-  const leftWall = Bodies.rectangle(-25, height / 2, 50, height, boundaryOptions)
-  const rightWall = Bodies.rectangle(width + 25, height / 2, 50, height, boundaryOptions)
-  const ceiling = Bodies.rectangle(width / 2, -25, width, 50, boundaryOptions)
+  const floor = Bodies.rectangle(width / 2, height + 25, width, 50, boundaryOptions);
+  const leftWall = Bodies.rectangle(-25, height / 2, 50, height, boundaryOptions);
+  const rightWall = Bodies.rectangle(width + 25, height / 2, 50, height, boundaryOptions);
+  const ceiling = Bodies.rectangle(width / 2, -25, width, 50, boundaryOptions);
 
-  const wordSpans = textRef.value.querySelectorAll('span') as NodeListOf<HTMLElement>
-  wordBodies = Array.from(wordSpans).map((elem) => {
-    const rect = elem.getBoundingClientRect()
-    const containerRect = containerRef.value!.getBoundingClientRect()
+  const wordSpans = textRef.value.querySelectorAll('span') as NodeListOf<HTMLElement>;
+  wordBodies = Array.from(wordSpans).map(elem => {
+    const rect = elem.getBoundingClientRect();
+    const containerRect = containerRef.value!.getBoundingClientRect();
 
-    const x = rect.left - containerRect.left + rect.width / 2
-    const y = rect.top - containerRect.top + rect.height / 2
+    const x = rect.left - containerRect.left + rect.width / 2;
+    const y = rect.top - containerRect.top + rect.height / 2;
 
     const body = Bodies.rectangle(x, y, rect.width, rect.height, {
       render: { fillStyle: 'transparent' },
       restitution: 0.8,
       frictionAir: 0.01,
       friction: 0.2
-    })
+    });
 
     Matter.Body.setVelocity(body, {
       x: (Math.random() - 0.5) * 5,
       y: 0
-    })
-    Matter.Body.setAngularVelocity(body, (Math.random() - 0.5) * 0.05)
+    });
+    Matter.Body.setAngularVelocity(body, (Math.random() - 0.5) * 0.05);
 
-    return { elem, body }
-  })
+    return { elem, body };
+  });
 
   wordBodies.forEach(({ elem, body }) => {
-    elem.style.position = 'absolute'
-    elem.style.left = `${body.position.x - (body.bounds.max.x - body.bounds.min.x) / 2}px`
-    elem.style.top = `${body.position.y - (body.bounds.max.y - body.bounds.min.y) / 2}px`
-    elem.style.transform = 'none'
-  })
+    elem.style.position = 'absolute';
+    elem.style.left = `${body.position.x - (body.bounds.max.x - body.bounds.min.x) / 2}px`;
+    elem.style.top = `${body.position.y - (body.bounds.max.y - body.bounds.min.y) / 2}px`;
+    elem.style.transform = 'none';
+  });
 
-  const mouse = Mouse.create(containerRef.value)
+  const mouse = Mouse.create(containerRef.value);
   mouseConstraint = MouseConstraint.create(engine, {
     mouse,
     constraint: {
       stiffness: props.mouseConstraintStiffness,
       render: { visible: false }
     }
-  })
-  render.mouse = mouse
+  });
+  render.mouse = mouse;
 
-  World.add(engine.world, [
-    floor,
-    leftWall,
-    rightWall,
-    ceiling,
-    mouseConstraint,
-    ...wordBodies.map((wb) => wb.body)
-  ])
+  World.add(engine.world, [floor, leftWall, rightWall, ceiling, mouseConstraint, ...wordBodies.map(wb => wb.body)]);
 
-  runner = Runner.create()
-  Runner.run(runner, engine)
-  Render.run(render)
+  runner = Runner.create();
+  Runner.run(runner, engine);
+  Render.run(render);
 
   const updateLoop = () => {
     wordBodies.forEach(({ body, elem }) => {
-      const { x, y } = body.position
-      elem.style.left = `${x}px`
-      elem.style.top = `${y}px`
-      elem.style.transform = `translate(-50%, -50%) rotate(${body.angle}rad)`
-    })
-    Matter.Engine.update(engine!)
-    animationFrameId = requestAnimationFrame(updateLoop)
-  }
-  updateLoop()
-}
+      const { x, y } = body.position;
+      elem.style.left = `${x}px`;
+      elem.style.top = `${y}px`;
+      elem.style.transform = `translate(-50%, -50%) rotate(${body.angle}rad)`;
+    });
+    Matter.Engine.update(engine!);
+    animationFrameId = requestAnimationFrame(updateLoop);
+  };
+  updateLoop();
+};
 
 const cleanup = () => {
   if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId)
-    animationFrameId = null
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
   }
 
   if (render) {
-    Matter.Render.stop(render)
+    Matter.Render.stop(render);
     if (render.canvas && canvasContainerRef.value) {
-      canvasContainerRef.value.removeChild(render.canvas)
+      canvasContainerRef.value.removeChild(render.canvas);
     }
-    render = null
+    render = null;
   }
 
   if (runner && engine) {
-    Matter.Runner.stop(runner)
-    runner = null
+    Matter.Runner.stop(runner);
+    runner = null;
   }
 
   if (engine) {
-    Matter.World.clear(engine.world, false)
-    Matter.Engine.clear(engine)
-    engine = null
+    Matter.World.clear(engine.world, false);
+    Matter.Engine.clear(engine);
+    engine = null;
   }
 
   if (intersectionObserver) {
-    intersectionObserver.disconnect()
-    intersectionObserver = null
+    intersectionObserver.disconnect();
+    intersectionObserver = null;
   }
 
-  mouseConstraint = null
-  wordBodies = []
-}
+  mouseConstraint = null;
+  wordBodies = [];
+};
 
 watch(
   () => [props.text, props.highlightWords],
   () => {
-    createTextHTML()
+    createTextHTML();
   },
   { immediate: true, deep: true }
-)
+);
 
 watch(
   () => props.trigger,
   () => {
-    effectStarted.value = false
-    cleanup()
-    setupTrigger()
+    effectStarted.value = false;
+    cleanup();
+    setupTrigger();
   },
   { immediate: true }
-)
+);
 
 watch(
   () => effectStarted.value,
-  (started) => {
+  started => {
     if (started) {
-      startPhysics()
+      startPhysics();
     }
   }
-)
+);
 
 watch(
-  () => [
-    props.gravity,
-    props.wireframes,
-    props.backgroundColor,
-    props.mouseConstraintStiffness
-  ],
+  () => [props.gravity, props.wireframes, props.backgroundColor, props.mouseConstraintStiffness],
   () => {
     if (effectStarted.value) {
-      cleanup()
-      startPhysics()
+      cleanup();
+      startPhysics();
     }
   },
   { deep: true }
-)
+);
 
 onMounted(() => {
-  createTextHTML()
-  setupTrigger()
-})
+  createTextHTML();
+  setupTrigger();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 </script>
 
 <template>
-  <div ref="containerRef" class="relative z-[1] w-full h-full cursor-pointer text-center pt-8 overflow-hidden"
+  <div
+    ref="containerRef"
+    class="relative z-[1] w-full h-full cursor-pointer text-center pt-8 overflow-hidden"
     @click="props.trigger === 'click' ? handleTrigger() : undefined"
-    @mouseenter="props.trigger === 'hover' ? handleTrigger() : undefined">
-    <div ref="textRef" class="inline-block" :style="{
-      fontSize: props.fontSize,
-      lineHeight: 1.4
-    }" />
+    @mouseenter="props.trigger === 'hover' ? handleTrigger() : undefined"
+  >
+    <div
+      ref="textRef"
+      class="inline-block"
+      :style="{
+        fontSize: props.fontSize,
+        lineHeight: 1.4
+      }"
+    />
 
     <div class="absolute top-0 left-0 z-0" ref="canvasContainerRef" />
   </div>
diff --git a/src/content/TextAnimations/FuzzyText/FuzzyText.vue b/src/content/TextAnimations/FuzzyText/FuzzyText.vue
index dde3504..94fee3f 100644
--- a/src/content/TextAnimations/FuzzyText/FuzzyText.vue
+++ b/src/content/TextAnimations/FuzzyText/FuzzyText.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 interface FuzzyTextProps {
-  text: string
-  fontSize?: number | string
-  fontWeight?: string | number
-  fontFamily?: string
-  color?: string
-  enableHover?: boolean
-  baseIntensity?: number
-  hoverIntensity?: number
+  text: string;
+  fontSize?: number | string;
+  fontWeight?: string | number;
+  fontFamily?: string;
+  color?: string;
+  enableHover?: boolean;
+  baseIntensity?: number;
+  hoverIntensity?: number;
 }
 
 const props = withDefaults(defineProps<FuzzyTextProps>(), {
@@ -21,246 +21,227 @@ const props = withDefaults(defineProps<FuzzyTextProps>(), {
   enableHover: true,
   baseIntensity: 0.18,
   hoverIntensity: 0.5
-})
+});
 
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-let animationFrameId: number
-let isCancelled = false
-let cleanup: (() => void) | null = null
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+let animationFrameId: number;
+let isCancelled = false;
+let cleanup: (() => void) | null = null;
 
 const waitForFont = async (fontFamily: string, fontWeight: string | number, fontSize: string): Promise<boolean> => {
   if (document.fonts?.check) {
-    const fontString = `${fontWeight} ${fontSize} ${fontFamily}`
+    const fontString = `${fontWeight} ${fontSize} ${fontFamily}`;
 
     if (document.fonts.check(fontString)) {
-      return true
+      return true;
     }
 
     try {
-      await document.fonts.load(fontString)
-      return document.fonts.check(fontString)
+      await document.fonts.load(fontString);
+      return document.fonts.check(fontString);
     } catch (error) {
-      console.warn('Font loading failed:', error)
-      return false
+      console.warn('Font loading failed:', error);
+      return false;
     }
   }
 
-  return new Promise((resolve) => {
-    const canvas = document.createElement('canvas')
-    const ctx = canvas.getContext('2d')
+  return new Promise(resolve => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
     if (!ctx) {
-      resolve(false)
-      return
+      resolve(false);
+      return;
     }
 
-    ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`
-    const testWidth = ctx.measureText('M').width
+    ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+    const testWidth = ctx.measureText('M').width;
 
-    let attempts = 0
+    let attempts = 0;
     const checkFont = () => {
-      ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`
-      const newWidth = ctx.measureText('M').width
+      ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+      const newWidth = ctx.measureText('M').width;
 
       if (newWidth !== testWidth && newWidth > 0) {
-        resolve(true)
+        resolve(true);
       } else if (attempts < 20) {
-        attempts++
-        setTimeout(checkFont, 50)
+        attempts++;
+        setTimeout(checkFont, 50);
       } else {
-        resolve(false)
+        resolve(false);
       }
-    }
+    };
 
-    setTimeout(checkFont, 10)
-  })
-}
+    setTimeout(checkFont, 10);
+  });
+};
 
 const initCanvas = async () => {
   if (document.fonts?.ready) {
-    await document.fonts.ready
+    await document.fonts.ready;
   }
 
-  if (isCancelled) return
+  if (isCancelled) return;
 
-  const canvas = canvasRef.value
-  if (!canvas) return
+  const canvas = canvasRef.value;
+  if (!canvas) return;
 
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
 
-  const computedFontFamily = props.fontFamily === 'inherit'
-    ? window.getComputedStyle(canvas).fontFamily || 'sans-serif'
-    : props.fontFamily
+  const computedFontFamily =
+    props.fontFamily === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : props.fontFamily;
 
-  const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize
-  let numericFontSize: number
+  const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize;
+  let numericFontSize: number;
 
   if (typeof props.fontSize === 'number') {
-    numericFontSize = props.fontSize
+    numericFontSize = props.fontSize;
   } else {
-    const temp = document.createElement('span')
-    temp.style.fontSize = props.fontSize
-    temp.style.fontFamily = computedFontFamily
-    document.body.appendChild(temp)
-    const computedSize = window.getComputedStyle(temp).fontSize
-    numericFontSize = parseFloat(computedSize)
-    document.body.removeChild(temp)
+    const temp = document.createElement('span');
+    temp.style.fontSize = props.fontSize;
+    temp.style.fontFamily = computedFontFamily;
+    document.body.appendChild(temp);
+    const computedSize = window.getComputedStyle(temp).fontSize;
+    numericFontSize = parseFloat(computedSize);
+    document.body.removeChild(temp);
   }
 
-  const fontLoaded = await waitForFont(computedFontFamily, props.fontWeight, fontSizeStr)
+  const fontLoaded = await waitForFont(computedFontFamily, props.fontWeight, fontSizeStr);
   if (!fontLoaded) {
-    console.warn(`Font not loaded: ${computedFontFamily}`)
+    console.warn(`Font not loaded: ${computedFontFamily}`);
   }
 
-  const text = props.text
+  const text = props.text;
 
-  const offscreen = document.createElement('canvas')
-  const offCtx = offscreen.getContext('2d')
-  if (!offCtx) return
+  const offscreen = document.createElement('canvas');
+  const offCtx = offscreen.getContext('2d');
+  if (!offCtx) return;
 
-  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`
-  offCtx.font = fontString
+  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
+  offCtx.font = fontString;
 
-  const testMetrics = offCtx.measureText('M')
+  const testMetrics = offCtx.measureText('M');
   if (testMetrics.width === 0) {
     setTimeout(() => {
       if (!isCancelled) {
-        initCanvas()
+        initCanvas();
       }
-    }, 100)
-    return
+    }, 100);
+    return;
   }
 
-  offCtx.textBaseline = 'alphabetic'
-  const metrics = offCtx.measureText(text)
+  offCtx.textBaseline = 'alphabetic';
+  const metrics = offCtx.measureText(text);
 
-  const actualLeft = metrics.actualBoundingBoxLeft ?? 0
-  const actualRight = metrics.actualBoundingBoxRight ?? metrics.width
-  const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize
-  const actualDescent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2
+  const actualLeft = metrics.actualBoundingBoxLeft ?? 0;
+  const actualRight = metrics.actualBoundingBoxRight ?? metrics.width;
+  const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize;
+  const actualDescent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
 
-  const textBoundingWidth = Math.ceil(actualLeft + actualRight)
-  const tightHeight = Math.ceil(actualAscent + actualDescent)
+  const textBoundingWidth = Math.ceil(actualLeft + actualRight);
+  const tightHeight = Math.ceil(actualAscent + actualDescent);
 
-  const extraWidthBuffer = 10
-  const offscreenWidth = textBoundingWidth + extraWidthBuffer
+  const extraWidthBuffer = 10;
+  const offscreenWidth = textBoundingWidth + extraWidthBuffer;
 
-  offscreen.width = offscreenWidth
-  offscreen.height = tightHeight
+  offscreen.width = offscreenWidth;
+  offscreen.height = tightHeight;
 
-  const xOffset = extraWidthBuffer / 2
-  offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`
-  offCtx.textBaseline = 'alphabetic'
-  offCtx.fillStyle = props.color
-  offCtx.fillText(text, xOffset - actualLeft, actualAscent)
+  const xOffset = extraWidthBuffer / 2;
+  offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
+  offCtx.textBaseline = 'alphabetic';
+  offCtx.fillStyle = props.color;
+  offCtx.fillText(text, xOffset - actualLeft, actualAscent);
 
-  const horizontalMargin = 50
-  const verticalMargin = 0
-  canvas.width = offscreenWidth + horizontalMargin * 2
-  canvas.height = tightHeight + verticalMargin * 2
-  ctx.translate(horizontalMargin, verticalMargin)
+  const horizontalMargin = 50;
+  const verticalMargin = 0;
+  canvas.width = offscreenWidth + horizontalMargin * 2;
+  canvas.height = tightHeight + verticalMargin * 2;
+  ctx.translate(horizontalMargin, verticalMargin);
 
-  const interactiveLeft = horizontalMargin + xOffset
-  const interactiveTop = verticalMargin
-  const interactiveRight = interactiveLeft + textBoundingWidth
-  const interactiveBottom = interactiveTop + tightHeight
+  const interactiveLeft = horizontalMargin + xOffset;
+  const interactiveTop = verticalMargin;
+  const interactiveRight = interactiveLeft + textBoundingWidth;
+  const interactiveBottom = interactiveTop + tightHeight;
 
-  let isHovering = false
-  const fuzzRange = 30
+  let isHovering = false;
+  const fuzzRange = 30;
 
   const run = () => {
-    if (isCancelled) return
-    ctx.clearRect(
-      -fuzzRange,
-      -fuzzRange,
-      offscreenWidth + 2 * fuzzRange,
-      tightHeight + 2 * fuzzRange
-    )
-    const intensity = isHovering ? props.hoverIntensity : props.baseIntensity
+    if (isCancelled) return;
+    ctx.clearRect(-fuzzRange, -fuzzRange, offscreenWidth + 2 * fuzzRange, tightHeight + 2 * fuzzRange);
+    const intensity = isHovering ? props.hoverIntensity : props.baseIntensity;
     for (let j = 0; j < tightHeight; j++) {
-      const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange)
-      ctx.drawImage(
-        offscreen,
-        0,
-        j,
-        offscreenWidth,
-        1,
-        dx,
-        j,
-        offscreenWidth,
-        1
-      )
+      const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange);
+      ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);
     }
-    animationFrameId = window.requestAnimationFrame(run)
-  }
+    animationFrameId = window.requestAnimationFrame(run);
+  };
 
-  run()
+  run();
 
   const isInsideTextArea = (x: number, y: number) =>
-    x >= interactiveLeft &&
-    x <= interactiveRight &&
-    y >= interactiveTop &&
-    y <= interactiveBottom
+    x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;
 
   const handleMouseMove = (e: MouseEvent) => {
-    if (!props.enableHover) return
-    const rect = canvas.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    isHovering = isInsideTextArea(x, y)
-  }
+    if (!props.enableHover) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    isHovering = isInsideTextArea(x, y);
+  };
 
   const handleMouseLeave = () => {
-    isHovering = false
-  }
+    isHovering = false;
+  };
 
   const handleTouchMove = (e: TouchEvent) => {
-    if (!props.enableHover) return
-    e.preventDefault()
-    const rect = canvas.getBoundingClientRect()
-    const touch = e.touches[0]
-    const x = touch.clientX - rect.left
-    const y = touch.clientY - rect.top
-    isHovering = isInsideTextArea(x, y)
-  }
+    if (!props.enableHover) return;
+    e.preventDefault();
+    const rect = canvas.getBoundingClientRect();
+    const touch = e.touches[0];
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    isHovering = isInsideTextArea(x, y);
+  };
 
   const handleTouchEnd = () => {
-    isHovering = false
-  }
+    isHovering = false;
+  };
 
   if (props.enableHover) {
-    canvas.addEventListener('mousemove', handleMouseMove)
-    canvas.addEventListener('mouseleave', handleMouseLeave)
-    canvas.addEventListener('touchmove', handleTouchMove, { passive: false })
-    canvas.addEventListener('touchend', handleTouchEnd)
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseleave', handleMouseLeave);
+    canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
+    canvas.addEventListener('touchend', handleTouchEnd);
   }
 
   cleanup = () => {
-    window.cancelAnimationFrame(animationFrameId)
+    window.cancelAnimationFrame(animationFrameId);
     if (props.enableHover) {
-      canvas.removeEventListener('mousemove', handleMouseMove)
-      canvas.removeEventListener('mouseleave', handleMouseLeave)
-      canvas.removeEventListener('touchmove', handleTouchMove)
-      canvas.removeEventListener('touchend', handleTouchEnd)
+      canvas.removeEventListener('mousemove', handleMouseMove);
+      canvas.removeEventListener('mouseleave', handleMouseLeave);
+      canvas.removeEventListener('touchmove', handleTouchMove);
+      canvas.removeEventListener('touchend', handleTouchEnd);
     }
-  }
-}
+  };
+};
 
 onMounted(() => {
   nextTick(() => {
-    initCanvas()
-  })
-})
+    initCanvas();
+  });
+});
 
 onUnmounted(() => {
-  isCancelled = true
+  isCancelled = true;
   if (animationFrameId) {
-    window.cancelAnimationFrame(animationFrameId)
+    window.cancelAnimationFrame(animationFrameId);
   }
   if (cleanup) {
-    cleanup()
+    cleanup();
   }
-})
+});
 
 watch(
   [
@@ -274,19 +255,19 @@ watch(
     () => props.hoverIntensity
   ],
   () => {
-    isCancelled = true
+    isCancelled = true;
     if (animationFrameId) {
-      window.cancelAnimationFrame(animationFrameId)
+      window.cancelAnimationFrame(animationFrameId);
     }
     if (cleanup) {
-      cleanup()
+      cleanup();
     }
-    isCancelled = false
+    isCancelled = false;
     nextTick(() => {
-      initCanvas()
-    })
+      initCanvas();
+    });
   }
-)
+);
 </script>
 
 <template>
diff --git a/src/content/TextAnimations/GradientText/GradientText.vue b/src/content/TextAnimations/GradientText/GradientText.vue
index bb4cc61..6e19415 100644
--- a/src/content/TextAnimations/GradientText/GradientText.vue
+++ b/src/content/TextAnimations/GradientText/GradientText.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
 
 interface GradientTextProps {
-  text: string
-  className?: string
-  colors?: string[]
-  animationSpeed?: number
-  showBorder?: boolean
+  text: string;
+  className?: string;
+  colors?: string[];
+  animationSpeed?: number;
+  showBorder?: boolean;
 }
 
 const props = withDefaults(defineProps<GradientTextProps>(), {
@@ -15,24 +15,24 @@ const props = withDefaults(defineProps<GradientTextProps>(), {
   colors: () => ['#ffaa40', '#9c40ff', '#ffaa40'],
   animationSpeed: 8,
   showBorder: false
-})
+});
 
 const gradientStyle = computed(() => ({
   backgroundImage: `linear-gradient(to right, ${props.colors.join(', ')})`,
   animationDuration: `${props.animationSpeed}s`,
   backgroundSize: '300% 100%',
   '--animation-duration': `${props.animationSpeed}s`
-}))
+}));
 
 const borderStyle = computed(() => ({
   ...gradientStyle.value
-}))
+}));
 
 const textStyle = computed(() => ({
   ...gradientStyle.value,
   backgroundClip: 'text',
   WebkitBackgroundClip: 'text'
-}))
+}));
 </script>
 
 <template>
@@ -46,20 +46,11 @@ const textStyle = computed(() => ({
     >
       <div
         class="absolute inset-0 bg-black rounded-[1.25rem] z-[-1]"
-        style="
-          width: calc(100% - 2px);
-          height: calc(100% - 2px);
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        "
+        style="width: calc(100% - 2px); height: calc(100% - 2px); left: 50%; top: 50%; transform: translate(-50%, -50%)"
       />
     </div>
-    
-    <div
-      class="inline-block relative z-2 text-transparent bg-cover animate-gradient"
-      :style="textStyle"
-    >
+
+    <div class="inline-block relative z-2 text-transparent bg-cover animate-gradient" :style="textStyle">
       {{ text }}
     </div>
   </div>
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
index c4b51bb..01b98d2 100644
--- a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -1,9 +1,11 @@
 <template>
   <h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
-    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`"
-      style="font-size: clamp(1.6rem, 8vw, 10rem);">
+    <span
+      :class="`inline-block text-center leading-relaxed font-black ${textClassName}`"
+      style="font-size: clamp(1.6rem, 8vw, 10rem)"
+    >
       <span v-for="(char, index) in splitText" :key="index" class="inline-block char">
-        {{ char === " " ? "\u00A0" : char }}
+        {{ char === ' ' ? '\u00A0' : char }}
       </span>
     </span>
   </h2>
@@ -43,7 +45,7 @@ let scrollTriggerInstance: ScrollTrigger | null = null;
 
 const splitText = computed(() => {
   const text = typeof props.children === 'string' ? props.children : '';
-  return text.split("");
+  return text.split('');
 });
 
 const initializeAnimation = () => {
@@ -51,9 +53,7 @@ const initializeAnimation = () => {
   if (!el) return;
 
   const scroller =
-    props.scrollContainerRef && props.scrollContainerRef.current
-      ? props.scrollContainerRef.current
-      : window;
+    props.scrollContainerRef && props.scrollContainerRef.current ? props.scrollContainerRef.current : window;
 
   const charElements = el.querySelectorAll('.char');
 
@@ -117,4 +117,4 @@ watch(
   },
   { deep: true }
 );
-</script>
\ No newline at end of file
+</script>
diff --git a/src/content/TextAnimations/ShinyText/ShinyText.vue b/src/content/TextAnimations/ShinyText/ShinyText.vue
index 0ac71bd..2545abb 100644
--- a/src/content/TextAnimations/ShinyText/ShinyText.vue
+++ b/src/content/TextAnimations/ShinyText/ShinyText.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
 
 interface ShinyTextProps {
-  text: string
-  disabled?: boolean
-  speed?: number
-  className?: string
+  text: string;
+  disabled?: boolean;
+  speed?: number;
+  className?: string;
 }
 
 const props = withDefaults(defineProps<ShinyTextProps>(), {
@@ -13,16 +13,17 @@ const props = withDefaults(defineProps<ShinyTextProps>(), {
   disabled: false,
   speed: 5,
   className: ''
-})
+});
 
-const animationDuration = computed(() => `${props.speed}s`)
+const animationDuration = computed(() => `${props.speed}s`);
 </script>
 
 <template>
   <div
     :class="`text-[#b5b5b5a4] bg-clip-text inline-block ${!props.disabled ? 'animate-shine' : ''} ${props.className}`"
     :style="{
-      backgroundImage: 'linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%)',
+      backgroundImage:
+        'linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%)',
       backgroundSize: '200% 100%',
       WebkitBackgroundClip: 'text',
       animationDuration: animationDuration
diff --git a/src/content/TextAnimations/SplitText/SplitText.vue b/src/content/TextAnimations/SplitText/SplitText.vue
index f96457a..8379cc8 100644
--- a/src/content/TextAnimations/SplitText/SplitText.vue
+++ b/src/content/TextAnimations/SplitText/SplitText.vue
@@ -4,7 +4,7 @@
     :class="`split-parent overflow-hidden inline-block whitespace-normal ${className}`"
     :style="{
       textAlign,
-      wordWrap: 'break-word',
+      wordWrap: 'break-word'
     }"
   >
     {{ text }}
@@ -12,26 +12,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
-import { SplitText as GSAPSplitText } from 'gsap/SplitText'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { SplitText as GSAPSplitText } from 'gsap/SplitText';
 
-gsap.registerPlugin(ScrollTrigger, GSAPSplitText)
+gsap.registerPlugin(ScrollTrigger, GSAPSplitText);
 
 export interface SplitTextProps {
-  text: string
-  className?: string
-  delay?: number
-  duration?: number
-  ease?: string | ((t: number) => number)
-  splitType?: 'chars' | 'words' | 'lines' | 'words, chars'
-  from?: gsap.TweenVars
-  to?: gsap.TweenVars
-  threshold?: number
-  rootMargin?: string
-  textAlign?: 'left' | 'center' | 'right' | 'justify'
-  onLetterAnimationComplete?: () => void
+  text: string;
+  className?: string;
+  delay?: number;
+  duration?: number;
+  ease?: string | ((t: number) => number);
+  splitType?: 'chars' | 'words' | 'lines' | 'words, chars';
+  from?: gsap.TweenVars;
+  to?: gsap.TweenVars;
+  threshold?: number;
+  rootMargin?: string;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  onLetterAnimationComplete?: () => void;
 }
 
 const props = withDefaults(defineProps<SplitTextProps>(), {
@@ -45,74 +45,74 @@ const props = withDefaults(defineProps<SplitTextProps>(), {
   threshold: 0.1,
   rootMargin: '-100px',
   textAlign: 'center'
-})
+});
 
 const emit = defineEmits<{
-  'animation-complete': []
-}>()
+  'animation-complete': [];
+}>();
 
-const textRef = ref<HTMLParagraphElement | null>(null)
-const animationCompletedRef = ref(false)
-const scrollTriggerRef = ref<ScrollTrigger | null>(null)
-const timelineRef = ref<gsap.core.Timeline | null>(null)
-const splitterRef = ref<GSAPSplitText | null>(null)
+const textRef = ref<HTMLParagraphElement | null>(null);
+const animationCompletedRef = ref(false);
+const scrollTriggerRef = ref<ScrollTrigger | null>(null);
+const timelineRef = ref<gsap.core.Timeline | null>(null);
+const splitterRef = ref<GSAPSplitText | null>(null);
 
 const initializeAnimation = async () => {
-  if (typeof window === 'undefined' || !textRef.value || !props.text) return
+  if (typeof window === 'undefined' || !textRef.value || !props.text) return;
 
-  await nextTick()
-  
-  const el = textRef.value
-  
-  animationCompletedRef.value = false
+  await nextTick();
 
-  const absoluteLines = props.splitType === 'lines'
-  if (absoluteLines) el.style.position = 'relative'
+  const el = textRef.value;
 
-  let splitter: GSAPSplitText
+  animationCompletedRef.value = false;
+
+  const absoluteLines = props.splitType === 'lines';
+  if (absoluteLines) el.style.position = 'relative';
+
+  let splitter: GSAPSplitText;
   try {
     splitter = new GSAPSplitText(el, {
       type: props.splitType,
       absolute: absoluteLines,
-      linesClass: 'split-line',
-    })
-    splitterRef.value = splitter
+      linesClass: 'split-line'
+    });
+    splitterRef.value = splitter;
   } catch (error) {
-    console.error('Failed to create SplitText:', error)
-    return
+    console.error('Failed to create SplitText:', error);
+    return;
   }
 
-  let targets: Element[]
+  let targets: Element[];
   switch (props.splitType) {
     case 'lines':
-      targets = splitter.lines
-      break
+      targets = splitter.lines;
+      break;
     case 'words':
-      targets = splitter.words
-      break
+      targets = splitter.words;
+      break;
     case 'chars':
-      targets = splitter.chars
-      break
+      targets = splitter.chars;
+      break;
     default:
-      targets = splitter.chars
+      targets = splitter.chars;
   }
 
   if (!targets || targets.length === 0) {
-    console.warn('No targets found for SplitText animation')
-    splitter.revert()
-    return
+    console.warn('No targets found for SplitText animation');
+    splitter.revert();
+    return;
   }
 
-  targets.forEach((t) => {
-    ;(t as HTMLElement).style.willChange = 'transform, opacity'
-  })
+  targets.forEach(t => {
+    (t as HTMLElement).style.willChange = 'transform, opacity';
+  });
 
-  const startPct = (1 - props.threshold) * 100
-  const marginMatch = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(props.rootMargin)
-  const marginValue = marginMatch ? parseFloat(marginMatch[1]) : 0
-  const marginUnit = marginMatch ? (marginMatch[2] || 'px') : 'px'
-  const sign = marginValue < 0 ? `-=${Math.abs(marginValue)}${marginUnit}` : `+=${marginValue}${marginUnit}`
-  const start = `top ${startPct}%${sign}`
+  const startPct = (1 - props.threshold) * 100;
+  const marginMatch = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(props.rootMargin);
+  const marginValue = marginMatch ? parseFloat(marginMatch[1]) : 0;
+  const marginUnit = marginMatch ? marginMatch[2] || 'px' : 'px';
+  const sign = marginValue < 0 ? `-=${Math.abs(marginValue)}${marginUnit}` : `+=${marginValue}${marginUnit}`;
+  const start = `top ${startPct}%${sign}`;
 
   const tl = gsap.timeline({
     scrollTrigger: {
@@ -120,58 +120,58 @@ const initializeAnimation = async () => {
       start,
       toggleActions: 'play none none none',
       once: true,
-      onToggle: (self) => {
-        scrollTriggerRef.value = self
-      },
+      onToggle: self => {
+        scrollTriggerRef.value = self;
+      }
     },
     smoothChildTiming: true,
     onComplete: () => {
-      animationCompletedRef.value = true
+      animationCompletedRef.value = true;
       gsap.set(targets, {
         ...props.to,
         clearProps: 'willChange',
-        immediateRender: true,
-      })
-      props.onLetterAnimationComplete?.()
-      emit('animation-complete')
-    },
-  })
+        immediateRender: true
+      });
+      props.onLetterAnimationComplete?.();
+      emit('animation-complete');
+    }
+  });
 
-  timelineRef.value = tl
+  timelineRef.value = tl;
 
-  tl.set(targets, { ...props.from, immediateRender: false, force3D: true })
+  tl.set(targets, { ...props.from, immediateRender: false, force3D: true });
   tl.to(targets, {
     ...props.to,
     duration: props.duration,
     ease: props.ease,
     stagger: props.delay / 1000,
-    force3D: true,
-  })
-}
+    force3D: true
+  });
+};
 
 const cleanup = () => {
   if (timelineRef.value) {
-    timelineRef.value.kill()
-    timelineRef.value = null
+    timelineRef.value.kill();
+    timelineRef.value = null;
   }
   if (scrollTriggerRef.value) {
-    scrollTriggerRef.value.kill()
-    scrollTriggerRef.value = null
+    scrollTriggerRef.value.kill();
+    scrollTriggerRef.value = null;
   }
   if (splitterRef.value) {
-    gsap.killTweensOf(textRef.value)
-    splitterRef.value.revert()
-    splitterRef.value = null
+    gsap.killTweensOf(textRef.value);
+    splitterRef.value.revert();
+    splitterRef.value = null;
   }
-}
+};
 
 onMounted(() => {
-  initializeAnimation()
-})
+  initializeAnimation();
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 
 watch(
   [
@@ -184,12 +184,11 @@ watch(
     () => props.to,
     () => props.threshold,
     () => props.rootMargin,
-    () => props.onLetterAnimationComplete,
+    () => props.onLetterAnimationComplete
   ],
   () => {
-    cleanup()
-    initializeAnimation()
+    cleanup();
+    initializeAnimation();
   }
-)
+);
 </script>
-
diff --git a/src/content/TextAnimations/TextCursor/TextCursor.vue b/src/content/TextAnimations/TextCursor/TextCursor.vue
index 6872545..f49a99e 100644
--- a/src/content/TextAnimations/TextCursor/TextCursor.vue
+++ b/src/content/TextAnimations/TextCursor/TextCursor.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { Motion } from 'motion-v'
+import { ref, onMounted, onUnmounted } from 'vue';
+import { Motion } from 'motion-v';
 
 interface TextCursorProps {
-  text?: string
-  delay?: number
-  spacing?: number
-  followMouseDirection?: boolean
-  randomFloat?: boolean
-  exitDuration?: number
-  removalInterval?: number
-  maxPoints?: number
+  text?: string;
+  delay?: number;
+  spacing?: number;
+  followMouseDirection?: boolean;
+  randomFloat?: boolean;
+  exitDuration?: number;
+  removalInterval?: number;
+  maxPoints?: number;
 }
 
 interface TrailItem {
-  id: number
-  x: number
-  y: number
-  angle: number
-  randomX?: number
-  randomY?: number
-  randomRotate?: number
+  id: number;
+  x: number;
+  y: number;
+  angle: number;
+  randomX?: number;
+  randomY?: number;
+  randomRotate?: number;
 }
 
 const props = withDefaults(defineProps<TextCursorProps>(), {
@@ -32,24 +32,24 @@ const props = withDefaults(defineProps<TextCursorProps>(), {
   exitDuration: 0.5,
   removalInterval: 30,
   maxPoints: 5
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
-const trail = ref<TrailItem[]>([])
-const lastMoveTime = ref(Date.now())
-const idCounter = ref(0)
+const containerRef = ref<HTMLDivElement>();
+const trail = ref<TrailItem[]>([]);
+const lastMoveTime = ref(Date.now());
+const idCounter = ref(0);
 
-let removalIntervalId: number | null = null
+let removalIntervalId: number | null = null;
 
 const handleMouseMove = (e: MouseEvent) => {
-  if (!containerRef.value) return
-  
-  const rect = containerRef.value.getBoundingClientRect()
-  const mouseX = e.clientX - rect.left
-  const mouseY = e.clientY - rect.top
+  if (!containerRef.value) return;
+
+  const rect = containerRef.value.getBoundingClientRect();
+  const mouseX = e.clientX - rect.left;
+  const mouseY = e.clientY - rect.top;
+
+  let newTrail = [...trail.value];
 
-  let newTrail = [...trail.value]
-  
   if (newTrail.length === 0) {
     newTrail.push({
       id: idCounter.value++,
@@ -61,24 +61,24 @@ const handleMouseMove = (e: MouseEvent) => {
         randomY: Math.random() * 10 - 5,
         randomRotate: Math.random() * 10 - 5
       })
-    })
+    });
   } else {
-    const last = newTrail[newTrail.length - 1]
-    const dx = mouseX - last.x
-    const dy = mouseY - last.y
-    const distance = Math.sqrt(dx * dx + dy * dy)
-    
+    const last = newTrail[newTrail.length - 1];
+    const dx = mouseX - last.x;
+    const dy = mouseY - last.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
     if (distance >= props.spacing) {
-      let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI
-      if (rawAngle > 90) rawAngle -= 180
-      else if (rawAngle < -90) rawAngle += 180
-      const computedAngle = props.followMouseDirection ? rawAngle : 0
-      const steps = Math.floor(distance / props.spacing)
-      
+      let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI;
+      if (rawAngle > 90) rawAngle -= 180;
+      else if (rawAngle < -90) rawAngle += 180;
+      const computedAngle = props.followMouseDirection ? rawAngle : 0;
+      const steps = Math.floor(distance / props.spacing);
+
       for (let i = 1; i <= steps; i++) {
-        const t = (props.spacing * i) / distance
-        const newX = last.x + dx * t
-        const newY = last.y + dy * t
+        const t = (props.spacing * i) / distance;
+        const newX = last.x + dx * t;
+        const newY = last.y + dy * t;
         newTrail.push({
           id: idCounter.value++,
           x: newX,
@@ -89,48 +89,48 @@ const handleMouseMove = (e: MouseEvent) => {
             randomY: Math.random() * 10 - 5,
             randomRotate: Math.random() * 10 - 5
           })
-        })
+        });
       }
     }
   }
-  
+
   if (newTrail.length > props.maxPoints) {
-    newTrail = newTrail.slice(newTrail.length - props.maxPoints)
+    newTrail = newTrail.slice(newTrail.length - props.maxPoints);
   }
-  
-  trail.value = newTrail
-  lastMoveTime.value = Date.now()
-}
+
+  trail.value = newTrail;
+  lastMoveTime.value = Date.now();
+};
 
 const startRemovalInterval = () => {
   if (removalIntervalId) {
-    clearInterval(removalIntervalId)
+    clearInterval(removalIntervalId);
   }
-  
+
   removalIntervalId = setInterval(() => {
     if (Date.now() - lastMoveTime.value > 100) {
       if (trail.value.length > 0) {
-        trail.value = trail.value.slice(1)
+        trail.value = trail.value.slice(1);
       }
     }
-  }, props.removalInterval)
-}
+  }, props.removalInterval);
+};
 
 onMounted(() => {
   if (containerRef.value) {
-    containerRef.value.addEventListener('mousemove', handleMouseMove)
-    startRemovalInterval()
+    containerRef.value.addEventListener('mousemove', handleMouseMove);
+    startRemovalInterval();
   }
-})
+});
 
 onUnmounted(() => {
   if (containerRef.value) {
-    containerRef.value.removeEventListener('mousemove', handleMouseMove)
+    containerRef.value.removeEventListener('mousemove', handleMouseMove);
   }
   if (removalIntervalId) {
-    clearInterval(removalIntervalId)
+    clearInterval(removalIntervalId);
   }
-})
+});
 </script>
 
 <template>
@@ -140,16 +140,14 @@ onUnmounted(() => {
         v-for="item in trail"
         :key="item.id"
         :initial="{ opacity: 0, scale: 1, rotate: item.angle }"
-        :animate="{ 
-          opacity: 1, 
+        :animate="{
+          opacity: 1,
           scale: 1,
           x: props.randomFloat ? [0, item.randomX || 0, 0] : 0,
           y: props.randomFloat ? [0, item.randomY || 0, 0] : 0,
-          rotate: props.randomFloat 
-            ? [item.angle, item.angle + (item.randomRotate || 0), item.angle]
-            : item.angle
+          rotate: props.randomFloat ? [item.angle, item.angle + (item.randomRotate || 0), item.angle] : item.angle
         }"
-        :transition="{ 
+        :transition="{
           duration: props.randomFloat ? 2 : props.exitDuration,
           repeat: props.randomFloat ? Infinity : 0,
           repeatType: props.randomFloat ? 'mirror' : 'loop'
diff --git a/src/content/TextAnimations/TextPressure/TextPressure.vue b/src/content/TextAnimations/TextPressure/TextPressure.vue
index fcd124e..9227015 100644
--- a/src/content/TextAnimations/TextPressure/TextPressure.vue
+++ b/src/content/TextAnimations/TextPressure/TextPressure.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
 
 interface TextPressureProps {
-  text?: string
-  fontFamily?: string
-  fontUrl?: string
-  width?: boolean
-  weight?: boolean
-  italic?: boolean
-  alpha?: boolean
-  flex?: boolean
-  stroke?: boolean
-  scale?: boolean
-  textColor?: string
-  strokeColor?: string
-  strokeWidth?: number
-  className?: string
-  minFontSize?: number
+  text?: string;
+  fontFamily?: string;
+  fontUrl?: string;
+  width?: boolean;
+  weight?: boolean;
+  italic?: boolean;
+  alpha?: boolean;
+  flex?: boolean;
+  stroke?: boolean;
+  scale?: boolean;
+  textColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  className?: string;
+  minFontSize?: number;
 }
 
 const props = withDefaults(defineProps<TextPressureProps>(), {
@@ -35,141 +35,141 @@ const props = withDefaults(defineProps<TextPressureProps>(), {
   strokeWidth: 2,
   className: '',
   minFontSize: 24
-})
+});
 
-const containerRef = ref<HTMLDivElement | null>(null)
-const titleRef = ref<HTMLHeadingElement | null>(null)
-const spansRef = ref<(HTMLSpanElement | null)[]>([])
+const containerRef = ref<HTMLDivElement | null>(null);
+const titleRef = ref<HTMLHeadingElement | null>(null);
+const spansRef = ref<(HTMLSpanElement | null)[]>([]);
 
-const mouseRef = ref({ x: 0, y: 0 })
-const cursorRef = ref({ x: 0, y: 0 })
+const mouseRef = ref({ x: 0, y: 0 });
+const cursorRef = ref({ x: 0, y: 0 });
 
-const fontSize = ref(props.minFontSize)
-const scaleY = ref(1)
-const lineHeight = ref(1)
+const fontSize = ref(props.minFontSize);
+const scaleY = ref(1);
+const lineHeight = ref(1);
 
-const chars = computed(() => props.text.split(''))
+const chars = computed(() => props.text.split(''));
 
 const dist = (a: { x: number; y: number }, b: { x: number; y: number }) => {
-  const dx = b.x - a.x
-  const dy = b.y - a.y
-  return Math.sqrt(dx * dx + dy * dy)
-}
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  return Math.sqrt(dx * dx + dy * dy);
+};
 
 const handleMouseMove = (e: MouseEvent) => {
-  cursorRef.value.x = e.clientX
-  cursorRef.value.y = e.clientY
-}
+  cursorRef.value.x = e.clientX;
+  cursorRef.value.y = e.clientY;
+};
 
 const handleTouchMove = (e: TouchEvent) => {
-  const t = e.touches[0]
-  cursorRef.value.x = t.clientX
-  cursorRef.value.y = t.clientY
-}
+  const t = e.touches[0];
+  cursorRef.value.x = t.clientX;
+  cursorRef.value.y = t.clientY;
+};
 
 const setSize = () => {
-  if (!containerRef.value || !titleRef.value) return
+  if (!containerRef.value || !titleRef.value) return;
 
-  const { width: containerW, height: containerH } = containerRef.value.getBoundingClientRect()
+  const { width: containerW, height: containerH } = containerRef.value.getBoundingClientRect();
 
-  let newFontSize = containerW / (chars.value.length / 2)
-  newFontSize = Math.max(newFontSize, props.minFontSize)
+  let newFontSize = containerW / (chars.value.length / 2);
+  newFontSize = Math.max(newFontSize, props.minFontSize);
 
-  fontSize.value = newFontSize
-  scaleY.value = 1
-  lineHeight.value = 1
+  fontSize.value = newFontSize;
+  scaleY.value = 1;
+  lineHeight.value = 1;
 
   nextTick(() => {
-    if (!titleRef.value) return
-    const textRect = titleRef.value.getBoundingClientRect()
+    if (!titleRef.value) return;
+    const textRect = titleRef.value.getBoundingClientRect();
 
     if (props.scale && textRect.height > 0) {
-      const yRatio = containerH / textRect.height
-      scaleY.value = yRatio
-      lineHeight.value = yRatio
+      const yRatio = containerH / textRect.height;
+      scaleY.value = yRatio;
+      lineHeight.value = yRatio;
     }
-  })
-}
+  });
+};
 
-let rafId: number
+let rafId: number;
 
 const animate = () => {
-  mouseRef.value.x += (cursorRef.value.x - mouseRef.value.x) / 15
-  mouseRef.value.y += (cursorRef.value.y - mouseRef.value.y) / 15
+  mouseRef.value.x += (cursorRef.value.x - mouseRef.value.x) / 15;
+  mouseRef.value.y += (cursorRef.value.y - mouseRef.value.y) / 15;
 
   if (titleRef.value) {
-    const titleRect = titleRef.value.getBoundingClientRect()
-    const maxDist = titleRect.width / 2
+    const titleRect = titleRef.value.getBoundingClientRect();
+    const maxDist = titleRect.width / 2;
 
-    spansRef.value.forEach((span) => {
-      if (!span) return
+    spansRef.value.forEach(span => {
+      if (!span) return;
 
-      const rect = span.getBoundingClientRect()
+      const rect = span.getBoundingClientRect();
       const charCenter = {
         x: rect.x + rect.width / 2,
-        y: rect.y + rect.height / 2,
-      }
+        y: rect.y + rect.height / 2
+      };
 
-      const d = dist(mouseRef.value, charCenter)
+      const d = dist(mouseRef.value, charCenter);
 
       const getAttr = (distance: number, minVal: number, maxVal: number) => {
-        const val = maxVal - Math.abs((maxVal * distance) / maxDist)
-        return Math.max(minVal, val + minVal)
-      }
+        const val = maxVal - Math.abs((maxVal * distance) / maxDist);
+        return Math.max(minVal, val + minVal);
+      };
 
-      const wdth = props.width ? Math.floor(getAttr(d, 5, 200)) : 100
-      const wght = props.weight ? Math.floor(getAttr(d, 100, 900)) : 400
-      const italVal = props.italic ? getAttr(d, 0, 1).toFixed(2) : '0'
-      const alphaVal = props.alpha ? getAttr(d, 0, 1).toFixed(2) : '1'
+      const wdth = props.width ? Math.floor(getAttr(d, 5, 200)) : 100;
+      const wght = props.weight ? Math.floor(getAttr(d, 100, 900)) : 400;
+      const italVal = props.italic ? getAttr(d, 0, 1).toFixed(2) : '0';
+      const alphaVal = props.alpha ? getAttr(d, 0, 1).toFixed(2) : '1';
 
-      span.style.opacity = alphaVal
-      span.style.fontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal}`
-    })
+      span.style.opacity = alphaVal;
+      span.style.fontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal}`;
+    });
   }
 
-  rafId = requestAnimationFrame(animate)
-}
+  rafId = requestAnimationFrame(animate);
+};
 
 onMounted(() => {
-  const styleElement = document.createElement('style')
-  styleElement.textContent = dynamicStyles.value
-  document.head.appendChild(styleElement)
-  styleElement.setAttribute('data-text-pressure', 'true')
+  const styleElement = document.createElement('style');
+  styleElement.textContent = dynamicStyles.value;
+  document.head.appendChild(styleElement);
+  styleElement.setAttribute('data-text-pressure', 'true');
 
-  setSize()
+  setSize();
 
-  window.addEventListener('mousemove', handleMouseMove)
-  window.addEventListener('touchmove', handleTouchMove, { passive: false })
-  window.addEventListener('resize', setSize)
+  window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('touchmove', handleTouchMove, { passive: false });
+  window.addEventListener('resize', setSize);
 
   if (containerRef.value) {
-    const { left, top, width, height } = containerRef.value.getBoundingClientRect()
-    mouseRef.value.x = left + width / 2
-    mouseRef.value.y = top + height / 2
-    cursorRef.value.x = mouseRef.value.x
-    cursorRef.value.y = mouseRef.value.y
+    const { left, top, width, height } = containerRef.value.getBoundingClientRect();
+    mouseRef.value.x = left + width / 2;
+    mouseRef.value.y = top + height / 2;
+    cursorRef.value.x = mouseRef.value.x;
+    cursorRef.value.y = mouseRef.value.y;
   }
 
-  animate()
-})
+  animate();
+});
 
 onUnmounted(() => {
-  const styleElements = document.querySelectorAll('style[data-text-pressure="true"]')
-  styleElements.forEach(el => el.remove())
+  const styleElements = document.querySelectorAll('style[data-text-pressure="true"]');
+  styleElements.forEach(el => el.remove());
 
-  window.removeEventListener('mousemove', handleMouseMove)
-  window.removeEventListener('touchmove', handleTouchMove)
-  window.removeEventListener('resize', setSize)
+  window.removeEventListener('mousemove', handleMouseMove);
+  window.removeEventListener('touchmove', handleTouchMove);
+  window.removeEventListener('resize', setSize);
   if (rafId) {
-    cancelAnimationFrame(rafId)
+    cancelAnimationFrame(rafId);
   }
-})
+});
 
 watch([() => props.scale, () => props.text], () => {
-  setSize()
-})
+  setSize();
+});
 
-watch([() => props.width, () => props.weight, () => props.italic, () => props.alpha], () => {})
+watch([() => props.width, () => props.weight, () => props.italic, () => props.alpha], () => {});
 
 const titleStyle = computed(() => ({
   fontFamily: props.fontFamily,
@@ -179,10 +179,11 @@ const titleStyle = computed(() => ({
   transformOrigin: 'center top',
   margin: 0,
   fontWeight: 100,
-  color: props.stroke ? undefined : props.textColor,
-}))
+  color: props.stroke ? undefined : props.textColor
+}));
 
-const dynamicStyles = computed(() => `
+const dynamicStyles = computed(
+  () => `
   @font-face {
     font-family: '${props.fontFamily}';
     src: url('${props.fontUrl}');
@@ -202,29 +203,37 @@ const dynamicStyles = computed(() => `
     -webkit-text-stroke-width: ${props.strokeWidth}px;
     -webkit-text-stroke-color: ${props.strokeColor};
   }
-`)
+`
+);
 
 onMounted(() => {
-  const styleElement = document.createElement('style')
-  styleElement.textContent = dynamicStyles.value
-  document.head.appendChild(styleElement)
+  const styleElement = document.createElement('style');
+  styleElement.textContent = dynamicStyles.value;
+  document.head.appendChild(styleElement);
 
-  styleElement.setAttribute('data-text-pressure', 'true')
-})
+  styleElement.setAttribute('data-text-pressure', 'true');
+});
 
 onUnmounted(() => {
-  const styleElements = document.querySelectorAll('style[data-text-pressure="true"]')
-  styleElements.forEach(el => el.remove())
-})
+  const styleElements = document.querySelectorAll('style[data-text-pressure="true"]');
+  styleElements.forEach(el => el.remove());
+});
 </script>
 
 <template>
   <div ref="containerRef" class="relative w-full h-full overflow-hidden bg-transparent">
-    <h1 ref="titleRef"
+    <h1
+      ref="titleRef"
       :class="`text-pressure-title ${className} ${flex ? 'flex justify-between' : ''} ${stroke ? 'stroke' : ''} uppercase text-center`"
-      :style="titleStyle">
-      <span v-for="(char, i) in chars" :key="i" :ref="(el) => spansRef[i] = el as HTMLSpanElement" :data-char="char"
-        class="inline-block">
+      :style="titleStyle"
+    >
+      <span
+        v-for="(char, i) in chars"
+        :key="i"
+        :ref="el => (spansRef[i] = el as HTMLSpanElement)"
+        :data-char="char"
+        class="inline-block"
+      >
         {{ char }}
       </span>
     </h1>
diff --git a/src/content/TextAnimations/TextTrail/TextTrail.vue b/src/content/TextAnimations/TextTrail/TextTrail.vue
index ad641c2..2ec7cb7 100644
--- a/src/content/TextAnimations/TextTrail/TextTrail.vue
+++ b/src/content/TextAnimations/TextTrail/TextTrail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import {
   CanvasTexture,
   Clock,
@@ -15,22 +15,22 @@ import {
   Vector3,
   WebGLRenderer,
   WebGLRenderTarget
-} from 'three'
+} from 'three';
 
 interface TextTrailProps {
-  text?: string
-  fontFamily?: string
-  fontWeight?: string | number
-  noiseFactor?: number
-  noiseScale?: number
-  rgbPersistFactor?: number
-  alphaPersistFactor?: number
-  animateColor?: boolean
-  startColor?: string
-  textColor?: string
-  backgroundColor?: number | string
-  colorCycleInterval?: number
-  supersample?: number
+  text?: string;
+  fontFamily?: string;
+  fontWeight?: string | number;
+  noiseFactor?: number;
+  noiseScale?: number;
+  rgbPersistFactor?: number;
+  alphaPersistFactor?: number;
+  animateColor?: boolean;
+  startColor?: string;
+  textColor?: string;
+  backgroundColor?: number | string;
+  colorCycleInterval?: number;
+  supersample?: number;
 }
 
 const props = withDefaults(defineProps<TextTrailProps>(), {
@@ -47,31 +47,31 @@ const props = withDefaults(defineProps<TextTrailProps>(), {
   backgroundColor: 0x151515,
   colorCycleInterval: 3000,
   supersample: 2
-})
+});
 
-const containerRef = ref<HTMLDivElement>()
+const containerRef = ref<HTMLDivElement>();
 
 const hexToRgb = (hex: string): [number, number, number] => {
-  let h = hex.replace('#', '')
+  let h = hex.replace('#', '');
   if (h.length === 3)
     h = h
       .split('')
-      .map((c) => c + c)
-      .join('')
-  const n = parseInt(h, 16)
-  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
-}
+      .map(c => c + c)
+      .join('');
+  const n = parseInt(h, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+};
 
 const loadFont = async (fam: string) => {
   if ('fonts' in document) {
-    const fonts = (document as Document & { fonts: { load: (font: string) => Promise<void> } }).fonts
-    await fonts.load(`64px "${fam}"`)
+    const fonts = (document as Document & { fonts: { load: (font: string) => Promise<void> } }).fonts;
+    await fonts.load(`64px "${fam}"`);
   }
-}
+};
 
 const BASE_VERT = `
 varying vec2 v_uv;
-void main(){gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);v_uv=uv;}`
+void main(){gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);v_uv=uv;}`;
 
 const SIMPLEX = `
 vec3 mod289(vec3 x){return x-floor(x*(1./289.))*289.;}
@@ -114,7 +114,7 @@ float snoise3(vec3 v){
   vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
   m*=m;
   return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
-}`
+}`;
 
 const PERSIST_FRAG = `
 uniform sampler2D sampler;
@@ -128,7 +128,7 @@ void main(){
   float b=snoise3(vec3(v_uv*noiseFactor,time*.1+100.))*noiseScale;
   vec4 t=texture2D(sampler,v_uv+vec2(a,b)+mousePos*.005);
   gl_FragColor=vec4(t.xyz*rgbPersistFactor,alphaPersistFactor);
-}`
+}`;
 
 const TEXT_FRAG = `
 uniform sampler2D sampler;uniform vec3 color;varying vec2 v_uv;
@@ -137,77 +137,77 @@ void main(){
   float alpha=smoothstep(0.1,0.9,t.a);
   if(alpha<0.01)discard;
   gl_FragColor=vec4(color,alpha);
-}`
+}`;
 
-let renderer: WebGLRenderer | null = null
-let scene: Scene | null = null
-let fluidScene: Scene | null = null
-let clock: Clock | null = null
-let cam: OrthographicCamera | null = null
-let rt0: WebGLRenderTarget | null = null
-let rt1: WebGLRenderTarget | null = null
-let quadMat: ShaderMaterial | null = null
-let quad: Mesh | null = null
-let labelMat: ShaderMaterial | null = null
-let label: Mesh | null = null
-let resizeObserver: ResizeObserver | null = null
-let colorTimer: number | null = null
+let renderer: WebGLRenderer | null = null;
+let scene: Scene | null = null;
+let fluidScene: Scene | null = null;
+let clock: Clock | null = null;
+let cam: OrthographicCamera | null = null;
+let rt0: WebGLRenderTarget | null = null;
+let rt1: WebGLRenderTarget | null = null;
+let quadMat: ShaderMaterial | null = null;
+let quad: Mesh | null = null;
+let labelMat: ShaderMaterial | null = null;
+let label: Mesh | null = null;
+let resizeObserver: ResizeObserver | null = null;
+let colorTimer: number | null = null;
 
 const persistColor = ref<[number, number, number]>(
-  hexToRgb(props.textColor || props.startColor).map((c) => c / 255) as [number, number, number]
-)
-const targetColor = ref<[number, number, number]>([...persistColor.value])
+  hexToRgb(props.textColor || props.startColor).map(c => c / 255) as [number, number, number]
+);
+const targetColor = ref<[number, number, number]>([...persistColor.value]);
 
-const mouse = [0, 0]
-const target = [0, 0]
+const mouse = [0, 0];
+const target = [0, 0];
 
 const getSize = () => ({
   w: containerRef.value!.clientWidth,
   h: containerRef.value!.clientHeight
-})
+});
 
 const onMove = (e: PointerEvent) => {
-  if (!containerRef.value) return
-  const r = containerRef.value.getBoundingClientRect()
-  target[0] = ((e.clientX - r.left) / r.width) * 2 - 1
-  target[1] = ((r.top + r.height - e.clientY) / r.height) * 2 - 1
-}
+  if (!containerRef.value) return;
+  const r = containerRef.value.getBoundingClientRect();
+  target[0] = ((e.clientX - r.left) / r.width) * 2 - 1;
+  target[1] = ((r.top + r.height - e.clientY) / r.height) * 2 - 1;
+};
 
 const drawText = () => {
-  if (!renderer || !labelMat) return
-  
-  const texCanvas = document.createElement('canvas')
+  if (!renderer || !labelMat) return;
+
+  const texCanvas = document.createElement('canvas');
   const ctx = texCanvas.getContext('2d', {
     alpha: true,
     colorSpace: 'srgb'
-  })!
-  
-  const max = Math.min(renderer.capabilities.maxTextureSize, 4096)
-  const pixelRatio = (window.devicePixelRatio || 1) * props.supersample
-  const canvasSize = max * pixelRatio
-  texCanvas.width = canvasSize
-  texCanvas.height = canvasSize
-  texCanvas.style.width = `${max}px`
-  texCanvas.style.height = `${max}px`
+  })!;
 
-  ctx.setTransform(1, 0, 0, 1, 0, 0)
-  ctx.scale(pixelRatio, pixelRatio)
-  ctx.clearRect(0, 0, max, max)
-  ctx.imageSmoothingEnabled = true
-  ctx.imageSmoothingQuality = 'high'
-  ctx.shadowColor = 'rgba(255,255,255,0.3)'
-  ctx.shadowBlur = 2
-  ctx.fillStyle = '#fff'
-  ctx.textAlign = 'center'
-  ctx.textBaseline = 'middle'
+  const max = Math.min(renderer.capabilities.maxTextureSize, 4096);
+  const pixelRatio = (window.devicePixelRatio || 1) * props.supersample;
+  const canvasSize = max * pixelRatio;
+  texCanvas.width = canvasSize;
+  texCanvas.height = canvasSize;
+  texCanvas.style.width = `${max}px`;
+  texCanvas.style.height = `${max}px`;
 
-  const refSize = 250
-  ctx.font = `${props.fontWeight} ${refSize}px ${props.fontFamily}`
-  const width = ctx.measureText(props.text).width
-  ctx.font = `${props.fontWeight} ${(refSize * max) / width}px ${props.fontFamily}`
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.scale(pixelRatio, pixelRatio);
+  ctx.clearRect(0, 0, max, max);
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  ctx.shadowColor = 'rgba(255,255,255,0.3)';
+  ctx.shadowBlur = 2;
+  ctx.fillStyle = '#fff';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
 
-  const cx = max / 2
-  const cy = max / 2
+  const refSize = 250;
+  ctx.font = `${props.fontWeight} ${refSize}px ${props.fontFamily}`;
+  const width = ctx.measureText(props.text).width;
+  ctx.font = `${props.fontWeight} ${(refSize * max) / width}px ${props.fontFamily}`;
+
+  const cx = max / 2;
+  const cy = max / 2;
   const offs = [
     [0, 0],
     [0.1, 0],
@@ -218,42 +218,40 @@ const drawText = () => {
     [-0.1, -0.1],
     [0.1, -0.1],
     [-0.1, 0.1]
-  ]
-  ctx.globalAlpha = 1 / offs.length
-  offs.forEach(([dx, dy]) => ctx.fillText(props.text, cx + dx, cy + dy))
-  ctx.globalAlpha = 1
+  ];
+  ctx.globalAlpha = 1 / offs.length;
+  offs.forEach(([dx, dy]) => ctx.fillText(props.text, cx + dx, cy + dy));
+  ctx.globalAlpha = 1;
 
-  const tex = new CanvasTexture(texCanvas)
-  tex.generateMipmaps = true
-  tex.minFilter = LinearMipmapLinearFilter
-  tex.magFilter = LinearFilter
-  labelMat.uniforms.sampler.value = tex
-}
+  const tex = new CanvasTexture(texCanvas);
+  tex.generateMipmaps = true;
+  tex.minFilter = LinearMipmapLinearFilter;
+  tex.magFilter = LinearFilter;
+  labelMat.uniforms.sampler.value = tex;
+};
 
 const initThreeJS = async () => {
-  if (!containerRef.value) return
+  if (!containerRef.value) return;
 
-  let { w, h } = getSize()
+  let { w, h } = getSize();
 
-  renderer = new WebGLRenderer({ antialias: true })
+  renderer = new WebGLRenderer({ antialias: true });
   renderer.setClearColor(
-    typeof props.backgroundColor === 'string' 
-      ? new Color(props.backgroundColor) 
-      : new Color(props.backgroundColor),
+    typeof props.backgroundColor === 'string' ? new Color(props.backgroundColor) : new Color(props.backgroundColor),
     1
-  )
-  renderer.setPixelRatio(window.devicePixelRatio || 1)
-  renderer.setSize(w, h)
-  containerRef.value.appendChild(renderer.domElement)
+  );
+  renderer.setPixelRatio(window.devicePixelRatio || 1);
+  renderer.setSize(w, h);
+  containerRef.value.appendChild(renderer.domElement);
 
-  scene = new Scene()
-  fluidScene = new Scene()
-  clock = new Clock()
-  cam = new OrthographicCamera(-w / 2, w / 2, h / 2, -h / 2, 0.1, 10)
-  cam.position.z = 1
+  scene = new Scene();
+  fluidScene = new Scene();
+  clock = new Clock();
+  cam = new OrthographicCamera(-w / 2, w / 2, h / 2, -h / 2, 0.1, 10);
+  cam.position.z = 1;
 
-  rt0 = new WebGLRenderTarget(w, h)
-  rt1 = rt0.clone()
+  rt0 = new WebGLRenderTarget(w, h);
+  rt1 = rt0.clone();
 
   quadMat = new ShaderMaterial({
     uniforms: {
@@ -268,9 +266,9 @@ const initThreeJS = async () => {
     vertexShader: BASE_VERT,
     fragmentShader: PERSIST_FRAG,
     transparent: true
-  })
-  quad = new Mesh(new PlaneGeometry(w, h), quadMat)
-  fluidScene.add(quad)
+  });
+  quad = new Mesh(new PlaneGeometry(w, h), quadMat);
+  fluidScene.add(quad);
 
   labelMat = new ShaderMaterial({
     uniforms: {
@@ -280,133 +278,132 @@ const initThreeJS = async () => {
     vertexShader: BASE_VERT,
     fragmentShader: TEXT_FRAG,
     transparent: true
-  })
-  label = new Mesh(new PlaneGeometry(Math.min(w, h), Math.min(w, h)), labelMat)
-  scene.add(label)
+  });
+  label = new Mesh(new PlaneGeometry(Math.min(w, h), Math.min(w, h)), labelMat);
+  scene.add(label);
 
-  await loadFont(props.fontFamily)
-  drawText()
+  await loadFont(props.fontFamily);
+  drawText();
 
-  containerRef.value.addEventListener('pointermove', onMove)
+  containerRef.value.addEventListener('pointermove', onMove);
 
   resizeObserver = new ResizeObserver(() => {
-    if (!containerRef.value || !renderer || !cam || !quad || !rt0 || !rt1 || !label) return
-    
-    const size = getSize()
-    w = size.w
-    h = size.h
-    
-    renderer.setSize(w, h)
-    cam.left = -w / 2
-    cam.right = w / 2
-    cam.top = h / 2
-    cam.bottom = -h / 2
-    cam.updateProjectionMatrix()
-    quad.geometry.dispose()
-    quad.geometry = new PlaneGeometry(w, h)
-    rt0.setSize(w, h)
-    rt1.setSize(w, h)
-    label.geometry.dispose()
-    label.geometry = new PlaneGeometry(Math.min(w, h), Math.min(w, h))
-  })
-  resizeObserver.observe(containerRef.value)
+    if (!containerRef.value || !renderer || !cam || !quad || !rt0 || !rt1 || !label) return;
+
+    const size = getSize();
+    w = size.w;
+    h = size.h;
+
+    renderer.setSize(w, h);
+    cam.left = -w / 2;
+    cam.right = w / 2;
+    cam.top = h / 2;
+    cam.bottom = -h / 2;
+    cam.updateProjectionMatrix();
+    quad.geometry.dispose();
+    quad.geometry = new PlaneGeometry(w, h);
+    rt0.setSize(w, h);
+    rt1.setSize(w, h);
+    label.geometry.dispose();
+    label.geometry = new PlaneGeometry(Math.min(w, h), Math.min(w, h));
+  });
+  resizeObserver.observe(containerRef.value);
 
   colorTimer = setInterval(() => {
     if (!props.textColor) {
-      targetColor.value = [Math.random(), Math.random(), Math.random()]
+      targetColor.value = [Math.random(), Math.random(), Math.random()];
     }
-  }, props.colorCycleInterval)
+  }, props.colorCycleInterval);
 
   const animate = () => {
-    if (!renderer || !quadMat || !labelMat || !clock || !scene || !fluidScene || !cam || !rt0 || !rt1) return
+    if (!renderer || !quadMat || !labelMat || !clock || !scene || !fluidScene || !cam || !rt0 || !rt1) return;
 
-    const dt = clock.getDelta()
+    const dt = clock.getDelta();
     if (props.animateColor && !props.textColor) {
-      for (let i = 0; i < 3; i++)
-        persistColor.value[i] += (targetColor.value[i] - persistColor.value[i]) * dt
+      for (let i = 0; i < 3; i++) persistColor.value[i] += (targetColor.value[i] - persistColor.value[i]) * dt;
     }
-    const speed = dt * 5
-    mouse[0] += (target[0] - mouse[0]) * speed
-    mouse[1] += (target[1] - mouse[1]) * speed
+    const speed = dt * 5;
+    mouse[0] += (target[0] - mouse[0]) * speed;
+    mouse[1] += (target[1] - mouse[1]) * speed;
 
-    quadMat.uniforms.mousePos.value.set(mouse[0], mouse[1])
-    quadMat.uniforms.sampler.value = rt1.texture
-    quadMat.uniforms.time.value = clock.getElapsedTime()
-    labelMat.uniforms.color.value.set(...persistColor.value)
+    quadMat.uniforms.mousePos.value.set(mouse[0], mouse[1]);
+    quadMat.uniforms.sampler.value = rt1.texture;
+    quadMat.uniforms.time.value = clock.getElapsedTime();
+    labelMat.uniforms.color.value.set(...persistColor.value);
 
-    renderer.autoClearColor = false
-    renderer.setRenderTarget(rt0)
-    renderer.clearColor()
-    renderer.render(fluidScene, cam)
-    renderer.render(scene, cam)
-    renderer.setRenderTarget(null)
-    renderer.render(fluidScene, cam)
-    renderer.render(scene, cam)
-    ;[rt0, rt1] = [rt1, rt0]
-  }
+    renderer.autoClearColor = false;
+    renderer.setRenderTarget(rt0);
+    renderer.clearColor();
+    renderer.render(fluidScene, cam);
+    renderer.render(scene, cam);
+    renderer.setRenderTarget(null);
+    renderer.render(fluidScene, cam);
+    renderer.render(scene, cam);
+    [rt0, rt1] = [rt1, rt0];
+  };
 
-  renderer.setAnimationLoop(animate)
-}
+  renderer.setAnimationLoop(animate);
+};
 
 const cleanup = () => {
   if (renderer) {
-    renderer.setAnimationLoop(null)
+    renderer.setAnimationLoop(null);
     if (containerRef.value && renderer.domElement.parentNode === containerRef.value) {
-      containerRef.value.removeChild(renderer.domElement)
+      containerRef.value.removeChild(renderer.domElement);
     }
-    renderer.dispose()
-    renderer = null
+    renderer.dispose();
+    renderer = null;
   }
-  
+
   if (colorTimer) {
-    clearInterval(colorTimer)
-    colorTimer = null
+    clearInterval(colorTimer);
+    colorTimer = null;
   }
-  
+
   if (containerRef.value) {
-    containerRef.value.removeEventListener('pointermove', onMove)
+    containerRef.value.removeEventListener('pointermove', onMove);
   }
-  
+
   if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
+    resizeObserver.disconnect();
+    resizeObserver = null;
   }
-  
+
   if (rt0) {
-    rt0.dispose()
-    rt0 = null
+    rt0.dispose();
+    rt0 = null;
   }
-  
+
   if (rt1) {
-    rt1.dispose()
-    rt1 = null
+    rt1.dispose();
+    rt1 = null;
   }
-  
+
   if (quadMat) {
-    quadMat.dispose()
-    quadMat = null
+    quadMat.dispose();
+    quadMat = null;
   }
-  
+
   if (quad) {
-    quad.geometry.dispose()
-    quad = null
+    quad.geometry.dispose();
+    quad = null;
   }
-  
+
   if (labelMat) {
-    labelMat.dispose()
-    labelMat = null
+    labelMat.dispose();
+    labelMat = null;
   }
-  
+
   if (label) {
-    label.geometry.dispose()
-    label = null
+    label.geometry.dispose();
+    label = null;
   }
-  
-  scene = null
-  fluidScene = null
-  clock = null
-  cam = null
-}
+
+  scene = null;
+  fluidScene = null;
+  clock = null;
+  cam = null;
+};
 
 watch(
   () => [
@@ -425,25 +422,25 @@ watch(
     props.supersample
   ],
   () => {
-    cleanup()
+    cleanup();
     if (containerRef.value) {
-      persistColor.value = hexToRgb(props.textColor || props.startColor).map((c) => c / 255) as [number, number, number]
-      targetColor.value = [...persistColor.value]
-      initThreeJS()
+      persistColor.value = hexToRgb(props.textColor || props.startColor).map(c => c / 255) as [number, number, number];
+      targetColor.value = [...persistColor.value];
+      initThreeJS();
     }
   },
   { deep: true }
-)
+);
 
 onMounted(() => {
   if (containerRef.value) {
-    initThreeJS()
+    initThreeJS();
   }
-})
+});
 
 onUnmounted(() => {
-  cleanup()
-})
+  cleanup();
+});
 </script>
 
 <template>
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index 6613874..609aecf 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { motion } from "motion-v";
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { motion } from 'motion-v';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
 interface TrueFocusProps {
   sentence?: string;
@@ -13,16 +13,16 @@ interface TrueFocusProps {
 }
 
 const props = withDefaults(defineProps<TrueFocusProps>(), {
-  sentence: "True Focus",
+  sentence: 'True Focus',
   manualMode: false,
   blurAmount: 5,
-  borderColor: "green",
-  glowColor: "rgba(0, 255, 0, 0.6)",
+  borderColor: 'green',
+  glowColor: 'rgba(0, 255, 0, 0.6)',
   animationDuration: 0.5,
-  pauseBetweenAnimations: 1,
+  pauseBetweenAnimations: 1
 });
 
-const words = computed(() => props.sentence.split(" "));
+const words = computed(() => props.sentence.split(' '));
 const currentIndex = ref(0);
 const lastActiveIndex = ref<number | null>(null);
 const containerRef = ref<HTMLDivElement>();
@@ -32,12 +32,7 @@ const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
 let interval: number | null = null;
 
 watch(
-  [
-    () => props.manualMode,
-    () => props.animationDuration,
-    () => props.pauseBetweenAnimations,
-    words,
-  ],
+  [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, words],
   () => {
     if (interval) {
       clearInterval(interval);
@@ -49,11 +44,11 @@ watch(
         () => {
           currentIndex.value = (currentIndex.value + 1) % words.value.length;
         },
-        (props.animationDuration + props.pauseBetweenAnimations) * 1000,
+        (props.animationDuration + props.pauseBetweenAnimations) * 1000
       );
     }
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 watch(
@@ -71,10 +66,10 @@ watch(
       x: activeRect.left - parentRect.left,
       y: activeRect.top - parentRect.top,
       width: activeRect.width,
-      height: activeRect.height,
+      height: activeRect.height
     };
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 const handleMouseEnter = (index: number) => {
@@ -107,7 +102,7 @@ onMounted(async () => {
       x: activeRect.left - parentRect.left,
       y: activeRect.top - parentRect.top,
       width: activeRect.width,
-      height: activeRect.height,
+      height: activeRect.height
     };
   }
 });
@@ -121,36 +116,55 @@ onUnmounted(() => {
 
 <template>
   <div class="relative flex flex-wrap justify-center items-center gap-[1em]" ref="containerRef">
-    <span v-for="(word, index) in words" :key="index" :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
-      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer" :style="{
+    <span
+      v-for="(word, index) in words"
+      :key="index"
+      :ref="el => setWordRef(el as HTMLSpanElement, index)"
+      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
+      :style="{
         filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
         '--border-color': borderColor,
         '--glow-color': glowColor,
-        transition: `filter ${animationDuration}s ease`,
-      }" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave">
+        transition: `filter ${animationDuration}s ease`
+      }"
+      @mouseenter="handleMouseEnter(index)"
+      @mouseleave="handleMouseLeave"
+    >
       {{ word }}
     </span>
 
-    <motion.div class="top-0 left-0 box-content absolute border-none pointer-events-none" :animate="{
-      x: focusRect.x,
-      y: focusRect.y,
-      width: focusRect.width,
-      height: focusRect.height,
-      opacity: currentIndex >= 0 ? 1 : 0,
-    }" :transition="{
-        duration: animationDuration,
-      }" :style="{
+    <motion.div
+      class="top-0 left-0 box-content absolute border-none pointer-events-none"
+      :animate="{
+        x: focusRect.x,
+        y: focusRect.y,
+        width: focusRect.width,
+        height: focusRect.height,
+        opacity: currentIndex >= 0 ? 1 : 0
+      }"
+      :transition="{
+        duration: animationDuration
+      }"
+      :style="{
         '--border-color': borderColor,
-        '--glow-color': glowColor,
-      }">
+        '--glow-color': glowColor
+      }"
+    >
       <span
-        class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"></span>
+        class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"
+      ></span>
+
       <span
-        class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+        class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
+      ></span>
+
       <span
-        class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"></span>
+        class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"
+      ></span>
+
       <span
-        class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+        class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
+      ></span>
     </motion.div>
   </div>
 </template>
diff --git a/src/css/base.css b/src/css/base.css
index 63fbe89..e5c8d9f 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -38,7 +38,7 @@ body {
     width: auto !important;
     max-width: calc(100vw - 2rem) !important;
   }
-  
+
   .p-toast-message {
     max-width: 100% !important;
     min-width: unset !important;
@@ -48,20 +48,20 @@ body {
     padding: 0.75rem !important;
     box-sizing: border-box !important;
   }
-  
+
   .p-toast-message-content {
     padding: 0.5rem !important;
     gap: 0.5rem !important;
   }
-  
+
   .p-toast-message-text {
     word-wrap: break-word !important;
     overflow-wrap: break-word !important;
     hyphens: auto !important;
   }
-  
+
   .p-toast-message-summary {
     font-size: 0.875rem !important;
     line-height: 1.25 !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/css/category.css b/src/css/category.css
index 3404ae9..744ad84 100644
--- a/src/css/category.css
+++ b/src/css/category.css
@@ -121,13 +121,13 @@ div:has(> .props-table) {
   max-width: 600px;
   font-size: 1rem;
   font-weight: bolder;
-  color: #27FF64;
+  color: #27ff64;
 }
 
 .star-border-demo .inner-content {
   padding: 1em 3em;
   background-color: #0b0b0b !important;
-  border: 1px solid #142216 !important
+  border: 1px solid #142216 !important;
 }
 
 .custom-bounceCards {
@@ -150,7 +150,7 @@ div:has(> .props-table) {
 .rotating-text-demo-container .rotating-text-demo {
   display: inline-block;
   color: #0b0b0b;
-  background-color: #27FF64;
+  background-color: #27ff64;
   padding: 0 0.4em;
   border-radius: 15px;
   transition: width 0.3s ease;
@@ -161,7 +161,7 @@ div:has(> .props-table) {
 }
 
 .tilted-card-demo-text {
-  font-family: "Figtree", sans-serif;
+  font-family: 'Figtree', sans-serif;
   font-weight: 900;
   text-transform: capitalize;
   box-shadow: 0 5px 30px #0b0b0b59;
@@ -216,7 +216,7 @@ div:has(> .props-table) {
   font-weight: 900;
   font-size: 1.6rem;
   margin-top: 1rem;
-  margin-bottom: .4rem;
+  margin-bottom: 0.4rem;
   color: #fff;
 }
 
@@ -242,7 +242,7 @@ div:has(> .props-table) {
   margin-bottom: 1em;
   text-align: center;
   font-size: 1.65rem;
-  color: #A7EF9E;
+  color: #a7ef9e;
 }
 
 .contribute-buttons {
@@ -316,7 +316,7 @@ div:has(> .props-table) {
   background-color: #111;
   border: 1px solid #142216;
   white-space: nowrap;
-  color: #A7EF9E;
+  color: #a7ef9e;
   border-radius: 10px;
   font-size: 0.8rem;
   padding: 0.5em 1em;
@@ -345,7 +345,7 @@ div:has(> .props-table) {
 }
 
 .cli-divider::before {
-  content: "Or";
+  content: 'Or';
   position: absolute;
   left: 50%;
   top: 50%;
@@ -356,7 +356,7 @@ div:has(> .props-table) {
 }
 
 .coming-soon a {
-  color: #27FF64;
+  color: #27ff64;
   text-decoration: underline;
 }
 
@@ -400,15 +400,15 @@ div:has(> .props-table) {
     flex-direction: column;
     gap: 1rem;
   }
-  
+
   .contribute-button {
     width: 90%;
   }
-  
+
   .contribute-separator {
     display: none;
   }
-  
+
   .demo-title-contribute {
     font-size: 1rem;
   }
@@ -472,13 +472,13 @@ div:has(> .props-table) {
     flex-direction: column;
     width: 100%;
   }
-  
+
   .contribute-button {
     width: 100%;
     flex: none;
   }
-  
+
   .contribute-separator {
     order: 2;
   }
-}
\ No newline at end of file
+}
diff --git a/src/css/landing.css b/src/css/landing.css
index b64b1b9..6502856 100644
--- a/src/css/landing.css
+++ b/src/css/landing.css
@@ -44,7 +44,7 @@
   text-align: left !important;
   font-weight: 300;
   line-height: 1.2;
-  color: #A7EF9E;
+  color: #a7ef9e;
   max-width: 30ch;
   margin-bottom: 2rem;
   text-shadow:
@@ -62,9 +62,7 @@
 
 .landing-button {
   position: relative;
-  background: linear-gradient(135deg,
-      rgb(30, 160, 63),
-      rgba(24, 47, 255, 0.6));
+  background: linear-gradient(135deg, rgb(30, 160, 63), rgba(24, 47, 255, 0.6));
   background-size: 200% 200%;
   font-weight: 600;
   font-size: 1.1rem;
@@ -129,10 +127,7 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg,
-      transparent,
-      rgba(255, 255, 255, 0.4),
-      transparent);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.6s ease;
   z-index: 1;
 }
@@ -141,12 +136,14 @@
   content: '';
   position: absolute;
   inset: -2px;
-  background: linear-gradient(45deg,
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent);
+  background: linear-gradient(
+    45deg,
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
   background-size: 200% 200%;
   border-radius: 50px;
   z-index: -1;
@@ -316,7 +313,7 @@
   justify-content: center;
   gap: 2.4rem;
   max-width: 40%;
-  margin-left: .6rem;
+  margin-left: 0.6rem;
 }
 
 .hero-cards-row {
@@ -535,7 +532,7 @@
     transform: translateY(0) scale(1) rotate(-5deg);
   }
 
-  .landing-wrapper>div[style*="position: absolute"][style*="width: 100vw"][style*="height: 100vh"] {
+  .landing-wrapper > div[style*='position: absolute'][style*='width: 100vw'][style*='height: 100vh'] {
     opacity: 0.7;
   }
 }
@@ -657,7 +654,7 @@
     transform: translateY(0) scale(1) rotate(-5deg);
   }
 
-  .landing-wrapper>div[style*="position: absolute"][style*="width: 100vw"][style*="height: 100vh"] {
+  .landing-wrapper > div[style*='position: absolute'][style*='width: 100vw'][style*='height: 100vh'] {
     opacity: 0.5;
   }
 }
@@ -804,7 +801,7 @@
     transform: translateY(0) scale(1) rotate(-5deg);
   }
 
-  .landing-wrapper>div[style*="position: absolute"][style*="width: 100vw"][style*="height: 100vh"] {
+  .landing-wrapper > div[style*='position: absolute'][style*='width: 100vw'][style*='height: 100vh'] {
     opacity: 0.3;
   }
 }
@@ -894,4 +891,4 @@
   height: 100%;
   object-fit: cover;
   opacity: 0.6;
-}
\ No newline at end of file
+}
diff --git a/src/css/main.css b/src/css/main.css
index b603084..138fa21 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -2,4 +2,3 @@
 @import './sidebar.css';
 @import './category.css';
 @import './landing.css';
-
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
index 0da5261..36080fd 100644
--- a/src/css/sidebar.css
+++ b/src/css/sidebar.css
@@ -124,7 +124,7 @@
 
 .sidebar-item .new-tag {
   color: #fff;
-  border: 1px solid #27FF64;
+  border: 1px solid #27ff64;
   background-color: rgba(82, 39, 255, 0.3);
 }
 
@@ -158,9 +158,7 @@
   font-size: 12px;
   padding: 0 0 0 1rem;
   height: 40px;
-  background: linear-gradient(135deg,
-      rgb(30, 160, 63),
-      rgba(24, 47, 255, 0.6));
+  background: linear-gradient(135deg, rgb(30, 160, 63), rgba(24, 47, 255, 0.6));
   background-size: 200% 200%;
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
@@ -174,14 +172,14 @@
   align-items: center;
   white-space: nowrap;
   justify-content: space-between;
-  transition: .3s ease;
+  transition: 0.3s ease;
 }
 
 .cta-button-docs span {
   background-color: #0b0b0b;
   margin-left: 1em;
   margin-right: calc(1em - 6px);
-  padding-top: .1em;
+  padding-top: 0.1em;
   height: 30px;
   border-radius: 50px;
   width: 75px;
@@ -197,7 +195,7 @@
   margin-right: 4px;
   width: 12px;
   height: 12px;
-  transition: .3s ease;
+  transition: 0.3s ease;
 }
 
 .active-line {
@@ -381,9 +379,7 @@
   font-size: 12px;
   padding: 0 0 0 1rem;
   height: 40px;
-  background: linear-gradient(135deg,
-      rgb(30, 160, 63),
-      rgba(24, 47, 255, 0.6));
+  background: linear-gradient(135deg, rgb(30, 160, 63), rgba(24, 47, 255, 0.6));
   background-size: 200% 200%;
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
@@ -616,7 +612,7 @@
 
 .drawer-navigation .sidebar-item .new-tag {
   color: #fff;
-  border: 1px solid #27FF64;
+  border: 1px solid #27ff64;
   background-color: rgba(82, 39, 255, 0.3);
 }
 
@@ -636,4 +632,4 @@
   .drawer-header {
     padding: 0 1em;
   }
-}
\ No newline at end of file
+}
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index 799c811..ebd93c5 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -6,11 +6,22 @@
           <RefreshButton @click="forceRerender" />
 
           <div :key="key" class="flex justify-center items-center">
-            <AnimatedContent :direction="direction" :delay="delay" :distance="distance" :reverse="reverse"
-              :duration="duration" :ease="ease" :initial-opacity="initialOpacity" :animate-opacity="animateOpacity"
-              :scale="scale" :threshold="threshold" @complete="() => console.log('✅ Animation Complete!')">
+            <AnimatedContent
+              :direction="direction"
+              :delay="delay"
+              :distance="distance"
+              :reverse="reverse"
+              :duration="duration"
+              :ease="ease"
+              :initial-opacity="initialOpacity"
+              :animate-opacity="animateOpacity"
+              :scale="scale"
+              :threshold="threshold"
+              @complete="() => console.log('✅ Animation Complete!')"
+            >
               <div class="demo-content">
                 <h4>Animated Content</h4>
+
                 <p>It will animate in when it enters the viewport.</p>
               </div>
             </AnimatedContent>
@@ -18,29 +29,85 @@
         </div>
 
         <Customize>
-          <PreviewSelect title="Animation Direction" v-model="direction" :options="directionOptions"
-            @update:model-value="(val) => { direction = val as 'vertical' | 'horizontal'; forceRerender(); }" />
+          <PreviewSelect
+            title="Animation Direction"
+            v-model="direction"
+            :options="directionOptions"
+            @update:model-value="
+              val => {
+                direction = val as 'vertical' | 'horizontal';
+                forceRerender();
+              }
+            "
+          />
 
-          <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions"
-            @update:model-value="(val) => { ease = val as string; forceRerender(); }" />
+          <PreviewSelect
+            title="Easing Function"
+            v-model="ease"
+            :options="easeOptions"
+            @update:model-value="
+              val => {
+                ease = val as string;
+                forceRerender();
+              }
+            "
+          />
 
-          <PreviewSlider title="Distance" v-model="distance" :min="50" :max="300" :step="10"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Distance"
+            v-model="distance"
+            :min="50"
+            :max="300"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="3" :step="0.1" value-unit="s"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Duration"
+            v-model="duration"
+            :min="0.1"
+            :max="3"
+            :step="0.1"
+            value-unit="s"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Delay" v-model="delay" :min="0" :max="2" :step="0.1" value-unit="s"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Delay"
+            v-model="delay"
+            :min="0"
+            :max="2"
+            :step="0.1"
+            value-unit="s"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Initial Opacity"
+            v-model="initialOpacity"
+            :min="0"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Initial Scale" v-model="scale" :min="0.1" :max="2" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Initial Scale"
+            v-model="scale"
+            :min="0.1"
+            :max="2"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Threshold"
+            v-model="threshold"
+            :min="0.1"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
 
           <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
 
@@ -48,6 +115,7 @@
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -63,44 +131,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import RefreshButton from '../../components/common/RefreshButton.vue'
-import AnimatedContent from '../../content/Animations/AnimatedContent/AnimatedContent.vue'
-import { animatedContent } from '@/constants/code/Animations/animatedContentCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import AnimatedContent from '../../content/Animations/AnimatedContent/AnimatedContent.vue';
+import { animatedContent } from '@/constants/code/Animations/animatedContentCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender()
+const { rerenderKey: key, forceRerender } = useForceRerender();
 
-const direction = ref<'vertical' | 'horizontal'>('vertical')
-const distance = ref(100)
-const delay = ref(0)
-const reverse = ref(false)
-const duration = ref(0.8)
-const ease = ref('power3.out')
-const initialOpacity = ref(0)
-const animateOpacity = ref(true)
-const scale = ref(1)
-const threshold = ref(0.1)
+const direction = ref<'vertical' | 'horizontal'>('vertical');
+const distance = ref(100);
+const delay = ref(0);
+const reverse = ref(false);
+const duration = ref(0.8);
+const ease = ref('power3.out');
+const initialOpacity = ref(0);
+const animateOpacity = ref(true);
+const scale = ref(1);
+const threshold = ref(0.1);
 
 const directionOptions = [
   { label: 'Vertical', value: 'vertical' },
   { label: 'Horizontal', value: 'horizontal' }
-]
+];
 
 const easeOptions = [
   { label: 'Power3 Out', value: 'power3.out' },
   { label: 'Bounce Out', value: 'bounce.out' },
   { label: 'Elastic Out', value: 'elastic.out(1, 0.3)' }
-]
+];
 
 const propData = [
   {
@@ -169,7 +237,7 @@ const propData = [
     default: '""',
     description: 'Additional CSS classes for styling.'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -194,4 +262,4 @@ const propData = [
   max-width: 25ch;
   line-height: 1.6;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Animations/ClickSparkDemo.vue b/src/demo/Animations/ClickSparkDemo.vue
index 66be554..5e68022 100644
--- a/src/demo/Animations/ClickSparkDemo.vue
+++ b/src/demo/Animations/ClickSparkDemo.vue
@@ -3,13 +3,21 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container">
-          <ClickSpark :key="rerenderKey" :spark-color="sparkColor" :spark-size="sparkSize" :spark-radius="sparkRadius"
-            :spark-count="sparkCount" :duration="duration" :easing="easing" :extra-scale="extraScale"
-            class="click-spark-demo-area">
-          </ClickSpark>
+          <ClickSpark
+            :key="rerenderKey"
+            :spark-color="sparkColor"
+            :spark-size="sparkSize"
+            :spark-radius="sparkRadius"
+            :spark-count="sparkCount"
+            :duration="duration"
+            :easing="easing"
+            :extra-scale="extraScale"
+            class="click-spark-demo-area"
+          ></ClickSpark>
 
           <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none">
+            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+          >
             Click Around!
           </div>
         </div>
@@ -17,20 +25,50 @@
         <Customize>
           <PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Spark Size" v-model="sparkSize" :min="5" :max="30" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Spark Size"
+            v-model="sparkSize"
+            :min="5"
+            :max="30"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Spark Radius" v-model="sparkRadius" :min="10" :max="50" :step="5"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Spark Radius"
+            v-model="sparkRadius"
+            :min="10"
+            :max="50"
+            :step="5"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Spark Count" v-model="sparkCount" :min="4" :max="20" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Spark Count"
+            v-model="sparkCount"
+            :min="4"
+            :max="20"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Duration (ms)" v-model="duration" :min="200" :max="1000" :step="50"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Duration (ms)"
+            v-model="duration"
+            :min="200"
+            :max="1000"
+            :step="50"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Extra Scale" v-model="extraScale" :min="0.5" :max="2" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Extra Scale"
+            v-model="extraScale"
+            :min="0.5"
+            :max="2"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -48,26 +86,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewColor from '../../components/common/PreviewColor.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import ClickSpark from '../../content/Animations/ClickSpark/ClickSpark.vue'
-import { clickSpark } from '@/constants/code/Animations/clickSparkCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import ClickSpark from '../../content/Animations/ClickSpark/ClickSpark.vue';
+import { clickSpark } from '@/constants/code/Animations/clickSparkCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const sparkColor = ref('#ffffff')
-const sparkSize = ref(10)
-const sparkRadius = ref(15)
-const sparkCount = ref(8)
-const duration = ref(400)
-const easing = ref<"linear" | "ease-in" | "ease-out" | "ease-in-out">('ease-out')
-const extraScale = ref(1)
-const { rerenderKey, forceRerender } = useForceRerender()
+const sparkColor = ref('#ffffff');
+const sparkSize = ref(10);
+const sparkRadius = ref(15);
+const sparkCount = ref(8);
+const duration = ref(400);
+const easing = ref<'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'>('ease-out');
+const extraScale = ref(1);
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   { name: 'sparkColor', type: 'string', default: "'#fff'", description: 'Color of the spark lines.' },
@@ -75,9 +113,14 @@ const propData = [
   { name: 'sparkRadius', type: 'number', default: '15', description: 'Distance sparks travel from the click center.' },
   { name: 'sparkCount', type: 'number', default: '8', description: 'Number of spark lines per click.' },
   { name: 'duration', type: 'number', default: '400', description: 'Animation duration in milliseconds.' },
-  { name: 'easing', type: 'string', default: "'ease-out'", description: 'Easing function: "linear", "ease-in", "ease-out", or "ease-in-out".' },
+  {
+    name: 'easing',
+    type: 'string',
+    default: "'ease-out'",
+    description: 'Easing function: "linear", "ease-in", "ease-out", or "ease-in-out".'
+  },
   { name: 'extraScale', type: 'number', default: '1.0', description: 'Scale multiplier for spark distance and size.' }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Animations/CountUpDemo.vue b/src/demo/Animations/CountUpDemo.vue
index c0b21d8..f266efb 100644
--- a/src/demo/Animations/CountUpDemo.vue
+++ b/src/demo/Animations/CountUpDemo.vue
@@ -3,22 +3,39 @@
     <TabbedLayout>
       <template #preview>
         <h2 class="demo-title-extra">Default</h2>
+
         <div class="demo-container relative">
-          <CountUp :key="keyDefault" :from="0" :to="100" separator="," direction="up" :duration="1"
-            class-name="count-up-text" />
+          <CountUp
+            :key="keyDefault"
+            :from="0"
+            :to="100"
+            separator=","
+            direction="up"
+            :duration="1"
+            class-name="count-up-text"
+          />
 
           <RefreshButton @click="forceRerenderDefault" />
         </div>
 
         <h2 class="demo-title-extra">Start Programatically</h2>
+
         <div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]">
-          <button class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
-            @click="setStartCounting(true)">
+          <button
+            class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
+            @click="setStartCounting(true)"
+          >
             Count to 500!
           </button>
 
-          <CountUp :key="keyProgramatically" :from="100" :to="500" :start-when="startCounting" :duration="5"
-            class-name="count-up-text" />
+          <CountUp
+            :key="keyProgramatically"
+            :from="100"
+            :to="500"
+            :start-when="startCounting"
+            :duration="5"
+            class-name="count-up-text"
+          />
 
           <RefreshButton v-if="startCounting" @click="forceRerenderProgramatically" />
         </div>
@@ -38,27 +55,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import RefreshButton from '../../components/common/RefreshButton.vue'
-import CountUp from '../../content/Animations/CountUp/CountUp.vue'
-import { countup } from '@/constants/code/Animations/countUpCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import CountUp from '../../content/Animations/CountUp/CountUp.vue';
+import { countup } from '@/constants/code/Animations/countUpCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const startCounting = ref(false)
+const startCounting = ref(false);
 
-const { rerenderKey: keyDefault, forceRerender: forceRerenderDefault } = useForceRerender()
-const { rerenderKey: keyProgramatically, forceRerender: forceRerenderProgramatically } = useForceRerender()
+const { rerenderKey: keyDefault, forceRerender: forceRerenderDefault } = useForceRerender();
+const { rerenderKey: keyProgramatically, forceRerender: forceRerenderProgramatically } = useForceRerender();
 
 const setStartCounting = (value: boolean) => {
-  startCounting.value = value
+  startCounting.value = value;
   if (value) {
-    forceRerenderProgramatically()
+    forceRerenderProgramatically();
   }
-}
+};
 
 const propData = [
   {
@@ -77,7 +94,8 @@ const propData = [
     name: 'direction',
     type: 'string',
     default: '"up"',
-    description: 'Direction of the count; can be "up" or "down". When this is set to "down", "from" and "to" become reversed, in order to count down.'
+    description:
+      'Direction of the count; can be "up" or "down". When this is set to "down", "from" and "to" become reversed, in order to count down.'
   },
   {
     name: 'delay',
@@ -101,7 +119,8 @@ const propData = [
     name: 'startWhen',
     type: 'boolean',
     default: 'true',
-    description: 'A boolean to control whether the animation should start when the component is in view. It basically works like an if statement, if this is true, the count will start.'
+    description:
+      'A boolean to control whether the animation should start when the component is in view. It basically works like an if statement, if this is true, the count will start.'
   },
   {
     name: 'separator',
@@ -121,7 +140,7 @@ const propData = [
     default: '—',
     description: 'Callback function that is called when the count animation ends.'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -129,4 +148,4 @@ const propData = [
   min-height: 200px;
   height: 200px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Animations/CubesDemo.vue b/src/demo/Animations/CubesDemo.vue
index 301d520..ac4c71b 100644
--- a/src/demo/Animations/CubesDemo.vue
+++ b/src/demo/Animations/CubesDemo.vue
@@ -2,8 +2,14 @@
   <TabbedLayout>
     <template #preview>
       <div class="relative demo-container h-[650px] overflow-hidden">
-        <Cubes :borderStyle="borderStyle" :gridSize="gridSize" :maxAngle="maxAngle" :radius="radius"
-          :autoAnimate="autoAnimate" :rippleOnClick="rippleOnClick" />
+        <Cubes
+          :borderStyle="borderStyle"
+          :gridSize="gridSize"
+          :maxAngle="maxAngle"
+          :radius="radius"
+          :autoAnimate="autoAnimate"
+          :rippleOnClick="rippleOnClick"
+        />
       </div>
 
       <Customize>
@@ -21,6 +27,7 @@
       </Customize>
 
       <PropTable :data="propData" />
+
       <Dependencies :dependencyList="['gsap']" />
     </template>
 
@@ -35,117 +42,117 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
 
-import { cubes } from '../../constants/code/Animations/cubesCode'
-import Cubes from '../../content/Animations/Cubes/Cubes.vue'
+import { cubes } from '../../constants/code/Animations/cubesCode';
+import Cubes from '../../content/Animations/Cubes/Cubes.vue';
 
-const borderStyle = ref("2px dashed #A7EF9E")
-const gridSize = ref(10)
-const maxAngle = ref(45)
-const radius = ref(3)
-const autoAnimate = ref(true)
-const rippleOnClick = ref(true)
+const borderStyle = ref('2px dashed #A7EF9E');
+const gridSize = ref(10);
+const maxAngle = ref(45);
+const radius = ref(3);
+const autoAnimate = ref(true);
+const rippleOnClick = ref(true);
 
 const borderOptions = [
-  { value: "2px dotted #fff", label: "Dotted White" },
-  { value: "2px dashed #A7EF9E", label: "Dashed Green" },
-  { value: "3px solid #fff", label: "Solid White" }
-]
+  { value: '2px dotted #fff', label: 'Dotted White' },
+  { value: '2px dashed #A7EF9E', label: 'Dashed Green' },
+  { value: '3px solid #fff', label: 'Solid White' }
+];
 
 const propData = [
   {
-    name: "gridSize",
-    type: "number",
-    default: "10",
-    description: "The size of the grid (number of cubes per row/column)"
+    name: 'gridSize',
+    type: 'number',
+    default: '10',
+    description: 'The size of the grid (number of cubes per row/column)'
   },
   {
-    name: "cubeSize",
-    type: "number",
-    default: "undefined",
-    description: "Fixed size of each cube in pixels. If not provided, cubes will be responsive"
+    name: 'cubeSize',
+    type: 'number',
+    default: 'undefined',
+    description: 'Fixed size of each cube in pixels. If not provided, cubes will be responsive'
   },
   {
-    name: "maxAngle",
-    type: "number",
-    default: "45",
-    description: "Maximum rotation angle for the tilt effect in degrees"
+    name: 'maxAngle',
+    type: 'number',
+    default: '45',
+    description: 'Maximum rotation angle for the tilt effect in degrees'
   },
   {
-    name: "radius",
-    type: "number",
-    default: "3",
-    description: "Radius of the tilt effect (how many cubes around the cursor are affected)"
+    name: 'radius',
+    type: 'number',
+    default: '3',
+    description: 'Radius of the tilt effect (how many cubes around the cursor are affected)'
   },
   {
-    name: "easing",
-    type: "string",
+    name: 'easing',
+    type: 'string',
     default: "'power3.out'",
-    description: "GSAP easing function for the tilt animation"
+    description: 'GSAP easing function for the tilt animation'
   },
   {
-    name: "duration",
-    type: "object",
-    default: "{ enter: 0.3, leave: 0.6 }",
-    description: "Animation duration for enter and leave effects"
+    name: 'duration',
+    type: 'object',
+    default: '{ enter: 0.3, leave: 0.6 }',
+    description: 'Animation duration for enter and leave effects'
   },
   {
-    name: "cellGap",
-    type: "number | object",
-    default: "undefined",
-    description: "Gap between cubes. Can be a number or object with row/col properties"
+    name: 'cellGap',
+    type: 'number | object',
+    default: 'undefined',
+    description: 'Gap between cubes. Can be a number or object with row/col properties'
   },
   {
-    name: "borderStyle",
-    type: "string",
+    name: 'borderStyle',
+    type: 'string',
     default: "'1px solid #fff'",
-    description: "CSS border style for cube faces"
+    description: 'CSS border style for cube faces'
   },
   {
-    name: "faceColor",
-    type: "string",
+    name: 'faceColor',
+    type: 'string',
     default: "'#060010'",
-    description: "Background color for cube faces"
+    description: 'Background color for cube faces'
   },
   {
-    name: "shadow",
-    type: "boolean | string",
-    default: "false",
-    description: "Shadow effect for cubes. Can be boolean or custom CSS shadow"
+    name: 'shadow',
+    type: 'boolean | string',
+    default: 'false',
+    description: 'Shadow effect for cubes. Can be boolean or custom CSS shadow'
   },
   {
-    name: "autoAnimate",
-    type: "boolean",
-    default: "true",
-    description: "Whether to automatically animate when user is idle"
+    name: 'autoAnimate',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether to automatically animate when user is idle'
   },
   {
-    name: "rippleOnClick",
-    type: "boolean",
-    default: "true",
-    description: "Whether to show ripple effect on click"
+    name: 'rippleOnClick',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether to show ripple effect on click'
   },
   {
-    name: "rippleColor",
-    type: "string",
+    name: 'rippleColor',
+    type: 'string',
     default: "'#fff'",
-    description: "Color of the ripple effect"
+    description: 'Color of the ripple effect'
   },
   {
-    name: "rippleSpeed",
-    type: "number",
-    default: "2",
-    description: "Speed multiplier for the ripple animation"
+    name: 'rippleSpeed',
+    type: 'number',
+    default: '2',
+    description: 'Speed multiplier for the ripple animation'
   }
-]
+];
 </script>
diff --git a/src/demo/Animations/FadeContentDemo.vue b/src/demo/Animations/FadeContentDemo.vue
index 99fee41..8bfe129 100644
--- a/src/demo/Animations/FadeContentDemo.vue
+++ b/src/demo/Animations/FadeContentDemo.vue
@@ -17,6 +17,7 @@
           >
             <div class="demo-content">
               <h4>Fade Content</h4>
+
               <p>It will fade in when it enters the viewport.</p>
             </div>
           </FadeContent>
@@ -25,17 +26,41 @@
         <Customize>
           <PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Duration (ms)"
+            v-model="duration"
+            :min="100"
+            :max="3000"
+            :step="100"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Delay (ms)"
+            v-model="delay"
+            :min="0"
+            :max="1000"
+            :step="50"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Threshold"
+            v-model="threshold"
+            :min="0.1"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Initial Opacity"
+            v-model="initialOpacity"
+            :min="0"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -53,36 +78,41 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import RefreshButton from '../../components/common/RefreshButton.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue'
-import { fadeContent } from '@/constants/code/Animations/fadeContentCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue';
+import { fadeContent } from '@/constants/code/Animations/fadeContentCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const blur = ref(true)
-const duration = ref(1000)
-const delay = ref(200)
-const threshold = ref(0.1)
-const initialOpacity = ref(0)
-const easing = ref('ease-out')
-const { rerenderKey, forceRerender } = useForceRerender()
+const blur = ref(true);
+const duration = ref(1000);
+const delay = ref(200);
+const threshold = ref(0.1);
+const initialOpacity = ref(0);
+const easing = ref('ease-out');
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   { name: 'blur', type: 'boolean', default: 'false', description: 'Enable blur effect during fade animation.' },
   { name: 'duration', type: 'number', default: '1000', description: 'Animation duration in milliseconds.' },
   { name: 'easing', type: 'string', default: '"ease-out"', description: 'CSS easing function for the animation.' },
   { name: 'delay', type: 'number', default: '0', description: 'Delay before animation starts in milliseconds.' },
-  { name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold to trigger animation (0-1).' },
+  {
+    name: 'threshold',
+    type: 'number',
+    default: '0.1',
+    description: 'Intersection threshold to trigger animation (0-1).'
+  },
   { name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' }
-]
+];
 </script>
 
 <style scoped>
@@ -114,4 +144,4 @@ const propData = [
   max-width: 25ch;
   line-height: 1.6;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Animations/GlareHoverDemo.vue b/src/demo/Animations/GlareHoverDemo.vue
index c2f5e7f..b66ae2c 100644
--- a/src/demo/Animations/GlareHoverDemo.vue
+++ b/src/demo/Animations/GlareHoverDemo.vue
@@ -4,12 +4,19 @@
       <template #preview>
         <div class="demo-container relative h-[600px] overflow-hidden">
           <div class="flex justify-center items-center h-full">
-            <GlareHover background="#111" border-color="#222" border-radius="20px" width="400px" height="300px"
-              :glare-color="glareColor" :glare-opacity="glareOpacity" :glare-size="glareSize"
-              :transition-duration="transitionDuration" :play-once="playOnce">
-              <div class="text-center text-5xl font-black text-[#222] m-0">
-                Hover Me
-              </div>
+            <GlareHover
+              background="#111"
+              border-color="#222"
+              border-radius="20px"
+              width="400px"
+              height="300px"
+              :glare-color="glareColor"
+              :glare-opacity="glareOpacity"
+              :glare-size="glareSize"
+              :transition-duration="transitionDuration"
+              :play-once="playOnce"
+            >
+              <div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div>
             </GlareHover>
           </div>
         </div>
@@ -21,8 +28,14 @@
 
           <PreviewSlider title="Glare Size" v-model="glareSize" :min="100" :max="500" :step="25" value-unit="%" />
 
-          <PreviewSlider title="Transition Duration" v-model="transitionDuration" :min="200" :max="2000" :step="50"
-            value-unit="ms" />
+          <PreviewSlider
+            title="Transition Duration"
+            v-model="transitionDuration"
+            :min="200"
+            :max="2000"
+            :step="50"
+            value-unit="ms"
+          />
 
           <PreviewSwitch title="Play Once" v-model="playOnce" />
         </Customize>
@@ -42,23 +55,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewColor from '../../components/common/PreviewColor.vue'
-import GlareHover from '../../content/Animations/GlareHover/GlareHover.vue'
-import { glareHover } from '@/constants/code/Animations/glareHoverCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import GlareHover from '../../content/Animations/GlareHover/GlareHover.vue';
+import { glareHover } from '@/constants/code/Animations/glareHoverCode';
 
-const glareColor = ref('#ffffff')
-const glareOpacity = ref(0.3)
-const glareSize = ref(300)
-const transitionDuration = ref(800)
-const playOnce = ref(false)
+const glareColor = ref('#ffffff');
+const glareOpacity = ref(0.3);
+const glareSize = ref(300);
+const transitionDuration = ref(800);
+const playOnce = ref(false);
 
 const propData = [
   {
@@ -125,7 +138,7 @@ const propData = [
     name: 'playOnce',
     type: 'boolean',
     default: 'false',
-    description: 'If true, the glare only animates on hover and doesn\'t return on mouse leave.'
+    description: "If true, the glare only animates on hover and doesn't return on mouse leave."
   },
   {
     name: 'className',
@@ -139,5 +152,5 @@ const propData = [
     default: '{}',
     description: 'Additional inline styles.'
   }
-]
+];
 </script>
diff --git a/src/demo/Animations/MagnetDemo.vue b/src/demo/Animations/MagnetDemo.vue
index 439ee94..f171907 100644
--- a/src/demo/Animations/MagnetDemo.vue
+++ b/src/demo/Animations/MagnetDemo.vue
@@ -3,34 +3,51 @@
     <TabbedLayout>
       <template #preview>
         <h2 class="demo-title-extra">Container</h2>
+
         <div class="demo-container">
           <Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
-            <div class="magnet-container">
-              Hover Me!
-            </div>
+            <div class="magnet-container">Hover Me!</div>
           </Magnet>
-
         </div>
 
         <h2 class="demo-title-extra">Link</h2>
+
         <div class="demo-container">
-          <Magnet :key="rerenderKey + 1" :padding="Math.floor(padding / 2)" :disabled="disabled"
-            :magnetStrength="magnetStrength">
+          <Magnet
+            :key="rerenderKey + 1"
+            :padding="Math.floor(padding / 2)"
+            :disabled="disabled"
+            :magnetStrength="magnetStrength"
+          >
             <a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link">
-              Star <span class="accent">Vue Bits</span> on GitHub!
+              Star
+              <span class="accent">Vue Bits</span>
+              on GitHub!
             </a>
           </Magnet>
-
         </div>
 
         <Customize>
           <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Padding" v-model="padding" :min="0" :max="300" :step="10" value-unit="px"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Padding"
+            v-model="padding"
+            :min="0"
+            :max="300"
+            :step="10"
+            value-unit="px"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Strength" v-model="magnetStrength" :min="1" :max="10" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Strength"
+            v-model="magnetStrength"
+            :min="1"
+            :max="10"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -48,67 +65,67 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import Magnet from '../../content/Animations/Magnet/Magnet.vue'
-import { magnet } from '@/constants/code/Animations/magnetCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import Magnet from '../../content/Animations/Magnet/Magnet.vue';
+import { magnet } from '@/constants/code/Animations/magnetCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const disabled = ref(false)
-const padding = ref(100)
-const magnetStrength = ref(2)
-const { rerenderKey, forceRerender } = useForceRerender()
+const disabled = ref(false);
+const padding = ref(100);
+const magnetStrength = ref(2);
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   {
     name: 'padding',
     type: 'number',
     default: '100',
-    description: 'Specifies the distance (in pixels) around the element that activates the magnet pull.',
+    description: 'Specifies the distance (in pixels) around the element that activates the magnet pull.'
   },
   {
     name: 'disabled',
     type: 'boolean',
     default: 'false',
-    description: 'Disables the magnet effect when set to true.',
+    description: 'Disables the magnet effect when set to true.'
   },
   {
     name: 'magnetStrength',
     type: 'number',
     default: '2',
-    description: 'Controls the strength of the pull; higher values reduce movement, lower values increase it.',
+    description: 'Controls the strength of the pull; higher values reduce movement, lower values increase it.'
   },
   {
     name: 'activeTransition',
     type: 'string',
     default: '"transform 0.3s ease-out"',
-    description: 'CSS transition applied to the element when the magnet is active.',
+    description: 'CSS transition applied to the element when the magnet is active.'
   },
   {
     name: 'inactiveTransition',
     type: 'string',
     default: '"transform 0.5s ease-in-out"',
-    description: 'CSS transition applied when the magnet is inactive (mouse out of range).',
+    description: 'CSS transition applied when the magnet is inactive (mouse out of range).'
   },
   {
     name: 'wrapperClassName',
     type: 'string',
     default: '""',
-    description: 'Optional CSS class name for the outermost wrapper element.',
+    description: 'Optional CSS class name for the outermost wrapper element.'
   },
   {
     name: 'innerClassName',
     type: 'string',
     default: '""',
-    description: 'Optional CSS class name for the moving (inner) element.',
+    description: 'Optional CSS class name for the moving (inner) element.'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Animations/MagnetLinesDemo.vue b/src/demo/Animations/MagnetLinesDemo.vue
index 18466cb..a0d4087 100644
--- a/src/demo/Animations/MagnetLinesDemo.vue
+++ b/src/demo/Animations/MagnetLinesDemo.vue
@@ -3,13 +3,7 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container overflow-hidden flex justify-center pb-4 items-center">
-          <MagnetLines 
-            :rows="10" 
-            :columns="12" 
-            container-size="40vmin" 
-            line-width="2px" 
-            line-height="30px" 
-          />
+          <MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
         </div>
 
         <PropTable :data="propData" />
@@ -27,12 +21,12 @@
 </template>
 
 <script setup lang="ts">
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import MagnetLines from '../../content/Animations/MagnetLines/MagnetLines.vue'
-import { magnetLines } from '@/constants/code/Animations/magnetLinesCode'
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import MagnetLines from '../../content/Animations/MagnetLines/MagnetLines.vue';
+import { magnetLines } from '@/constants/code/Animations/magnetLinesCode';
 
 const propData = [
   {
@@ -89,5 +83,5 @@ const propData = [
     default: '{}',
     description: 'Inline styles for the container.'
   }
-]
+];
 </script>
diff --git a/src/demo/Animations/PixelTransitionDemo.vue b/src/demo/Animations/PixelTransitionDemo.vue
index 201a460..29bd6a8 100644
--- a/src/demo/Animations/PixelTransitionDemo.vue
+++ b/src/demo/Animations/PixelTransitionDemo.vue
@@ -3,33 +3,60 @@
     <TabbedLayout>
       <template #preview>
         <div
-          class="demo-container flex flex-col items-center justify-center min-h-[400px] max-h-[400px] relative overflow-hidden">
-          <PixelTransition :key="key" :grid-size="gridSize" :pixel-color="pixelColor"
-            :animation-step-duration="animationStepDuration" class-name="custom-pixel-card">
+          class="demo-container flex flex-col items-center justify-center min-h-[400px] max-h-[400px] relative overflow-hidden"
+        >
+          <PixelTransition
+            :key="key"
+            :grid-size="gridSize"
+            :pixel-color="pixelColor"
+            :animation-step-duration="animationStepDuration"
+            class-name="custom-pixel-card"
+          >
             <template #firstContent>
-              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"
-                alt="Default" style="width: 100%; height: 100%; object-fit: cover;" />
+              <img
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"
+                alt="Default"
+                style="width: 100%; height: 100%; object-fit: cover"
+              />
             </template>
+
             <template #secondContent>
-              <div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111;">
-                <p style="font-weight: 900; font-size: 3rem; color: #fff;">Meow!</p>
+              <div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111">
+                <p style="font-weight: 900; font-size: 3rem; color: #fff">Meow!</p>
               </div>
             </template>
           </PixelTransition>
+
           <div class="mt-2 text-[#a6a6a6]">Psst, hover the card!</div>
         </div>
 
         <Customize>
-          <PreviewSlider title="Grid Size" v-model="gridSize" :min="2" :max="50" :step="1"
-            @update:model-value="forceRerender" width="200" />
+          <PreviewSlider
+            title="Grid Size"
+            v-model="gridSize"
+            :min="2"
+            :max="50"
+            :step="1"
+            @update:model-value="forceRerender"
+            width="200"
+          />
 
-          <PreviewSlider title="Animation Duration" v-model="animationStepDuration" :min="0.1" :max="2" :step="0.1"
-            value-unit="s" @update:model-value="forceRerender" width="200" />
+          <PreviewSlider
+            title="Animation Duration"
+            v-model="animationStepDuration"
+            :min="0.1"
+            :max="2"
+            :step="0.1"
+            value-unit="s"
+            @update:model-value="forceRerender"
+            width="200"
+          />
 
           <PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -45,23 +72,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PixelTransition from '../../content/Animations/PixelTransition/PixelTransition.vue'
-import { pixelTransition } from '@/constants/code/Animations/pixelTransitionCode'
-import { useForceRerender } from '@/composables/useForceRerender'
-import PreviewColor from '../../components/common/PreviewColor.vue'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PixelTransition from '../../content/Animations/PixelTransition/PixelTransition.vue';
+import { pixelTransition } from '@/constants/code/Animations/pixelTransitionCode';
+import { useForceRerender } from '@/composables/useForceRerender';
+import PreviewColor from '../../components/common/PreviewColor.vue';
 
-const { rerenderKey: key, forceRerender } = useForceRerender()
-const gridSize = ref(8)
-const pixelColor = ref('#ffffff')
-const animationStepDuration = ref(0.4)
+const { rerenderKey: key, forceRerender } = useForceRerender();
+const gridSize = ref(8);
+const pixelColor = ref('#ffffff');
+const animationStepDuration = ref(0.4);
 
 const propData = [
   {
@@ -112,7 +139,7 @@ const propData = [
     default: '{}',
     description: 'Optional inline styles for the container.'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Backgrounds/AuroraDemo.vue b/src/demo/Backgrounds/AuroraDemo.vue
index 83a6abb..1473adb 100644
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -3,35 +3,70 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container">
-          <Aurora :color-stops="colorStops" :amplitude="amplitude" :blend="blend" :speed="speed"
-            :intensity="intensity" class="w-full" />
+          <Aurora
+            :color-stops="colorStops"
+            :amplitude="amplitude"
+            :blend="blend"
+            :speed="speed"
+            :intensity="intensity"
+            class="w-full"
+          />
         </div>
 
         <Customize>
           <div class="space-y-2">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-              Color Stops
-            </h3>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Color Stops</h3>
+
             <div class="flex gap-4">
-              <PreviewColor v-for="(color, index) in colorStops" :key="index" :title="`Color ${index + 1}`"
-                :model-value="color" @update:model-value="(value) => updateColorStop(index, value)" />
+              <PreviewColor
+                v-for="(color, index) in colorStops"
+                :key="index"
+                :title="`Color ${index + 1}`"
+                :model-value="color"
+                @update:model-value="value => updateColorStop(index, value)"
+              />
             </div>
           </div>
 
-          <PreviewSlider title="Amplitude" :model-value="amplitude" @update:model-value="amplitude = $event" :min="0"
-            :max="2" :step="0.1" />
+          <PreviewSlider
+            title="Amplitude"
+            :model-value="amplitude"
+            @update:model-value="amplitude = $event"
+            :min="0"
+            :max="2"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Blend" :model-value="blend" @update:model-value="blend = $event" :min="0" :max="1"
-            :step="0.1" />
+          <PreviewSlider
+            title="Blend"
+            :model-value="blend"
+            @update:model-value="blend = $event"
+            :min="0"
+            :max="1"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="3"
-            :step="0.1" />
+          <PreviewSlider
+            title="Speed"
+            :model-value="speed"
+            @update:model-value="speed = $event"
+            :min="0"
+            :max="3"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Intensity" :model-value="intensity" @update:model-value="intensity = $event" :min="0"
-            :max="2" :step="0.1" />
+          <PreviewSlider
+            title="Intensity"
+            :model-value="intensity"
+            @update:model-value="intensity = $event"
+            :min="0"
+            :max="2"
+            :step="0.1"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['ogl']" />
       </template>
 
@@ -47,39 +82,58 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue'
-import PreviewColor from '@/components/common/PreviewColor.vue'
-import PreviewSlider from '@/components/common/PreviewSlider.vue'
-import { aurora } from '@/constants/code/Backgrounds/auroraCode'
-
-const colorStops = ref(['#171D22', '#7cff67', '#171D22'])
-const amplitude = ref(1.0)
-const blend = ref(0.5)
-const speed = ref(1.0)
-const intensity = ref(1.0)
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import { aurora } from '@/constants/code/Backgrounds/auroraCode';
 
+const colorStops = ref(['#171D22', '#7cff67', '#171D22']);
+const amplitude = ref(1.0);
+const blend = ref(0.5);
+const speed = ref(1.0);
+const intensity = ref(1.0);
 
 const updateColorStop = (index: number, color: string) => {
-  colorStops.value[index] = color
-}
+  colorStops.value[index] = color;
+};
 
 const propData = [
-  { name: 'colorStops', type: 'string[]', default: "['#171D22', '#7cff67', '#171D22']", description: 'Array of color stops for the aurora gradient.' },
-  { name: 'amplitude', type: 'number', default: '1.0', description: 'Controls the height variation of the aurora effect.' },
-  { name: 'blend', type: 'number', default: '0.5', description: 'Controls the blending/smoothness of the aurora effect.' },
+  {
+    name: 'colorStops',
+    type: 'string[]',
+    default: "['#171D22', '#7cff67', '#171D22']",
+    description: 'Array of color stops for the aurora gradient.'
+  },
+  {
+    name: 'amplitude',
+    type: 'number',
+    default: '1.0',
+    description: 'Controls the height variation of the aurora effect.'
+  },
+  {
+    name: 'blend',
+    type: 'number',
+    default: '0.5',
+    description: 'Controls the blending/smoothness of the aurora effect.'
+  },
   { name: 'speed', type: 'number', default: '1.0', description: 'Controls the animation speed of the aurora effect.' },
-  { name: 'intensity', type: 'number', default: '1.0', description: 'Controls the overall intensity/opacity of the aurora effect.' },
+  {
+    name: 'intensity',
+    type: 'number',
+    default: '1.0',
+    description: 'Controls the overall intensity/opacity of the aurora effect.'
+  },
   { name: 'time', type: 'number', default: 'undefined', description: 'Optional time override for the animation.' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS class names for styling.' },
   { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
-]
+];
 </script>
 
 <style scoped>
@@ -87,4 +141,4 @@ const propData = [
   overflow: hidden;
   padding: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Backgrounds/BeamsDemo.vue b/src/demo/Backgrounds/BeamsDemo.vue
index 3907233..02d65be 100644
--- a/src/demo/Backgrounds/BeamsDemo.vue
+++ b/src/demo/Backgrounds/BeamsDemo.vue
@@ -83,6 +83,7 @@
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['three']" />
       </template>
 
@@ -98,26 +99,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '@/components/common/TabbedLayout.vue'
-import PropTable from '@/components/common/PropTable.vue'
-import Dependencies from '@/components/code/Dependencies.vue'
-import CliInstallation from '@/components/code/CliInstallation.vue'
-import CodeExample from '@/components/code/CodeExample.vue'
-import Customize from '@/components/common/Customize.vue'
-import Beams from '@/content/Backgrounds/Beams/Beams.vue'
-import PreviewColor from '@/components/common/PreviewColor.vue'
-import PreviewSlider from '@/components/common/PreviewSlider.vue'
-import { beams } from '@/constants/code/Backgrounds/beamsCode'
+import { ref } from 'vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import Customize from '@/components/common/Customize.vue';
+import Beams from '@/content/Backgrounds/Beams/Beams.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import { beams } from '@/constants/code/Backgrounds/beamsCode';
 
-const beamWidth = ref(3)
-const beamHeight = ref(30)
-const beamNumber = ref(20)
-const lightColor = ref('#ffffff')
-const speed = ref(2)
-const noiseIntensity = ref(1.75)
-const scale = ref(0.2)
-const rotation = ref(30)
+const beamWidth = ref(3);
+const beamHeight = ref(30);
+const beamNumber = ref(20);
+const lightColor = ref('#ffffff');
+const speed = ref(2);
+const noiseIntensity = ref(1.75);
+const scale = ref(0.2);
+const rotation = ref(30);
 
 const propData = [
   {
@@ -168,7 +169,7 @@ const propData = [
     default: '0',
     description: 'Rotation of the entire beams system in degrees.'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Backgrounds/DotGridDemo.vue b/src/demo/Backgrounds/DotGridDemo.vue
index 2caa6fc..680b673 100644
--- a/src/demo/Backgrounds/DotGridDemo.vue
+++ b/src/demo/Backgrounds/DotGridDemo.vue
@@ -2,47 +2,108 @@
   <div class="dot-grid-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="height: 500px; overflow: hidden;">
-          <DotGrid :key="rerenderKey" :dot-size="dotSize" :gap="gap" :base-color="baseColor" :active-color="activeColor"
-            :proximity="proximity" :speed-trigger="speedTrigger" :shock-radius="shockRadius"
-            :shock-strength="shockStrength" :max-speed="maxSpeed" :resistance="resistance"
-            :return-duration="returnDuration" class-name="dot-grid-demo-canvas" />
+        <div class="demo-container" style="height: 500px; overflow: hidden">
+          <DotGrid
+            :key="rerenderKey"
+            :dot-size="dotSize"
+            :gap="gap"
+            :base-color="baseColor"
+            :active-color="activeColor"
+            :proximity="proximity"
+            :speed-trigger="speedTrigger"
+            :shock-radius="shockRadius"
+            :shock-strength="shockStrength"
+            :max-speed="maxSpeed"
+            :resistance="resistance"
+            :return-duration="returnDuration"
+            class-name="dot-grid-demo-canvas"
+          />
         </div>
 
         <Customize>
           <div class="color-controls">
             <PreviewColor title="Base Color" v-model="baseColor" @update:model-value="forceRerender" />
+
             <PreviewColor title="Active Color" v-model="activeColor" @update:model-value="forceRerender" />
           </div>
 
-          <PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Dot Size"
+            v-model="dotSize"
+            :min="2"
+            :max="50"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
 
           <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Proximity"
+            v-model="proximity"
+            :min="50"
+            :max="500"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Speed Trigger"
+            v-model="speedTrigger"
+            :min="50"
+            :max="500"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Shock Radius"
+            v-model="shockRadius"
+            :min="50"
+            :max="500"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Shock Strength"
+            v-model="shockStrength"
+            :min="1"
+            :max="20"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Max Speed"
+            v-model="maxSpeed"
+            :min="1000"
+            :max="10000"
+            :step="100"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Resistance (Inertia)"
+            v-model="resistance"
+            :min="100"
+            :max="2000"
+            :step="50"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Return Duration (Inertia)"
+            v-model="returnDuration"
+            :min="0.1"
+            :max="5"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -58,47 +119,67 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewColor from '../../components/common/PreviewColor.vue'
-import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue'
-import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue';
+import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const dotSize = ref(5)
-const gap = ref(15)
-const baseColor = ref('#333333')
-const activeColor = ref('#27FF64')
-const proximity = ref(120)
-const speedTrigger = ref(100)
-const shockRadius = ref(250)
-const shockStrength = ref(5)
-const maxSpeed = ref(5000)
-const resistance = ref(750)
-const returnDuration = ref(1.5)
-const { rerenderKey, forceRerender } = useForceRerender()
+const dotSize = ref(5);
+const gap = ref(15);
+const baseColor = ref('#333333');
+const activeColor = ref('#27FF64');
+const proximity = ref(120);
+const speedTrigger = ref(100);
+const shockRadius = ref(250);
+const shockStrength = ref(5);
+const maxSpeed = ref(5000);
+const resistance = ref(750);
+const returnDuration = ref(1.5);
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   { name: 'dotSize', type: 'number', default: '16', description: 'Size of each dot in pixels.' },
   { name: 'gap', type: 'number', default: '32', description: 'Gap between each dot in pixels.' },
   { name: 'baseColor', type: 'string', default: "'#27FF64'", description: 'Base color of the dots.' },
-  { name: 'activeColor', type: 'string', default: "'#27FF64'", description: 'Color of dots when hovered or activated.' },
-  { name: 'proximity', type: 'number', default: '150', description: 'Radius around the mouse pointer within which dots react.' },
-  { name: 'speedTrigger', type: 'number', default: '100', description: 'Mouse speed threshold to trigger inertia effect.' },
+  {
+    name: 'activeColor',
+    type: 'string',
+    default: "'#27FF64'",
+    description: 'Color of dots when hovered or activated.'
+  },
+  {
+    name: 'proximity',
+    type: 'number',
+    default: '150',
+    description: 'Radius around the mouse pointer within which dots react.'
+  },
+  {
+    name: 'speedTrigger',
+    type: 'number',
+    default: '100',
+    description: 'Mouse speed threshold to trigger inertia effect.'
+  },
   { name: 'shockRadius', type: 'number', default: '250', description: 'Radius of the shockwave effect on click.' },
   { name: 'shockStrength', type: 'number', default: '5', description: 'Strength of the shockwave effect on click.' },
   { name: 'maxSpeed', type: 'number', default: '5000', description: 'Maximum speed for inertia calculation.' },
   { name: 'resistance', type: 'number', default: '750', description: 'Resistance for the inertia effect.' },
-  { name: 'returnDuration', type: 'number', default: '1.5', description: 'Duration for dots to return to their original position after inertia.' },
+  {
+    name: 'returnDuration',
+    type: 'number',
+    default: '1.5',
+    description: 'Duration for dots to return to their original position after inertia.'
+  },
   { name: 'className', type: 'string', default: "''", description: 'Additional CSS classes for the component.' },
   { name: 'style', type: 'object', default: '{}', description: 'Inline styles for the component.' }
-]
+];
 </script>
 
 <style scoped>
@@ -112,4 +193,4 @@ const propData = [
   gap: 1rem;
   margin-bottom: 1rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index 5dd0dd6..6cfd63b 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -2,16 +2,19 @@
   <TabbedLayout>
     <template #preview>
       <h2 className="demo-title-extra">Images</h2>
+
       <div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
         <GridMotion :items="images" />
       </div>
 
       <h2 className="demo-title-extra">Custom Content</h2>
+
       <div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
         <GridMotion :items="items" />
       </div>
 
       <PropTable :data="propData" />
+
       <Dependencies :dependency-list="['gsap']" />
     </template>
 
@@ -26,59 +29,58 @@
 </template>
 
 <script setup lang="ts">
-import CliInstallation from "../../components/code/CliInstallation.vue";
-import CodeExample from "../../components/code/CodeExample.vue";
-import Dependencies from "../../components/code/Dependencies.vue";
-import PropTable from "../../components/common/PropTable.vue";
-import TabbedLayout from "../../components/common/TabbedLayout.vue";
-import GridMotion from "../../content/Backgrounds/GridMotion/GridMotion.vue";
-import { gridMotion } from "../../constants/code/Backgrounds/gridMotionCode";
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import GridMotion from '../../content/Backgrounds/GridMotion/GridMotion.vue';
+import { gridMotion } from '../../constants/code/Backgrounds/gridMotionCode';
 
 const propData = [
   {
-    name: "items",
-    type: "array",
-    default: "[]",
-    description:
-      "An array of items to display in the grid. Each item can be a string, JSX element, or an image URL.",
+    name: 'items',
+    type: 'array',
+    default: '[]',
+    description: 'An array of items to display in the grid. Each item can be a string, JSX element, or an image URL.'
   },
   {
-    name: "gradientColor",
-    type: "string",
-    default: "black",
-    description: "Controls the color of the radial gradient used as the background.",
-  },
+    name: 'gradientColor',
+    type: 'string',
+    default: 'black',
+    description: 'Controls the color of the radial gradient used as the background.'
+  }
 ];
 
 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";
+  '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);
 
 const items = [
-  "Item 1",
+  '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",
+  '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",
+  '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",
+  '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",
+  '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",
+  '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",
+  '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",
+  '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",
+  '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",
+  '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'
 ];
 </script>
diff --git a/src/demo/Backgrounds/IridescenceDemo.vue b/src/demo/Backgrounds/IridescenceDemo.vue
index c91dc19..80f1b38 100644
--- a/src/demo/Backgrounds/IridescenceDemo.vue
+++ b/src/demo/Backgrounds/IridescenceDemo.vue
@@ -14,13 +14,20 @@
 
         <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" @update:modelValue="forceRerender" />
 
-        <PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="amplitude" title="Amplitude"
-          @update:modelValue="forceRerender" />
+        <PreviewSlider
+          :min="0"
+          :max="0.5"
+          :step="0.01"
+          v-model="amplitude"
+          title="Amplitude"
+          @update:modelValue="forceRerender"
+        />
 
         <PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />
       </Customize>
 
       <PropTable :data="propData" />
+
       <Dependencies :dependencyList="['ogl']" />
     </template>
 
@@ -35,52 +42,52 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue'
-import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode'
-import { useForceRerender } from '../../composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue';
+import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode';
+import { useForceRerender } from '../../composables/useForceRerender';
 
-const colors = ref<[number, number, number]>([1, 1, 1])
-const speed = ref(1)
-const amplitude = ref(0.1)
-const mouseInteraction = ref(true)
+const colors = ref<[number, number, number]>([1, 1, 1]);
+const speed = ref(1);
+const amplitude = ref(0.1);
+const mouseInteraction = ref(true);
 
-const { rerenderKey: key, forceRerender } = useForceRerender()
+const { rerenderKey: key, forceRerender } = useForceRerender();
 
 const propData = [
   {
-    name: "color",
-    type: "Array<number>",
-    default: "[1, 1, 1]",
-    description: "Base color as an array of RGB values (each between 0 and 1)."
+    name: 'color',
+    type: 'Array<number>',
+    default: '[1, 1, 1]',
+    description: 'Base color as an array of RGB values (each between 0 and 1).'
   },
   {
-    name: "speed",
-    type: "number",
-    default: "1.0",
-    description: "Speed multiplier for the animation."
+    name: 'speed',
+    type: 'number',
+    default: '1.0',
+    description: 'Speed multiplier for the animation.'
   },
   {
-    name: "amplitude",
-    type: "number",
-    default: "0.1",
-    description: "Amplitude for the mouse-driven effect."
+    name: 'amplitude',
+    type: 'number',
+    default: '0.1',
+    description: 'Amplitude for the mouse-driven effect.'
   },
   {
-    name: "mouseReact",
-    type: "boolean",
-    default: "true",
-    description: "Enable or disable mouse interaction with the shader."
+    name: 'mouseReact',
+    type: 'boolean',
+    default: 'true',
+    description: 'Enable or disable mouse interaction with the shader.'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -88,4 +95,4 @@ const propData = [
   overflow: hidden;
   padding: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Backgrounds/LetterGlitchDemo.vue b/src/demo/Backgrounds/LetterGlitchDemo.vue
index bb75061..4a7e225 100644
--- a/src/demo/Backgrounds/LetterGlitchDemo.vue
+++ b/src/demo/Backgrounds/LetterGlitchDemo.vue
@@ -31,11 +31,7 @@
             :step="5"
           />
 
-          <PreviewSwitch
-            title="Smooth Animation"
-            :model-value="smooth"
-            @update:model-value="updateSmooth"
-          />
+          <PreviewSwitch title="Smooth Animation" :model-value="smooth" @update:model-value="updateSmooth" />
 
           <PreviewSwitch
             title="Show Center Vignette"
@@ -51,6 +47,7 @@
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="[]" />
       </template>
 
@@ -66,58 +63,88 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue'
-import PreviewSlider from '@/components/common/PreviewSlider.vue'
-import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
-import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const smooth = ref(true)
-const speed = ref(10)
-const colors = ref(['#2b4539', '#61dca3', '#61b3dc'])
-const showCenterVignette = ref(true)
-const showOuterVignette = ref(false)
+const smooth = ref(true);
+const speed = ref(10);
+const colors = ref(['#2b4539', '#61dca3', '#61b3dc']);
+const showCenterVignette = ref(true);
+const showOuterVignette = ref(false);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const randomHex = () => {
-  return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')
-}
+  return (
+    '#' +
+    Math.floor(Math.random() * 16777215)
+      .toString(16)
+      .padStart(6, '0')
+  );
+};
 
 const randomizeColors = () => {
-  colors.value = [randomHex(), randomHex(), randomHex()]
-  forceRerender()
-}
+  colors.value = [randomHex(), randomHex(), randomHex()];
+  forceRerender();
+};
 
 const updateSmooth = (value: boolean) => {
-  smooth.value = value
-  forceRerender()
-}
+  smooth.value = value;
+  forceRerender();
+};
 
 const updateCenterVignette = (value: boolean) => {
-  showCenterVignette.value = value
-  forceRerender()
-}
+  showCenterVignette.value = value;
+  forceRerender();
+};
 
 const updateOuterVignette = (value: boolean) => {
-  showOuterVignette.value = value
-  forceRerender()
-}
+  showOuterVignette.value = value;
+  forceRerender();
+};
 
 const propData = [
-  { name: 'glitchColors', type: 'string[]', default: "['#2b4539', '#61dca3', '#61b3dc']", description: 'Controls the colors of the letters rendered in the canvas.' },
-  { name: 'glitchSpeed', type: 'number', default: '50', description: 'Controls the speed at which letters scramble in the animation.' },
-  { name: 'centerVignette', type: 'boolean', default: 'false', description: 'When true, renders a radial gradient in the center of the container' },
-  { name: 'outerVignette', type: 'boolean', default: 'true', description: 'When true, renders an inner radial gradient around the edges of the container.' },
-  { name: 'smooth', type: 'boolean', default: 'true', description: 'When true, smoothens the animation of the letters for a more subtle feel.' }
-]
+  {
+    name: 'glitchColors',
+    type: 'string[]',
+    default: "['#2b4539', '#61dca3', '#61b3dc']",
+    description: 'Controls the colors of the letters rendered in the canvas.'
+  },
+  {
+    name: 'glitchSpeed',
+    type: 'number',
+    default: '50',
+    description: 'Controls the speed at which letters scramble in the animation.'
+  },
+  {
+    name: 'centerVignette',
+    type: 'boolean',
+    default: 'false',
+    description: 'When true, renders a radial gradient in the center of the container'
+  },
+  {
+    name: 'outerVignette',
+    type: 'boolean',
+    default: 'true',
+    description: 'When true, renders an inner radial gradient around the edges of the container.'
+  },
+  {
+    name: 'smooth',
+    type: 'boolean',
+    default: 'true',
+    description: 'When true, smoothens the animation of the letters for a more subtle feel.'
+  }
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Backgrounds/LightningDemo.vue b/src/demo/Backgrounds/LightningDemo.vue
index 084a571..f4fe2aa 100644
--- a/src/demo/Backgrounds/LightningDemo.vue
+++ b/src/demo/Backgrounds/LightningDemo.vue
@@ -3,28 +3,65 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container">
-          <Lightning :hue="hue" :x-offset="xOffset" :speed="speed" :intensity="intensity"
-            :size="size" class="w-full h-full" />
+          <Lightning
+            :hue="hue"
+            :x-offset="xOffset"
+            :speed="speed"
+            :intensity="intensity"
+            :size="size"
+            class="w-full h-full"
+          />
         </div>
 
         <Customize>
-          <PreviewSlider title="Hue" :model-value="hue" @update:model-value="hue = $event" :min="0" :max="360"
-            :step="1" />
+          <PreviewSlider
+            title="Hue"
+            :model-value="hue"
+            @update:model-value="hue = $event"
+            :min="0"
+            :max="360"
+            :step="1"
+          />
 
-          <PreviewSlider title="X Offset" :model-value="xOffset" @update:model-value="xOffset = $event" :min="-2"
-            :max="2" :step="0.1" />
+          <PreviewSlider
+            title="X Offset"
+            :model-value="xOffset"
+            @update:model-value="xOffset = $event"
+            :min="-2"
+            :max="2"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0.5" :max="2"
-            :step="0.1" />
+          <PreviewSlider
+            title="Speed"
+            :model-value="speed"
+            @update:model-value="speed = $event"
+            :min="0.5"
+            :max="2"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Intensity" :model-value="intensity" @update:model-value="intensity = $event" :min="0.1"
-            :max="2" :step="0.1" />
+          <PreviewSlider
+            title="Intensity"
+            :model-value="intensity"
+            @update:model-value="intensity = $event"
+            :min="0.1"
+            :max="2"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Size" :model-value="size" @update:model-value="size = $event" :min="0.1" :max="3"
-            :step="0.1" />
+          <PreviewSlider
+            title="Size"
+            :model-value="size"
+            @update:model-value="size = $event"
+            :min="0.1"
+            :max="3"
+            :step="0.1"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="[]" />
       </template>
 
@@ -40,30 +77,35 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue'
-import PreviewSlider from '@/components/common/PreviewSlider.vue'
-import { lightning } from '@/constants/code/Backgrounds/lightningCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import { lightning } from '@/constants/code/Backgrounds/lightningCode';
 
-const hue = ref(160)
-const xOffset = ref(0)
-const speed = ref(1)
-const intensity = ref(1)
-const size = ref(1)
+const hue = ref(160);
+const xOffset = ref(0);
+const speed = ref(1);
+const intensity = ref(1);
+const size = ref(1);
 
 const propData = [
   { name: 'hue', type: 'number', default: '230', description: 'Hue of the lightning in degrees (0 to 360).' },
-  { name: 'xOffset', type: 'number', default: '0', description: 'Horizontal offset of the lightning in normalized units.' },
+  {
+    name: 'xOffset',
+    type: 'number',
+    default: '0',
+    description: 'Horizontal offset of the lightning in normalized units.'
+  },
   { name: 'speed', type: 'number', default: '1', description: 'Animation speed multiplier for the lightning.' },
   { name: 'intensity', type: 'number', default: '1', description: 'Brightness multiplier for the lightning.' },
   { name: 'size', type: 'number', default: '1', description: 'Scale factor for the bolt size.' }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Backgrounds/ParticlesDemo.vue b/src/demo/Backgrounds/ParticlesDemo.vue
index 0bf30b4..6e84cb3 100644
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -3,10 +3,18 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container">
-          <Particles :key="rerenderKey" :particle-colors="[color]" :particle-count="particleCount"
-            :particle-spread="particleSpread" :speed="speed" :particle-base-size="baseSize"
-            :move-particles-on-hover="moveParticlesOnHover" :alpha-particles="alphaParticles"
-            :disable-rotation="disableRotation" class="w-full h-full" />
+          <Particles
+            :key="rerenderKey"
+            :particle-colors="[color]"
+            :particle-count="particleCount"
+            :particle-spread="particleSpread"
+            :speed="speed"
+            :particle-base-size="baseSize"
+            :move-particles-on-hover="moveParticlesOnHover"
+            :alpha-particles="alphaParticles"
+            :disable-rotation="disableRotation"
+            class="w-full h-full"
+          />
         </div>
 
         <Customize>
@@ -14,29 +22,63 @@
             <PreviewColor title="Color" :model-value="color" @update:model-value="updateColor" />
           </div>
 
-          <PreviewSlider title="Count" :model-value="particleCount" @update:model-value="particleCount = $event"
-            :min="100" :max="1000" :step="100" />
+          <PreviewSlider
+            title="Count"
+            :model-value="particleCount"
+            @update:model-value="particleCount = $event"
+            :min="100"
+            :max="1000"
+            :step="100"
+          />
 
-          <PreviewSlider title="Spread" :model-value="particleSpread" @update:model-value="particleSpread = $event"
-            :min="10" :max="100" :step="10" />
+          <PreviewSlider
+            title="Spread"
+            :model-value="particleSpread"
+            @update:model-value="particleSpread = $event"
+            :min="10"
+            :max="100"
+            :step="10"
+          />
 
-          <PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="2"
-            :step="0.1" />
+          <PreviewSlider
+            title="Speed"
+            :model-value="speed"
+            @update:model-value="speed = $event"
+            :min="0"
+            :max="2"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Base Size" :model-value="baseSize" @update:model-value="baseSize = $event" :min="100"
-            :max="1000" :step="100" />
+          <PreviewSlider
+            title="Base Size"
+            :model-value="baseSize"
+            @update:model-value="baseSize = $event"
+            :min="100"
+            :max="1000"
+            :step="100"
+          />
 
-          <PreviewSwitch title="Mouse Interaction" :model-value="moveParticlesOnHover"
-            @update:model-value="moveParticlesOnHover = $event" />
+          <PreviewSwitch
+            title="Mouse Interaction"
+            :model-value="moveParticlesOnHover"
+            @update:model-value="moveParticlesOnHover = $event"
+          />
 
-          <PreviewSwitch title="Particle Transparency" :model-value="alphaParticles"
-            @update:model-value="alphaParticles = $event" />
+          <PreviewSwitch
+            title="Particle Transparency"
+            :model-value="alphaParticles"
+            @update:model-value="alphaParticles = $event"
+          />
 
-          <PreviewSwitch title="Disable Rotation" :model-value="disableRotation"
-            @update:model-value="disableRotation = $event" />
+          <PreviewSwitch
+            title="Disable Rotation"
+            :model-value="disableRotation"
+            @update:model-value="disableRotation = $event"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['ogl']" />
       </template>
 
@@ -52,49 +94,89 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import Particles from '@/content/Backgrounds/Particles/Particles.vue'
-import PreviewSlider from '@/components/common/PreviewSlider.vue'
-import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
-import PreviewColor from '@/components/common/PreviewColor.vue'
-import { particles } from '@/constants/code/Backgrounds/particlesCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import Particles from '@/content/Backgrounds/Particles/Particles.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import { particles } from '@/constants/code/Backgrounds/particlesCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const color = ref('#ffffff')
-const particleCount = ref(200)
-const particleSpread = ref(10)
-const speed = ref(0.1)
-const baseSize = ref(100)
-const moveParticlesOnHover = ref(true)
-const alphaParticles = ref(false)
-const disableRotation = ref(false)
+const color = ref('#ffffff');
+const particleCount = ref(200);
+const particleSpread = ref(10);
+const speed = ref(0.1);
+const baseSize = ref(100);
+const moveParticlesOnHover = ref(true);
+const alphaParticles = ref(false);
+const disableRotation = ref(false);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const updateColor = (value: string) => {
-  color.value = value
-  forceRerender()
-}
+  color.value = value;
+  forceRerender();
+};
 
 const propData = [
   { name: 'particleCount', type: 'number', default: '200', description: 'The number of particles to generate.' },
-  { name: 'particleSpread', type: 'number', default: '10', description: 'Controls how far particles are spread from the center.' },
+  {
+    name: 'particleSpread',
+    type: 'number',
+    default: '10',
+    description: 'Controls how far particles are spread from the center.'
+  },
   { name: 'speed', type: 'number', default: '0.1', description: 'Speed factor controlling the animation pace.' },
-  { name: 'particleColors', type: 'string[]', default: "['#ffffff']", description: 'An array of hex color strings used to color the particles.' },
-  { name: 'moveParticlesOnHover', type: 'boolean', default: 'false', description: 'Determines if particles should move in response to mouse hover.' },
-  { name: 'particleHoverFactor', type: 'number', default: '1', description: 'Multiplier for the particle movement when hovering.' },
-  { name: 'alphaParticles', type: 'boolean', default: 'false', description: 'If true, particles are rendered with varying transparency; otherwise, as solid circles.' },
+  {
+    name: 'particleColors',
+    type: 'string[]',
+    default: "['#ffffff']",
+    description: 'An array of hex color strings used to color the particles.'
+  },
+  {
+    name: 'moveParticlesOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Determines if particles should move in response to mouse hover.'
+  },
+  {
+    name: 'particleHoverFactor',
+    type: 'number',
+    default: '1',
+    description: 'Multiplier for the particle movement when hovering.'
+  },
+  {
+    name: 'alphaParticles',
+    type: 'boolean',
+    default: 'false',
+    description: 'If true, particles are rendered with varying transparency; otherwise, as solid circles.'
+  },
   { name: 'particleBaseSize', type: 'number', default: '100', description: 'The base size of the particles.' },
-  { name: 'sizeRandomness', type: 'number', default: '1', description: 'Controls the variation in particle sizes (0 means all particles have the same size).' },
-  { name: 'cameraDistance', type: 'number', default: '20', description: 'Distance from the camera to the particle system.' },
-  { name: 'disableRotation', type: 'boolean', default: 'false', description: 'If true, stops the particle system from rotating.' }
-]
+  {
+    name: 'sizeRandomness',
+    type: 'number',
+    default: '1',
+    description: 'Controls the variation in particle sizes (0 means all particles have the same size).'
+  },
+  {
+    name: 'cameraDistance',
+    type: 'number',
+    default: '20',
+    description: 'Distance from the camera to the particle system.'
+  },
+  {
+    name: 'disableRotation',
+    type: 'boolean',
+    default: 'false',
+    description: 'If true, stops the particle system from rotating.'
+  }
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Backgrounds/SilkDemo.vue b/src/demo/Backgrounds/SilkDemo.vue
index 8be0cd5..e37a294 100644
--- a/src/demo/Backgrounds/SilkDemo.vue
+++ b/src/demo/Backgrounds/SilkDemo.vue
@@ -3,27 +3,58 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container">
-          <Silk :speed="speed" :scale="scale" :color="color" :noise-intensity="noiseIntensity" :rotation="rotation"
-            class="w-full h-full" />
+          <Silk
+            :speed="speed"
+            :scale="scale"
+            :color="color"
+            :noise-intensity="noiseIntensity"
+            :rotation="rotation"
+            class="w-full h-full"
+          />
         </div>
 
         <Customize>
-          <PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="10"
-            :step="0.1" />
+          <PreviewSlider
+            title="Speed"
+            :model-value="speed"
+            @update:model-value="speed = $event"
+            :min="0"
+            :max="10"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Scale" :model-value="scale" @update:model-value="scale = $event" :min="0.1" :max="3"
-            :step="0.1" />
+          <PreviewSlider
+            title="Scale"
+            :model-value="scale"
+            @update:model-value="scale = $event"
+            :min="0.1"
+            :max="3"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Noise Intensity" :model-value="noiseIntensity"
-            @update:model-value="noiseIntensity = $event" :min="0" :max="3" :step="0.1" />
+          <PreviewSlider
+            title="Noise Intensity"
+            :model-value="noiseIntensity"
+            @update:model-value="noiseIntensity = $event"
+            :min="0"
+            :max="3"
+            :step="0.1"
+          />
 
-          <PreviewSlider title="Rotation" :model-value="rotation" @update:model-value="rotation = $event" :min="0"
-            :max="6.28" :step="0.1" />
+          <PreviewSlider
+            title="Rotation"
+            :model-value="rotation"
+            @update:model-value="rotation = $event"
+            :min="0"
+            :max="6.28"
+            :step="0.1"
+          />
 
           <PreviewColor title="Color" :model-value="color" @update:model-value="color = $event" />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['ogl']" />
       </template>
 
@@ -39,23 +70,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import Silk from '@/content/Backgrounds/Silk/Silk.vue'
-import PreviewColor from '@/components/common/PreviewColor.vue'
-import PreviewSlider from '@/components/common/PreviewSlider.vue'
-import { silk } from '@/constants/code/Backgrounds/silkCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import Silk from '@/content/Backgrounds/Silk/Silk.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import { silk } from '@/constants/code/Backgrounds/silkCode';
 
-const speed = ref(5)
-const scale = ref(1)
-const color = ref('#7B7481')
-const noiseIntensity = ref(1.5)
-const rotation = ref(0)
+const speed = ref(5);
+const scale = ref(1);
+const color = ref('#7B7481');
+const noiseIntensity = ref(1.5);
+const rotation = ref(0);
 
 const propData = [
   { name: 'speed', type: 'number', default: '5', description: 'Animation speed multiplier' },
@@ -65,7 +96,7 @@ const propData = [
   { name: 'rotation', type: 'number', default: '0', description: 'Rotation angle in radians' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS class names for styling.' },
   { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Backgrounds/SquaresDemo.vue b/src/demo/Backgrounds/SquaresDemo.vue
index f0e55c0..cda0e33 100644
--- a/src/demo/Backgrounds/SquaresDemo.vue
+++ b/src/demo/Backgrounds/SquaresDemo.vue
@@ -3,21 +3,31 @@
     <template #preview>
       <div class="relative min-h-[200px] demo-container overflow-hidden p-0">
         <div class="w-full h-[500px] overflow-hidden">
-          <Squares :squareSize="size" :speed="speed" :direction="direction" :borderColor="borderColor"
-            :hoverFillColor="hoverColor" />
+          <Squares
+            :squareSize="size"
+            :speed="speed"
+            :direction="direction"
+            :borderColor="borderColor"
+            :hoverFillColor="hoverColor"
+          />
         </div>
       </div>
 
       <Customize>
         <div class="flex items-center mb-6">
           <span class="text-sm mr-2">Direction</span>
+
           <div class="flex">
-            <button v-for="dir in directions" :key="dir.value" @click="direction = dir.value" :class="[
-              'px-3 py-2 text-xs h-8 text-white border-r border-[#333] cursor-pointer last:border-r-0',
-              direction === dir.value
-                ? 'bg-[#222] hover:bg-[#222]'
-                : 'bg-[#111] hover:bg-[#111]'
-            ]" class="first:rounded-l last:rounded-r">
+            <button
+              v-for="dir in directions"
+              :key="dir.value"
+              @click="direction = dir.value"
+              :class="[
+                'px-3 py-2 text-xs h-8 text-white border-r border-[#333] cursor-pointer last:border-r-0',
+                direction === dir.value ? 'bg-[#222] hover:bg-[#222]' : 'bg-[#111] hover:bg-[#111]'
+              ]"
+              class="first:rounded-l last:rounded-r"
+            >
               {{ dir.label }}
             </button>
           </div>
@@ -32,7 +42,6 @@
 
           <PreviewColor v-model="hoverColor" title="Hover Color" />
         </div>
-
       </Customize>
 
       <PropTable :data="propData" />
@@ -49,22 +58,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewColor from '../../components/common/PreviewColor.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import Squares from '../../content/Backgrounds/Squares/Squares.vue'
-import { squares } from '../../constants/code/Backgrounds/squaresCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import Squares from '../../content/Backgrounds/Squares/Squares.vue';
+import { squares } from '../../constants/code/Backgrounds/squaresCode';
 
-const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal')
-const borderColor = ref('#333')
-const hoverColor = ref('#27FF64')
-const size = ref(40)
-const speed = ref(0.5)
+const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal');
+const borderColor = ref('#333');
+const hoverColor = ref('#27FF64');
+const size = ref(40);
+const speed = ref(0.5);
 
 const directions = [
   { value: 'diagonal', label: 'Diagonal' },
@@ -72,40 +81,40 @@ const directions = [
   { value: 'right', label: 'Right' },
   { value: 'down', label: 'Down' },
   { value: 'left', label: 'Left' }
-] as const
+] as const;
 
 const propData = [
   {
-    name: "direction",
-    type: "string",
+    name: 'direction',
+    type: 'string',
     default: "'right'",
     description: "Direction of square animation. Options: 'diagonal', 'up', 'right', 'down', 'left'."
   },
   {
-    name: "speed",
-    type: "number",
-    default: "1",
-    description: "Animation speed multiplier."
+    name: 'speed',
+    type: 'number',
+    default: '1',
+    description: 'Animation speed multiplier.'
   },
   {
-    name: "borderColor",
-    type: "string",
+    name: 'borderColor',
+    type: 'string',
     default: "'#999'",
-    description: "Color of the square borders."
+    description: 'Color of the square borders.'
   },
   {
-    name: "squareSize",
-    type: "number",
-    default: "40",
-    description: "Size of individual squares in pixels."
+    name: 'squareSize',
+    type: 'number',
+    default: '40',
+    description: 'Size of individual squares in pixels.'
   },
   {
-    name: "hoverFillColor",
-    type: "string",
+    name: 'hoverFillColor',
+    type: 'string',
     default: "'#222'",
-    description: "Fill color when hovering over squares."
+    description: 'Fill color when hovering over squares.'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -113,4 +122,4 @@ const propData = [
   overflow: hidden;
   padding: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Backgrounds/ThreadsDemo.vue b/src/demo/Backgrounds/ThreadsDemo.vue
index b8c7bf9..3c11734 100644
--- a/src/demo/Backgrounds/ThreadsDemo.vue
+++ b/src/demo/Backgrounds/ThreadsDemo.vue
@@ -2,8 +2,12 @@
   <TabbedLayout>
     <template #preview>
       <div class="relative demo-container h-[500px] overflow-hidden p-0">
-        <Threads :amplitude="amplitude" :distance="distance" :enableMouseInteraction="enableMouseInteraction"
-          :color="[1, 1, 1]" />
+        <Threads
+          :amplitude="amplitude"
+          :distance="distance"
+          :enableMouseInteraction="enableMouseInteraction"
+          :color="[1, 1, 1]"
+        />
       </div>
 
       <Customize>
@@ -15,6 +19,7 @@
       </Customize>
 
       <PropTable :data="propData" />
+
       <Dependencies :dependencyList="['ogl']" />
     </template>
 
@@ -29,48 +34,48 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import Threads from '../../content/Backgrounds/Threads/Threads.vue'
-import { threads } from '../../constants/code/Backgrounds/threadsCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import Threads from '../../content/Backgrounds/Threads/Threads.vue';
+import { threads } from '../../constants/code/Backgrounds/threadsCode';
 
-const amplitude = ref(1)
-const distance = ref(0)
-const enableMouseInteraction = ref(true)
+const amplitude = ref(1);
+const distance = ref(0);
+const enableMouseInteraction = ref(true);
 
 const propData = [
   {
-    name: "color",
-    type: "[number, number, number]",
-    default: "[1, 1, 1]",
-    description: "Customizes the color of the lines (RGB)."
+    name: 'color',
+    type: '[number, number, number]',
+    default: '[1, 1, 1]',
+    description: 'Customizes the color of the lines (RGB).'
   },
   {
-    name: "amplitude",
-    type: "number",
-    default: "1",
-    description: "Adjusts the intensity of the wave effect on the lines."
+    name: 'amplitude',
+    type: 'number',
+    default: '1',
+    description: 'Adjusts the intensity of the wave effect on the lines.'
   },
   {
-    name: "distance",
-    type: "number",
-    default: "0",
-    description: "Controls the spacing between the lines. A value of 0 means no offset."
+    name: 'distance',
+    type: 'number',
+    default: '0',
+    description: 'Controls the spacing between the lines. A value of 0 means no offset.'
   },
   {
-    name: "enableMouseInteraction",
-    type: "boolean",
-    default: "false",
+    name: 'enableMouseInteraction',
+    type: 'boolean',
+    default: 'false',
     description: "Enables smooth mouse hover effects that modulate the line's movement and amplitude."
   }
-]
+];
 </script>
 
 <style scoped>
@@ -78,4 +83,4 @@ const propData = [
   overflow: hidden;
   padding: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Backgrounds/WavesDemo.vue b/src/demo/Backgrounds/WavesDemo.vue
index ba87eee..02cb723 100644
--- a/src/demo/Backgrounds/WavesDemo.vue
+++ b/src/demo/Backgrounds/WavesDemo.vue
@@ -7,8 +7,14 @@
         </div>
 
         <Customize>
-          <PreviewSlider title="Wave Speed X" :model-value="waveSpeedX" @update:model-value="waveSpeedX = $event"
-            :min="0" :max="0.1" :step="0.01" />
+          <PreviewSlider
+            title="Wave Speed X"
+            :model-value="waveSpeedX"
+            @update:model-value="waveSpeedX = $event"
+            :min="0"
+            :max="0.1"
+            :step="0.01"
+          />
 
           <div class="flex gap-4 items-center">
             <PreviewColor title="Waves Color" :model-value="color" @update:model-value="color = $event" />
@@ -16,6 +22,7 @@
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="[]" />
       </template>
 
@@ -31,36 +38,76 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import Waves from '@/content/Backgrounds/Waves/Waves.vue'
-import PreviewSlider from '@/components/common/PreviewSlider.vue'
-import PreviewColor from '@/components/common/PreviewColor.vue'
-import { waves } from '@/constants/code/Backgrounds/wavesCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import Waves from '@/content/Backgrounds/Waves/Waves.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import { waves } from '@/constants/code/Backgrounds/wavesCode';
 
-const color = ref('#ffffff')
-const waveSpeedX = ref(0.0125)
+const color = ref('#ffffff');
+const waveSpeedX = ref(0.0125);
 
 const propData = [
-  { name: 'lineColor', type: 'string', default: 'black', description: 'Defines the color of the wave lines drawn on the canvas.' },
-  { name: 'backgroundColor', type: 'string', default: 'transparent', description: 'Sets the background color of the waves container.' },
-  { name: 'waveSpeedX', type: 'number', default: '0.0125', description: 'Horizontal speed factor for the wave animation.' },
-  { name: 'waveSpeedY', type: 'number', default: '0.005', description: 'Vertical speed factor for the wave animation.' },
+  {
+    name: 'lineColor',
+    type: 'string',
+    default: 'black',
+    description: 'Defines the color of the wave lines drawn on the canvas.'
+  },
+  {
+    name: 'backgroundColor',
+    type: 'string',
+    default: 'transparent',
+    description: 'Sets the background color of the waves container.'
+  },
+  {
+    name: 'waveSpeedX',
+    type: 'number',
+    default: '0.0125',
+    description: 'Horizontal speed factor for the wave animation.'
+  },
+  {
+    name: 'waveSpeedY',
+    type: 'number',
+    default: '0.005',
+    description: 'Vertical speed factor for the wave animation.'
+  },
   { name: 'waveAmpX', type: 'number', default: '32', description: 'Horizontal amplitude of each wave.' },
   { name: 'waveAmpY', type: 'number', default: '16', description: 'Vertical amplitude of each wave.' },
   { name: 'xGap', type: 'number', default: '10', description: 'Horizontal gap between individual wave lines.' },
   { name: 'yGap', type: 'number', default: '32', description: 'Vertical gap between points on each wave line.' },
-  { name: 'friction', type: 'number', default: '0.925', description: 'Controls how quickly the cursor effect slows down.' },
-  { name: 'tension', type: 'number', default: '0.005', description: 'Determines the "springiness" of the cursor effect on points.' },
-  { name: 'maxCursorMove', type: 'number', default: '100', description: 'Limits how far each point can shift due to cursor movement.' },
+  {
+    name: 'friction',
+    type: 'number',
+    default: '0.925',
+    description: 'Controls how quickly the cursor effect slows down.'
+  },
+  {
+    name: 'tension',
+    type: 'number',
+    default: '0.005',
+    description: 'Determines the "springiness" of the cursor effect on points.'
+  },
+  {
+    name: 'maxCursorMove',
+    type: 'number',
+    default: '100',
+    description: 'Limits how far each point can shift due to cursor movement.'
+  },
   { name: 'style', type: 'object', default: '{}', description: 'Inline styles applied to the container element.' },
-  { name: 'className', type: 'string', default: '""', description: 'Custom class name(s) applied to the container element.' }
-]
+  {
+    name: 'className',
+    type: 'string',
+    default: '""',
+    description: 'Custom class name(s) applied to the container element.'
+  }
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Components/CardSwapDemo.vue b/src/demo/Components/CardSwapDemo.vue
index f52ceec..aae9e0c 100644
--- a/src/demo/Components/CardSwapDemo.vue
+++ b/src/demo/Components/CardSwapDemo.vue
@@ -4,32 +4,46 @@
       <template #preview>
         <div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
           <div
-            class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4">
+            class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4"
+          >
             <h2 class="text-2xl md:text-3xl lg:text-4xl mb-4 font-medium leading-tight pl-0 lg:pl-24">
               Card stacks have never
               <span class="inline lg:block">looked so good</span>
             </h2>
+
             <p class="text-lg lg:text-xl mb-4 font-normal leading-tight text-gray-400 pl-0 lg:pl-24">
               Just look at it go!
             </p>
           </div>
 
           <div class="w-full lg:w-1/2 h-full lg:h-full relative">
-            <CardSwap :key="rerenderKey" :width="500" :height="400" :card-distance="cardDistance"
-              :vertical-distance="verticalDistance" :delay="delay" :skew-amount="skewAmount" :easing="easing"
-              :pause-on-hover="pauseOnHover" @card-click="handleCardClick">
+            <CardSwap
+              :key="rerenderKey"
+              :width="500"
+              :height="400"
+              :card-distance="cardDistance"
+              :vertical-distance="verticalDistance"
+              :delay="delay"
+              :skew-amount="skewAmount"
+              :easing="easing"
+              :pause-on-hover="pauseOnHover"
+              @card-click="handleCardClick"
+            >
               <template #card-0>
                 <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
                   <div class="m-2 flex items-center">
                     <i class="pi pi-circle-fill mr-2"></i>
+
                     <span>Smooth</span>
                   </div>
                 </div>
+
                 <div class="relative p-2">
                   <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
                     <source
                       src="https://cdn.dribbble.com/userupload/7053861/file/original-7956be57144058795db6bb24875bdab9.mp4"
-                      type="video/mp4" />
+                      type="video/mp4"
+                    />
                     Your browser does not support the video tag.
                   </video>
                 </div>
@@ -39,14 +53,17 @@
                 <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
                   <div class="m-2 flex items-center">
                     <i class="pi pi-code mr-2"></i>
+
                     <span>Reliable</span>
                   </div>
                 </div>
+
                 <div class="relative p-2">
                   <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
                     <source
                       src="https://cdn.dribbble.com/userupload/7078020/file/original-b071e9063d9e3ba86a85a61b9d5a7c42.mp4"
-                      type="video/mp4" />
+                      type="video/mp4"
+                    />
                     Your browser does not support the video tag.
                   </video>
                 </div>
@@ -56,14 +73,17 @@
                 <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
                   <div class="m-2 flex items-center">
                     <i class="pi pi-sliders-h mr-2"></i>
+
                     <span>Customizable</span>
                   </div>
                 </div>
+
                 <div class="relative p-2">
                   <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
                     <source
                       src="https://cdn.dribbble.com/userupload/7098541/file/original-0b063b12ca835421580e6034368ad95a.mp4"
-                      type="video/mp4" />
+                      type="video/mp4"
+                    />
                     Your browser does not support the video tag.
                   </video>
                 </div>
@@ -85,12 +105,15 @@
 
           <button
             class="text-xs bg-[#111] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors"
-            @click="toggleEasing">
-            Easing: <span class="text-zinc-400">&nbsp;{{ easing }}</span>
+            @click="toggleEasing"
+          >
+            Easing:
+            <span class="text-zinc-400">&nbsp;{{ easing }}</span>
           </button>
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -106,91 +129,91 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import CardSwap from '../../content/Components/CardSwap/CardSwap.vue'
-import { cardSwap } from '@/constants/code/Components/cardSwapCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import CardSwap from '../../content/Components/CardSwap/CardSwap.vue';
+import { cardSwap } from '@/constants/code/Components/cardSwapCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
-const cardDistance = ref(60)
-const verticalDistance = ref(70)
-const delay = ref(5000)
-const skewAmount = ref(6)
-const easing = ref<'elastic' | 'linear'>('elastic')
-const pauseOnHover = ref(false)
+const cardDistance = ref(60);
+const verticalDistance = ref(70);
+const delay = ref(5000);
+const skewAmount = ref(6);
+const easing = ref<'elastic' | 'linear'>('elastic');
+const pauseOnHover = ref(false);
 
 const toggleEasing = () => {
-  easing.value = easing.value === 'elastic' ? 'linear' : 'elastic'
-  forceRerender()
-}
+  easing.value = easing.value === 'elastic' ? 'linear' : 'elastic';
+  forceRerender();
+};
 
 const handleCardClick = (index: number) => {
-  console.log(`Card ${index} clicked`)
-}
+  console.log(`Card ${index} clicked`);
+};
 
 const propData = [
   {
-    name: "width",
-    type: "number | string",
-    default: "500",
-    description: "Width of the card container"
+    name: 'width',
+    type: 'number | string',
+    default: '500',
+    description: 'Width of the card container'
   },
   {
-    name: "height",
-    type: "number | string",
-    default: "400",
-    description: "Height of the card container"
+    name: 'height',
+    type: 'number | string',
+    default: '400',
+    description: 'Height of the card container'
   },
   {
-    name: "cardDistance",
-    type: "number",
-    default: "60",
-    description: "X-axis spacing between cards"
+    name: 'cardDistance',
+    type: 'number',
+    default: '60',
+    description: 'X-axis spacing between cards'
   },
   {
-    name: "verticalDistance",
-    type: "number",
-    default: "70",
-    description: "Y-axis spacing between cards"
+    name: 'verticalDistance',
+    type: 'number',
+    default: '70',
+    description: 'Y-axis spacing between cards'
   },
   {
-    name: "delay",
-    type: "number",
-    default: "5000",
-    description: "Milliseconds between card swaps"
+    name: 'delay',
+    type: 'number',
+    default: '5000',
+    description: 'Milliseconds between card swaps'
   },
   {
-    name: "pauseOnHover",
-    type: "boolean",
-    default: "false",
-    description: "Whether to pause animation on hover"
+    name: 'pauseOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Whether to pause animation on hover'
   },
   {
-    name: "onCardClick",
-    type: "(idx: number) => void",
-    default: "undefined",
-    description: "Callback function when a card is clicked"
+    name: 'onCardClick',
+    type: '(idx: number) => void',
+    default: 'undefined',
+    description: 'Callback function when a card is clicked'
   },
   {
-    name: "skewAmount",
-    type: "number",
-    default: "6",
-    description: "Degree of slope for top/bottom edges"
+    name: 'skewAmount',
+    type: 'number',
+    default: '6',
+    description: 'Degree of slope for top/bottom edges'
   },
   {
-    name: "easing",
+    name: 'easing',
     type: "'linear' | 'elastic'",
     default: "'elastic'",
-    description: "Animation easing type"
+    description: 'Animation easing type'
   }
-]
+];
 </script>
diff --git a/src/demo/Components/CarouselDemo.vue b/src/demo/Components/CarouselDemo.vue
index 7fd74dc..17c72f9 100644
--- a/src/demo/Components/CarouselDemo.vue
+++ b/src/demo/Components/CarouselDemo.vue
@@ -3,13 +3,26 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
-          <Carousel :key="rerenderKey" :base-width="width" :autoplay="autoplay" :autoplay-delay="autoplayDelay"
-            :pause-on-hover="pauseOnHover" :loop="loop" :round="round" />
+          <Carousel
+            :key="rerenderKey"
+            :base-width="width"
+            :autoplay="autoplay"
+            :autoplay-delay="autoplayDelay"
+            :pause-on-hover="pauseOnHover"
+            :loop="loop"
+            :round="round"
+          />
         </div>
 
         <Customize>
-          <PreviewSlider title="Width" v-model="width" :min="250" :max="330" :step="10"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Width"
+            v-model="width"
+            :min="250"
+            :max="330"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
 
           <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
 
@@ -17,14 +30,26 @@
 
           <PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Delay" v-model="autoplayDelay" :min="1000" :max="4000" :step="1000"
-            :disabled="!autoplay" @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Delay"
+            v-model="autoplayDelay"
+            :min="1000"
+            :max="4000"
+            :step="1000"
+            :disabled="!autoplay"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" :disabled="!autoplay"
-            @update:model-value="forceRerender" />
+          <PreviewSwitch
+            title="Pause On Hover"
+            v-model="pauseOnHover"
+            :disabled="!autoplay"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['motion-v']" />
       </template>
 
@@ -40,77 +65,70 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import Carousel from '../../content/Components/Carousel/Carousel.vue'
-import { carousel } from '@/constants/code/Components/carouselCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import Carousel from '../../content/Components/Carousel/Carousel.vue';
+import { carousel } from '@/constants/code/Components/carouselCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const width = ref(300)
-const autoplay = ref(false)
-const autoplayDelay = ref(3000)
-const pauseOnHover = ref(false)
-const loop = ref(false)
-const round = ref(false)
+const width = ref(300);
+const autoplay = ref(false);
+const autoplayDelay = ref(3000);
+const pauseOnHover = ref(false);
+const loop = ref(false);
+const round = ref(false);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   {
-    name: "items",
-    type: "CarouselItem[]",
-    default: "DEFAULT_ITEMS",
-    description:
-      "An array of carousel items. Each item must include title, description, id, and icon."
+    name: 'items',
+    type: 'CarouselItem[]',
+    default: 'DEFAULT_ITEMS',
+    description: 'An array of carousel items. Each item must include title, description, id, and icon.'
   },
   {
-    name: "baseWidth",
-    type: "number",
-    default: "300",
-    description:
-      "Total width (in px) of the carousel container. Effective item width is baseWidth minus padding."
+    name: 'baseWidth',
+    type: 'number',
+    default: '300',
+    description: 'Total width (in px) of the carousel container. Effective item width is baseWidth minus padding.'
   },
   {
-    name: "autoplay",
-    type: "boolean",
-    default: "false",
-    description:
-      "Enables automatic scrolling to the next item at a fixed interval."
+    name: 'autoplay',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enables automatic scrolling to the next item at a fixed interval.'
   },
   {
-    name: "autoplayDelay",
-    type: "number",
-    default: "3000",
-    description:
-      "Delay in milliseconds between automatic scrolls when autoplay is enabled."
+    name: 'autoplayDelay',
+    type: 'number',
+    default: '3000',
+    description: 'Delay in milliseconds between automatic scrolls when autoplay is enabled.'
   },
   {
-    name: "pauseOnHover",
-    type: "boolean",
-    default: "false",
-    description:
-      "Pauses the autoplay functionality when the carousel is hovered."
+    name: 'pauseOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Pauses the autoplay functionality when the carousel is hovered.'
   },
   {
-    name: "loop",
-    type: "boolean",
-    default: "false",
-    description:
-      "When true, the carousel loops seamlessly from the last item back to the first."
+    name: 'loop',
+    type: 'boolean',
+    default: 'false',
+    description: 'When true, the carousel loops seamlessly from the last item back to the first.'
   },
   {
-    name: "round",
-    type: "boolean",
-    default: "false",
-    description:
-      "When true, the carousel is rendered with a 1:1 aspect ratio and circular container/items."
+    name: 'round',
+    type: 'boolean',
+    default: 'false',
+    description: 'When true, the carousel is rendered with a 1:1 aspect ratio and circular container/items.'
   }
-]
+];
 </script>
diff --git a/src/demo/Components/CircularGalleryDemo.vue b/src/demo/Components/CircularGalleryDemo.vue
index 6cf43a2..5e69fcd 100644
--- a/src/demo/Components/CircularGalleryDemo.vue
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -2,7 +2,7 @@
   <div class="circular-gallery-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container h-[500px] p-0 overflow-hidden">          
+        <div class="demo-container h-[500px] p-0 overflow-hidden">
           <CircularGallery
             :key="rerenderKey"
             :bend="bend"
@@ -15,57 +15,49 @@
         </div>
 
         <Customize>
-          <PreviewSlider 
-            title="Bend Level" 
-            v-model="bend" 
-            :min="-10" 
-            :max="10" 
+          <PreviewSlider
+            title="Bend Level"
+            v-model="bend"
+            :min="-10"
+            :max="10"
             :step="1"
-            @update:model-value="forceRerender" 
+            @update:model-value="forceRerender"
           />
 
-          <PreviewSlider 
-            title="Border Radius" 
-            v-model="borderRadius" 
-            :min="0" 
-            :max="0.5" 
+          <PreviewSlider
+            title="Border Radius"
+            v-model="borderRadius"
+            :min="0"
+            :max="0.5"
             :step="0.01"
-            @update:model-value="forceRerender" 
+            @update:model-value="forceRerender"
           />
 
-          <PreviewSlider 
-            title="Scroll Speed" 
-            v-model="scrollSpeed" 
-            :min="0.5" 
-            :max="5" 
+          <PreviewSlider
+            title="Scroll Speed"
+            v-model="scrollSpeed"
+            :min="0.5"
+            :max="5"
             :step="0.1"
-            @update:model-value="forceRerender" 
+            @update:model-value="forceRerender"
           />
 
-          <PreviewSlider 
-            title="Scroll Ease" 
-            v-model="scrollEase" 
-            :min="0.01" 
-            :max="0.15" 
+          <PreviewSlider
+            title="Scroll Ease"
+            v-model="scrollEase"
+            :min="0.01"
+            :max="0.15"
             :step="0.01"
-            @update:model-value="forceRerender" 
+            @update:model-value="forceRerender"
           />
 
-          <PreviewColor 
-            title="Text Color" 
-            v-model="textColor"
-            @update:model-value="forceRerender" 
-          />
+          <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
 
-          <PreviewSelect 
-            title="Font" 
-            v-model="font"
-            :options="fontOptions"
-            @update:model-value="forceRerender" 
-          />
+          <PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['ogl']" />
       </template>
 
@@ -81,28 +73,28 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewColor from '../../components/common/PreviewColor.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import CircularGallery from '../../content/Components/CircularGallery/CircularGallery.vue'
-import { circularGallery } from '@/constants/code/Components/circularGalleryCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import CircularGallery from '../../content/Components/CircularGallery/CircularGallery.vue';
+import { circularGallery } from '@/constants/code/Components/circularGalleryCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const bend = ref(1)
-const borderRadius = ref(0.05)
-const scrollSpeed = ref(2)
-const scrollEase = ref(0.05)
-const textColor = ref('#ffffff')
-const font = ref('bold 30px Figtree')
+const bend = ref(1);
+const borderRadius = ref(0.05);
+const scrollSpeed = ref(2);
+const scrollEase = ref(0.05);
+const textColor = ref('#ffffff');
+const font = ref('bold 30px Figtree');
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const fontOptions = [
   { label: 'Figtree Bold', value: 'bold 30px Figtree' },
@@ -110,51 +102,54 @@ const fontOptions = [
   { label: 'Helvetica Bold', value: 'bold 30px Helvetica' },
   { label: 'Times Bold', value: 'bold 30px Times' },
   { label: 'Courier Bold', value: 'bold 30px Courier' },
-  { label: 'Georgia Bold', value: 'bold 30px Georgia' },
-]
+  { label: 'Georgia Bold', value: 'bold 30px Georgia' }
+];
 
 const propData = [
   {
     name: 'items',
     type: 'Array<{ image: string; text: string }>',
     default: 'undefined',
-    description: 'List of items to display in the gallery. Each item should have an image URL and a text label.',
+    description: 'List of items to display in the gallery. Each item should have an image URL and a text label.'
   },
   {
     name: 'bend',
     type: 'number',
     default: '3',
-    description: 'Determines the curvature of the gallery layout. A negative value bends in one direction, a positive value in the opposite.',
+    description:
+      'Determines the curvature of the gallery layout. A negative value bends in one direction, a positive value in the opposite.'
   },
   {
     name: 'textColor',
     type: 'string',
     default: '"#ffffff"',
-    description: 'Specifies the color of the text labels.',
+    description: 'Specifies the color of the text labels.'
   },
   {
     name: 'borderRadius',
     type: 'number',
     default: '0.05',
-    description: 'Sets the border radius for the media items to achieve rounded corners.',
+    description: 'Sets the border radius for the media items to achieve rounded corners.'
   },
   {
     name: 'font',
     type: 'string',
     default: '"bold 30px Figtree"',
-    description: 'Font style for the text labels.',
+    description: 'Font style for the text labels.'
   },
   {
     name: 'scrollSpeed',
     type: 'number',
     default: '2',
-    description: 'Controls how much the gallery moves per scroll event. Lower values result in slower scrolling, higher values in faster scrolling.',
+    description:
+      'Controls how much the gallery moves per scroll event. Lower values result in slower scrolling, higher values in faster scrolling.'
   },
   {
     name: 'scrollEase',
     type: 'number',
     default: '0.05',
-    description: 'Controls the smoothness of scroll transitions. Lower values create smoother, more fluid motion, while higher values make it more responsive.',
-  },
-]
+    description:
+      'Controls the smoothness of scroll transitions. Lower values create smoother, more fluid motion, while higher values make it more responsive.'
+  }
+];
 </script>
diff --git a/src/demo/Components/DecayCardDemo.vue b/src/demo/Components/DecayCardDemo.vue
index 45303ef..1acc289 100644
--- a/src/demo/Components/DecayCardDemo.vue
+++ b/src/demo/Components/DecayCardDemo.vue
@@ -2,15 +2,18 @@
   <div class="decay-card-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="overflow: hidden;">
+        <div class="demo-container" style="overflow: hidden">
           <DecayCard>
             <div class="text-[2rem]">
-              Decay<br />Card
+              Decay
+              <br />
+              Card
             </div>
           </DecayCard>
         </div>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -26,13 +29,13 @@
 </template>
 
 <script setup lang="ts">
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import DecayCard from '../../content/Components/DecayCard/DecayCard.vue'
-import { decayCard } from '@/constants/code/Components/decayCardCode'
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import DecayCard from '../../content/Components/DecayCard/DecayCard.vue';
+import { decayCard } from '@/constants/code/Components/decayCardCode';
 
 const propData = [
   {
@@ -59,5 +62,5 @@ const propData = [
     default: 'https://picsum.photos/300/400?grayscale',
     description: 'Allows setting the background image of the card.'
   }
-]
+];
 </script>
diff --git a/src/demo/Components/DockDemo.vue b/src/demo/Components/DockDemo.vue
index fa9eccb..47ee769 100644
--- a/src/demo/Components/DockDemo.vue
+++ b/src/demo/Components/DockDemo.vue
@@ -2,31 +2,73 @@
   <div class="dock-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="min-height: 400px; position: relative;">
+        <div class="demo-container" style="min-height: 400px; position: relative">
           <div class="demo-content">
-            <Dock :key="rerenderKey" :items="items" :panel-height="panelHeight" :base-item-size="baseItemSize"
-              :magnification="magnification" :distance="200" :dock-height="256"
-              :spring="{ mass: 0.1, stiffness: 150, damping: 12 }" />
+            <Dock
+              :key="rerenderKey"
+              :items="items"
+              :panel-height="panelHeight"
+              :base-item-size="baseItemSize"
+              :magnification="magnification"
+              :distance="200"
+              :dock-height="256"
+              :spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
+            />
           </div>
 
           <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none">
+            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+          >
             Try It!
           </div>
         </div>
 
         <Customize>
-          <PreviewSlider title="Background Height" :min="30" :max="200" :step="10" :model-value="panelHeight"
-            @update:model-value="(val: number) => { panelHeight = val; forceRerender(); }" />
+          <PreviewSlider
+            title="Background Height"
+            :min="30"
+            :max="200"
+            :step="10"
+            :model-value="panelHeight"
+            @update:model-value="
+              (val: number) => {
+                panelHeight = val;
+                forceRerender();
+              }
+            "
+          />
 
-          <PreviewSlider title="Item Size" :min="20" :max="60" :step="10" :model-value="baseItemSize"
-            @update:model-value="(val: number) => { baseItemSize = val; forceRerender(); }" />
+          <PreviewSlider
+            title="Item Size"
+            :min="20"
+            :max="60"
+            :step="10"
+            :model-value="baseItemSize"
+            @update:model-value="
+              (val: number) => {
+                baseItemSize = val;
+                forceRerender();
+              }
+            "
+          />
 
-          <PreviewSlider title="Magnification" :min="50" :max="100" :step="10" :model-value="magnification"
-            @update:model-value="(val: number) => { magnification = val; forceRerender(); }" />
+          <PreviewSlider
+            title="Magnification"
+            :min="50"
+            :max="100"
+            :step="10"
+            :model-value="magnification"
+            @update:model-value="
+              (val: number) => {
+                magnification = val;
+                forceRerender();
+              }
+            "
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['motion-v']" />
       </template>
 
@@ -42,96 +84,97 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import Dock from '../../content/Components/Dock/Dock.vue'
-import { dock } from '@/constants/code/Components/dockCode'
-import { useToast } from 'primevue/usetoast'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref, h } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import Dock from '../../content/Components/Dock/Dock.vue';
+import { dock } from '@/constants/code/Components/dockCode';
+import { useToast } from 'primevue/usetoast';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const panelHeight = ref(68)
-const baseItemSize = ref(50)
-const magnification = ref(70)
+const panelHeight = ref(68);
+const baseItemSize = ref(50);
+const magnification = ref(70);
 
-const toast = useToast()
-const { rerenderKey, forceRerender } = useForceRerender()
+const toast = useToast();
+const { rerenderKey, forceRerender } = useForceRerender();
 
-const HomeIcon = () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } })
-const ArchiveIcon = () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } })
-const ProfileIcon = () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } })
-const SettingsIcon = () => h('i', { class: 'pi pi-cog', style: { fontSize: '18px', color: 'white' } })
+const HomeIcon = () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } });
+const ArchiveIcon = () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } });
+const ProfileIcon = () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } });
+const SettingsIcon = () => h('i', { class: 'pi pi-cog', style: { fontSize: '18px', color: 'white' } });
 
 const showAlert = (message: string) => {
   toast.add({
     severity: 'secondary',
     summary: `${message} button was clicked`,
     life: 3000
-  })
-}
+  });
+};
 
 const items = [
   { icon: HomeIcon, label: 'Home', onClick: () => showAlert('Home') },
   { icon: ArchiveIcon, label: 'Archive', onClick: () => showAlert('Archive') },
   { icon: ProfileIcon, label: 'Profile', onClick: () => showAlert('Profile') },
-  { icon: SettingsIcon, label: 'Settings', onClick: () => showAlert('Settings') },
-]
+  { icon: SettingsIcon, label: 'Settings', onClick: () => showAlert('Settings') }
+];
 
 const propData = [
   {
-    name: "items",
-    type: "DockItemData[]",
-    default: "[]",
-    description: "Array of dock items. Each item should include an icon, label, onClick handler, and an optional className."
+    name: 'items',
+    type: 'DockItemData[]',
+    default: '[]',
+    description:
+      'Array of dock items. Each item should include an icon, label, onClick handler, and an optional className.'
   },
   {
-    name: "className",
-    type: "string",
+    name: 'className',
+    type: 'string',
     default: '""',
-    description: "Additional CSS classes for the dock panel."
+    description: 'Additional CSS classes for the dock panel.'
   },
   {
-    name: "distance",
-    type: "number",
-    default: "200",
-    description: "Pixel distance used to calculate the magnification effect based on mouse proximity."
+    name: 'distance',
+    type: 'number',
+    default: '200',
+    description: 'Pixel distance used to calculate the magnification effect based on mouse proximity.'
   },
   {
-    name: "panelHeight",
-    type: "number",
-    default: "68",
-    description: "Height (in pixels) of the dock panel."
+    name: 'panelHeight',
+    type: 'number',
+    default: '68',
+    description: 'Height (in pixels) of the dock panel.'
   },
   {
-    name: "baseItemSize",
-    type: "number",
-    default: "50",
-    description: "The base size (in pixels) for each dock item."
+    name: 'baseItemSize',
+    type: 'number',
+    default: '50',
+    description: 'The base size (in pixels) for each dock item.'
   },
   {
-    name: "dockHeight",
-    type: "number",
-    default: "256",
-    description: "Maximum height (in pixels) of the dock container."
+    name: 'dockHeight',
+    type: 'number',
+    default: '256',
+    description: 'Maximum height (in pixels) of the dock container.'
   },
   {
-    name: "magnification",
-    type: "number",
-    default: "70",
-    description: "The magnified size (in pixels) applied to a dock item when hovered."
+    name: 'magnification',
+    type: 'number',
+    default: '70',
+    description: 'The magnified size (in pixels) applied to a dock item when hovered.'
   },
   {
-    name: "spring",
-    type: "SpringOptions",
-    default: "{ mass: 0.1, stiffness: 150, damping: 12 }",
-    description: "Configuration options for the spring animation."
+    name: 'spring',
+    type: 'SpringOptions',
+    default: '{ mass: 0.1, stiffness: 150, damping: 12 }',
+    description: 'Configuration options for the spring animation.'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -157,8 +200,8 @@ const propData = [
 .demo-title {
   font-size: 2rem;
   font-weight: 900;
-  color: #271E37;
+  color: #271e37;
   margin: 0;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Components/ElasticSliderDemo.vue b/src/demo/Components/ElasticSliderDemo.vue
index 43f7e10..fe4c427 100644
--- a/src/demo/Components/ElasticSliderDemo.vue
+++ b/src/demo/Components/ElasticSliderDemo.vue
@@ -10,6 +10,7 @@
 
         <div class="demo-section">
           <h2 class="demo-title-extra">Using Steps</h2>
+
           <div class="demo-container relative min-h-[200px] flex items-center justify-center">
             <ElasticSlider :is-stepped="true" :step-size="10" />
           </div>
@@ -17,11 +18,13 @@
 
         <div class="demo-section">
           <h2 class="demo-title-extra">Custom Range & Icons</h2>
+
           <div class="demo-container relative min-h-[200px] flex items-center justify-center">
             <ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
               <template #left-icon>
                 <i class="pi pi-thumbs-down text-xl"></i>
               </template>
+
               <template #right-icon>
                 <i class="pi pi-thumbs-up text-xl"></i>
               </template>
@@ -44,12 +47,12 @@
 </template>
 
 <script setup lang="ts">
-import TabbedLayout from '@/components/common/TabbedLayout.vue'
-import PropTable from '@/components/common/PropTable.vue'
-import CodeExample from '@/components/code/CodeExample.vue'
-import CliInstallation from '@/components/code/CliInstallation.vue'
-import ElasticSlider from '@/content/Components/ElasticSlider/ElasticSlider.vue'
-import { elasticSlider } from '@/constants/code/Components/elasticSliderCode'
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import ElasticSlider from '@/content/Components/ElasticSlider/ElasticSlider.vue';
+import { elasticSlider } from '@/constants/code/Components/elasticSliderCode';
 
 const propData = [
   {
@@ -62,7 +65,7 @@ const propData = [
     name: 'startingValue',
     type: 'number',
     default: '0',
-    description: 'The starting point for the slider\'s range, e.g., startingValue=100 allows the slider to start at 100.'
+    description: "The starting point for the slider's range, e.g., startingValue=100 allows the slider to start at 100."
   },
   {
     name: 'maxValue',
@@ -91,16 +94,16 @@ const propData = [
   {
     name: 'leftIcon',
     type: 'Component | string',
-    default: '\'-\'',
+    default: "'-'",
     description: 'Custom Vue component or string to display on the left side of the slider.'
   },
   {
     name: 'rightIcon',
     type: 'Component | string',
-    default: '\'+\'',
+    default: "'+'",
     description: 'Custom Vue component or string to display on the right side of the slider.'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -116,4 +119,4 @@ const propData = [
   color: #fff;
   margin-bottom: 0.5rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Components/FlowingMenuDemo.vue b/src/demo/Components/FlowingMenuDemo.vue
index 871a257..5640b52 100644
--- a/src/demo/Components/FlowingMenuDemo.vue
+++ b/src/demo/Components/FlowingMenuDemo.vue
@@ -2,11 +2,12 @@
   <div class="flowing-menu-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0;">
+        <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
           <FlowingMenu :items="demoItems" />
         </div>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -22,13 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import FlowingMenu from '../../content/Components/FlowingMenu/FlowingMenu.vue'
-import { flowingMenu } from '@/constants/code/Components/flowingMenuCode'
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import FlowingMenu from '../../content/Components/FlowingMenu/FlowingMenu.vue';
+import { flowingMenu } from '@/constants/code/Components/flowingMenuCode';
 
 const propData = [
   {
@@ -37,12 +38,12 @@ const propData = [
     default: '[]',
     description: 'An array of objects containing: link, text, image.'
   }
-]
+];
 
 const demoItems = [
   { link: '#', text: 'Mojave', image: 'https://picsum.photos/600/400?random=1' },
   { link: '#', text: 'Sonoma', image: 'https://picsum.photos/600/400?random=2' },
   { link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
   { link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
-]
+];
 </script>
diff --git a/src/demo/Components/FlyingPostersDemo.vue b/src/demo/Components/FlyingPostersDemo.vue
index 7c52d75..4b5d774 100644
--- a/src/demo/Components/FlyingPostersDemo.vue
+++ b/src/demo/Components/FlyingPostersDemo.vue
@@ -3,37 +3,83 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
-          <FlyingPosters :key="rerenderKey" :items="items" :plane-width="planeWidth" :plane-height="planeHeight"
-            :distortion="distortion" :scroll-ease="scrollEase" :camera-fov="cameraFov" :camera-z="cameraZ"
-            class="h-full w-full" />
+          <FlyingPosters
+            :key="rerenderKey"
+            :items="items"
+            :plane-width="planeWidth"
+            :plane-height="planeHeight"
+            :distortion="distortion"
+            :scroll-ease="scrollEase"
+            :camera-fov="cameraFov"
+            :camera-z="cameraZ"
+            class="h-full w-full"
+          />
 
           <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none">
+            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+          >
             Scroll.
           </div>
         </div>
 
         <Customize>
-          <PreviewSlider title="Plane Width" v-model="planeWidth" :min="200" :max="400" :step="20"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Plane Width"
+            v-model="planeWidth"
+            :min="200"
+            :max="400"
+            :step="20"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Plane Height" v-model="planeHeight" :min="200" :max="400" :step="20"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Plane Height"
+            v-model="planeHeight"
+            :min="200"
+            :max="400"
+            :step="20"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Distortion" v-model="distortion" :min="0" :max="10" :step="0.5"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Distortion"
+            v-model="distortion"
+            :min="0"
+            :max="10"
+            :step="0.5"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Scroll Ease" v-model="scrollEase" :min="0.005" :max="0.05" :step="0.005"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Scroll Ease"
+            v-model="scrollEase"
+            :min="0.005"
+            :max="0.05"
+            :step="0.005"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Camera FOV" v-model="cameraFov" :min="30" :max="90" :step="5"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Camera FOV"
+            v-model="cameraFov"
+            :min="30"
+            :max="90"
+            :step="5"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Camera Z" v-model="cameraZ" :min="10" :max="40" :step="2"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Camera Z"
+            v-model="cameraZ"
+            :min="10"
+            :max="40"
+            :step="2"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['ogl']" />
       </template>
 
@@ -49,26 +95,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import FlyingPosters from '../../content/Components/FlyingPosters/FlyingPosters.vue'
-import { flyingPosters } from '@/constants/code/Components/flyingPostersCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import FlyingPosters from '../../content/Components/FlyingPosters/FlyingPosters.vue';
+import { flyingPosters } from '@/constants/code/Components/flyingPostersCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const planeWidth = ref(320)
-const planeHeight = ref(320)
-const distortion = ref(3)
-const scrollEase = ref(0.01)
-const cameraFov = ref(45)
-const cameraZ = ref(20)
+const planeWidth = ref(320);
+const planeHeight = ref(320);
+const distortion = ref(3);
+const scrollEase = ref(0.01);
+const cameraFov = ref(45);
+const cameraZ = ref(20);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const items = ref([
   'https://picsum.photos/800/800?grayscale&random=1',
@@ -85,65 +131,63 @@ const items = ref([
   'https://picsum.photos/800/800?grayscale&random=12',
   'https://picsum.photos/800/800?grayscale&random=13',
   'https://picsum.photos/800/800?grayscale&random=14',
-  'https://picsum.photos/800/800?grayscale&random=15',
-])
+  'https://picsum.photos/800/800?grayscale&random=15'
+]);
 
 const propData = [
   {
-    name: "items",
-    type: "string[]",
-    default: "[]",
+    name: 'items',
+    type: 'string[]',
+    default: '[]',
     description:
-      "An array of image URLs to display in the 3D poster gallery. Each URL should point to a valid image resource."
+      'An array of image URLs to display in the 3D poster gallery. Each URL should point to a valid image resource.'
   },
   {
-    name: "planeWidth",
-    type: "number",
-    default: "320",
+    name: 'planeWidth',
+    type: 'number',
+    default: '320',
     description:
-      "The width of each poster plane in pixels. This affects the visual size of the posters in the 3D space."
+      'The width of each poster plane in pixels. This affects the visual size of the posters in the 3D space.'
   },
   {
-    name: "planeHeight",
-    type: "number",
-    default: "320",
+    name: 'planeHeight',
+    type: 'number',
+    default: '320',
     description:
-      "The height of each poster plane in pixels. This affects the visual size of the posters in the 3D space."
+      'The height of each poster plane in pixels. This affects the visual size of the posters in the 3D space.'
   },
   {
-    name: "distortion",
-    type: "number",
-    default: "3",
+    name: 'distortion',
+    type: 'number',
+    default: '3',
     description:
-      "The amount of distortion effect applied to the posters during animation. Higher values create more dramatic effects."
+      'The amount of distortion effect applied to the posters during animation. Higher values create more dramatic effects.'
   },
   {
-    name: "scrollEase",
-    type: "number",
-    default: "0.01",
-    description:
-      "The easing factor for scroll animation. Lower values create smoother, more fluid scroll transitions."
+    name: 'scrollEase',
+    type: 'number',
+    default: '0.01',
+    description: 'The easing factor for scroll animation. Lower values create smoother, more fluid scroll transitions.'
   },
   {
-    name: "cameraFov",
-    type: "number",
-    default: "45",
+    name: 'cameraFov',
+    type: 'number',
+    default: '45',
     description:
-      "The field of view for the 3D camera in degrees. A wider FOV shows more of the scene but with perspective distortion."
+      'The field of view for the 3D camera in degrees. A wider FOV shows more of the scene but with perspective distortion.'
   },
   {
-    name: "cameraZ",
-    type: "number",
-    default: "20",
+    name: 'cameraZ',
+    type: 'number',
+    default: '20',
     description:
-      "The Z-axis position of the 3D camera. Higher values move the camera further back, showing more posters at once."
+      'The Z-axis position of the 3D camera. Higher values move the camera further back, showing more posters at once.'
   },
   {
-    name: "className",
-    type: "string",
+    name: 'className',
+    type: 'string',
     default: "''",
-    description:
-      "Additional CSS classes to apply to the component container."
+    description: 'Additional CSS classes to apply to the component container.'
   }
-]
+];
 </script>
diff --git a/src/demo/Components/GlassIconsDemo.vue b/src/demo/Components/GlassIconsDemo.vue
index b1237b0..12db255 100644
--- a/src/demo/Components/GlassIconsDemo.vue
+++ b/src/demo/Components/GlassIconsDemo.vue
@@ -2,7 +2,7 @@
   <div class="glass-icons-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="height: 500px; overflow: hidden;">
+        <div class="demo-container" style="height: 500px; overflow: hidden">
           <GlassIcons :items="items" class="my-glass-icons" />
         </div>
 
@@ -25,17 +25,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import GlassIcons from '../../content/Components/GlassIcons/GlassIcons.vue'
-import { glassIcons } from '@/constants/code/Components/glassIconsCode'
+import { ref, computed } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import GlassIcons from '../../content/Components/GlassIcons/GlassIcons.vue';
+import { glassIcons } from '@/constants/code/Components/glassIconsCode';
 
-const colorful = ref(false)
+const colorful = ref(false);
 
 const items = computed(() => [
   { icon: 'pi pi-file', color: colorful.value ? 'blue' : '#444', label: 'Files' },
@@ -44,14 +44,15 @@ const items = computed(() => [
   { icon: 'pi pi-cloud', color: colorful.value ? 'indigo' : '#444', label: 'Weather' },
   { icon: 'pi pi-pencil', color: colorful.value ? 'orange' : '#444', label: 'Notes' },
   { icon: 'pi pi-chart-bar', color: colorful.value ? 'green' : '#444', label: 'Stats' }
-])
+]);
 
 const propData = [
   {
     name: 'items',
     type: 'GlassIconsItem[]',
     default: '[]',
-    description: 'Array of items to render. Each item should include: an icon (string), a color (string), a label (string), and an optional customClass (string).'
+    description:
+      'Array of items to render. Each item should include: an icon (string), a color (string), a label (string), and an optional customClass (string).'
   },
   {
     name: 'className',
@@ -59,5 +60,5 @@ const propData = [
     default: "''",
     description: 'Optional additional CSS class(es) to be added to the container.'
   }
-]
+];
 </script>
diff --git a/src/demo/Components/GooeyNavDemo.vue b/src/demo/Components/GooeyNavDemo.vue
index d4e4962..cbcf11d 100644
--- a/src/demo/Components/GooeyNavDemo.vue
+++ b/src/demo/Components/GooeyNavDemo.vue
@@ -2,7 +2,9 @@
   <div class="gooey-nav-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
+        <div
+          class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center"
+        >
           <GooeyNav
             :key="rerenderKey"
             :items="navItems"
@@ -60,78 +62,78 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import GooeyNav from '../../content/Components/GooeyNav/GooeyNav.vue'
-import { gooeyNav } from '@/constants/code/Components/gooeyNavCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import GooeyNav from '../../content/Components/GooeyNav/GooeyNav.vue';
+import { gooeyNav } from '@/constants/code/Components/gooeyNavCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const particleCount = ref(15)
-const timeVariance = ref(300)
-const particleR = ref(100)
-const { rerenderKey, forceRerender } = useForceRerender()
+const particleCount = ref(15);
+const timeVariance = ref(300);
+const particleR = ref(100);
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const navItems = [
-  { label: "Home", href: null },
-  { label: "About", href: null },
-  { label: "Contact", href: null },
-]
+  { label: 'Home', href: null },
+  { label: 'About', href: null },
+  { label: 'Contact', href: null }
+];
 
 const propData = [
   {
-    name: "items",
-    type: "GooeyNavItem[]",
-    default: "[]",
-    description: "Array of navigation items with label and href properties."
+    name: 'items',
+    type: 'GooeyNavItem[]',
+    default: '[]',
+    description: 'Array of navigation items with label and href properties.'
   },
   {
-    name: "animationTime",
-    type: "number",
-    default: "600",
-    description: "Duration (ms) of the main animation."
+    name: 'animationTime',
+    type: 'number',
+    default: '600',
+    description: 'Duration (ms) of the main animation.'
   },
   {
-    name: "particleCount",
-    type: "number",
-    default: "15",
-    description: "Number of bubble particles per transition."
+    name: 'particleCount',
+    type: 'number',
+    default: '15',
+    description: 'Number of bubble particles per transition.'
   },
   {
-    name: "particleDistances",
-    type: "[number, number]",
-    default: "[90, 10]",
-    description: "Outer and inner distances of bubble spread."
+    name: 'particleDistances',
+    type: '[number, number]',
+    default: '[90, 10]',
+    description: 'Outer and inner distances of bubble spread.'
   },
   {
-    name: "particleR",
-    type: "number",
-    default: "100",
-    description: "Radius factor influencing random particle rotation."
+    name: 'particleR',
+    type: 'number',
+    default: '100',
+    description: 'Radius factor influencing random particle rotation.'
   },
   {
-    name: "timeVariance",
-    type: "number",
-    default: "300",
-    description: "Random time variance (ms) for particle animations."
+    name: 'timeVariance',
+    type: 'number',
+    default: '300',
+    description: 'Random time variance (ms) for particle animations.'
   },
   {
-    name: "colors",
-    type: "number[]",
-    default: "[1, 2, 3, 1, 2, 3, 1, 4]",
-    description: "Color indices used when creating bubble particles."
+    name: 'colors',
+    type: 'number[]',
+    default: '[1, 2, 3, 1, 2, 3, 1, 4]',
+    description: 'Color indices used when creating bubble particles.'
   },
   {
-    name: "initialActiveIndex",
-    type: "number",
-    default: "0",
-    description: "Which item is selected on mount."
+    name: 'initialActiveIndex',
+    type: 'number',
+    default: '0',
+    description: 'Which item is selected on mount.'
   }
-]
+];
 </script>
 
 <style>
diff --git a/src/demo/Components/InfiniteScrollDemo.vue b/src/demo/Components/InfiniteScrollDemo.vue
index 860dbff..19c0313 100644
--- a/src/demo/Components/InfiniteScrollDemo.vue
+++ b/src/demo/Components/InfiniteScrollDemo.vue
@@ -2,10 +2,19 @@
   <div class="infinite-scroll-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container"
-          style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-          <InfiniteScroll :items="items" :is-tilted="isTilted" :tilt-direction="tiltDirection" :autoplay="autoplay"
-            :autoplay-speed="1" :autoplay-direction="autoplayDirection" :pause-on-hover="pauseOnHover" />
+        <div
+          class="demo-container"
+          style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center"
+        >
+          <InfiniteScroll
+            :items="items"
+            :is-tilted="isTilted"
+            :tilt-direction="tiltDirection"
+            :autoplay="autoplay"
+            :autoplay-speed="1"
+            :autoplay-direction="autoplayDirection"
+            :pause-on-hover="pauseOnHover"
+          />
         </div>
 
         <Customize>
@@ -13,7 +22,7 @@
 
           <PreviewSelect v-if="isTilted" title="Tilt Direction" :options="tiltOptions" v-model="tiltDirection" />
 
-          <hr style="margin: 1rem 0; border-color: #222;" />
+          <hr style="margin: 1rem 0; border-color: #222" />
 
           <PreviewSwitch title="Autoplay" v-model="autoplay" />
 
@@ -25,6 +34,7 @@
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -40,23 +50,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import InfiniteScroll from '../../content/Components/InfiniteScroll/InfiniteScroll.vue'
-import { infiniteScroll } from '@/constants/code/Components/infiniteScrollCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import InfiniteScroll from '../../content/Components/InfiniteScroll/InfiniteScroll.vue';
+import { infiniteScroll } from '@/constants/code/Components/infiniteScrollCode';
 
-const isTilted = ref(true)
-const tiltDirection = ref<'left' | 'right'>('left')
-const autoplay = ref(true)
-const autoplayDirection = ref<'up' | 'down'>('up')
-const pauseOnHover = ref(true)
+const isTilted = ref(true);
+const tiltDirection = ref<'left' | 'right'>('left');
+const autoplay = ref(true);
+const autoplayDirection = ref<'up' | 'down'>('up');
+const pauseOnHover = ref(true);
 
 const items = [
   { content: 'Paragraph Item 2' },
@@ -72,17 +82,17 @@ const items = [
   { content: 'Paragraph Item 12' },
   { content: 'Text Item 13' },
   { content: 'Paragraph Item 14' }
-]
+];
 
 const autoplayOptions = [
   { value: 'up', label: 'Up' },
   { value: 'down', label: 'Down' }
-]
+];
 
 const tiltOptions = [
   { value: 'left', label: 'Left' },
   { value: 'right', label: 'Right' }
-]
+];
 
 const propData = [
   {
@@ -101,7 +111,8 @@ const propData = [
     name: 'items',
     type: 'array',
     default: '[]',
-    description: 'Array of items with custom content. Each item should have a "content" property containing a string or Vue component.'
+    description:
+      'Array of items with custom content. Each item should have a "content" property containing a string or Vue component.'
   },
   {
     name: 'itemMinHeight',
@@ -151,5 +162,5 @@ const propData = [
     default: '"-0.5em"',
     description: 'Negative margin to reduce spacing between items.'
   }
-]
+];
 </script>
diff --git a/src/demo/Components/MasonryDemo.vue b/src/demo/Components/MasonryDemo.vue
index 2c25527..32fbfd7 100644
--- a/src/demo/Components/MasonryDemo.vue
+++ b/src/demo/Components/MasonryDemo.vue
@@ -2,12 +2,22 @@
   <div class="masonry-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="height: 900px; overflow: hidden;">
+        <div class="demo-container" style="height: 900px; overflow: hidden">
           <RefreshButton @refresh="forceRerender" />
 
-          <Masonry :key="rerenderKey" :items="sampleItems" :ease="ease" :duration="duration" :stagger="stagger"
-            :animate-from="animateFrom" :scale-on-hover="scaleOnHover" :hover-scale="hoverScale"
-            :blur-to-focus="blurToFocus" :color-shift-on-hover="colorShiftOnHover" class="masonry-demo-container" />
+          <Masonry
+            :key="rerenderKey"
+            :items="sampleItems"
+            :ease="ease"
+            :duration="duration"
+            :stagger="stagger"
+            :animate-from="animateFrom"
+            :scale-on-hover="scaleOnHover"
+            :hover-scale="hoverScale"
+            :blur-to-focus="blurToFocus"
+            :color-shift-on-hover="colorShiftOnHover"
+            class="masonry-demo-container"
+          />
         </div>
 
         <Customize>
@@ -17,26 +27,50 @@
 
           <PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" @update:model-value="forceRerender" />
 
-          <PreviewSelect title="Animation Direction" v-model="animateFrom" :options="[
-            { label: 'Bottom', value: 'bottom' },
-            { label: 'Top', value: 'top' },
-            { label: 'Left', value: 'left' },
-            { label: 'Right', value: 'right' },
-            { label: 'Center', value: 'center' },
-            { label: 'Random', value: 'random' }
-          ]" @update:model-value="forceRerender" />
+          <PreviewSelect
+            title="Animation Direction"
+            v-model="animateFrom"
+            :options="[
+              { label: 'Bottom', value: 'bottom' },
+              { label: 'Top', value: 'top' },
+              { label: 'Left', value: 'left' },
+              { label: 'Right', value: 'right' },
+              { label: 'Center', value: 'center' },
+              { label: 'Random', value: 'random' }
+            ]"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Duration (s)"
+            v-model="duration"
+            :min="0.1"
+            :max="2"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Stagger Delay (s)" v-model="stagger" :min="0.01" :max="0.2" :step="0.01"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Stagger Delay (s)"
+            v-model="stagger"
+            :min="0.01"
+            :max="0.2"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Hover Scale" v-model="hoverScale" :min="0.8" :max="1.2" :step="0.05"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Hover Scale"
+            v-model="hoverScale"
+            :min="0.8"
+            :max="1.2"
+            :step="0.05"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -52,30 +86,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import RefreshButton from '../../components/common/RefreshButton.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import Masonry from '../../content/Components/Masonry/Masonry.vue'
-import { masonry } from '@/constants/code/Components/masonryCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import Masonry from '../../content/Components/Masonry/Masonry.vue';
+import { masonry } from '@/constants/code/Components/masonryCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const ease = ref('power3.out')
-const duration = ref(0.6)
-const stagger = ref(0.05)
-const animateFrom = ref<'bottom' | 'top' | 'left' | 'right' | 'center' | 'random'>('bottom')
-const scaleOnHover = ref(true)
-const hoverScale = ref(0.95)
-const blurToFocus = ref(true)
-const colorShiftOnHover = ref(false)
-const { rerenderKey, forceRerender } = useForceRerender()
+const ease = ref('power3.out');
+const duration = ref(0.6);
+const stagger = ref(0.05);
+const animateFrom = ref<'bottom' | 'top' | 'left' | 'right' | 'center' | 'random'>('bottom');
+const scaleOnHover = ref(true);
+const hoverScale = ref(0.95);
+const blurToFocus = ref(true);
+const colorShiftOnHover = ref(false);
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const sampleItems = ref([
   { id: '1', img: 'https://picsum.photos/300/400?random=1&grayscale', url: 'https://picsum.photos', height: 400 },
@@ -92,20 +126,46 @@ const sampleItems = ref([
   { id: '12', img: 'https://picsum.photos/300/400?random=12&grayscale', url: 'https://picsum.photos', height: 400 },
   { id: '13', img: 'https://picsum.photos/300/470?random=13&grayscale', url: 'https://picsum.photos', height: 470 },
   { id: '14', img: 'https://picsum.photos/300/390?random=14&grayscale', url: 'https://picsum.photos', height: 390 },
-  { id: '15', img: 'https://picsum.photos/300/510?random=15&grayscale', url: 'https://picsum.photos', height: 510 },
-])
+  { id: '15', img: 'https://picsum.photos/300/510?random=15&grayscale', url: 'https://picsum.photos', height: 510 }
+]);
 
 const propData = [
-  { name: 'items', type: 'Item[]', default: '[]', description: 'Array of items to display in the masonry grid. Each item must have id, img, url, and height properties.' },
+  {
+    name: 'items',
+    type: 'Item[]',
+    default: '[]',
+    description:
+      'Array of items to display in the masonry grid. Each item must have id, img, url, and height properties.'
+  },
   { name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for animations.' },
   { name: 'duration', type: 'number', default: '0.6', description: 'Duration of the animation in seconds.' },
-  { name: 'stagger', type: 'number', default: '0.05', description: 'Stagger delay between item animations in seconds.' },
-  { name: 'animateFrom', type: 'string', default: '"bottom"', description: 'Direction items animate from: "bottom", "top", "left", "right", "center", or "random".' },
+  {
+    name: 'stagger',
+    type: 'number',
+    default: '0.05',
+    description: 'Stagger delay between item animations in seconds.'
+  },
+  {
+    name: 'animateFrom',
+    type: 'string',
+    default: '"bottom"',
+    description: 'Direction items animate from: "bottom", "top", "left", "right", "center", or "random".'
+  },
   { name: 'scaleOnHover', type: 'boolean', default: 'true', description: 'Whether items scale on hover.' },
   { name: 'hoverScale', type: 'number', default: '0.95', description: 'Scale factor when hovering over items.' },
-  { name: 'blurToFocus', type: 'boolean', default: 'true', description: 'Whether items start blurred and focus on entrance.' },
-  { name: 'colorShiftOnHover', type: 'boolean', default: 'false', description: 'Whether to show color overlay on hover.' },
-]
+  {
+    name: 'blurToFocus',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether items start blurred and focus on entrance.'
+  },
+  {
+    name: 'colorShiftOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Whether to show color overlay on hover.'
+  }
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/Components/PixelCardDemo.vue b/src/demo/Components/PixelCardDemo.vue
index 3c58997..92027b6 100644
--- a/src/demo/Components/PixelCardDemo.vue
+++ b/src/demo/Components/PixelCardDemo.vue
@@ -3,19 +3,22 @@
     <TabbedLayout>
       <template #preview>
         <div
-          class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center">
+          class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center"
+        >
           <PixelCard :key="rerenderKey" :variant="selectedVariant">
             <div class="absolute mix-blend-screen z-10 inset-0 flex items-center justify-center w-full h-full">
-              <h2 class="text-5xl font-black select-none text-[#222]">
-                Hover Me.
-              </h2>
+              <h2 class="text-5xl font-black select-none text-[#222]">Hover Me.</h2>
             </div>
           </PixelCard>
         </div>
 
         <Customize>
-          <PreviewSelect title="Animation Variant" :options="variantOptions" v-model="selectedVariant"
-            @update:model-value="forceRerender" />
+          <PreviewSelect
+            title="Animation Variant"
+            :options="variantOptions"
+            v-model="selectedVariant"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -33,64 +36,64 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import PixelCard from '../../content/Components/PixelCard/PixelCard.vue'
-import { pixelCard } from '@/constants/code/Components/pixelCardCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import PixelCard from '../../content/Components/PixelCard/PixelCard.vue';
+import { pixelCard } from '@/constants/code/Components/pixelCardCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const selectedVariant = ref<'default' | 'blue' | 'yellow' | 'pink'>('default')
-const { rerenderKey, forceRerender } = useForceRerender()
+const selectedVariant = ref<'default' | 'blue' | 'yellow' | 'pink'>('default');
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const variantOptions = [
   { value: 'default', label: 'Default' },
   { value: 'yellow', label: 'Yellow' },
   { value: 'blue', label: 'Blue' },
   { value: 'pink', label: 'Pink' }
-]
+];
 
 const propData = [
   {
-    name: "variant",
-    type: "string",
+    name: 'variant',
+    type: 'string',
     default: '"default"',
-    description: "Defines the color scheme and animation style.",
-    options: "default | yellow | blue | pink"
+    description: 'Defines the color scheme and animation style.',
+    options: 'default | yellow | blue | pink'
   },
   {
-    name: "gap",
-    type: "number",
-    default: "varies by variant",
-    description: "Pixel grid gap size in pixels."
+    name: 'gap',
+    type: 'number',
+    default: 'varies by variant',
+    description: 'Pixel grid gap size in pixels.'
   },
   {
-    name: "speed",
-    type: "number",
-    default: "varies by variant",
-    description: "Animation speed modifier (lower is slower)."
+    name: 'speed',
+    type: 'number',
+    default: 'varies by variant',
+    description: 'Animation speed modifier (lower is slower).'
   },
   {
-    name: "colors",
-    type: "string",
+    name: 'colors',
+    type: 'string',
     default: '"#f8fafc,#f1f5f9,#cbd5e1"',
-    description: "Comma-separated list of colors for the pixel effect."
+    description: 'Comma-separated list of colors for the pixel effect.'
   },
   {
-    name: "noFocus",
-    type: "boolean",
-    default: "false",
-    description: "If true, prevents animation from triggering on focus."
+    name: 'noFocus',
+    type: 'boolean',
+    default: 'false',
+    description: 'If true, prevents animation from triggering on focus.'
   },
   {
-    name: "className",
-    type: "string",
+    name: 'className',
+    type: 'string',
     default: '""',
-    description: "Additional CSS class for the wrapper."
+    description: 'Additional CSS class for the wrapper.'
   }
-]
+];
 </script>
diff --git a/src/demo/Components/ProfileCardDemo.vue b/src/demo/Components/ProfileCardDemo.vue
index b48025e..83cdaf6 100644
--- a/src/demo/Components/ProfileCardDemo.vue
+++ b/src/demo/Components/ProfileCardDemo.vue
@@ -2,22 +2,32 @@
   <div class="profile-card-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="height: 700px; overflow: hidden; position: relative;">
-          <ProfileCard :key="rerenderKey" name="Javi A. Torres" title="Software Engineer" handle="javicodes"
-            status="Online" contact-text="Contact Me" avatar-url="/assets/person.png"
-            :icon-url="showIcon ? '/assets/iconpattern.png' : ''" :show-user-info="showUserInfo"
-            :show-behind-gradient="showBehindGradient" grain-url="/assets/grain.webp"
-            :behind-gradient="customBehindGradient" :inner-gradient="customInnerGradient"
-            @contact-click="handleContactClick" />
+        <div class="demo-container" style="height: 700px; overflow: hidden; position: relative">
+          <ProfileCard
+            :key="rerenderKey"
+            name="Javi A. Torres"
+            title="Software Engineer"
+            handle="javicodes"
+            status="Online"
+            contact-text="Contact Me"
+            avatar-url="/assets/person.png"
+            :icon-url="showIcon ? '/assets/iconpattern.png' : ''"
+            :show-user-info="showUserInfo"
+            :show-behind-gradient="showBehindGradient"
+            grain-url="/assets/grain.webp"
+            :behind-gradient="customBehindGradient"
+            :inner-gradient="customInnerGradient"
+            @contact-click="handleContactClick"
+          />
         </div>
 
         <Customize>
-          <button @click="generateRandomGradients" class="randomize-btn">
-            Randomize Colors
-          </button>
+          <button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button>
 
           <PreviewSwitch title="Show Icon Pattern" v-model="showIcon" @update:model-value="forceRerender" />
+
           <PreviewSwitch title="Show User Info" v-model="showUserInfo" @update:model-value="forceRerender" />
+
           <PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" />
         </Customize>
 
@@ -36,40 +46,42 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import ProfileCard from '../../content/Components/ProfileCard/ProfileCard.vue'
-import { profileCard } from '@/constants/code/Components/profileCardCode'
-import { useToast } from 'primevue/usetoast'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import ProfileCard from '../../content/Components/ProfileCard/ProfileCard.vue';
+import { profileCard } from '@/constants/code/Components/profileCardCode';
+import { useToast } from 'primevue/usetoast';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const showIcon = ref(true)
-const showUserInfo = ref(true)
-const showBehindGradient = ref(true)
-const customBehindGradient = ref("radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(266,100%,90%,var(--card-opacity)) 4%,hsla(266,50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%)")
-const customInnerGradient = ref("linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)")
+const showIcon = ref(true);
+const showUserInfo = ref(true);
+const showBehindGradient = ref(true);
+const customBehindGradient = ref(
+  'radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(266,100%,90%,var(--card-opacity)) 4%,hsla(266,50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%)'
+);
+const customInnerGradient = ref('linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)');
 
-const toast = useToast()
-const { rerenderKey, forceRerender } = useForceRerender()
+const toast = useToast();
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const generateRandomGradients = () => {
-  const randomHue1 = Math.floor(Math.random() * 360)
-  const randomHue2 = Math.floor(Math.random() * 360)
-  const randomHue3 = Math.floor(Math.random() * 360)
-  const randomHue4 = Math.floor(Math.random() * 360)
+  const randomHue1 = Math.floor(Math.random() * 360);
+  const randomHue2 = Math.floor(Math.random() * 360);
+  const randomHue3 = Math.floor(Math.random() * 360);
+  const randomHue4 = Math.floor(Math.random() * 360);
 
-  const newBehindGradient = `radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(${randomHue1},100%,90%,var(--card-opacity)) 4%,hsla(${randomHue1},50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(${randomHue1},25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(${randomHue1},0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,hsl(${randomHue2}, 100%, 70%) 0%,transparent 100%),radial-gradient(100% 100% at 50% 50%,hsl(${randomHue3}, 100%, 65%) 1%,transparent 76%),conic-gradient(from 124deg at 50% 50%,hsl(${randomHue4}, 100%, 70%) 0%,hsl(${randomHue2}, 100%, 70%) 40%,hsl(${randomHue2}, 100%, 70%) 60%,hsl(${randomHue4}, 100%, 70%) 100%)`
-  const newInnerGradient = `linear-gradient(145deg,hsla(${randomHue1}, 40%, 45%, 0.55) 0%,hsla(${randomHue3}, 60%, 70%, 0.27) 100%)`
+  const newBehindGradient = `radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(${randomHue1},100%,90%,var(--card-opacity)) 4%,hsla(${randomHue1},50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(${randomHue1},25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(${randomHue1},0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,hsl(${randomHue2}, 100%, 70%) 0%,transparent 100%),radial-gradient(100% 100% at 50% 50%,hsl(${randomHue3}, 100%, 65%) 1%,transparent 76%),conic-gradient(from 124deg at 50% 50%,hsl(${randomHue4}, 100%, 70%) 0%,hsl(${randomHue2}, 100%, 70%) 40%,hsl(${randomHue2}, 100%, 70%) 60%,hsl(${randomHue4}, 100%, 70%) 100%)`;
+  const newInnerGradient = `linear-gradient(145deg,hsla(${randomHue1}, 40%, 45%, 0.55) 0%,hsla(${randomHue3}, 60%, 70%, 0.27) 100%)`;
 
-  customBehindGradient.value = newBehindGradient
-  customInnerGradient.value = newInnerGradient
-  forceRerender()
-}
+  customBehindGradient.value = newBehindGradient;
+  customInnerGradient.value = newInnerGradient;
+  forceRerender();
+};
 
 const handleContactClick = () => {
   toast.add({
@@ -77,8 +89,8 @@ const handleContactClick = () => {
     summary: 'Contact Clicked!',
     detail: 'Contact button was clicked',
     life: 3000
-  })
-}
+  });
+};
 
 const propData = [
   {
@@ -139,25 +151,25 @@ const propData = [
     name: 'name',
     type: 'string',
     default: '"Javi A. Torres"',
-    description: 'User\'s display name'
+    description: "User's display name"
   },
   {
     name: 'title',
     type: 'string',
     default: '"Software Engineer"',
-    description: 'User\'s job title or role'
+    description: "User's job title or role"
   },
   {
     name: 'handle',
     type: 'string',
     default: '"javicodes"',
-    description: 'User\'s handle or username (displayed with @ prefix)'
+    description: "User's handle or username (displayed with @ prefix)"
   },
   {
     name: 'status',
     type: 'string',
     default: '"Online"',
-    description: 'User\'s current status'
+    description: "User's current status"
   },
   {
     name: 'contactText',
@@ -177,7 +189,7 @@ const propData = [
     default: 'undefined',
     description: 'Callback function called when the contact button is clicked'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -204,4 +216,4 @@ const propData = [
   width: 100%;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/Components/SpotlightCardDemo.vue b/src/demo/Components/SpotlightCardDemo.vue
index a58e0bc..5399c8d 100644
--- a/src/demo/Components/SpotlightCardDemo.vue
+++ b/src/demo/Components/SpotlightCardDemo.vue
@@ -6,9 +6,9 @@
           <SpotlightCard class-name="custom-spotlight-card">
             <div class="flex h-full flex-col items-start justify-center">
               <i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
-              <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">
-                Boost Your Experience
-              </h3>
+
+              <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Boost Your Experience</h3>
+
               <p class="text-sm text-zinc-400">
                 Get exclusive benefits, features & 24/7 support as a permanent club member.
               </p>
@@ -17,13 +17,14 @@
         </div>
 
         <h2 class="text-xl font-semibold text-white mb-4 mt-8">Custom Color</h2>
+
         <div class="demo-container relative py-10">
           <SpotlightCard class-name="custom-spotlight-card" spotlight-color="rgba(39, 255, 100, 0.326)">
             <div class="flex h-full flex-col items-start justify-center">
               <i class="pi pi-lock text-3xl mb-3 text-white"></i>
-              <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">
-                Enhanced Security
-              </h3>
+
+              <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Enhanced Security</h3>
+
               <p class="text-sm text-zinc-400">
                 Our state of the art software offers peace of mind through strict security measures.
               </p>
@@ -46,27 +47,27 @@
 </template>
 
 <script setup lang="ts">
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import SpotlightCard from '../../content/Components/SpotlightCard/SpotlightCard.vue'
-import { spotlightCard } from '@/constants/code/Components/spotlightCardCode'
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import SpotlightCard from '../../content/Components/SpotlightCard/SpotlightCard.vue';
+import { spotlightCard } from '@/constants/code/Components/spotlightCardCode';
 
 const propData = [
   {
     name: 'spotlightColor',
     type: 'string',
     default: 'rgba(255, 255, 255, 0.25)',
-    description: 'Controls the color of the radial gradient used for the spotlight effect.',
+    description: 'Controls the color of the radial gradient used for the spotlight effect.'
   },
   {
     name: 'className',
     type: 'string',
     default: '',
-    description: 'Allows adding custom classes to the component.',
+    description: 'Allows adding custom classes to the component.'
   }
-]
+];
 </script>
 
 <style>
diff --git a/src/demo/Components/TiltedCardDemo.vue b/src/demo/Components/TiltedCardDemo.vue
index 2df3e30..4f9806c 100644
--- a/src/demo/Components/TiltedCardDemo.vue
+++ b/src/demo/Components/TiltedCardDemo.vue
@@ -2,7 +2,7 @@
   <div class="tilted-card-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden;">
+        <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
           <TiltedCard
             image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
             alt-text="Kendrick Lamar - GNX Album Cover"
@@ -19,42 +19,23 @@
             :overlay-content="displayOverlayContent"
           >
             <template #overlay>
-              <p class="tilted-card-demo-text">
-                Kendrick Lamar - GNX
-              </p>
+              <p class="tilted-card-demo-text">Kendrick Lamar - GNX</p>
             </template>
           </TiltedCard>
         </div>
 
         <Customize>
-          <PreviewSlider
-            title="Rotate Amplitude"
-            v-model="rotateAmplitude"
-            :min="0"
-            :max="30"
-            :step="1"
-          />
+          <PreviewSlider title="Rotate Amplitude" v-model="rotateAmplitude" :min="0" :max="30" :step="1" />
 
-          <PreviewSlider
-            title="Scale on Hover"
-            v-model="scaleOnHover"
-            :min="1"
-            :max="1.5"
-            :step="0.05"
-          />
+          <PreviewSlider title="Scale on Hover" v-model="scaleOnHover" :min="1" :max="1.5" :step="0.05" />
 
-          <PreviewSwitch
-            title="Show Tooltip"
-            v-model="showTooltip"
-          />
+          <PreviewSwitch title="Show Tooltip" v-model="showTooltip" />
 
-          <PreviewSwitch
-            title="Show Overlay Content"
-            v-model="displayOverlayContent"
-          />
+          <PreviewSwitch title="Show Overlay Content" v-model="displayOverlayContent" />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['motion-v']" />
       </template>
 
@@ -70,22 +51,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import TiltedCard from '../../content/Components/TiltedCard/TiltedCard.vue'
-import { tiltedCard } from '@/constants/code/Components/tiltedCardCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import TiltedCard from '../../content/Components/TiltedCard/TiltedCard.vue';
+import { tiltedCard } from '@/constants/code/Components/tiltedCardCode';
 
-const rotateAmplitude = ref(12)
-const scaleOnHover = ref(1.05)
-const showTooltip = ref(true)
-const displayOverlayContent = ref(true)
+const rotateAmplitude = ref(12);
+const scaleOnHover = ref(1.05);
+const showTooltip = ref(true);
+const displayOverlayContent = ref(true);
 
 const propData = [
   {
@@ -166,7 +147,7 @@ const propData = [
     default: 'false',
     description: 'Whether to show overlay content (use overlay slot for content).'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -180,4 +161,4 @@ const propData = [
   border-radius: 8px;
   backdrop-filter: blur(10px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/TextAnimations/BlurTextDemo.vue b/src/demo/TextAnimations/BlurTextDemo.vue
index 9e5a875..e54544c 100644
--- a/src/demo/TextAnimations/BlurTextDemo.vue
+++ b/src/demo/TextAnimations/BlurTextDemo.vue
@@ -5,10 +5,22 @@
         <div class="demo-container relative min-h-[400px] overflow-hidden">
           <RefreshButton @refresh="forceRerender" />
 
-          <BlurText :key="rerenderKey" text="Isn't this so cool?!" :delay="delay"
-            class-name="text-3xl md:text-6xl font-bold text-center" :animate-by="animateBy" :direction="direction"
-            :threshold="threshold" :root-margin="rootMargin" :step-duration="stepDuration"
-            @animation-complete="() => { showCallback && showToast() }" />
+          <BlurText
+            :key="rerenderKey"
+            text="Isn't this so cool?!"
+            :delay="delay"
+            class-name="text-3xl md:text-6xl font-bold text-center"
+            :animate-by="animateBy"
+            :direction="direction"
+            :threshold="threshold"
+            :root-margin="rootMargin"
+            :step-duration="stepDuration"
+            @animation-complete="
+              () => {
+                showCallback && showToast();
+              }
+            "
+          />
         </div>
 
         <Customize>
@@ -17,27 +29,51 @@
           <div class="flex gap-4 flex-wrap">
             <button
               class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
-              @click="toggleAnimateBy">
-              Animate By: <span class="text-[#a1a1aa]">&nbsp;{{ animateBy }}</span>
+              @click="toggleAnimateBy"
+            >
+              Animate By:
+              <span class="text-[#a1a1aa]">&nbsp;{{ animateBy }}</span>
             </button>
+
             <button
               class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
-              @click="toggleDirection">
-              Direction: <span class="text-[#a1a1aa]">&nbsp;{{ direction }}</span>
+              @click="toggleDirection"
+            >
+              Direction:
+              <span class="text-[#a1a1aa]">&nbsp;{{ direction }}</span>
             </button>
           </div>
 
-          <PreviewSlider title="Delay (ms)" v-model="delay" :min="50" :max="500" :step="10"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Delay (ms)"
+            v-model="delay"
+            :min="50"
+            :max="500"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Step Duration (s)" v-model="stepDuration" :min="0.1" :max="1" :step="0.05"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Step Duration (s)"
+            v-model="stepDuration"
+            :min="0.1"
+            :max="1"
+            :step="0.05"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Threshold"
+            v-model="threshold"
+            :min="0.1"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['motion-v']" />
       </template>
 
@@ -53,61 +89,96 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import RefreshButton from '../../components/common/RefreshButton.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import BlurText from '../../content/TextAnimations/BlurText/BlurText.vue'
-import { blurText } from '@/constants/code/TextAnimations/blurTextCode'
-import { useToast } from 'primevue/usetoast'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import BlurText from '../../content/TextAnimations/BlurText/BlurText.vue';
+import { blurText } from '@/constants/code/TextAnimations/blurTextCode';
+import { useToast } from 'primevue/usetoast';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const animateBy = ref<'words' | 'letters'>('words')
-const direction = ref<'top' | 'bottom'>('top')
-const delay = ref(200)
-const stepDuration = ref(0.35)
-const threshold = ref(0.1)
-const rootMargin = ref('0px')
-const showCallback = ref(true)
-const toast = useToast()
-const { rerenderKey, forceRerender } = useForceRerender()
+const animateBy = ref<'words' | 'letters'>('words');
+const direction = ref<'top' | 'bottom'>('top');
+const delay = ref(200);
+const stepDuration = ref(0.35);
+const threshold = ref(0.1);
+const rootMargin = ref('0px');
+const showCallback = ref(true);
+const toast = useToast();
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const toggleAnimateBy = () => {
-  animateBy.value = animateBy.value === 'words' ? 'letters' : 'words'
-  forceRerender()
-}
+  animateBy.value = animateBy.value === 'words' ? 'letters' : 'words';
+  forceRerender();
+};
 
 const toggleDirection = () => {
-  direction.value = direction.value === 'top' ? 'bottom' : 'top'
-  forceRerender()
-}
+  direction.value = direction.value === 'top' ? 'bottom' : 'top';
+  forceRerender();
+};
 
 const showToast = () => {
   toast.add({
     severity: 'secondary',
     summary: 'Animation Finished!',
     life: 3000
-  })
-}
+  });
+};
 
 const propData = [
   { name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
-  { name: 'animateBy', type: 'string', default: '"words"', description: 'Determines whether to animate by "words" or "letters".' },
-  { name: 'direction', type: 'string', default: '"top"', description: 'Direction from which the words/letters appear ("top" or "bottom").' },
-  { name: 'delay', type: 'number', default: '200', description: 'Delay between animations for each word/letter (in ms).' },
-  { name: 'stepDuration', type: 'number', default: '0.35', description: 'The time taken for each letter/word to animate (in seconds).' },
-  { name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold for triggering the animation.' },
+  {
+    name: 'animateBy',
+    type: 'string',
+    default: '"words"',
+    description: 'Determines whether to animate by "words" or "letters".'
+  },
+  {
+    name: 'direction',
+    type: 'string',
+    default: '"top"',
+    description: 'Direction from which the words/letters appear ("top" or "bottom").'
+  },
+  {
+    name: 'delay',
+    type: 'number',
+    default: '200',
+    description: 'Delay between animations for each word/letter (in ms).'
+  },
+  {
+    name: 'stepDuration',
+    type: 'number',
+    default: '0.35',
+    description: 'The time taken for each letter/word to animate (in seconds).'
+  },
+  {
+    name: 'threshold',
+    type: 'number',
+    default: '0.1',
+    description: 'Intersection threshold for triggering the animation.'
+  },
   { name: 'rootMargin', type: 'string', default: '"0px"', description: 'Root margin for the intersection observer.' },
   { name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
   { name: 'animationFrom', type: 'object', default: 'undefined', description: 'Custom initial animation properties.' },
-  { name: 'animationTo', type: 'array', default: 'undefined', description: 'Custom target animation properties array.' },
+  {
+    name: 'animationTo',
+    type: 'array',
+    default: 'undefined',
+    description: 'Custom target animation properties array.'
+  },
   { name: 'easing', type: 'function', default: '(t) => t', description: 'Custom easing function for the animation.' },
-  { name: 'onAnimationComplete', type: 'function', default: 'undefined', description: 'Callback function triggered when all animations complete.' }
-]
+  {
+    name: 'onAnimationComplete',
+    type: 'function',
+    default: 'undefined',
+    description: 'Callback function triggered when all animations complete.'
+  }
+];
 </script>
diff --git a/src/demo/TextAnimations/CircularTextDemo.vue b/src/demo/TextAnimations/CircularTextDemo.vue
index 09eb7fc..37a2adf 100644
--- a/src/demo/TextAnimations/CircularTextDemo.vue
+++ b/src/demo/TextAnimations/CircularTextDemo.vue
@@ -3,24 +3,38 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
-          <CircularText :key="rerenderKey" text="VUE * BITS * IS * AWESOME * " :spin-duration="spinDuration"
-            :on-hover="onHover" class-name="text-blue-500" />
+          <CircularText
+            :key="rerenderKey"
+            text="VUE * BITS * IS * AWESOME * "
+            :spin-duration="spinDuration"
+            :on-hover="onHover"
+            class-name="text-blue-500"
+          />
         </div>
 
         <Customize>
           <div class="flex gap-4 flex-wrap">
             <button
               class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
-              @click="toggleOnHover">
-              On Hover: <span class="text-[#a1a1aa]">&nbsp;{{ onHover }}</span>
+              @click="toggleOnHover"
+            >
+              On Hover:
+              <span class="text-[#a1a1aa]">&nbsp;{{ onHover }}</span>
             </button>
           </div>
 
-          <PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="50" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Spin Duration (s)"
+            v-model="spinDuration"
+            :min="1"
+            :max="50"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['motion-v']" />
       </template>
 
@@ -36,40 +50,45 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import CircularText from '../../content/TextAnimations/CircularText/CircularText.vue'
-import { circularText } from '@/constants/code/TextAnimations/circularTextCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import CircularText from '../../content/TextAnimations/CircularText/CircularText.vue';
+import { circularText } from '@/constants/code/TextAnimations/circularTextCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const onHover = ref<'slowDown' | 'speedUp' | 'pause' | 'goBonkers'>('speedUp')
-const spinDuration = ref(20)
-const { rerenderKey, forceRerender } = useForceRerender()
+const onHover = ref<'slowDown' | 'speedUp' | 'pause' | 'goBonkers'>('speedUp');
+const spinDuration = ref(20);
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const hoverOptions: Array<'slowDown' | 'speedUp' | 'pause' | 'goBonkers'> = [
   'slowDown',
   'speedUp',
   'pause',
   'goBonkers'
-]
+];
 
 const toggleOnHover = () => {
-  const currentIndex = hoverOptions.indexOf(onHover.value)
-  const nextIndex = (currentIndex + 1) % hoverOptions.length
-  onHover.value = hoverOptions[nextIndex]
-  forceRerender()
-}
+  const currentIndex = hoverOptions.indexOf(onHover.value);
+  const nextIndex = (currentIndex + 1) % hoverOptions.length;
+  onHover.value = hoverOptions[nextIndex];
+  forceRerender();
+};
 
 const propData = [
   { name: 'text', type: 'string', default: '""', description: 'The text content to display in a circular pattern.' },
   { name: 'spinDuration', type: 'number', default: '20', description: 'Duration of one full rotation in seconds.' },
-  { name: 'onHover', type: 'string', default: '"speedUp"', description: 'Hover behavior: "slowDown", "speedUp", "pause", or "goBonkers".' },
+  {
+    name: 'onHover',
+    type: 'string',
+    default: '"speedUp"',
+    description: 'Hover behavior: "slowDown", "speedUp", "pause", or "goBonkers".'
+  },
   { name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' }
-]
+];
 </script>
diff --git a/src/demo/TextAnimations/CurvedLoopDemo.vue b/src/demo/TextAnimations/CurvedLoopDemo.vue
index 9380ddb..26b4961 100644
--- a/src/demo/TextAnimations/CurvedLoopDemo.vue
+++ b/src/demo/TextAnimations/CurvedLoopDemo.vue
@@ -3,26 +3,57 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container relative h-[500px] overflow-hidden p-0">
-          <CurvedLoop :key="rerenderKey" :marquee-text="marqueeText" :speed="speed" :curve-amount="curveAmount"
-            :interactive="interactive" />
+          <CurvedLoop
+            :key="rerenderKey"
+            :marquee-text="marqueeText"
+            :speed="speed"
+            :curve-amount="curveAmount"
+            :interactive="interactive"
+          />
         </div>
 
         <Customize>
           <div class="mb-4">
             <label class="block text-sm font-medium mb-2">Marquee Text</label>
-            <input v-model="marqueeText" type="text" placeholder="Enter text..."
+
+            <input
+              v-model="marqueeText"
+              type="text"
+              placeholder="Enter text..."
               class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
-              @input="forceRerender" />
+              @input="forceRerender"
+            />
           </div>
 
-          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Speed"
+            v-model="speed"
+            :min="0"
+            :max="10"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Curve Amount" v-model="curveAmount" :min="-400" :max="400" :step="10" value-unit="px"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Curve Amount"
+            v-model="curveAmount"
+            :min="-400"
+            :max="400"
+            :step="10"
+            value-unit="px"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSwitch title="Draggable" :model-value="interactive"
-            @update:model-value="(val: boolean) => { interactive = val; forceRerender() }" />
+          <PreviewSwitch
+            title="Draggable"
+            :model-value="interactive"
+            @update:model-value="
+              (val: boolean) => {
+                interactive = val;
+                forceRerender();
+              }
+            "
+          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -40,24 +71,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import CurvedLoop from '../../content/TextAnimations/CurvedLoop/CurvedLoop.vue'
-import { curvedLoop } from '@/constants/code/TextAnimations/curvedLoopCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import CurvedLoop from '../../content/TextAnimations/CurvedLoop/CurvedLoop.vue';
+import { curvedLoop } from '@/constants/code/TextAnimations/curvedLoopCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const marqueeText = ref('Be ✦ Creative ✦ With ✦ Vue ✦ Bits ✦')
-const speed = ref(2)
-const curveAmount = ref(400)
-const interactive = ref(true)
+const marqueeText = ref('Be ✦ Creative ✦ With ✦ Vue ✦ Bits ✦');
+const speed = ref(2);
+const curveAmount = ref(400);
+const interactive = ref(true);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   {
@@ -96,5 +127,5 @@ const propData = [
     default: 'true',
     description: 'Whether the marquee can be dragged by the user'
   }
-]
+];
 </script>
diff --git a/src/demo/TextAnimations/DecryptedTextDemo.vue b/src/demo/TextAnimations/DecryptedTextDemo.vue
index 29c70e4..262714e 100644
--- a/src/demo/TextAnimations/DecryptedTextDemo.vue
+++ b/src/demo/TextAnimations/DecryptedTextDemo.vue
@@ -4,20 +4,52 @@
       <template #preview>
         <div class="demo-container relative py-6 overflow-hidden">
           <RefreshButton @click="forceRerender" />
+
           <div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">
-            <DecryptedText :speed="speed" text="Ahoy, matey!" :max-iterations="maxIterations" :sequential="sequential"
-              :reveal-direction="revealDirection" parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly" :animate-on="animateOn" />
-            <DecryptedText :speed="speed" text="Set yer eyes on this" :max-iterations="maxIterations"
-              :sequential="sequential" :reveal-direction="revealDirection" parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly" :animate-on="animateOn" />
-            <DecryptedText :speed="speed" text="And try tinkerin' round'" :max-iterations="maxIterations"
-              :sequential="sequential" :reveal-direction="revealDirection" parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly" :animate-on="animateOn" />
-            <DecryptedText :speed="speed" text="with these here props, arr!" :max-iterations="maxIterations"
-              :sequential="sequential" :reveal-direction="revealDirection" parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly" :animate-on="animateOn"
-              @animation-complete="() => console.log('✅ Animation Finished!')" />
+            <DecryptedText
+              :speed="speed"
+              text="Ahoy, matey!"
+              :max-iterations="maxIterations"
+              :sequential="sequential"
+              :reveal-direction="revealDirection"
+              parent-class-name="decrypted-text"
+              :use-original-chars-only="useOriginalCharsOnly"
+              :animate-on="animateOn"
+            />
+
+            <DecryptedText
+              :speed="speed"
+              text="Set yer eyes on this"
+              :max-iterations="maxIterations"
+              :sequential="sequential"
+              :reveal-direction="revealDirection"
+              parent-class-name="decrypted-text"
+              :use-original-chars-only="useOriginalCharsOnly"
+              :animate-on="animateOn"
+            />
+
+            <DecryptedText
+              :speed="speed"
+              text="And try tinkerin' round'"
+              :max-iterations="maxIterations"
+              :sequential="sequential"
+              :reveal-direction="revealDirection"
+              parent-class-name="decrypted-text"
+              :use-original-chars-only="useOriginalCharsOnly"
+              :animate-on="animateOn"
+            />
+
+            <DecryptedText
+              :speed="speed"
+              text="with these here props, arr!"
+              :max-iterations="maxIterations"
+              :sequential="sequential"
+              :reveal-direction="revealDirection"
+              parent-class-name="decrypted-text"
+              :use-original-chars-only="useOriginalCharsOnly"
+              :animate-on="animateOn"
+              @animation-complete="() => console.log('✅ Animation Finished!')"
+            />
           </div>
         </div>
 
@@ -26,17 +58,48 @@
 
           <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Speed" v-model="speed" :min="10" :max="200" :step="10" value-unit="ms"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Speed"
+            v-model="speed"
+            :min="10"
+            :max="200"
+            :step="10"
+            value-unit="ms"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Iterations" v-model="maxIterations" :min="1" :max="50" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Iterations"
+            v-model="maxIterations"
+            :min="1"
+            :max="50"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSelect title="Animation Trigger" v-model="animateOn" :options="animateOptions"
-            @update:model-value="(val) => { animateOn = val as 'view' | 'hover'; forceRerender(); }" />
+          <PreviewSelect
+            title="Animation Trigger"
+            v-model="animateOn"
+            :options="animateOptions"
+            @update:model-value="
+              val => {
+                animateOn = val as 'view' | 'hover';
+                forceRerender();
+              }
+            "
+          />
 
-          <PreviewSelect title="Animation Direction" v-model="revealDirection" :options="directionOptions"
-            @update:model-value="(val) => { revealDirection = val as 'start' | 'end' | 'center'; forceRerender(); }" />
+          <PreviewSelect
+            title="Animation Direction"
+            v-model="revealDirection"
+            :options="directionOptions"
+            @update:model-value="
+              val => {
+                revealDirection = val as 'start' | 'end' | 'center';
+                forceRerender();
+              }
+            "
+          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -54,39 +117,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import RefreshButton from '../../components/common/RefreshButton.vue'
-import DecryptedText from '../../content/TextAnimations/DecryptedText/DecryptedText.vue'
-import { decryptedText } from '@/constants/code/TextAnimations/decryptedTextCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import DecryptedText from '../../content/TextAnimations/DecryptedText/DecryptedText.vue';
+import { decryptedText } from '@/constants/code/TextAnimations/decryptedTextCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender()
+const { rerenderKey: key, forceRerender } = useForceRerender();
 
-const speed = ref(60)
-const maxIterations = ref(10)
-const sequential = ref(true)
-const useOriginalCharsOnly = ref(false)
-const revealDirection = ref<'start' | 'end' | 'center'>('start')
-const animateOn = ref<'view' | 'hover'>('view')
+const speed = ref(60);
+const maxIterations = ref(10);
+const sequential = ref(true);
+const useOriginalCharsOnly = ref(false);
+const revealDirection = ref<'start' | 'end' | 'center'>('start');
+const animateOn = ref<'view' | 'hover'>('view');
 
 const animateOptions = [
   { label: 'View', value: 'view' },
   { label: 'Hover', value: 'hover' }
-]
+];
 
 const directionOptions = [
   { label: 'Start', value: 'start' },
   { label: 'End', value: 'end' },
   { label: 'Center', value: 'center' }
-]
+];
 
 const propData = [
   {
@@ -149,7 +212,7 @@ const propData = [
     default: '"hover"',
     description: 'Trigger scrambling on hover or scroll-into-view.'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/TextAnimations/FallingTextDemo.vue b/src/demo/TextAnimations/FallingTextDemo.vue
index 7fa3c77..b087cc7 100644
--- a/src/demo/TextAnimations/FallingTextDemo.vue
+++ b/src/demo/TextAnimations/FallingTextDemo.vue
@@ -3,10 +3,15 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
-          <FallingText :key="key"
+          <FallingText
+            :key="key"
             text="Vue Bits is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow."
-            :highlight-words="['Vue', 'Bits', 'animated', 'components', 'simplify']" :trigger="trigger"
-            :gravity="gravity" font-size="2rem" :mouse-constraint-stiffness="mouseConstraintStiffness" />
+            :highlight-words="['Vue', 'Bits', 'animated', 'components', 'simplify']"
+            :trigger="trigger"
+            :gravity="gravity"
+            font-size="2rem"
+            :mouse-constraint-stiffness="mouseConstraintStiffness"
+          />
 
           <div class="absolute z-0 text-[4rem] font-[900] text-[#222] select-none" v-if="!effectStarted">
             {{ trigger === 'hover' ? 'Hover Me' : trigger === 'click' ? 'Click Me' : 'Auto Start' }}
@@ -14,17 +19,34 @@
         </div>
 
         <Customize>
-          <PreviewSelect title="Animation Trigger" v-model="trigger" :options="triggerOptions"
-            @update:model-value="forceRerender" />
+          <PreviewSelect
+            title="Animation Trigger"
+            v-model="trigger"
+            :options="triggerOptions"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Gravity" v-model="gravity" :min="0.1" :max="2" :step="0.01"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Gravity"
+            v-model="gravity"
+            :min="0.1"
+            :max="2"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Mouse Constraint Stiffness" v-model="mouseConstraintStiffness" :min="0.1" :max="2"
-            :step="0.1" @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Mouse Constraint Stiffness"
+            v-model="mouseConstraintStiffness"
+            :min="0.1"
+            :max="2"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['matter-js']" />
       </template>
 
@@ -40,33 +62,33 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSelect from '../../components/common/PreviewSelect.vue'
-import FallingText from '../../content/TextAnimations/FallingText/FallingText.vue'
-import { fallingText } from '@/constants/code/TextAnimations/fallingTextCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref, computed } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import FallingText from '../../content/TextAnimations/FallingText/FallingText.vue';
+import { fallingText } from '@/constants/code/TextAnimations/fallingTextCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender()
+const { rerenderKey: key, forceRerender } = useForceRerender();
 
-const gravity = ref(0.56)
-const mouseConstraintStiffness = ref(0.9)
-const trigger = ref<'hover' | 'click' | 'auto' | 'scroll'>('hover')
+const gravity = ref(0.56);
+const mouseConstraintStiffness = ref(0.9);
+const trigger = ref<'hover' | 'click' | 'auto' | 'scroll'>('hover');
 
-const effectStarted = computed(() => trigger.value === 'auto')
+const effectStarted = computed(() => trigger.value === 'auto');
 
 const triggerOptions = [
   { value: 'hover', label: 'Hover' },
   { value: 'click', label: 'Click' },
   { value: 'auto', label: 'Auto' },
   { value: 'scroll', label: 'Scroll' }
-]
+];
 
 const propData = [
   {
@@ -117,7 +139,7 @@ const propData = [
     default: '"1rem"',
     description: 'Font size applied to the text before it falls.'
   }
-]
+];
 </script>
 
 <style scoped></style>
diff --git a/src/demo/TextAnimations/FuzzyTextDemo.vue b/src/demo/TextAnimations/FuzzyTextDemo.vue
index d031243..06a4fcc 100644
--- a/src/demo/TextAnimations/FuzzyTextDemo.vue
+++ b/src/demo/TextAnimations/FuzzyTextDemo.vue
@@ -4,23 +4,58 @@
       <template #preview>
         <div class="demo-container relative h-[500px] overflow-hidden">
           <div class="flex flex-col items-center justify-center h-full">
-            <FuzzyText :key="`main-${rerenderKey}`" text="404" :base-intensity="baseIntensity"
-              :hover-intensity="hoverIntensity" :enable-hover="enableHover" :font-size="140" />
+            <FuzzyText
+              :key="`main-${rerenderKey}`"
+              text="404"
+              :base-intensity="baseIntensity"
+              :hover-intensity="hoverIntensity"
+              :enable-hover="enableHover"
+              :font-size="140"
+            />
+
             <div class="my-1" />
-            <FuzzyText :key="`sub-${rerenderKey}`" text="not found" :base-intensity="baseIntensity"
-              :hover-intensity="hoverIntensity" :enable-hover="enableHover" :font-size="70" font-family="Gochi Hand" />
+
+            <FuzzyText
+              :key="`sub-${rerenderKey}`"
+              text="not found"
+              :base-intensity="baseIntensity"
+              :hover-intensity="hoverIntensity"
+              :enable-hover="enableHover"
+              :font-size="70"
+              font-family="Gochi Hand"
+            />
           </div>
         </div>
 
         <Customize>
-          <PreviewSlider title="Base Intensity" v-model="baseIntensity" :min="0" :max="1" :step="0.01"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Base Intensity"
+            v-model="baseIntensity"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Hover Intensity" v-model="hoverIntensity" :min="0" :max="2" :step="0.01"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Hover Intensity"
+            v-model="hoverIntensity"
+            :min="0"
+            :max="2"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSwitch title="Enable Hover" :model-value="enableHover"
-            @update:model-value="(val: boolean) => { enableHover = val; forceRerender() }" />
+          <PreviewSwitch
+            title="Enable Hover"
+            :model-value="enableHover"
+            @update:model-value="
+              (val: boolean) => {
+                enableHover = val;
+                forceRerender();
+              }
+            "
+          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -38,23 +73,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.vue'
-import { fuzzyText } from '@/constants/code/TextAnimations/fuzzyTextCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import FuzzyText from '../../content/TextAnimations/FuzzyText/FuzzyText.vue';
+import { fuzzyText } from '@/constants/code/TextAnimations/fuzzyTextCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const baseIntensity = ref(0.2)
-const hoverIntensity = ref(0.5)
-const enableHover = ref(true)
+const baseIntensity = ref(0.2);
+const hoverIntensity = ref(0.5);
+const enableHover = ref(true);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   {
@@ -67,7 +102,8 @@ const propData = [
     name: 'fontSize',
     type: 'number | string',
     default: '"clamp(2rem, 8vw, 8rem)"',
-    description: 'Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels).'
+    description:
+      'Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels).'
   },
   {
     name: 'fontWeight',
@@ -105,5 +141,5 @@ const propData = [
     default: '0.5',
     description: 'The fuzz intensity when the text is hovered.'
   }
-]
+];
 </script>
diff --git a/src/demo/TextAnimations/GradientTextDemo.vue b/src/demo/TextAnimations/GradientTextDemo.vue
index 23447d3..22507f6 100644
--- a/src/demo/TextAnimations/GradientTextDemo.vue
+++ b/src/demo/TextAnimations/GradientTextDemo.vue
@@ -3,18 +3,29 @@
     <TabbedLayout>
       <template #preview>
         <h2 class="demo-title-extra">Default</h2>
+
         <div class="demo-container relative min-h-[150px] flex items-center justify-center">
           <div class="text-[2rem]">
-            <GradientText text="Add a splash of color!" :colors="gradientPreview" :animation-speed="speed"
-              :show-border="false" />
+            <GradientText
+              text="Add a splash of color!"
+              :colors="gradientPreview"
+              :animation-speed="speed"
+              :show-border="false"
+            />
           </div>
         </div>
 
         <h2 class="demo-title-extra">Border Animation</h2>
+
         <div class="demo-container relative min-h-[150px] flex items-center justify-center">
           <div class="text-[2rem]">
-            <GradientText text="Now with a cool border!" :colors="gradientPreview" :animation-speed="speed"
-              :show-border="true" class-name="custom-gradient-class" />
+            <GradientText
+              text="Now with a cool border!"
+              :colors="gradientPreview"
+              :animation-speed="speed"
+              :show-border="true"
+              class-name="custom-gradient-class"
+            />
           </div>
         </div>
 
@@ -24,20 +35,32 @@
           <div class="flex flex-col gap-0">
             <div class="mb-4">
               <label class="block text-sm font-medium mb-2">Colors</label>
-              <input v-model="colors" type="text" placeholder="Enter colors separated by commas" maxlength="100"
-                class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]" />
+
+              <input
+                v-model="colors"
+                type="text"
+                placeholder="Enter colors separated by commas"
+                maxlength="100"
+                class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+              />
             </div>
-            <div class="w-[300px] h-3 rounded-md border border-[#271E37]" :style="{
-              background: `linear-gradient(to right, ${gradientPreview.join(', ')})`
-            }" />
+
+            <div
+              class="w-[300px] h-3 rounded-md border border-[#271E37]"
+              :style="{
+                background: `linear-gradient(to right, ${gradientPreview.join(', ')})`
+              }"
+            />
           </div>
         </Customize>
 
         <p class="demo-extra-info mt-4 flex items-center gap-2">
           <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd"
+            <path
+              fill-rule="evenodd"
               d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
           </svg>
           For a smoother animation, the gradient should start and end with the same color.
         </p>
@@ -57,20 +80,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import GradientText from '../../content/TextAnimations/GradientText/GradientText.vue'
-import { gradientText } from '@/constants/code/TextAnimations/gradientTextCode'
+import { ref, computed } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import GradientText from '../../content/TextAnimations/GradientText/GradientText.vue';
+import { gradientText } from '@/constants/code/TextAnimations/gradientTextCode';
 
-const colors = ref('#40ffaa, #4079ff, #40ffaa, #4079ff, #40ffaa')
-const speed = ref(3)
+const colors = ref('#40ffaa, #4079ff, #40ffaa, #4079ff, #40ffaa');
+const speed = ref(3);
 
-const gradientPreview = computed(() => colors.value.split(',').map(color => color.trim()))
+const gradientPreview = computed(() => colors.value.split(',').map(color => color.trim()));
 
 const propData = [
   {
@@ -103,7 +126,7 @@ const propData = [
     default: 'false',
     description: 'Determines whether a border with the gradient effect is displayed.'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index b053bfe..381a9a0 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -2,30 +2,35 @@
   <TabbedLayout>
     <template #preview>
       <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
-
-        <div class="scroll-instruction">
-          Scroll Down
-        </div>
+        <div class="scroll-instruction">Scroll Down</div>
 
         <div class="scroll-content">
-          <ScrollFloat 
-            :children="scrollText" 
-            :animation-duration="animationDuration" 
+          <ScrollFloat
+            :children="scrollText"
+            :animation-duration="animationDuration"
             :ease="ease"
-            :scroll-start="scrollStart" 
-            :scroll-end="scrollEnd" 
+            :scroll-start="scrollStart"
+            :scroll-end="scrollEnd"
             :stagger="stagger"
-            :container-class-name="containerClassName" 
+            :container-class-name="containerClassName"
             :text-class-name="textClassName"
-            :scroll-container-ref="{ current: containerRef }" 
-            :key="rerenderKey" 
+            :scroll-container-ref="{ current: containerRef }"
+            :key="rerenderKey"
           />
         </div>
       </div>
 
       <Customize>
         <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
-        <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
+
+        <PreviewSlider
+          title="Animation Duration:"
+          v-model="animationDuration"
+          :min="1"
+          :max="10"
+          :step="0.1"
+          value-unit="s"
+        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -42,60 +47,57 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { gsap } from 'gsap'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode'
-
-
-const containerRef = ref<HTMLElement | null>(null)
-const scrollText = ref("vuebits")
-const animationDuration = ref(1)
-const ease = ref('back.inOut(2)')
-const scrollStart = ref('center bottom+=50%')
-const scrollEnd = ref('bottom bottom-=40%')
-const stagger = ref(0.03)
-const containerClassName = ref("")
-const textClassName = ref("")
-const rerenderKey = ref(0)
+import { ref, onMounted, onUnmounted } from 'vue';
+import { gsap } from 'gsap';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode';
 
+const containerRef = ref<HTMLElement | null>(null);
+const scrollText = ref('vuebits');
+const animationDuration = ref(1);
+const ease = ref('back.inOut(2)');
+const scrollStart = ref('center bottom+=50%');
+const scrollEnd = ref('bottom bottom-=40%');
+const stagger = ref(0.03);
+const containerClassName = ref('');
+const textClassName = ref('');
+const rerenderKey = ref(0);
 
 const smoothScroll = (e: WheelEvent) => {
-  e.preventDefault()
-  const container = containerRef.value
-  if (!container) return
+  e.preventDefault();
+  const container = containerRef.value;
+  if (!container) return;
 
-  const delta = e.deltaY || e.detail
-  const scrollAmount = delta * 2
+  const delta = e.deltaY || e.detail;
+  const scrollAmount = delta * 2;
 
   gsap.to(container, {
     scrollTop: container.scrollTop + scrollAmount,
     duration: 1,
-    ease: "power3.out",
-    overwrite: "auto"
-  })
-}
-
+    ease: 'power3.out',
+    overwrite: 'auto'
+  });
+};
 
 onMounted(() => {
-  const container = containerRef.value
+  const container = containerRef.value;
   if (container) {
-    container.addEventListener('wheel', smoothScroll, { passive: false })
+    container.addEventListener('wheel', smoothScroll, { passive: false });
   }
-})
+});
 
 onUnmounted(() => {
-  const container = containerRef.value
+  const container = containerRef.value;
   if (container) {
-    container.removeEventListener('wheel', smoothScroll)
+    container.removeEventListener('wheel', smoothScroll);
   }
-})
+});
 
 const propData = [
   {
@@ -152,8 +154,9 @@ const propData = [
     default: '0.03',
     description: 'Delay between each character animation'
   }
-]
+];
 </script>
+
 <style scoped>
 .demo-container {
   height: 60vh;
@@ -180,4 +183,4 @@ const propData = [
 .scroll-content {
   color: aliceblue;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/demo/TextAnimations/ShinyTextDemo.vue b/src/demo/TextAnimations/ShinyTextDemo.vue
index 60f8575..4c47c34 100644
--- a/src/demo/TextAnimations/ShinyTextDemo.vue
+++ b/src/demo/TextAnimations/ShinyTextDemo.vue
@@ -3,11 +3,13 @@
     <TabbedLayout>
       <template #preview>
         <h2 class="demo-title-extra">Basic</h2>
+
         <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
           <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
         </div>
 
         <h2 class="demo-title-extra">Button Text</h2>
+
         <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
           <div class="shiny-button">
             <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
@@ -15,9 +17,14 @@
         </div>
 
         <h2 class="demo-title-extra">Configurable Speed</h2>
+
         <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
-          <ShinyText :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'" :disabled="false" :speed="speed"
-            class-name="shiny-text-demo" />
+          <ShinyText
+            :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
+            :disabled="false"
+            :speed="speed"
+            class-name="shiny-text-demo"
+          />
         </div>
 
         <Customize>
@@ -39,17 +46,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import ShinyText from '../../content/TextAnimations/ShinyText/ShinyText.vue'
-import { shinyText } from '@/constants/code/TextAnimations/shinyTextCode'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import ShinyText from '../../content/TextAnimations/ShinyText/ShinyText.vue';
+import { shinyText } from '@/constants/code/TextAnimations/shinyTextCode';
 
-const speed = ref(3)
+const speed = ref(3);
 
 const propData = [
   {
@@ -76,7 +83,7 @@ const propData = [
     default: "''",
     description: 'Adds custom classes to the root element.'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/TextAnimations/SplitTextDemo.vue b/src/demo/TextAnimations/SplitTextDemo.vue
index 5366320..d6fb0c1 100644
--- a/src/demo/TextAnimations/SplitTextDemo.vue
+++ b/src/demo/TextAnimations/SplitTextDemo.vue
@@ -5,25 +5,56 @@
         <div class="demo-container">
           <RefreshButton @refresh="forceRerender" />
 
-          <SplitText :key="rerenderKey" text="Hello, Vue!" :delay="delay" :duration="duration" :ease="ease"
-            :split-type="splitType" :threshold="threshold" class="split-text-demo-text"
-            @animation-complete="() => { showCallback && showToast() }" />
+          <SplitText
+            :key="rerenderKey"
+            text="Hello, Vue!"
+            :delay="delay"
+            :duration="duration"
+            :ease="ease"
+            :split-type="splitType"
+            :threshold="threshold"
+            class="split-text-demo-text"
+            @animation-complete="
+              () => {
+                showCallback && showToast();
+              }
+            "
+          />
         </div>
 
         <Customize>
           <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Stagger Delay (ms)"
+            v-model="delay"
+            :min="10"
+            :max="500"
+            :step="10"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Duration (s)"
+            v-model="duration"
+            :min="0.1"
+            :max="2"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Threshold"
+            v-model="threshold"
+            :min="0.1"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['gsap']" />
       </template>
 
@@ -39,37 +70,37 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import RefreshButton from '../../components/common/RefreshButton.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue'
-import { splitText } from '@/constants/code/TextAnimations/splitTextCode'
-import { useToast } from 'primevue/usetoast'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue';
+import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
+import { useToast } from 'primevue/usetoast';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const delay = ref(10)
-const duration = ref(2)
-const ease = ref('elastic.out(1, 0.3)')
-const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars')
-const threshold = ref(0.1)
-const showCallback = ref(true)
-const toast = useToast()
-const { rerenderKey, forceRerender } = useForceRerender()
+const delay = ref(10);
+const duration = ref(2);
+const ease = ref('elastic.out(1, 0.3)');
+const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars');
+const threshold = ref(0.1);
+const showCallback = ref(true);
+const toast = useToast();
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const showToast = () => {
   toast.add({
     severity: 'secondary',
     summary: 'Animation Finished!',
     life: 3000
-  })
-}
+  });
+};
 
 const propData = [
   { name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
@@ -77,12 +108,42 @@ const propData = [
   { name: 'delay', type: 'number', default: '100', description: 'Delay between animations for each letter (in ms).' },
   { name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
   { name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
-  { name: 'splitType', type: 'string', default: '"chars"', description: 'Split type: "chars", "words", "lines", or "words, chars".' },
-  { name: 'from', type: 'object', default: '{ opacity: 0, y: 40 }', description: 'Initial GSAP properties for each letter/word.' },
-  { name: 'to', type: 'object', default: '{ opacity: 1, y: 0 }', description: 'Target GSAP properties for each letter/word.' },
-  { name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold to trigger the animation (0-1).' },
+  {
+    name: 'splitType',
+    type: 'string',
+    default: '"chars"',
+    description: 'Split type: "chars", "words", "lines", or "words, chars".'
+  },
+  {
+    name: 'from',
+    type: 'object',
+    default: '{ opacity: 0, y: 40 }',
+    description: 'Initial GSAP properties for each letter/word.'
+  },
+  {
+    name: 'to',
+    type: 'object',
+    default: '{ opacity: 1, y: 0 }',
+    description: 'Target GSAP properties for each letter/word.'
+  },
+  {
+    name: 'threshold',
+    type: 'number',
+    default: '0.1',
+    description: 'Intersection threshold to trigger the animation (0-1).'
+  },
   { name: 'rootMargin', type: 'string', default: '"-100px"', description: 'Root margin for the ScrollTrigger.' },
-  { name: 'textAlign', type: 'string', default: '"center"', description: 'Text alignment: "left", "center", "right", etc.' },
-  { name: 'onLetterAnimationComplete', type: 'function', default: 'undefined', description: 'Callback function when all animations complete.' }
-]
-</script>
\ No newline at end of file
+  {
+    name: 'textAlign',
+    type: 'string',
+    default: '"center"',
+    description: 'Text alignment: "left", "center", "right", etc.'
+  },
+  {
+    name: 'onLetterAnimationComplete',
+    type: 'function',
+    default: 'undefined',
+    description: 'Callback function when all animations complete.'
+  }
+];
+</script>
diff --git a/src/demo/TextAnimations/TextCursorDemo.vue b/src/demo/TextAnimations/TextCursorDemo.vue
index 5800f5c..ec45013 100644
--- a/src/demo/TextAnimations/TextCursorDemo.vue
+++ b/src/demo/TextAnimations/TextCursorDemo.vue
@@ -3,10 +3,16 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container relative h-[500px] overflow-hidden">
-          <TextCursor :key="key" :text="text" :follow-mouse-direction="followMouseDirection"
-            :random-float="randomFloat" />
+          <TextCursor
+            :key="key"
+            :text="text"
+            :follow-mouse-direction="followMouseDirection"
+            :random-float="randomFloat"
+          />
+
           <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none">
+            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+          >
             Hover Around!
           </div>
         </div>
@@ -14,17 +20,27 @@
         <Customize>
           <div class="mb-4">
             <label class="block text-sm font-medium mb-2">Text</label>
-            <input v-model="text" type="text" placeholder="Enter text..." maxlength="10"
-              class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]" />
+
+            <input
+              v-model="text"
+              type="text"
+              placeholder="Enter text..."
+              maxlength="10"
+              class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+            />
           </div>
 
-          <PreviewSwitch title="Follow Mouse Direction" v-model="followMouseDirection"
-            @update:model-value="forceRerender" />
+          <PreviewSwitch
+            title="Follow Mouse Direction"
+            v-model="followMouseDirection"
+            @update:model-value="forceRerender"
+          />
 
           <PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['motion-v']" />
       </template>
 
@@ -40,23 +56,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import TextCursor from '../../content/TextAnimations/TextCursor/TextCursor.vue'
-import { textCursor } from '@/constants/code/TextAnimations/textCursorCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import TextCursor from '../../content/TextAnimations/TextCursor/TextCursor.vue';
+import { textCursor } from '@/constants/code/TextAnimations/textCursorCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender()
+const { rerenderKey: key, forceRerender } = useForceRerender();
 
-const text = ref('💚')
-const followMouseDirection = ref(true)
-const randomFloat = ref(true)
+const text = ref('💚');
+const followMouseDirection = ref(true);
+const randomFloat = ref(true);
 
 const propData = [
   {
@@ -107,5 +123,5 @@ const propData = [
     default: '5',
     description: 'The maximum number of trail points to display.'
   }
-]
-</script>
\ No newline at end of file
+];
+</script>
diff --git a/src/demo/TextAnimations/TextPressureDemo.vue b/src/demo/TextAnimations/TextPressureDemo.vue
index 450c5ed..06a79cc 100644
--- a/src/demo/TextAnimations/TextPressureDemo.vue
+++ b/src/demo/TextAnimations/TextPressureDemo.vue
@@ -4,17 +4,33 @@
       <template #preview>
         <div class="demo-container relative bg-[#060010] min-h-[400px] max-h-[450px] overflow-hidden mb-6">
           <div class="w-full h-full">
-            <TextPressure :key="rerenderKey" :text="text" :flex="flex" :alpha="alpha" :stroke="stroke" :width="width"
-              :weight="weight" :italic="italic" :text-color="textColor" :stroke-color="strokeColor"
-              :min-font-size="36" />
+            <TextPressure
+              :key="rerenderKey"
+              :text="text"
+              :flex="flex"
+              :alpha="alpha"
+              :stroke="stroke"
+              :width="width"
+              :weight="weight"
+              :italic="italic"
+              :text-color="textColor"
+              :stroke-color="strokeColor"
+              :min-font-size="36"
+            />
           </div>
         </div>
 
         <Customize>
           <div class="mb-4">
             <label class="block text-sm font-medium mb-2">Text</label>
-            <input v-model="text" type="text" placeholder="Your text here..." maxlength="10"
-              class="w-[200px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]" />
+
+            <input
+              v-model="text"
+              type="text"
+              placeholder="Your text here..."
+              maxlength="10"
+              class="w-[200px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+            />
           </div>
 
           <div class="color-controls">
@@ -24,19 +40,73 @@
           </div>
 
           <p class="mt-6 text-[#999] text-sm">Animation Settings</p>
+
           <div class="flex gap-4 flex-wrap">
-            <PreviewSwitch title="Flex" :model-value="flex"
-              @update:model-value="(val: boolean) => { flex = val; forceRerender() }" />
-            <PreviewSwitch title="Alpha" :model-value="alpha"
-              @update:model-value="(val: boolean) => { alpha = val; forceRerender() }" />
-            <PreviewSwitch title="Stroke" :model-value="stroke"
-              @update:model-value="(val: boolean) => { stroke = val; forceRerender() }" />
-            <PreviewSwitch title="Width" :model-value="width"
-              @update:model-value="(val: boolean) => { width = val; forceRerender() }" />
-            <PreviewSwitch title="Weight" :model-value="weight"
-              @update:model-value="(val: boolean) => { weight = val; forceRerender() }" />
-            <PreviewSwitch title="Italic" :model-value="italic"
-              @update:model-value="(val: boolean) => { italic = val; forceRerender() }" />
+            <PreviewSwitch
+              title="Flex"
+              :model-value="flex"
+              @update:model-value="
+                (val: boolean) => {
+                  flex = val;
+                  forceRerender();
+                }
+              "
+            />
+
+            <PreviewSwitch
+              title="Alpha"
+              :model-value="alpha"
+              @update:model-value="
+                (val: boolean) => {
+                  alpha = val;
+                  forceRerender();
+                }
+              "
+            />
+
+            <PreviewSwitch
+              title="Stroke"
+              :model-value="stroke"
+              @update:model-value="
+                (val: boolean) => {
+                  stroke = val;
+                  forceRerender();
+                }
+              "
+            />
+
+            <PreviewSwitch
+              title="Width"
+              :model-value="width"
+              @update:model-value="
+                (val: boolean) => {
+                  width = val;
+                  forceRerender();
+                }
+              "
+            />
+
+            <PreviewSwitch
+              title="Weight"
+              :model-value="weight"
+              @update:model-value="
+                (val: boolean) => {
+                  weight = val;
+                  forceRerender();
+                }
+              "
+            />
+
+            <PreviewSwitch
+              title="Italic"
+              :model-value="italic"
+              @update:model-value="
+                (val: boolean) => {
+                  italic = val;
+                  forceRerender();
+                }
+              "
+            />
           </div>
         </Customize>
 
@@ -55,29 +125,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import PreviewColor from '../../components/common/PreviewColor.vue'
-import TextPressure from '../../content/TextAnimations/TextPressure/TextPressure.vue'
-import { textPressure } from '@/constants/code/TextAnimations/textPressureCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import TextPressure from '../../content/TextAnimations/TextPressure/TextPressure.vue';
+import { textPressure } from '@/constants/code/TextAnimations/textPressureCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const text = ref('Hello!')
-const flex = ref(true)
-const alpha = ref(false)
-const stroke = ref(false)
-const width = ref(true)
-const weight = ref(true)
-const italic = ref(true)
-const textColor = ref('#ffffff')
-const strokeColor = ref('#27FF64')
+const text = ref('Hello!');
+const flex = ref(true);
+const alpha = ref(false);
+const stroke = ref(false);
+const width = ref(true);
+const weight = ref(true);
+const italic = ref(true);
+const textColor = ref('#ffffff');
+const strokeColor = ref('#27FF64');
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   {
@@ -164,7 +234,7 @@ const propData = [
     default: '24',
     description: 'Sets a minimum font-size to avoid overly tiny text on smaller screens.'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/TextAnimations/TextTrailDemo.vue b/src/demo/TextAnimations/TextTrailDemo.vue
index 457768e..17b4084 100644
--- a/src/demo/TextAnimations/TextTrailDemo.vue
+++ b/src/demo/TextAnimations/TextTrailDemo.vue
@@ -3,28 +3,59 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container relative h-[500px] overflow-hidden p-0">
-          <TextTrail :key="`${key}-${animateColor}`" :noise-factor="noiseFactor" :noise-scale="noiseScale / 10000"
-            :font-weight="fontWeight" :alpha-persist-factor="alphaPersistFactor" :animate-color="animateColor"
-            :text-color="animateColor ? undefined : '#ffffff'" />
+          <TextTrail
+            :key="`${key}-${animateColor}`"
+            :noise-factor="noiseFactor"
+            :noise-scale="noiseScale / 10000"
+            :font-weight="fontWeight"
+            :alpha-persist-factor="alphaPersistFactor"
+            :animate-color="animateColor"
+            :text-color="animateColor ? undefined : '#ffffff'"
+          />
         </div>
 
         <Customize>
-          <PreviewSlider title="Noise Factor" v-model="noiseFactor" :min="1" :max="25" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Noise Factor"
+            v-model="noiseFactor"
+            :min="1"
+            :max="25"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Noise Scale" v-model="noiseScale" :min="0" :max="100" :step="1"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Noise Scale"
+            v-model="noiseScale"
+            :min="0"
+            :max="100"
+            :step="1"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Font Weight" v-model="fontWeight" :min="100" :max="900" :step="100"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Font Weight"
+            v-model="fontWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Alpha Persist Factor" v-model="alphaPersistFactor" :min="0.5" :max="0.95" :step="0.01"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Alpha Persist Factor"
+            v-model="alphaPersistFactor"
+            :min="0.5"
+            :max="0.95"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
 
           <PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['three']" />
       </template>
 
@@ -40,26 +71,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import TextTrail from '../../content/TextAnimations/TextTrail/TextTrail.vue'
-import { textTrail } from '@/constants/code/TextAnimations/textTrailCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import TextTrail from '../../content/TextAnimations/TextTrail/TextTrail.vue';
+import { textTrail } from '@/constants/code/TextAnimations/textTrailCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender()
+const { rerenderKey: key, forceRerender } = useForceRerender();
 
-const noiseFactor = ref(1)
-const noiseScale = ref(5)
-const fontWeight = ref(900)
-const alphaPersistFactor = ref(0.95)
-const animateColor = ref(false)
+const noiseFactor = ref(1);
+const noiseScale = ref(5);
+const fontWeight = ref(900);
+const alphaPersistFactor = ref(0.95);
+const animateColor = ref(false);
 
 const propData = [
   {
@@ -140,7 +171,7 @@ const propData = [
     default: '2',
     description: 'Supersampling factor for text quality (higher = better quality)'
   }
-]
+];
 </script>
 
 <style scoped>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index accbc0d..e207640 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -13,17 +13,41 @@
 
           <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
 
-          <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px"
-            @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Blur Amount"
+            v-model="blurAmount"
+            :min="0"
+            :max="15"
+            :step="0.5"
+            value-unit="px"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Animation Duration" v-model="animationDuration" :min="0.1" :max="3" :step="0.1"
-            value-unit="s" :disabled="!manualMode" @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Animation Duration"
+            v-model="animationDuration"
+            :min="0.1"
+            :max="3"
+            :step="0.1"
+            value-unit="s"
+            :disabled="!manualMode"
+            @update:model-value="forceRerender"
+          />
 
-          <PreviewSlider title="Pause Between Animations" v-model="pauseBetweenAnimations" :min="0" :max="5" :step="0.5"
-            value-unit="s" :disabled="manualMode" @update:model-value="forceRerender" />
+          <PreviewSlider
+            title="Pause Between Animations"
+            v-model="pauseBetweenAnimations"
+            :min="0"
+            :max="5"
+            :step="0.5"
+            value-unit="s"
+            :disabled="manualMode"
+            @update:model-value="forceRerender"
+          />
         </Customize>
 
         <PropTable :data="propData" />
+
         <Dependencies :dependency-list="['framer-motion']" />
       </template>
 
@@ -39,19 +63,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import TabbedLayout from "../../components/common/TabbedLayout.vue";
-import PropTable from "../../components/common/PropTable.vue";
-import CliInstallation from "../../components/code/CliInstallation.vue";
-import CodeExample from "../../components/code/CodeExample.vue";
-import Dependencies from "../../components/code/Dependencies.vue";
-import Customize from "../../components/common/Customize.vue";
-import PreviewColor from "../../components/common/PreviewColor.vue";
-import PreviewSlider from "../../components/common/PreviewSlider.vue";
-import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
-import TrueFocus from "../../content/TextAnimations/TrueFocus/TrueFocus.vue";
-import { trueFocus } from "../../constants/code/TextAnimations/trueFocusCode";
-import { useForceRerender } from "@/composables/useForceRerender";
+import { ref, computed } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import TrueFocus from '../../content/TextAnimations/TrueFocus/TrueFocus.vue';
+import { trueFocus } from '../../constants/code/TextAnimations/trueFocusCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
 const { rerenderKey: key, forceRerender } = useForceRerender();
 
@@ -59,59 +83,59 @@ const manualMode = ref(false);
 const blurAmount = ref(5);
 const animationDuration = ref(0.5);
 const pauseBetweenAnimations = ref(1);
-const borderColor = ref("#27FF64");
+const borderColor = ref('#27FF64');
 
 const config = computed(() => ({
-  sentence: "True Focus",
+  sentence: 'True Focus',
   manualMode: manualMode.value,
   blurAmount: blurAmount.value,
   borderColor: borderColor.value,
   animationDuration: animationDuration.value,
-  pauseBetweenAnimations: pauseBetweenAnimations.value,
+  pauseBetweenAnimations: pauseBetweenAnimations.value
 }));
 
 const propData = [
   {
-    name: "sentence",
-    type: "string",
+    name: 'sentence',
+    type: 'string',
     default: "'True Focus'",
-    description: "The text to display with the focus animation.",
+    description: 'The text to display with the focus animation.'
   },
   {
-    name: "manualMode",
-    type: "boolean",
-    default: "false",
-    description: "Disables automatic animation when set to true.",
+    name: 'manualMode',
+    type: 'boolean',
+    default: 'false',
+    description: 'Disables automatic animation when set to true.'
   },
   {
-    name: "blurAmount",
-    type: "number",
-    default: "5",
-    description: "The amount of blur applied to non-active words.",
+    name: 'blurAmount',
+    type: 'number',
+    default: '5',
+    description: 'The amount of blur applied to non-active words.'
   },
   {
-    name: "borderColor",
-    type: "string",
+    name: 'borderColor',
+    type: 'string',
     default: "'green'",
-    description: "The color of the focus borders.",
+    description: 'The color of the focus borders.'
   },
   {
-    name: "glowColor",
-    type: "string",
+    name: 'glowColor',
+    type: 'string',
     default: "'rgba(0, 255, 0, 0.6)'",
-    description: "The color of the glowing effect on the borders.",
+    description: 'The color of the glowing effect on the borders.'
   },
   {
-    name: "animationDuration",
-    type: "number",
-    default: "0.5",
-    description: "The duration of the animation for each word.",
+    name: 'animationDuration',
+    type: 'number',
+    default: '0.5',
+    description: 'The duration of the animation for each word.'
   },
   {
-    name: "pauseBetweenAnimations",
-    type: "number",
-    default: "1",
-    description: "Time to pause between focusing on each word (in auto mode).",
-  },
+    name: 'pauseBetweenAnimations',
+    type: 'number',
+    default: '1',
+    description: 'Time to pause between focusing on each word (in auto mode).'
+  }
 ];
 </script>
diff --git a/src/main.ts b/src/main.ts
index 1f7802d..f8f63f8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,32 +1,32 @@
 /* eslint-disable vue/multi-word-component-names */
 /* eslint-disable vue/no-reserved-component-names */
 
-import './css/main.css'
-import 'primeicons/primeicons.css'
+import './css/main.css';
+import 'primeicons/primeicons.css';
 
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
 
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
-import Button from 'primevue/button'
-import Toast from 'primevue/toast'
-import Select from 'primevue/select'
-import ToastService from 'primevue/toastservice'
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+import Button from 'primevue/button';
+import Toast from 'primevue/toast';
+import Select from 'primevue/select';
+import ToastService from 'primevue/toastservice';
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
 app.use(PrimeVue, {
   theme: {
     preset: Aura
   }
-})
-app.use(ToastService)
+});
+app.use(ToastService);
 
-app.component('Button', Button)
-app.component('Toast', Toast)
-app.component('Select', Select)
+app.component('Button', Button);
+app.component('Toast', Toast);
+app.component('Select', Select);
 
-app.mount('#app')
+app.mount('#app');
diff --git a/src/pages/CategoryPage.vue b/src/pages/CategoryPage.vue
index e481db5..5707a2b 100644
--- a/src/pages/CategoryPage.vue
+++ b/src/pages/CategoryPage.vue
@@ -7,6 +7,7 @@
         <template #default>
           <component :is="SubcategoryComponent" v-if="SubcategoryComponent" />
         </template>
+
         <template #fallback>
           <div class="loading-placeholder"></div>
         </template>
@@ -18,49 +19,53 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick, defineAsyncComponent } from 'vue'
-import { useRoute } from 'vue-router'
-import { componentMap } from '../constants/Components'
-import { decodeLabel } from '../utils/utils'
-import BackToTopButton from '@/components/common/BackToTopButton.vue'
-import '../css/category.css'
+import { ref, computed, watch, onMounted, nextTick, defineAsyncComponent } from 'vue';
+import { useRoute } from 'vue-router';
+import { componentMap } from '../constants/Components';
+import { decodeLabel } from '../utils/utils';
+import BackToTopButton from '@/components/common/BackToTopButton.vue';
+import '../css/category.css';
 
-const route = useRoute()
-const scrollRef = ref<HTMLDivElement | null>(null)
+const route = useRoute();
+const scrollRef = ref<HTMLDivElement | null>(null);
 
-const subcategory = computed(() => route.params.subcategory as string)
-const decodedLabel = computed(() => decodeLabel(subcategory.value))
+const subcategory = computed(() => route.params.subcategory as string);
+const decodedLabel = computed(() => decodeLabel(subcategory.value));
 
 const SubcategoryComponent = computed(() => {
   if (!subcategory.value) {
-    return null
+    return null;
   }
 
-  const componentLoader = componentMap[subcategory.value as keyof typeof componentMap]
+  const componentLoader = componentMap[subcategory.value as keyof typeof componentMap];
 
   if (!componentLoader) {
-    return null
+    return null;
   }
 
-  return defineAsyncComponent(componentLoader)
-})
+  return defineAsyncComponent(componentLoader);
+});
 
-watch(decodedLabel, (newLabel) => {
-  if (newLabel) {
-    document.title = `Vue Bits - ${newLabel}`
-  }
-}, { immediate: true })
+watch(
+  decodedLabel,
+  newLabel => {
+    if (newLabel) {
+      document.title = `Vue Bits - ${newLabel}`;
+    }
+  },
+  { immediate: true }
+);
 
 watch(subcategory, async () => {
   if (scrollRef.value) {
-    await nextTick()
-    scrollRef.value.scrollTo(0, 0)
+    await nextTick();
+    scrollRef.value.scrollTo(0, 0);
   }
-})
+});
 
 onMounted(() => {
   if (scrollRef.value) {
-    scrollRef.value.scrollTo(0, 0)
+    scrollRef.value.scrollTo(0, 0);
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
diff --git a/src/pages/LandingPage.vue b/src/pages/LandingPage.vue
index 187dfe3..c6d5ea9 100644
--- a/src/pages/LandingPage.vue
+++ b/src/pages/LandingPage.vue
@@ -1,44 +1,48 @@
 <template>
   <section class="landing-wrapper">
-    <div v-if="isMobile" class="mobile-hero-background-container" style="z-index: 0;">
+    <div v-if="isMobile" class="mobile-hero-background-container" style="z-index: 0">
       <img
         :src="heroImage"
         alt="Hero background"
         class="mobile-hero-background-image"
-        style="transform: translateY(-200px);"
+        style="transform: translateY(-200px)"
       />
     </div>
 
     <PlasmaWave :y-offset="-300" :x-offset="100" :rotation-deg="-30" />
+
     <Hero />
+
     <FeatureCards />
+
     <StartBuilding />
+
     <Footer />
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import Hero from '../components/landing/Hero/Hero.vue'
-import PlasmaWave from '@/components/landing/PlasmaWave/PlasmaWave.vue'
-import Footer from '@/components/landing/Footer/Footer.vue'
-import FeatureCards from '@/components/landing/FeatureCards/FeatureCards.vue'
-import StartBuilding from '@/components/landing/StartBuilding/StartBuilding.vue'
-import heroImage from '@/assets/common/hero.webp'
-const isMobile = ref(false)
+import { ref, onMounted, onUnmounted } from 'vue';
+import Hero from '../components/landing/Hero/Hero.vue';
+import PlasmaWave from '@/components/landing/PlasmaWave/PlasmaWave.vue';
+import Footer from '@/components/landing/Footer/Footer.vue';
+import FeatureCards from '@/components/landing/FeatureCards/FeatureCards.vue';
+import StartBuilding from '@/components/landing/StartBuilding/StartBuilding.vue';
+import heroImage from '@/assets/common/hero.webp';
+const isMobile = ref(false);
 
 const checkIsMobile = () => {
-  isMobile.value = window.innerWidth <= 768
-}
+  isMobile.value = window.innerWidth <= 768;
+};
 
 onMounted(() => {
-  document.title = 'Vue Bits - Animated UI Components For Vue'
-  window.scrollTo(0, 0)
-  checkIsMobile()
-  window.addEventListener('resize', checkIsMobile)
-})
+  document.title = 'Vue Bits - Animated UI Components For Vue';
+  window.scrollTo(0, 0);
+  checkIsMobile();
+  window.addEventListener('resize', checkIsMobile);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', checkIsMobile)
-})
+  window.removeEventListener('resize', checkIsMobile);
+});
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 73b8106..ff8650d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import LandingPage from '@/pages/LandingPage.vue'
-import CategoryPage from '@/pages/CategoryPage.vue'
-import CategoryLayout from '@/components/layouts/CategoryLayout.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import LandingPage from '@/pages/LandingPage.vue';
+import CategoryPage from '@/pages/CategoryPage.vue';
+import CategoryLayout from '@/components/layouts/CategoryLayout.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,7 +9,7 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: LandingPage,
+      component: LandingPage
     },
     {
       path: '/:category/:subcategory',
@@ -18,11 +18,11 @@ const router = createRouter({
         {
           path: '',
           name: 'category',
-          component: CategoryPage,
+          component: CategoryPage
         }
       ]
     }
-  ],
-})
+  ]
+});
 
-export default router
+export default router;
diff --git a/src/types/code.ts b/src/types/code.ts
index e55aef9..dff233f 100644
--- a/src/types/code.ts
+++ b/src/types/code.ts
@@ -1,7 +1,7 @@
 export interface CodeObject {
-  cli?: string
-  utility?: string
-  code?: string
-  usage?: string
-  installation?: string
+  cli?: string;
+  utility?: string;
+  code?: string;
+  usage?: string;
+  installation?: string;
 }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 8cfd2b7..0a2aa69 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -5,19 +5,19 @@
  */
 export const getStarsCount = async (repo: string = 'DavidHDev/vue-bits'): Promise<number> => {
   try {
-    const response = await fetch(`https://api.github.com/repos/${repo}`)
+    const response = await fetch(`https://api.github.com/repos/${repo}`);
 
     if (!response.ok) {
-      throw new Error(`GitHub API error: ${response.status}`)
+      throw new Error(`GitHub API error: ${response.status}`);
     }
 
-    const data = await response.json()
-    return data.stargazers_count || 0
+    const data = await response.json();
+    return data.stargazers_count || 0;
   } catch (error) {
-    console.error('Error fetching GitHub stars:', error)
-    throw error
+    console.error('Error fetching GitHub stars:', error);
+    throw error;
   }
-}
+};
 
 /**
  * Decodes a label from kebab-case to title case
@@ -25,10 +25,10 @@ export const getStarsCount = async (repo: string = 'DavidHDev/vue-bits'): Promis
  * @returns The decoded label (e.g., "Split Text")
  */
 export const decodeLabel = (label: string): string => {
-  if (!label) return ''
+  if (!label) return '';
 
   return label
     .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-}
\ No newline at end of file
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 0c7dc61..9328499 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,19 +1,11 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": [
-    "env.d.ts",
-    "src/**/*",
-    "src/**/*.vue"
-  ],
-  "exclude": [
-    "src/**/__tests__/*"
-  ],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/vite.config.ts b/vite.config.ts
index 3131a1b..1b17fe9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,22 +1,18 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import tailwindcss from '@tailwindcss/vite';
 
-import path from 'path'
+import path from 'path';
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx(),
-    tailwindcss(),
-  ],
+  plugins: [vue(), vueJsx(), tailwindcss()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@content': path.resolve(__dirname, 'src/content'),
-    },
-  },
-})
+      '@content': path.resolve(__dirname, 'src/content')
+    }
+  }
+});
diff --git a/wrangler.jsonc b/wrangler.jsonc
index fad6577..ba7a860 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -5,4 +5,4 @@
     "directory": "./dist",
     "not_found_handling": "single-page-application"
   }
-}
\ No newline at end of file
+}

From 56c36ee869232f993131b0d5c66a0387df7933b3 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 12:03:09 +0300
Subject: [PATCH 17/37] Update .prettierignore and standardize component import
 syntax in Components.ts

---
 .prettierignore             |  4 ++++
 src/constants/Components.ts | 28 ++++++++++++++--------------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 5d94291..f6ce375 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -32,3 +32,7 @@ Thumbs.db
 # Generated files
 coverage/
 *.tsbuildinfo
+
+# Other
+Components.ts
+Categories.ts
\ No newline at end of file
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index dc761d3..7db379f 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -5,8 +5,8 @@ const animations = {
   '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'),
+  'magnet': () => import('../demo/Animations/MagnetDemo.vue'),
+  'cubes': () => import('../demo/Animations/CubesDemo.vue'),
   'count-up': () => import('../demo/Animations/CountUpDemo.vue')
 };
 
@@ -28,12 +28,12 @@ const textAnimations = {
 };
 
 const components = {
-  masonry: () => import('../demo/Components/MasonryDemo.vue'),
+  'masonry': () => import('../demo/Components/MasonryDemo.vue'),
   'profile-card': () => import('../demo/Components/ProfileCardDemo.vue'),
-  dock: () => import('../demo/Components/DockDemo.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'),
+  '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'),
@@ -48,16 +48,16 @@ const components = {
 
 const backgrounds = {
   'dot-grid': () => import('../demo/Backgrounds/DotGridDemo.vue'),
-  silk: () => import('../demo/Backgrounds/SilkDemo.vue'),
-  lightning: () => import('../demo/Backgrounds/LightningDemo.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'),
+  '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')
 };
 

From a0e049e447d72a074b4e17a6cab7e035d6cf568c Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 12:05:16 +0300
Subject: [PATCH 18/37] Format ScrollReveal component and demo for improved
 readability and consistency

---
 .../code/TextAnimations/scrollRevealCode.ts   |   6 +-
 .../ScrollReveal/ScrollReveal.vue             | 286 +++++++++---------
 src/demo/TextAnimations/ScrollRevealDemo.vue  | 280 +++++++++--------
 3 files changed, 280 insertions(+), 292 deletions(-)

diff --git a/src/constants/code/TextAnimations/scrollRevealCode.ts b/src/constants/code/TextAnimations/scrollRevealCode.ts
index 1919eba..d60d817 100644
--- a/src/constants/code/TextAnimations/scrollRevealCode.ts
+++ b/src/constants/code/TextAnimations/scrollRevealCode.ts
@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -23,4 +23,4 @@ export const scrollRevealCode: CodeObject = {
   import ScrollReveal from "./ScrollReveal.vue";
 </script>`,
   code
-}
\ No newline at end of file
+};
diff --git a/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
index e8db1c2..b9dda72 100644
--- a/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
+++ b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
@@ -1,165 +1,155 @@
 <template>
-    <h2 ref="containerRef" :class="`my-5 ${containerClassName}`">
-      <p 
-        :class="`leading-relaxed font-semibold ${textClassName}`"
-        style="font-size: clamp(1.6rem, 4vw, 3rem);"
-      >
-        <span 
-          v-for="(word, index) in splitText" 
-          :key="index"
-          :class="word.isWhitespace ? '' : 'inline-block word'"
-        >
-          {{ word.text }}
-        </span>
-      </p>
-    </h2>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-  import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/ScrollTrigger';
-  
-  gsap.registerPlugin(ScrollTrigger);
-  
-  interface Props {
-    children: string;
-    scrollContainerRef?: { current: HTMLElement | null };
-    enableBlur?: boolean;
-    baseOpacity?: number;
-    baseRotation?: number;
-    blurStrength?: number;
-    containerClassName?: string;
-    textClassName?: string;
-    rotationEnd?: string;
-    wordAnimationEnd?: string;
-  }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    enableBlur: true,
-    baseOpacity: 0.1,
-    baseRotation: 3,
-    blurStrength: 4,
-    containerClassName: '',
-    textClassName: '',
-    rotationEnd: 'bottom bottom',
-    wordAnimationEnd: 'bottom bottom'
-  });
-  
-  const containerRef = ref<HTMLElement | null>(null);
-  let scrollTriggerInstances: ScrollTrigger[] = [];
-  
-  const splitText = computed(() => {
-    const text = typeof props.children === 'string' ? props.children : '';
-    return text.split(/(\s+)/).map((word, index) => ({
-      text: word,
-      isWhitespace: word.match(/^\s+$/) !== null,
-      key: index
-    }));
-  });
-  
-  const initializeAnimation = () => {
-    const el = containerRef.value;
-    if (!el) return;
-  
-    scrollTriggerInstances.forEach(trigger => trigger.kill());
-    scrollTriggerInstances = [];
-  
-    const scroller =
-      props.scrollContainerRef && props.scrollContainerRef.current
-        ? props.scrollContainerRef.current
-        : window;
-  
-    const rotationTl = gsap.fromTo(
-      el,
-      { transformOrigin: '0% 50%', rotate: props.baseRotation },
-      {
-        ease: 'none',
-        rotate: 0,
-        scrollTrigger: {
-          trigger: el,
-          scroller,
-          start: 'top bottom',
-          end: props.rotationEnd,
-          scrub: true,
-        },
+  <h2 ref="containerRef" :class="`my-5 ${containerClassName}`">
+    <p :class="`leading-relaxed font-semibold ${textClassName}`" style="font-size: clamp(1.6rem, 4vw, 3rem)">
+      <span v-for="(word, index) in splitText" :key="index" :class="word.isWhitespace ? '' : 'inline-block word'">
+        {{ word.text }}
+      </span>
+    </p>
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface Props {
+  children: string;
+  scrollContainerRef?: { current: HTMLElement | null };
+  enableBlur?: boolean;
+  baseOpacity?: number;
+  baseRotation?: number;
+  blurStrength?: number;
+  containerClassName?: string;
+  textClassName?: string;
+  rotationEnd?: string;
+  wordAnimationEnd?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  enableBlur: true,
+  baseOpacity: 0.1,
+  baseRotation: 3,
+  blurStrength: 4,
+  containerClassName: '',
+  textClassName: '',
+  rotationEnd: 'bottom bottom',
+  wordAnimationEnd: 'bottom bottom'
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+let scrollTriggerInstances: ScrollTrigger[] = [];
+
+const splitText = computed(() => {
+  const text = typeof props.children === 'string' ? props.children : '';
+  return text.split(/(\s+)/).map((word, index) => ({
+    text: word,
+    isWhitespace: word.match(/^\s+$/) !== null,
+    key: index
+  }));
+});
+
+const initializeAnimation = () => {
+  const el = containerRef.value;
+  if (!el) return;
+
+  scrollTriggerInstances.forEach(trigger => trigger.kill());
+  scrollTriggerInstances = [];
+
+  const scroller =
+    props.scrollContainerRef && props.scrollContainerRef.current ? props.scrollContainerRef.current : window;
+
+  const rotationTl = gsap.fromTo(
+    el,
+    { transformOrigin: '0% 50%', rotate: props.baseRotation },
+    {
+      ease: 'none',
+      rotate: 0,
+      scrollTrigger: {
+        trigger: el,
+        scroller,
+        start: 'top bottom',
+        end: props.rotationEnd,
+        scrub: true
       }
-    );
-  
-    if (rotationTl.scrollTrigger) {
-      scrollTriggerInstances.push(rotationTl.scrollTrigger);
     }
-  
-    const wordElements = el.querySelectorAll('.word');
-  
-    const opacityTl = gsap.fromTo(
+  );
+
+  if (rotationTl.scrollTrigger) {
+    scrollTriggerInstances.push(rotationTl.scrollTrigger);
+  }
+
+  const wordElements = el.querySelectorAll('.word');
+
+  const opacityTl = gsap.fromTo(
+    wordElements,
+    { opacity: props.baseOpacity, willChange: 'opacity' },
+    {
+      ease: 'none',
+      opacity: 1,
+      stagger: 0.05,
+      scrollTrigger: {
+        trigger: el,
+        scroller,
+        start: 'top bottom-=20%',
+        end: props.wordAnimationEnd,
+        scrub: true
+      }
+    }
+  );
+
+  if (opacityTl.scrollTrigger) {
+    scrollTriggerInstances.push(opacityTl.scrollTrigger);
+  }
+
+  if (props.enableBlur) {
+    const blurTl = gsap.fromTo(
       wordElements,
-      { opacity: props.baseOpacity, willChange: 'opacity' },
+      { filter: `blur(${props.blurStrength}px)` },
       {
         ease: 'none',
-        opacity: 1,
+        filter: 'blur(0px)',
         stagger: 0.05,
         scrollTrigger: {
           trigger: el,
           scroller,
           start: 'top bottom-=20%',
           end: props.wordAnimationEnd,
-          scrub: true,
-        },
+          scrub: true
+        }
       }
     );
-  
-    if (opacityTl.scrollTrigger) {
-      scrollTriggerInstances.push(opacityTl.scrollTrigger);
-    }
 
-    if (props.enableBlur) {
-      const blurTl = gsap.fromTo(
-        wordElements,
-        { filter: `blur(${props.blurStrength}px)` },
-        {
-          ease: 'none',
-          filter: 'blur(0px)',
-          stagger: 0.05,
-          scrollTrigger: {
-            trigger: el,
-            scroller,
-            start: 'top bottom-=20%',
-            end: props.wordAnimationEnd,
-            scrub: true,
-          },
-        }
-      );
-  
-      if (blurTl.scrollTrigger) {
-        scrollTriggerInstances.push(blurTl.scrollTrigger);
-      }
+    if (blurTl.scrollTrigger) {
+      scrollTriggerInstances.push(blurTl.scrollTrigger);
     }
-  };
-  
-  onMounted(() => {
+  }
+};
+
+onMounted(() => {
+  initializeAnimation();
+});
+
+onUnmounted(() => {
+  scrollTriggerInstances.forEach(trigger => trigger.kill());
+});
+
+watch(
+  [
+    () => props.children,
+    () => props.scrollContainerRef,
+    () => props.enableBlur,
+    () => props.baseRotation,
+    () => props.baseOpacity,
+    () => props.rotationEnd,
+    () => props.wordAnimationEnd,
+    () => props.blurStrength
+  ],
+  () => {
     initializeAnimation();
-  });
-  
-  onUnmounted(() => {
-    scrollTriggerInstances.forEach(trigger => trigger.kill());
-  });
-  
-  watch(
-    [
-      () => props.children,
-      () => props.scrollContainerRef,
-      () => props.enableBlur,
-      () => props.baseRotation,
-      () => props.baseOpacity,
-      () => props.rotationEnd,
-      () => props.wordAnimationEnd,
-      () => props.blurStrength
-    ],
-    () => {
-      initializeAnimation();
-    },
-    { deep: true }
-  );
-  </script>
-  
\ No newline at end of file
+  },
+  { deep: true }
+);
+</script>
diff --git a/src/demo/TextAnimations/ScrollRevealDemo.vue b/src/demo/TextAnimations/ScrollRevealDemo.vue
index 518ee48..65ab320 100644
--- a/src/demo/TextAnimations/ScrollRevealDemo.vue
+++ b/src/demo/TextAnimations/ScrollRevealDemo.vue
@@ -1,15 +1,8 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div 
-        ref="containerRef"
-        class="demo-container"
-        @wheel="smoothScroll"
-      >
-
-        <div class="scroll-instruction">
-          Scroll Down
-        </div>
+      <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
+        <div class="scroll-instruction">Scroll Down</div>
 
         <div class="scroll-content">
           <ScrollReveal
@@ -29,16 +22,19 @@
       </div>
 
       <Customize>
-
-          <PreviewSwitch 
-            title="Enable Hover" 
-            :model-value="enableBlur"
-            @update:model-value="(val: boolean) => { enableBlur = val; forceRerender() }" 
-          />
-          <PreviewSlider title="Base Opacity:" v-model="baseOpacity" :min="0" :max="1" :step="0.1" value-unit="" />
-          <PreviewSlider title="Base Rotation:" v-model="baseRotation" :min="0" :max="10" :step="0.5" value-unit="deg" />
-          <PreviewSlider title="Blur Strength:" v-model="blurStrength" :min="0" :max="10" :step="0.5" value-unit="px" />
-
+        <PreviewSwitch
+          title="Enable Hover"
+          :model-value="enableBlur"
+          @update:model-value="
+            (val: boolean) => {
+              enableBlur = val;
+              forceRerender();
+            }
+          "
+        />
+        <PreviewSlider title="Base Opacity:" v-model="baseOpacity" :min="0" :max="1" :step="0.1" value-unit="" />
+        <PreviewSlider title="Base Rotation:" v-model="baseRotation" :min="0" :max="10" :step="0.5" value-unit="deg" />
+        <PreviewSlider title="Blur Strength:" v-model="blurStrength" :min="0" :max="10" :step="0.5" value-unit="px" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -55,151 +51,153 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { gsap } from 'gsap'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode'
+import { ref, onMounted, onUnmounted } from 'vue';
+import { gsap } from 'gsap';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode';
 
-const containerRef = ref<HTMLElement | null>(null)
-const scrollText = ref("When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!")
-const enableBlur = ref(true)
-const baseOpacity = ref(0.1)
-const baseRotation = ref(3)
-const blurStrength = ref(4)
-const containerClassName = ref("")
-const textClassName = ref("")
-const rotationEnd = ref("bottom bottom")
-const wordAnimationEnd = ref("bottom bottom")
-const rerenderKey = ref(0)
+const containerRef = ref<HTMLElement | null>(null);
+const scrollText = ref(
+  'When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!'
+);
+const enableBlur = ref(true);
+const baseOpacity = ref(0.1);
+const baseRotation = ref(3);
+const blurStrength = ref(4);
+const containerClassName = ref('');
+const textClassName = ref('');
+const rotationEnd = ref('bottom bottom');
+const wordAnimationEnd = ref('bottom bottom');
+const rerenderKey = ref(0);
 
 const forceRerender = () => {
-rerenderKey.value++
-}
+  rerenderKey.value++;
+};
 
 const smoothScroll = (e: WheelEvent) => {
-e.preventDefault()
-const container = containerRef.value
-if (!container) return
-const delta = e.deltaY || e.detail
-const scrollAmount = delta * 2
+  e.preventDefault();
+  const container = containerRef.value;
+  if (!container) return;
+  const delta = e.deltaY || e.detail;
+  const scrollAmount = delta * 2;
 
-gsap.to(container, {
-  scrollTop: container.scrollTop + scrollAmount,
-  duration: 2,
-  ease: "power3.out",
-  overwrite: "auto"
-})
-}
+  gsap.to(container, {
+    scrollTop: container.scrollTop + scrollAmount,
+    duration: 2,
+    ease: 'power3.out',
+    overwrite: 'auto'
+  });
+};
 
 onMounted(() => {
-const container = containerRef.value
-if (container) {
-  container.addEventListener('wheel', smoothScroll, { passive: false })
-}
-})
+  const container = containerRef.value;
+  if (container) {
+    container.addEventListener('wheel', smoothScroll, { passive: false });
+  }
+});
 
 onUnmounted(() => {
-const container = containerRef.value
-if (container) {
-  container.removeEventListener('wheel', smoothScroll)
-}
-})
+  const container = containerRef.value;
+  if (container) {
+    container.removeEventListener('wheel', smoothScroll);
+  }
+});
 
 const propData = [
-{
-  name: 'children',
-  type: 'string',
-  default: '""',
-  description: 'The text content to be animated word by word'
-},
-{
-  name: 'scrollContainerRef',
-  type: 'object',
-  default: 'undefined',
-  description: 'Ref to a custom scroll container (defaults to window)'
-},
-{
-  name: 'enableBlur',
-  type: 'boolean',
-  default: 'true',
-  description: 'Whether to enable blur animation'
-},
-{
-  name: 'baseOpacity',
-  type: 'number',
-  default: '0.1',
-  description: 'Starting opacity value for words'
-},
-{
-  name: 'baseRotation',
-  type: 'number',
-  default: '3',
-  description: 'Starting rotation value in degrees'
-},
-{
-  name: 'blurStrength',
-  type: 'number',
-  default: '4',
-  description: 'Blur strength in pixels'
-},
-{
-  name: 'containerClassName',
-  type: 'string',
-  default: '""',
-  description: 'Additional CSS classes for the container element'
-},
-{
-  name: 'textClassName',
-  type: 'string',
-  default: '""',
-  description: 'Additional CSS classes for the text element'
-},
-{
-  name: 'rotationEnd',
-  type: 'string',
-  default: '"bottom bottom"',
-  description: 'ScrollTrigger end position for rotation animation'
-},
-{
-  name: 'wordAnimationEnd',
-  type: 'string',
-  default: '"bottom bottom"',
-  description: 'ScrollTrigger end position for word animations'
-}
-]
+  {
+    name: 'children',
+    type: 'string',
+    default: '""',
+    description: 'The text content to be animated word by word'
+  },
+  {
+    name: 'scrollContainerRef',
+    type: 'object',
+    default: 'undefined',
+    description: 'Ref to a custom scroll container (defaults to window)'
+  },
+  {
+    name: 'enableBlur',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether to enable blur animation'
+  },
+  {
+    name: 'baseOpacity',
+    type: 'number',
+    default: '0.1',
+    description: 'Starting opacity value for words'
+  },
+  {
+    name: 'baseRotation',
+    type: 'number',
+    default: '3',
+    description: 'Starting rotation value in degrees'
+  },
+  {
+    name: 'blurStrength',
+    type: 'number',
+    default: '4',
+    description: 'Blur strength in pixels'
+  },
+  {
+    name: 'containerClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the container element'
+  },
+  {
+    name: 'textClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the text element'
+  },
+  {
+    name: 'rotationEnd',
+    type: 'string',
+    default: '"bottom bottom"',
+    description: 'ScrollTrigger end position for rotation animation'
+  },
+  {
+    name: 'wordAnimationEnd',
+    type: 'string',
+    default: '"bottom bottom"',
+    description: 'ScrollTrigger end position for word animations'
+  }
+];
 </script>
 
 <style scoped>
 .demo-container {
-height: 60vh;
-overflow-y: auto;
+  height: 60vh;
+  overflow-y: auto;
 }
 
 .scroll-content {
-padding-top: 150vh !important; 
-padding-bottom: 50vh;
+  padding-top: 150vh !important;
+  padding-bottom: 50vh;
 }
 
 .scroll-instruction {
-text-align: center;
-color: #271E37;
-font-size: clamp(4rem, 6vw, 4rem);
-font-weight: 900;
-position: absolute;
-top: 50%;
-left: 0;
-right: 0;
-transform: translateY(-50%);
+  text-align: center;
+  color: #222;
+  font-size: clamp(4rem, 6vw, 4rem);
+  font-weight: 900;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
 }
 
 .scroll-content {
-color: aliceblue;
+  color: aliceblue;
 }
-</style>
\ No newline at end of file
+</style>

From c94862718e08bcae3805b88045a413fbddcf172d Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 12:25:34 +0300
Subject: [PATCH 19/37] Migrate MetallicPaint

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/Animations/metallicPaintCode.ts      |  47 +++
 .../MetallicPaint/MetallicPaint.vue           | 386 ++++++++++++++++++
 .../Animations/MetallicPaint/parseImage.ts    | 180 ++++++++
 src/demo/Animations/MetallicPaintDemo.vue     | 141 +++++++
 6 files changed, 756 insertions(+)
 create mode 100644 src/constants/code/Animations/metallicPaintCode.ts
 create mode 100644 src/content/Animations/MetallicPaint/MetallicPaint.vue
 create mode 100644 src/content/Animations/MetallicPaint/parseImage.ts
 create mode 100644 src/demo/Animations/MetallicPaintDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 88230a1..021944a 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -33,6 +33,7 @@ export const CATEGORIES = [
       'Glare Hover',
       'Magnet Lines',
       'Count Up',
+      'Metallic Paint',
       'Click Spark',
       'Magnet',
       'Cubes'
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 6c1a5f2..6f5a3cf 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -5,6 +5,7 @@ const animations = {
   'glare-hover': () => import('../demo/Animations/GlareHoverDemo.vue'),
   'magnet-lines': () => import('../demo/Animations/MagnetLinesDemo.vue'),
   'click-spark': () => import('../demo/Animations/ClickSparkDemo.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')
diff --git a/src/constants/code/Animations/metallicPaintCode.ts b/src/constants/code/Animations/metallicPaintCode.ts
new file mode 100644
index 0000000..de663c3
--- /dev/null
+++ 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
+}
diff --git a/src/content/Animations/MetallicPaint/MetallicPaint.vue b/src/content/Animations/MetallicPaint/MetallicPaint.vue
new file mode 100644
index 0000000..47a8afa
--- /dev/null
+++ b/src/content/Animations/MetallicPaint/MetallicPaint.vue
@@ -0,0 +1,386 @@
+<template>
+  <canvas ref="canvasRef" class="block w-full h-full object-contain" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+
+interface ShaderParams {
+  patternScale: number
+  refraction: number
+  edge: number
+  patternBlur: number
+  liquid: number
+  speed: number
+}
+
+interface Props {
+  imageData: ImageData
+  params?: ShaderParams
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  params: () => ({
+    patternScale: 2,
+    refraction: 0.015,
+    edge: 1,
+    patternBlur: 0.005,
+    liquid: 0.07,
+    speed: 0.3
+  })
+})
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const gl = ref<WebGL2RenderingContext | null>(null)
+const uniforms = ref<Record<string, WebGLUniformLocation>>({})
+const totalAnimationTime = ref(0)
+const lastRenderTime = ref(0)
+const animationId = ref<number>()
+
+const vertexShaderSource = `#version 300 es
+precision mediump float;
+
+in vec2 a_position;
+out vec2 vUv;
+
+void main() {
+    vUv = .5 * (a_position + 1.);
+    gl_Position = vec4(a_position, 0.0, 1.0);
+}`
+
+const liquidFragSource = `#version 300 es
+precision mediump float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D u_image_texture;
+uniform float u_time;
+uniform float u_ratio;
+uniform float u_img_ratio;
+uniform float u_patternScale;
+uniform float u_refraction;
+uniform float u_edge;
+uniform float u_patternBlur;
+uniform float u_liquid;
+
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+vec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; }
+vec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; }
+vec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); }
+float snoise(vec2 v) {
+    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+    vec2 i = floor(v + dot(v, C.yy));
+    vec2 x0 = v - i + dot(i, C.xx);
+    vec2 i1;
+    i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.);
+    vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+    i = mod289(i);
+    vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));
+    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.);
+    m = m*m;
+    m = m*m;
+    vec3 x = 2. * fract(p * C.www) - 1.;
+    vec3 h = abs(x) - 0.5;
+    vec3 ox = floor(x + 0.5);
+    vec3 a0 = x - ox;
+    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+    vec3 g;
+    g.x = a0.x * x0.x + h.x * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+    return 130. * dot(m, g);
+}
+
+vec2 get_img_uv() {
+    vec2 img_uv = vUv;
+    img_uv -= .5;
+    if (u_ratio > u_img_ratio) {
+        img_uv.x = img_uv.x * u_ratio / u_img_ratio;
+    } else {
+        img_uv.y = img_uv.y * u_img_ratio / u_ratio;
+    }
+    float scale_factor = 1.;
+    img_uv *= scale_factor;
+    img_uv += .5;
+    img_uv.y = 1. - img_uv.y;
+    return img_uv;
+}
+vec2 rotate(vec2 uv, float th) {
+    return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
+}
+float get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float b) {
+    float ch = c2;
+    float border = 0.;
+    float blur = u_patternBlur + extra_blur;
+    ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));
+    border = w[0];
+    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
+    b = smoothstep(.2, .8, b);
+    border = w[0] + .4 * (1. - b) * w[1];
+    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
+    border = w[0] + .5 * (1. - b) * w[1];
+    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
+    border = w[0] + w[1];
+    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
+    float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
+    float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
+    ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));
+    return ch;
+}
+float get_img_frame_alpha(vec2 uv, float img_frame_width) {
+    float img_frame_alpha = smoothstep(0., img_frame_width, uv.x) * smoothstep(1., 1. - img_frame_width, uv.x);
+    img_frame_alpha *= smoothstep(0., img_frame_width, uv.y) * smoothstep(1., 1. - img_frame_width, uv.y);
+    return img_frame_alpha;
+}
+void main() {
+    vec2 uv = vUv;
+    uv.y = 1. - uv.y;
+    uv.x *= u_ratio;
+    float diagonal = uv.x - uv.y;
+    float t = .001 * u_time;
+    vec2 img_uv = get_img_uv();
+    vec4 img = texture(u_image_texture, img_uv);
+    vec3 color = vec3(0.);
+    float opacity = 1.;
+    vec3 color1 = vec3(.98, 0.98, 1.);
+    vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, uv.x + uv.y));
+    float edge = img.r;
+    vec2 grad_uv = uv;
+    grad_uv -= .5;
+    float dist = length(grad_uv + vec2(0., .2 * diagonal));
+    grad_uv = rotate(grad_uv, (.25 - .2 * diagonal) * PI);
+    float bulge = pow(1.8 * dist, 1.2);
+    bulge = 1. - bulge;
+    bulge *= pow(uv.y, .3);
+    float cycle_width = u_patternScale;
+    float thin_strip_1_ratio = .12 / cycle_width * (1. - .4 * bulge);
+    float thin_strip_2_ratio = .07 / cycle_width * (1. + .4 * bulge);
+    float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);
+    float thin_strip_1_width = cycle_width * thin_strip_1_ratio;
+    float thin_strip_2_width = cycle_width * thin_strip_2_ratio;
+    opacity = 1. - smoothstep(.9 - .5 * u_edge, 1. - .5 * u_edge, edge);
+    opacity *= get_img_frame_alpha(img_uv, 0.01);
+    float noise = snoise(uv - t);
+    edge += (1. - edge) * u_liquid * noise;
+    float refr = 0.;
+    refr += (1. - bulge);
+    refr = clamp(refr, 0., 1.);
+    float dir = grad_uv.x;
+    dir += diagonal;
+    dir -= 2. * noise * diagonal * (smoothstep(0., 1., edge) * smoothstep(1., 0., edge));
+    bulge *= clamp(pow(uv.y, .1), .3, 1.);
+    dir *= (.1 + (1.1 - edge) * bulge);
+    dir *= smoothstep(1., .7, edge);
+    dir += .18 * (smoothstep(.1, .2, uv.y) * smoothstep(.4, .2, uv.y));
+    dir += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));
+    dir *= (.5 + .5 * pow(uv.y, 2.));
+    dir *= cycle_width;
+    dir -= t;
+    float refr_r = refr;
+    refr_r += .03 * bulge * noise;
+    float refr_b = 1.3 * refr;
+    refr_r += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(1., .4, bulge));
+    refr_r -= diagonal;
+    refr_b += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(.8, .4, bulge));
+    refr_b -= .2 * edge;
+    refr_r *= u_refraction;
+    refr_b *= u_refraction;
+    vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
+    w[1] -= .02 * smoothstep(.0, 1., edge + bulge);
+    float stripe_r = mod(dir + refr_r, 1.);
+    float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_refraction * bulge, bulge);
+    float stripe_g = mod(dir, 1.);
+    float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - diagonal), bulge);
+    float stripe_b = mod(dir - refr_b, 1.);
+    float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, bulge);
+    color = vec3(r, g, b);
+    color *= opacity;
+    fragColor = vec4(color, opacity);
+}
+`
+
+function updateUniforms() {
+  if (!gl.value || !uniforms.value) return
+  gl.value.uniform1f(uniforms.value.u_edge, props.params.edge)
+  gl.value.uniform1f(uniforms.value.u_patternBlur, props.params.patternBlur)
+  gl.value.uniform1f(uniforms.value.u_time, 0)
+  gl.value.uniform1f(uniforms.value.u_patternScale, props.params.patternScale)
+  gl.value.uniform1f(uniforms.value.u_refraction, props.params.refraction)
+  gl.value.uniform1f(uniforms.value.u_liquid, props.params.liquid)
+}
+
+function createShader(gl: WebGL2RenderingContext, sourceCode: string, type: number) {
+  const shader = gl.createShader(type)
+  if (!shader) {
+    return null
+  }
+
+  gl.shaderSource(shader, sourceCode)
+  gl.compileShader(shader)
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader))
+    gl.deleteShader(shader)
+    return null
+  }
+
+  return shader
+}
+
+function getUniforms(program: WebGLProgram, gl: WebGL2RenderingContext) {
+  const uniformsObj: Record<string, WebGLUniformLocation> = {}
+  const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)
+  for (let i = 0; i < uniformCount; i++) {
+    const uniformName = gl.getActiveUniform(program, i)?.name
+    if (!uniformName) continue
+    uniformsObj[uniformName] = gl.getUniformLocation(program, uniformName) as WebGLUniformLocation
+  }
+  return uniformsObj
+}
+
+function initShader() {
+  const canvas = canvasRef.value
+  const glContext = canvas?.getContext('webgl2', {
+    antialias: true,
+    alpha: true
+  })
+  if (!canvas || !glContext) {
+    return
+  }
+
+  const vertexShader = createShader(glContext, vertexShaderSource, glContext.VERTEX_SHADER)
+  const fragmentShader = createShader(glContext, liquidFragSource, glContext.FRAGMENT_SHADER)
+  const program = glContext.createProgram()
+  if (!program || !vertexShader || !fragmentShader) {
+    return
+  }
+
+  glContext.attachShader(program, vertexShader)
+  glContext.attachShader(program, fragmentShader)
+  glContext.linkProgram(program)
+
+  if (!glContext.getProgramParameter(program, glContext.LINK_STATUS)) {
+    console.error('Unable to initialize the shader program: ' + glContext.getProgramInfoLog(program))
+    return null
+  }
+
+  const uniformsObj = getUniforms(program, glContext)
+  uniforms.value = uniformsObj
+
+  const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])
+  const vertexBuffer = glContext.createBuffer()
+  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer)
+  glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW)
+
+  glContext.useProgram(program)
+
+  const positionLocation = glContext.getAttribLocation(program, 'a_position')
+  glContext.enableVertexAttribArray(positionLocation)
+
+  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer)
+  glContext.vertexAttribPointer(positionLocation, 2, glContext.FLOAT, false, 0, 0)
+
+  gl.value = glContext
+}
+
+function resizeCanvas() {
+  if (!canvasRef.value || !gl.value || !uniforms.value || !props.imageData) return
+  const imgRatio = props.imageData.width / props.imageData.height
+  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio)
+
+  const side = 1000
+  canvasRef.value.width = side * devicePixelRatio
+  canvasRef.value.height = side * devicePixelRatio
+  gl.value.viewport(0, 0, canvasRef.value.height, canvasRef.value.height)
+  gl.value.uniform1f(uniforms.value.u_ratio, 1)
+  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio)
+}
+
+function setupTexture() {
+  if (!gl.value || !uniforms.value) return
+
+  const existingTexture = gl.value.getParameter(gl.value.TEXTURE_BINDING_2D)
+  if (existingTexture) {
+    gl.value.deleteTexture(existingTexture)
+  }
+
+  const imageTexture = gl.value.createTexture()
+  gl.value.activeTexture(gl.value.TEXTURE0)
+  gl.value.bindTexture(gl.value.TEXTURE_2D, imageTexture)
+
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MIN_FILTER, gl.value.LINEAR)
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MAG_FILTER, gl.value.LINEAR)
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_S, gl.value.CLAMP_TO_EDGE)
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_T, gl.value.CLAMP_TO_EDGE)
+
+  gl.value.pixelStorei(gl.value.UNPACK_ALIGNMENT, 1)
+
+  try {
+    gl.value.texImage2D(
+      gl.value.TEXTURE_2D,
+      0,
+      gl.value.RGBA,
+      props.imageData?.width,
+      props.imageData?.height,
+      0,
+      gl.value.RGBA,
+      gl.value.UNSIGNED_BYTE,
+      props.imageData?.data
+    )
+
+    gl.value.uniform1i(uniforms.value.u_image_texture, 0)
+  } catch (e) {
+    console.error('Error uploading texture:', e)
+  }
+}
+
+function render(currentTime: number) {
+  if (!gl.value || !uniforms.value) return
+
+  const deltaTime = currentTime - lastRenderTime.value
+  lastRenderTime.value = currentTime
+
+  totalAnimationTime.value += deltaTime * props.params.speed
+  gl.value.uniform1f(uniforms.value.u_time, totalAnimationTime.value)
+  gl.value.drawArrays(gl.value.TRIANGLE_STRIP, 0, 4)
+  animationId.value = requestAnimationFrame(render)
+}
+
+function startAnimation() {
+  if (animationId.value) {
+    cancelAnimationFrame(animationId.value)
+  }
+  lastRenderTime.value = performance.now()
+  animationId.value = requestAnimationFrame(render)
+}
+
+onMounted(async () => {
+  await nextTick()
+  initShader()
+  updateUniforms()
+  resizeCanvas()
+  setupTexture()
+  startAnimation()
+  
+  window.addEventListener('resize', resizeCanvas)
+})
+
+onUnmounted(() => {
+  if (animationId.value) {
+    cancelAnimationFrame(animationId.value)
+  }
+  window.removeEventListener('resize', resizeCanvas)
+})
+
+watch(() => props.params, () => {
+  updateUniforms()
+}, { deep: true })
+
+watch(() => props.imageData, () => {
+  setupTexture()
+  resizeCanvas()
+}, { deep: true })
+</script>
diff --git a/src/content/Animations/MetallicPaint/parseImage.ts b/src/content/Animations/MetallicPaint/parseImage.ts
new file mode 100644
index 0000000..4627bee
--- /dev/null
+++ b/src/content/Animations/MetallicPaint/parseImage.ts
@@ -0,0 +1,180 @@
+export function parseImage(file: File): Promise<{ imageData: ImageData; pngBlob: Blob }> {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  return new Promise((resolve, reject) => {
+    if (!file || !ctx) {
+      reject(new Error('Invalid file or context'))
+      return
+    }
+
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = function () {
+      if (file.type === 'image/svg+xml') {
+        img.width = 1000
+        img.height = 1000
+      }
+
+      const MAX_SIZE = 1000
+      const MIN_SIZE = 500
+      let width = img.naturalWidth
+      let height = img.naturalHeight
+
+      if (width > MAX_SIZE || height > MAX_SIZE || width < MIN_SIZE || height < MIN_SIZE) {
+        if (width > height) {
+          if (width > MAX_SIZE) {
+            height = Math.round((height * MAX_SIZE) / width)
+            width = MAX_SIZE
+          } else if (width < MIN_SIZE) {
+            height = Math.round((height * MIN_SIZE) / width)
+            width = MIN_SIZE
+          }
+        } else {
+          if (height > MAX_SIZE) {
+            width = Math.round((width * MAX_SIZE) / height)
+            height = MAX_SIZE
+          } else if (height < MIN_SIZE) {
+            width = Math.round((width * MIN_SIZE) / height)
+            height = MIN_SIZE
+          }
+        }
+      }
+
+      canvas.width = width
+      canvas.height = height
+
+      const shapeCanvas = document.createElement('canvas')
+      shapeCanvas.width = width
+      shapeCanvas.height = height
+      const shapeCtx = shapeCanvas.getContext('2d')!
+      shapeCtx.drawImage(img, 0, 0, width, height)
+
+      const shapeImageData = shapeCtx.getImageData(0, 0, width, height)
+      const data = shapeImageData.data
+      const shapeMask = new Array(width * height).fill(false)
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const idx4 = (y * width + x) * 4
+          const r = data[idx4]
+          const g = data[idx4 + 1]
+          const b = data[idx4 + 2]
+          const a = data[idx4 + 3]
+          shapeMask[y * width + x] = !((r === 255 && g === 255 && b === 255 && a === 255) || a === 0)
+        }
+      }
+
+      function inside(x: number, y: number) {
+        if (x < 0 || x >= width || y < 0 || y >= height) return false
+        return shapeMask[y * width + x]
+      }
+
+      const boundaryMask = new Array(width * height).fill(false)
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const idx = y * width + x
+          if (!shapeMask[idx]) continue
+          let isBoundary = false
+          for (let ny = y - 1; ny <= y + 1 && !isBoundary; ny++) {
+            for (let nx = x - 1; nx <= x + 1 && !isBoundary; nx++) {
+              if (!inside(nx, ny)) {
+                isBoundary = true
+              }
+            }
+          }
+          if (isBoundary) {
+            boundaryMask[idx] = true
+          }
+        }
+      }
+
+      const interiorMask = new Array(width * height).fill(false)
+      for (let y = 1; y < height - 1; y++) {
+        for (let x = 1; x < width - 1; x++) {
+          const idx = y * width + x
+          if (
+            shapeMask[idx] &&
+            shapeMask[idx - 1] &&
+            shapeMask[idx + 1] &&
+            shapeMask[idx - width] &&
+            shapeMask[idx + width]
+          ) {
+            interiorMask[idx] = true
+          }
+        }
+      }
+
+      const u = new Float32Array(width * height).fill(0)
+      const newU = new Float32Array(width * height).fill(0)
+      const C = 0.01
+      const ITERATIONS = 300
+
+      function getU(x: number, y: number, arr: Float32Array) {
+        if (x < 0 || x >= width || y < 0 || y >= height) return 0
+        if (!shapeMask[y * width + x]) return 0
+        return arr[y * width + x]
+      }
+
+      for (let iter = 0; iter < ITERATIONS; iter++) {
+        for (let y = 0; y < height; y++) {
+          for (let x = 0; x < width; x++) {
+            const idx = y * width + x
+            if (!shapeMask[idx] || boundaryMask[idx]) {
+              newU[idx] = 0
+              continue
+            }
+            const sumN = getU(x + 1, y, u) + getU(x - 1, y, u) + getU(x, y + 1, u) + getU(x, y - 1, u)
+            newU[idx] = (C + sumN) / 4
+          }
+        }
+        u.set(newU)
+      }
+
+      let maxVal = 0
+      for (let i = 0; i < width * height; i++) {
+        if (u[i] > maxVal) maxVal = u[i]
+      }
+      const alpha = 2.0
+      const outImg = ctx.createImageData(width, height)
+
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const idx = y * width + x
+          const px = idx * 4
+          if (!shapeMask[idx]) {
+            outImg.data[px] = 255
+            outImg.data[px + 1] = 255
+            outImg.data[px + 2] = 255
+            outImg.data[px + 3] = 255
+          } else {
+            const raw = u[idx] / maxVal
+            const remapped = Math.pow(raw, alpha)
+            const gray = 255 * (1 - remapped)
+            outImg.data[px] = gray
+            outImg.data[px + 1] = gray
+            outImg.data[px + 2] = gray
+            outImg.data[px + 3] = 255
+          }
+        }
+      }
+      ctx.putImageData(outImg, 0, 0)
+
+      canvas.toBlob(
+        blob => {
+          if (!blob) {
+            reject(new Error('Failed to create PNG blob'))
+            return
+          }
+          resolve({
+            imageData: outImg,
+            pngBlob: blob
+          })
+        },
+        'image/png'
+      )
+    }
+
+    img.onerror = () => reject(new Error('Failed to load image'))
+    img.src = URL.createObjectURL(file)
+  })
+}
diff --git a/src/demo/Animations/MetallicPaintDemo.vue b/src/demo/Animations/MetallicPaintDemo.vue
new file mode 100644
index 0000000..438b53d
--- /dev/null
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="metallic-paint-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container relative h-[500px] overflow-hidden">
+          <MetallicPaint
+            v-if="imageData"
+            :key="rerenderKey"
+            :image-data="imageData"
+            :params="{
+              edge,
+              patternBlur,
+              patternScale,
+              refraction,
+              speed,
+              liquid
+            }"
+          />
+        </div>
+
+        <Customize>
+          <PreviewSlider
+            title="Edge"
+            v-model="edge"
+            :min="0"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Pattern Scale"
+            v-model="patternScale"
+            :min="1"
+            :max="5"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Pattern Blur"
+            v-model="patternBlur"
+            :min="0"
+            :max="0.1"
+            :step="0.001"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Refraction"
+            v-model="refraction"
+            :min="0"
+            :max="0.1"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Liquid"
+            v-model="liquid"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Speed"
+            v-model="speed"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="metallicPaint" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="metallicPaint.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import MetallicPaint from '../../content/Animations/MetallicPaint/MetallicPaint.vue'
+import { metallicPaint } from '@/constants/code/Animations/metallicPaintCode'
+import { parseImage } from '../../content/Animations/MetallicPaint/parseImage'
+import { useForceRerender } from '@/composables/useForceRerender'
+import logo from '@/assets/logos/vue-bits-logo-small-dark.svg'
+
+const imageData = ref<ImageData | null>(null)
+const edge = ref(0)
+const patternScale = ref(2)
+const refraction = ref(0.015)
+const patternBlur = ref(0.005)
+const liquid = ref(0.07)
+const speed = ref(0.3)
+
+const { rerenderKey, forceRerender } = useForceRerender()
+
+const propData = [
+  {
+    name: 'imageData',
+    type: 'ImageData',
+    default: 'none (required)',
+    description: 'The processed image data generated from the parseImage utility. This image data is used by the shader to create the liquid paper effect.'
+  },
+  {
+    name: 'params',
+    type: 'ShaderParams',
+    default: '',
+    description: 'An object to configure the shader effect. Properties include: patternScale, refraction, edge, patternBlur, liquid, speed'
+  }
+]
+
+onMounted(async () => {
+  try {
+    const response = await fetch(logo)
+    const blob = await response.blob()
+    const file = new File([blob], 'default.png', { type: blob.type })
+    const { imageData: processedImageData } = await parseImage(file)
+    imageData.value = processedImageData
+  } catch (err) {
+    console.error('Error loading default image:', err)
+  }
+})
+</script>

From 230f44f6e006da137b4f02f1a1dbc1b9b4d8c04b Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 13:42:20 +0300
Subject: [PATCH 20/37] Fix inconsistent quotation marks in GridMotionDemo.vue

---
 src/demo/Backgrounds/GridMotionDemo.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index 6cfd63b..4ba14d7 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -59,27 +59,27 @@ const images = Array.from({ length: numberOfImages }, () => imageUrl);
 
 const items = [
   'Item 1',
-  `<div key='item-1'>Custom Content</div>`,
+  `<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>`,
+  `<div key="item-2">Custom Content</div>`,
   'Item 4',
-  `<div key='item-1'>Custom Content</div>`,
+  `<div key="item-3">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>`,
+  `<div key="item-4">Custom Content</div>`,
   'Item 7',
-  `<div key='item-1'>Custom Content</div>`,
+  `<div key="item-5">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>`,
+  `<div key="item-6">Custom Content</div>`,
   'Item 10',
-  `<div key='item-1'>Custom Content</div>`,
+  `<div key="item-7">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>`,
+  `<div key="item-8">Custom Content</div>`,
   'Item 13',
-  `<div key='item-1'>Custom Content</div>`,
+  `<div key="item-9">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'
 ];

From 0359d8043c637a9e1ecdf7324ad14fa050d3c32e Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 14:07:57 +0300
Subject: [PATCH 21/37] Refactor GridMotion component and demo for improved
 item handling and styling

---
 .../code/Backgrounds/gridMotionCode.ts        | 32 ++-----------
 .../Backgrounds/GridMotion/GridMotion.vue     | 33 +++++++++----
 src/demo/Backgrounds/GridMotionDemo.vue       | 46 ++++---------------
 3 files changed, 36 insertions(+), 75 deletions(-)

diff --git a/src/constants/code/Backgrounds/gridMotionCode.ts b/src/constants/code/Backgrounds/gridMotionCode.ts
index 0203dc9..0a7cfbb 100644
--- a/src/constants/code/Backgrounds/gridMotionCode.ts
+++ b/src/constants/code/Backgrounds/gridMotionCode.ts
@@ -6,40 +6,16 @@ export const gridMotion: CodeObject = {
   installation: `npm i gsap`,
   usage: `<template>
     <GridMotion
-      :items="items"
+      :items="images"
     />
 </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 
- ];
+  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,
 };
diff --git a/src/content/Backgrounds/GridMotion/GridMotion.vue b/src/content/Backgrounds/GridMotion/GridMotion.vue
index 4740bca..ec6bf4f 100644
--- a/src/content/Backgrounds/GridMotion/GridMotion.vue
+++ b/src/content/Backgrounds/GridMotion/GridMotion.vue
@@ -9,16 +9,25 @@ interface GridMotionProps {
 
 const props = withDefaults(defineProps<GridMotionProps>(), {
   items: () => [],
-  gradientColor: 'black'
+  gradientColor: '#222222'
 });
 
 const gridRef = ref<HTMLElement | null>(null);
 const rowRefs = ref<HTMLElement[]>([]);
 const mouseX = ref(window.innerWidth / 2);
 
-const totalItems = 28;
-const defaultItems = Array.from({ length: totalItems }, (_, i) => `Item ${i + 1}`);
-const combinedItems = computed(() => (props.items.length > 0 ? props.items.slice(0, totalItems) : defaultItems));
+const totalItems = 70;
+const combinedItems = computed(() => {
+  if (props.items.length === 0) {
+    return [];
+  }
+
+  const repeatedItems = [];
+  for (let i = 0; i < totalItems; i++) {
+    repeatedItems.push(props.items[i % props.items.length]);
+  }
+  return repeatedItems;
+});
 
 function isImage(item: string) {
   return typeof item === 'string' && item.startsWith('http');
@@ -68,22 +77,26 @@ onMounted(() => {
     <section
       class="relative flex justify-center items-center w-full h-screen overflow-hidden"
       :style="{
-        background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`
+        background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
+        backgroundPosition: 'center'
       }"
     >
       <div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div>
 
-      <div
-        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center"
-      >
+      <div class="z-[2] relative flex-none gap-4 grid grid-cols-1 w-[150vw] h-[150vh] rotate-[-15deg] origin-center">
         <div
-          v-for="rowIndex in 4"
+          v-for="rowIndex in 10"
           :key="rowIndex"
           class="gap-4 grid grid-cols-7"
           :style="{ willChange: 'transform, filter' }"
           ref="rowRefs"
         >
-          <div v-for="itemIndex in 7" :key="itemIndex" class="relative">
+          <div
+            v-for="itemIndex in 7"
+            :key="itemIndex"
+            class="relative h-[200px]"
+            v-show="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
+          >
             <div
               class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
             >
diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index 4ba14d7..513cc4b 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -1,18 +1,10 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <h2 className="demo-title-extra">Images</h2>
-
-      <div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
+      <div class="demo-container h-[600px]">
         <GridMotion :items="images" />
       </div>
 
-      <h2 className="demo-title-extra">Custom Content</h2>
-
-      <div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
-        <GridMotion :items="items" />
-      </div>
-
       <PropTable :data="propData" />
 
       <Dependencies :dependency-list="['gsap']" />
@@ -53,34 +45,14 @@ const propData = [
 ];
 
 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';
+  'https://images.unsplash.com/photo-1748370987492-eb390a61dcda?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
 const numberOfImages = 30;
 const images = Array.from({ length: numberOfImages }, () => imageUrl);
-
-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-2">Custom Content</div>`,
-  'Item 4',
-  `<div key="item-3">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-4">Custom Content</div>`,
-  'Item 7',
-  `<div key="item-5">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-6">Custom Content</div>`,
-  'Item 10',
-  `<div key="item-7">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-8">Custom Content</div>`,
-  'Item 13',
-  `<div key="item-9">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'
-];
 </script>
+
+<style scoped>
+.demo-container {
+  padding: 0;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file

From 5d97fb34d9a1c4ea16b3dbd82a651b881781d1e5 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 14:35:43 +0300
Subject: [PATCH 22/37] remove duplicate styling and improve mobile for
 GridMotion

---
 .../Backgrounds/GridMotion/GridMotion.vue     | 20 ++++++++--------
 src/css/sidebar.css                           | 24 -------------------
 2 files changed, 10 insertions(+), 34 deletions(-)

diff --git a/src/content/Backgrounds/GridMotion/GridMotion.vue b/src/content/Backgrounds/GridMotion/GridMotion.vue
index ec6bf4f..3adda46 100644
--- a/src/content/Backgrounds/GridMotion/GridMotion.vue
+++ b/src/content/Backgrounds/GridMotion/GridMotion.vue
@@ -16,7 +16,7 @@ const gridRef = ref<HTMLElement | null>(null);
 const rowRefs = ref<HTMLElement[]>([]);
 const mouseX = ref(window.innerWidth / 2);
 
-const totalItems = 70;
+const totalItems = 150;
 const combinedItems = computed(() => {
   if (props.items.length === 0) {
     return [];
@@ -87,35 +87,35 @@ onMounted(() => {
         <div
           v-for="rowIndex in 10"
           :key="rowIndex"
-          class="gap-4 grid grid-cols-7"
+          class="gap-4 flex"
           :style="{ willChange: 'transform, filter' }"
           ref="rowRefs"
         >
           <div
-            v-for="itemIndex in 7"
+            v-for="itemIndex in 15"
             :key="itemIndex"
-            class="relative h-[200px]"
-            v-show="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
+            class="relative h-[250px] min-w-[300px] flex-shrink-0"
+            v-show="combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)]"
           >
             <div
               class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
             >
               <div
-                v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                v-if="isImage(combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)])"
                 class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
                 :style="{
-                  backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`
+                  backgroundImage: `url(${combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)]})`
                 }"
               ></div>
 
               <div
-                v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                v-else-if="isTag(combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)])"
                 class="z-[2] p-4 text-center"
-                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
+                v-html="combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)]"
               ></div>
 
               <div v-else class="z-[1] p-4 text-center">
-                {{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }}
+                {{ combinedItems[(rowIndex - 1) * 15 + (itemIndex - 1)] }}
               </div>
             </div>
           </div>
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
index 36080fd..ebae181 100644
--- a/src/css/sidebar.css
+++ b/src/css/sidebar.css
@@ -374,30 +374,6 @@
   border: 1px solid #333;
 }
 
-.cta-button-docs {
-  font-weight: 500;
-  font-size: 12px;
-  padding: 0 0 0 1rem;
-  height: 40px;
-  background: linear-gradient(135deg, rgb(30, 160, 63), rgba(24, 47, 255, 0.6));
-  background-size: 200% 200%;
-  backdrop-filter: blur(25px);
-  -webkit-backdrop-filter: blur(25px);
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  color: #fff;
-  border-radius: 50px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: space-between;
-  transition: 0.3s ease;
-}
-
-.cta-button-docs:hover {
-  transform: scale(0.98);
-}
-
 .star-count {
   background-color: #0b0b0b;
   margin-left: 1em;

From d4ff1787eb2eb189a2983b1518c63c564cbcfd40 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 14:52:04 +0300
Subject: [PATCH 23/37] Cleanup

---
 src/css/sidebar.css                          | 120 +++++--------------
 src/demo/TextAnimations/GradientTextDemo.vue |   8 +-
 src/demo/TextAnimations/ScrollFloatDemo.vue  |   2 +-
 src/demo/TextAnimations/ShinyTextDemo.vue    |   8 +-
 4 files changed, 42 insertions(+), 96 deletions(-)

diff --git a/src/css/sidebar.css b/src/css/sidebar.css
index ebae181..b0caf8b 100644
--- a/src/css/sidebar.css
+++ b/src/css/sidebar.css
@@ -26,7 +26,6 @@
   top: 57px;
   height: 100vh;
   width: 0;
-  padding: 1.25rem;
   overflow-y: auto;
   display: none;
 }
@@ -70,7 +69,8 @@
   height: 30px;
 }
 
-.sidebar-item {
+.sidebar-item,
+.drawer-navigation .sidebar-item {
   position: relative;
   font-size: 0.9rem;
   color: #a1a1aa;
@@ -81,12 +81,14 @@
   text-decoration: none !important;
 }
 
-.sidebar-item:hover {
+.sidebar-item:hover,
+.drawer-navigation .sidebar-item:hover {
   color: #fff;
   cursor: pointer;
 }
 
-.active-sidebar-item {
+.active-sidebar-item,
+.drawer-navigation .active-sidebar-item {
   width: fit-content;
   padding: 0.25em 0.25em 0.25em 0;
   color: #fff;
@@ -94,7 +96,8 @@
   transition: color 0.3s ease;
 }
 
-.active-sidebar-item::before {
+.active-sidebar-item::before,
+.drawer-navigation .active-sidebar-item::before {
   content: '';
   position: absolute;
   left: -1.15rem;
@@ -107,12 +110,15 @@
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.active-sidebar-item:hover {
+.active-sidebar-item:hover,
+.drawer-navigation .active-sidebar-item:hover {
   text-decoration: none;
 }
 
 .sidebar-item .new-tag,
-.sidebar-item .updated-tag {
+.sidebar-item .updated-tag,
+.drawer-navigation .sidebar-item .new-tag,
+.drawer-navigation .sidebar-item .updated-tag {
   margin-left: 0.6em;
   font-size: 10px;
   border-radius: 6px;
@@ -122,13 +128,15 @@
   text-decoration: none !important;
 }
 
-.sidebar-item .new-tag {
+.sidebar-item .new-tag,
+.drawer-navigation .sidebar-item .new-tag {
   color: #fff;
   border: 1px solid #27ff64;
   background-color: rgba(82, 39, 255, 0.3);
 }
 
-.sidebar-item .updated-tag {
+.sidebar-item .updated-tag,
+.drawer-navigation .sidebar-item .updated-tag {
   color: #fff;
   border: 1px solid #ffffff77;
   background-color: #ffffff26;
@@ -162,12 +170,10 @@
   background-size: 200% 200%;
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  color: #fff;
   border: none;
+  color: #fff;
   border-radius: 50px;
   cursor: pointer;
-
   display: flex;
   align-items: center;
   white-space: nowrap;
@@ -231,7 +237,8 @@
   margin-bottom: 1rem;
 }
 
-.category-name {
+.category-name,
+.drawer-navigation .category-name {
   margin-bottom: 0.5rem;
   font-weight: 900;
   letter-spacing: -0.5px;
@@ -239,7 +246,13 @@
   font-size: 1.1rem;
 }
 
-.category-items {
+.drawer-navigation .category-name {
+  font-size: 1rem;
+  letter-spacing: -1px;
+}
+
+.category-items,
+.drawer-navigation .category-items {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
@@ -519,83 +532,8 @@
 }
 
 .drawer-navigation .category-name {
-  margin-bottom: 0.5rem;
-  font-weight: 900;
-  letter-spacing: -1px;
-  color: #fff;
   font-size: 1rem;
-}
-
-.drawer-navigation .category-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding-left: 1rem;
-  border-left: 2px solid #ffffff33;
-  position: relative;
-}
-
-.drawer-navigation .sidebar-item {
-  position: relative;
-  font-size: 0.9rem;
-  color: #a1a1aa;
-  padding: 0.25em 0;
-  display: flex;
-  align-items: center;
-  transition: color 0.3s ease;
-  text-decoration: none !important;
-}
-
-.drawer-navigation .sidebar-item:hover {
-  color: #fff;
-}
-
-.drawer-navigation .active-sidebar-item {
-  width: fit-content;
-  padding: 0.25em 0.25em 0.25em 0;
-  color: #fff;
-  position: relative;
-  transition: color 0.3s ease;
-}
-
-.drawer-navigation .active-sidebar-item::before {
-  content: '';
-  position: absolute;
-  left: -1.15rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 2px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 1px;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.drawer-navigation .active-sidebar-item:hover {
-  text-decoration: none;
-}
-
-.drawer-navigation .sidebar-item .new-tag,
-.drawer-navigation .sidebar-item .updated-tag {
-  margin-left: 0.6em;
-  font-size: 10px;
-  border-radius: 6px;
-  font-weight: 500;
-  padding: 0.2em 0.4em;
-  opacity: 1;
-  text-decoration: none !important;
-}
-
-.drawer-navigation .sidebar-item .new-tag {
-  color: #fff;
-  border: 1px solid #27ff64;
-  background-color: rgba(82, 39, 255, 0.3);
-}
-
-.drawer-navigation .sidebar-item .updated-tag {
-  color: #fff;
-  border: 1px solid #ffffff77;
-  background-color: #ffffff26;
+  letter-spacing: -1px;
 }
 
 @media (min-width: 768px) {
@@ -608,4 +546,4 @@
   .drawer-header {
     padding: 0 1em;
   }
-}
+}
\ No newline at end of file
diff --git a/src/demo/TextAnimations/GradientTextDemo.vue b/src/demo/TextAnimations/GradientTextDemo.vue
index 22507f6..cc3fe96 100644
--- a/src/demo/TextAnimations/GradientTextDemo.vue
+++ b/src/demo/TextAnimations/GradientTextDemo.vue
@@ -4,7 +4,7 @@
       <template #preview>
         <h2 class="demo-title-extra">Default</h2>
 
-        <div class="demo-container relative min-h-[150px] flex items-center justify-center">
+        <div class="demo-container">
           <div class="text-[2rem]">
             <GradientText
               text="Add a splash of color!"
@@ -17,7 +17,7 @@
 
         <h2 class="demo-title-extra">Border Animation</h2>
 
-        <div class="demo-container relative min-h-[150px] flex items-center justify-center">
+        <div class="demo-container">
           <div class="text-[2rem]">
             <GradientText
               text="Now with a cool border!"
@@ -130,6 +130,10 @@ const propData = [
 </script>
 
 <style scoped>
+.demo-container {
+  min-height: 200px;
+}
+
 .demo-title-extra {
   font-size: 1.125rem;
   font-weight: 600;
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index 381a9a0..84850a3 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -59,7 +59,7 @@ import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode';
 
 const containerRef = ref<HTMLElement | null>(null);
-const scrollText = ref('vuebits');
+const scrollText = ref('Vue Bits!');
 const animationDuration = ref(1);
 const ease = ref('back.inOut(2)');
 const scrollStart = ref('center bottom+=50%');
diff --git a/src/demo/TextAnimations/ShinyTextDemo.vue b/src/demo/TextAnimations/ShinyTextDemo.vue
index 4c47c34..56c1b00 100644
--- a/src/demo/TextAnimations/ShinyTextDemo.vue
+++ b/src/demo/TextAnimations/ShinyTextDemo.vue
@@ -4,13 +4,13 @@
       <template #preview>
         <h2 class="demo-title-extra">Basic</h2>
 
-        <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
+        <div class="demo-container">
           <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
         </div>
 
         <h2 class="demo-title-extra">Button Text</h2>
 
-        <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
+        <div class="demo-container">
           <div class="shiny-button">
             <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
           </div>
@@ -87,6 +87,10 @@ const propData = [
 </script>
 
 <style scoped>
+.demo-container {
+  min-height: 200px;
+}
+
 .shiny-button {
   padding: 12px 24px;
   border-radius: 50px;

From 62cdbc2dba7e0abce1ec0477b7f03a7b7d66f7d6 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 14:52:40 +0300
Subject: [PATCH 24/37] Format

---
 .../code/Animations/metallicPaintCode.ts      |   8 +-
 .../code/Backgrounds/gridMotionCode.ts        |   6 +-
 .../MetallicPaint/MetallicPaint.vue           | 238 +++++++++---------
 .../Animations/MetallicPaint/parseImage.ts    | 187 +++++++-------
 src/css/sidebar.css                           |   2 +-
 src/demo/Animations/MetallicPaintDemo.vue     |  62 ++---
 src/demo/Backgrounds/GridMotionDemo.vue       |   2 +-
 7 files changed, 256 insertions(+), 249 deletions(-)

diff --git a/src/constants/code/Animations/metallicPaintCode.ts b/src/constants/code/Animations/metallicPaintCode.ts
index de663c3..19027f4 100644
--- a/src/constants/code/Animations/metallicPaintCode.ts
+++ b/src/constants/code/Animations/metallicPaintCode.ts
@@ -1,6 +1,6 @@
-import code from '@content/Animations/MetallicPaint/MetallicPaint.vue?raw'
-import utility from '@content/Animations/MetallicPaint/parseImage.ts?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -44,4 +44,4 @@ import { ref, onMounted } from 'vue';
 </script>`,
   code,
   utility
-}
+};
diff --git a/src/constants/code/Backgrounds/gridMotionCode.ts b/src/constants/code/Backgrounds/gridMotionCode.ts
index 0a7cfbb..15fc181 100644
--- a/src/constants/code/Backgrounds/gridMotionCode.ts
+++ b/src/constants/code/Backgrounds/gridMotionCode.ts
@@ -1,5 +1,5 @@
-import code from "@content/Backgrounds/GridMotion/GridMotion.vue?raw";
-import type { CodeObject } from "../../../types/code";
+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`,
@@ -17,5 +17,5 @@ export const gridMotion: CodeObject = {
   const numberOfImages = 30;
   const images = Array.from({ length: numberOfImages }, () => imageUrl);
 </script>`,
-  code,
+  code
 };
diff --git a/src/content/Animations/MetallicPaint/MetallicPaint.vue b/src/content/Animations/MetallicPaint/MetallicPaint.vue
index 47a8afa..69d4b82 100644
--- a/src/content/Animations/MetallicPaint/MetallicPaint.vue
+++ b/src/content/Animations/MetallicPaint/MetallicPaint.vue
@@ -3,20 +3,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 interface ShaderParams {
-  patternScale: number
-  refraction: number
-  edge: number
-  patternBlur: number
-  liquid: number
-  speed: number
+  patternScale: number;
+  refraction: number;
+  edge: number;
+  patternBlur: number;
+  liquid: number;
+  speed: number;
 }
 
 interface Props {
-  imageData: ImageData
-  params?: ShaderParams
+  imageData: ImageData;
+  params?: ShaderParams;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,14 +28,14 @@ const props = withDefaults(defineProps<Props>(), {
     liquid: 0.07,
     speed: 0.3
   })
-})
+});
 
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-const gl = ref<WebGL2RenderingContext | null>(null)
-const uniforms = ref<Record<string, WebGLUniformLocation>>({})
-const totalAnimationTime = ref(0)
-const lastRenderTime = ref(0)
-const animationId = ref<number>()
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const gl = ref<WebGL2RenderingContext | null>(null);
+const uniforms = ref<Record<string, WebGLUniformLocation>>({});
+const totalAnimationTime = ref(0);
+const lastRenderTime = ref(0);
+const animationId = ref<number>();
 
 const vertexShaderSource = `#version 300 es
 precision mediump float;
@@ -46,7 +46,7 @@ out vec2 vUv;
 void main() {
     vUv = .5 * (a_position + 1.);
     gl_Position = vec4(a_position, 0.0, 1.0);
-}`
+}`;
 
 const liquidFragSource = `#version 300 es
 precision mediump float;
@@ -200,123 +200,123 @@ void main() {
     color *= opacity;
     fragColor = vec4(color, opacity);
 }
-`
+`;
 
 function updateUniforms() {
-  if (!gl.value || !uniforms.value) return
-  gl.value.uniform1f(uniforms.value.u_edge, props.params.edge)
-  gl.value.uniform1f(uniforms.value.u_patternBlur, props.params.patternBlur)
-  gl.value.uniform1f(uniforms.value.u_time, 0)
-  gl.value.uniform1f(uniforms.value.u_patternScale, props.params.patternScale)
-  gl.value.uniform1f(uniforms.value.u_refraction, props.params.refraction)
-  gl.value.uniform1f(uniforms.value.u_liquid, props.params.liquid)
+  if (!gl.value || !uniforms.value) return;
+  gl.value.uniform1f(uniforms.value.u_edge, props.params.edge);
+  gl.value.uniform1f(uniforms.value.u_patternBlur, props.params.patternBlur);
+  gl.value.uniform1f(uniforms.value.u_time, 0);
+  gl.value.uniform1f(uniforms.value.u_patternScale, props.params.patternScale);
+  gl.value.uniform1f(uniforms.value.u_refraction, props.params.refraction);
+  gl.value.uniform1f(uniforms.value.u_liquid, props.params.liquid);
 }
 
 function createShader(gl: WebGL2RenderingContext, sourceCode: string, type: number) {
-  const shader = gl.createShader(type)
+  const shader = gl.createShader(type);
   if (!shader) {
-    return null
+    return null;
   }
 
-  gl.shaderSource(shader, sourceCode)
-  gl.compileShader(shader)
+  gl.shaderSource(shader, sourceCode);
+  gl.compileShader(shader);
 
   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader))
-    gl.deleteShader(shader)
-    return null
+    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
   }
 
-  return shader
+  return shader;
 }
 
 function getUniforms(program: WebGLProgram, gl: WebGL2RenderingContext) {
-  const uniformsObj: Record<string, WebGLUniformLocation> = {}
-  const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)
+  const uniformsObj: Record<string, WebGLUniformLocation> = {};
+  const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
   for (let i = 0; i < uniformCount; i++) {
-    const uniformName = gl.getActiveUniform(program, i)?.name
-    if (!uniformName) continue
-    uniformsObj[uniformName] = gl.getUniformLocation(program, uniformName) as WebGLUniformLocation
+    const uniformName = gl.getActiveUniform(program, i)?.name;
+    if (!uniformName) continue;
+    uniformsObj[uniformName] = gl.getUniformLocation(program, uniformName) as WebGLUniformLocation;
   }
-  return uniformsObj
+  return uniformsObj;
 }
 
 function initShader() {
-  const canvas = canvasRef.value
+  const canvas = canvasRef.value;
   const glContext = canvas?.getContext('webgl2', {
     antialias: true,
     alpha: true
-  })
+  });
   if (!canvas || !glContext) {
-    return
+    return;
   }
 
-  const vertexShader = createShader(glContext, vertexShaderSource, glContext.VERTEX_SHADER)
-  const fragmentShader = createShader(glContext, liquidFragSource, glContext.FRAGMENT_SHADER)
-  const program = glContext.createProgram()
+  const vertexShader = createShader(glContext, vertexShaderSource, glContext.VERTEX_SHADER);
+  const fragmentShader = createShader(glContext, liquidFragSource, glContext.FRAGMENT_SHADER);
+  const program = glContext.createProgram();
   if (!program || !vertexShader || !fragmentShader) {
-    return
+    return;
   }
 
-  glContext.attachShader(program, vertexShader)
-  glContext.attachShader(program, fragmentShader)
-  glContext.linkProgram(program)
+  glContext.attachShader(program, vertexShader);
+  glContext.attachShader(program, fragmentShader);
+  glContext.linkProgram(program);
 
   if (!glContext.getProgramParameter(program, glContext.LINK_STATUS)) {
-    console.error('Unable to initialize the shader program: ' + glContext.getProgramInfoLog(program))
-    return null
+    console.error('Unable to initialize the shader program: ' + glContext.getProgramInfoLog(program));
+    return null;
   }
 
-  const uniformsObj = getUniforms(program, glContext)
-  uniforms.value = uniformsObj
+  const uniformsObj = getUniforms(program, glContext);
+  uniforms.value = uniformsObj;
 
-  const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])
-  const vertexBuffer = glContext.createBuffer()
-  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer)
-  glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW)
+  const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+  const vertexBuffer = glContext.createBuffer();
+  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer);
+  glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW);
 
-  glContext.useProgram(program)
+  glContext.useProgram(program);
 
-  const positionLocation = glContext.getAttribLocation(program, 'a_position')
-  glContext.enableVertexAttribArray(positionLocation)
+  const positionLocation = glContext.getAttribLocation(program, 'a_position');
+  glContext.enableVertexAttribArray(positionLocation);
 
-  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer)
-  glContext.vertexAttribPointer(positionLocation, 2, glContext.FLOAT, false, 0, 0)
+  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer);
+  glContext.vertexAttribPointer(positionLocation, 2, glContext.FLOAT, false, 0, 0);
 
-  gl.value = glContext
+  gl.value = glContext;
 }
 
 function resizeCanvas() {
-  if (!canvasRef.value || !gl.value || !uniforms.value || !props.imageData) return
-  const imgRatio = props.imageData.width / props.imageData.height
-  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio)
+  if (!canvasRef.value || !gl.value || !uniforms.value || !props.imageData) return;
+  const imgRatio = props.imageData.width / props.imageData.height;
+  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio);
 
-  const side = 1000
-  canvasRef.value.width = side * devicePixelRatio
-  canvasRef.value.height = side * devicePixelRatio
-  gl.value.viewport(0, 0, canvasRef.value.height, canvasRef.value.height)
-  gl.value.uniform1f(uniforms.value.u_ratio, 1)
-  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio)
+  const side = 1000;
+  canvasRef.value.width = side * devicePixelRatio;
+  canvasRef.value.height = side * devicePixelRatio;
+  gl.value.viewport(0, 0, canvasRef.value.height, canvasRef.value.height);
+  gl.value.uniform1f(uniforms.value.u_ratio, 1);
+  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio);
 }
 
 function setupTexture() {
-  if (!gl.value || !uniforms.value) return
+  if (!gl.value || !uniforms.value) return;
 
-  const existingTexture = gl.value.getParameter(gl.value.TEXTURE_BINDING_2D)
+  const existingTexture = gl.value.getParameter(gl.value.TEXTURE_BINDING_2D);
   if (existingTexture) {
-    gl.value.deleteTexture(existingTexture)
+    gl.value.deleteTexture(existingTexture);
   }
 
-  const imageTexture = gl.value.createTexture()
-  gl.value.activeTexture(gl.value.TEXTURE0)
-  gl.value.bindTexture(gl.value.TEXTURE_2D, imageTexture)
+  const imageTexture = gl.value.createTexture();
+  gl.value.activeTexture(gl.value.TEXTURE0);
+  gl.value.bindTexture(gl.value.TEXTURE_2D, imageTexture);
 
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MIN_FILTER, gl.value.LINEAR)
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MAG_FILTER, gl.value.LINEAR)
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_S, gl.value.CLAMP_TO_EDGE)
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_T, gl.value.CLAMP_TO_EDGE)
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MIN_FILTER, gl.value.LINEAR);
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MAG_FILTER, gl.value.LINEAR);
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_S, gl.value.CLAMP_TO_EDGE);
+  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_T, gl.value.CLAMP_TO_EDGE);
 
-  gl.value.pixelStorei(gl.value.UNPACK_ALIGNMENT, 1)
+  gl.value.pixelStorei(gl.value.UNPACK_ALIGNMENT, 1);
 
   try {
     gl.value.texImage2D(
@@ -329,58 +329,66 @@ function setupTexture() {
       gl.value.RGBA,
       gl.value.UNSIGNED_BYTE,
       props.imageData?.data
-    )
+    );
 
-    gl.value.uniform1i(uniforms.value.u_image_texture, 0)
+    gl.value.uniform1i(uniforms.value.u_image_texture, 0);
   } catch (e) {
-    console.error('Error uploading texture:', e)
+    console.error('Error uploading texture:', e);
   }
 }
 
 function render(currentTime: number) {
-  if (!gl.value || !uniforms.value) return
+  if (!gl.value || !uniforms.value) return;
 
-  const deltaTime = currentTime - lastRenderTime.value
-  lastRenderTime.value = currentTime
+  const deltaTime = currentTime - lastRenderTime.value;
+  lastRenderTime.value = currentTime;
 
-  totalAnimationTime.value += deltaTime * props.params.speed
-  gl.value.uniform1f(uniforms.value.u_time, totalAnimationTime.value)
-  gl.value.drawArrays(gl.value.TRIANGLE_STRIP, 0, 4)
-  animationId.value = requestAnimationFrame(render)
+  totalAnimationTime.value += deltaTime * props.params.speed;
+  gl.value.uniform1f(uniforms.value.u_time, totalAnimationTime.value);
+  gl.value.drawArrays(gl.value.TRIANGLE_STRIP, 0, 4);
+  animationId.value = requestAnimationFrame(render);
 }
 
 function startAnimation() {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
+    cancelAnimationFrame(animationId.value);
   }
-  lastRenderTime.value = performance.now()
-  animationId.value = requestAnimationFrame(render)
+  lastRenderTime.value = performance.now();
+  animationId.value = requestAnimationFrame(render);
 }
 
 onMounted(async () => {
-  await nextTick()
-  initShader()
-  updateUniforms()
-  resizeCanvas()
-  setupTexture()
-  startAnimation()
-  
-  window.addEventListener('resize', resizeCanvas)
-})
+  await nextTick();
+  initShader();
+  updateUniforms();
+  resizeCanvas();
+  setupTexture();
+  startAnimation();
+
+  window.addEventListener('resize', resizeCanvas);
+});
 
 onUnmounted(() => {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
+    cancelAnimationFrame(animationId.value);
   }
-  window.removeEventListener('resize', resizeCanvas)
-})
+  window.removeEventListener('resize', resizeCanvas);
+});
 
-watch(() => props.params, () => {
-  updateUniforms()
-}, { deep: true })
+watch(
+  () => props.params,
+  () => {
+    updateUniforms();
+  },
+  { deep: true }
+);
 
-watch(() => props.imageData, () => {
-  setupTexture()
-  resizeCanvas()
-}, { deep: true })
+watch(
+  () => props.imageData,
+  () => {
+    setupTexture();
+    resizeCanvas();
+  },
+  { deep: true }
+);
 </script>
diff --git a/src/content/Animations/MetallicPaint/parseImage.ts b/src/content/Animations/MetallicPaint/parseImage.ts
index 4627bee..7ecf330 100644
--- a/src/content/Animations/MetallicPaint/parseImage.ts
+++ b/src/content/Animations/MetallicPaint/parseImage.ts
@@ -1,97 +1,97 @@
 export function parseImage(file: File): Promise<{ imageData: ImageData; pngBlob: Blob }> {
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
 
   return new Promise((resolve, reject) => {
     if (!file || !ctx) {
-      reject(new Error('Invalid file or context'))
-      return
+      reject(new Error('Invalid file or context'));
+      return;
     }
 
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
     img.onload = function () {
       if (file.type === 'image/svg+xml') {
-        img.width = 1000
-        img.height = 1000
+        img.width = 1000;
+        img.height = 1000;
       }
 
-      const MAX_SIZE = 1000
-      const MIN_SIZE = 500
-      let width = img.naturalWidth
-      let height = img.naturalHeight
+      const MAX_SIZE = 1000;
+      const MIN_SIZE = 500;
+      let width = img.naturalWidth;
+      let height = img.naturalHeight;
 
       if (width > MAX_SIZE || height > MAX_SIZE || width < MIN_SIZE || height < MIN_SIZE) {
         if (width > height) {
           if (width > MAX_SIZE) {
-            height = Math.round((height * MAX_SIZE) / width)
-            width = MAX_SIZE
+            height = Math.round((height * MAX_SIZE) / width);
+            width = MAX_SIZE;
           } else if (width < MIN_SIZE) {
-            height = Math.round((height * MIN_SIZE) / width)
-            width = MIN_SIZE
+            height = Math.round((height * MIN_SIZE) / width);
+            width = MIN_SIZE;
           }
         } else {
           if (height > MAX_SIZE) {
-            width = Math.round((width * MAX_SIZE) / height)
-            height = MAX_SIZE
+            width = Math.round((width * MAX_SIZE) / height);
+            height = MAX_SIZE;
           } else if (height < MIN_SIZE) {
-            width = Math.round((width * MIN_SIZE) / height)
-            height = MIN_SIZE
+            width = Math.round((width * MIN_SIZE) / height);
+            height = MIN_SIZE;
           }
         }
       }
 
-      canvas.width = width
-      canvas.height = height
+      canvas.width = width;
+      canvas.height = height;
 
-      const shapeCanvas = document.createElement('canvas')
-      shapeCanvas.width = width
-      shapeCanvas.height = height
-      const shapeCtx = shapeCanvas.getContext('2d')!
-      shapeCtx.drawImage(img, 0, 0, width, height)
+      const shapeCanvas = document.createElement('canvas');
+      shapeCanvas.width = width;
+      shapeCanvas.height = height;
+      const shapeCtx = shapeCanvas.getContext('2d')!;
+      shapeCtx.drawImage(img, 0, 0, width, height);
 
-      const shapeImageData = shapeCtx.getImageData(0, 0, width, height)
-      const data = shapeImageData.data
-      const shapeMask = new Array(width * height).fill(false)
+      const shapeImageData = shapeCtx.getImageData(0, 0, width, height);
+      const data = shapeImageData.data;
+      const shapeMask = new Array(width * height).fill(false);
       for (let y = 0; y < height; y++) {
         for (let x = 0; x < width; x++) {
-          const idx4 = (y * width + x) * 4
-          const r = data[idx4]
-          const g = data[idx4 + 1]
-          const b = data[idx4 + 2]
-          const a = data[idx4 + 3]
-          shapeMask[y * width + x] = !((r === 255 && g === 255 && b === 255 && a === 255) || a === 0)
+          const idx4 = (y * width + x) * 4;
+          const r = data[idx4];
+          const g = data[idx4 + 1];
+          const b = data[idx4 + 2];
+          const a = data[idx4 + 3];
+          shapeMask[y * width + x] = !((r === 255 && g === 255 && b === 255 && a === 255) || a === 0);
         }
       }
 
       function inside(x: number, y: number) {
-        if (x < 0 || x >= width || y < 0 || y >= height) return false
-        return shapeMask[y * width + x]
+        if (x < 0 || x >= width || y < 0 || y >= height) return false;
+        return shapeMask[y * width + x];
       }
 
-      const boundaryMask = new Array(width * height).fill(false)
+      const boundaryMask = new Array(width * height).fill(false);
       for (let y = 0; y < height; y++) {
         for (let x = 0; x < width; x++) {
-          const idx = y * width + x
-          if (!shapeMask[idx]) continue
-          let isBoundary = false
+          const idx = y * width + x;
+          if (!shapeMask[idx]) continue;
+          let isBoundary = false;
           for (let ny = y - 1; ny <= y + 1 && !isBoundary; ny++) {
             for (let nx = x - 1; nx <= x + 1 && !isBoundary; nx++) {
               if (!inside(nx, ny)) {
-                isBoundary = true
+                isBoundary = true;
               }
             }
           }
           if (isBoundary) {
-            boundaryMask[idx] = true
+            boundaryMask[idx] = true;
           }
         }
       }
 
-      const interiorMask = new Array(width * height).fill(false)
+      const interiorMask = new Array(width * height).fill(false);
       for (let y = 1; y < height - 1; y++) {
         for (let x = 1; x < width - 1; x++) {
-          const idx = y * width + x
+          const idx = y * width + x;
           if (
             shapeMask[idx] &&
             shapeMask[idx - 1] &&
@@ -99,82 +99,79 @@ export function parseImage(file: File): Promise<{ imageData: ImageData; pngBlob:
             shapeMask[idx - width] &&
             shapeMask[idx + width]
           ) {
-            interiorMask[idx] = true
+            interiorMask[idx] = true;
           }
         }
       }
 
-      const u = new Float32Array(width * height).fill(0)
-      const newU = new Float32Array(width * height).fill(0)
-      const C = 0.01
-      const ITERATIONS = 300
+      const u = new Float32Array(width * height).fill(0);
+      const newU = new Float32Array(width * height).fill(0);
+      const C = 0.01;
+      const ITERATIONS = 300;
 
       function getU(x: number, y: number, arr: Float32Array) {
-        if (x < 0 || x >= width || y < 0 || y >= height) return 0
-        if (!shapeMask[y * width + x]) return 0
-        return arr[y * width + x]
+        if (x < 0 || x >= width || y < 0 || y >= height) return 0;
+        if (!shapeMask[y * width + x]) return 0;
+        return arr[y * width + x];
       }
 
       for (let iter = 0; iter < ITERATIONS; iter++) {
         for (let y = 0; y < height; y++) {
           for (let x = 0; x < width; x++) {
-            const idx = y * width + x
+            const idx = y * width + x;
             if (!shapeMask[idx] || boundaryMask[idx]) {
-              newU[idx] = 0
-              continue
+              newU[idx] = 0;
+              continue;
             }
-            const sumN = getU(x + 1, y, u) + getU(x - 1, y, u) + getU(x, y + 1, u) + getU(x, y - 1, u)
-            newU[idx] = (C + sumN) / 4
+            const sumN = getU(x + 1, y, u) + getU(x - 1, y, u) + getU(x, y + 1, u) + getU(x, y - 1, u);
+            newU[idx] = (C + sumN) / 4;
           }
         }
-        u.set(newU)
+        u.set(newU);
       }
 
-      let maxVal = 0
+      let maxVal = 0;
       for (let i = 0; i < width * height; i++) {
-        if (u[i] > maxVal) maxVal = u[i]
+        if (u[i] > maxVal) maxVal = u[i];
       }
-      const alpha = 2.0
-      const outImg = ctx.createImageData(width, height)
+      const alpha = 2.0;
+      const outImg = ctx.createImageData(width, height);
 
       for (let y = 0; y < height; y++) {
         for (let x = 0; x < width; x++) {
-          const idx = y * width + x
-          const px = idx * 4
+          const idx = y * width + x;
+          const px = idx * 4;
           if (!shapeMask[idx]) {
-            outImg.data[px] = 255
-            outImg.data[px + 1] = 255
-            outImg.data[px + 2] = 255
-            outImg.data[px + 3] = 255
+            outImg.data[px] = 255;
+            outImg.data[px + 1] = 255;
+            outImg.data[px + 2] = 255;
+            outImg.data[px + 3] = 255;
           } else {
-            const raw = u[idx] / maxVal
-            const remapped = Math.pow(raw, alpha)
-            const gray = 255 * (1 - remapped)
-            outImg.data[px] = gray
-            outImg.data[px + 1] = gray
-            outImg.data[px + 2] = gray
-            outImg.data[px + 3] = 255
+            const raw = u[idx] / maxVal;
+            const remapped = Math.pow(raw, alpha);
+            const gray = 255 * (1 - remapped);
+            outImg.data[px] = gray;
+            outImg.data[px + 1] = gray;
+            outImg.data[px + 2] = gray;
+            outImg.data[px + 3] = 255;
           }
         }
       }
-      ctx.putImageData(outImg, 0, 0)
+      ctx.putImageData(outImg, 0, 0);
 
-      canvas.toBlob(
-        blob => {
-          if (!blob) {
-            reject(new Error('Failed to create PNG blob'))
-            return
-          }
-          resolve({
-            imageData: outImg,
-            pngBlob: blob
-          })
-        },
-        'image/png'
-      )
-    }
+      canvas.toBlob(blob => {
+        if (!blob) {
+          reject(new Error('Failed to create PNG blob'));
+          return;
+        }
+        resolve({
+          imageData: outImg,
+          pngBlob: blob
+        });
+      }, 'image/png');
+    };
 
-    img.onerror = () => reject(new Error('Failed to load image'))
-    img.src = URL.createObjectURL(file)
-  })
+    img.onerror = () => reject(new Error('Failed to load image'));
+    img.src = URL.createObjectURL(file);
+  });
 }
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
index b0caf8b..82b3ea5 100644
--- a/src/css/sidebar.css
+++ b/src/css/sidebar.css
@@ -546,4 +546,4 @@
   .drawer-header {
     padding: 0 1em;
   }
-}
\ No newline at end of file
+}
diff --git a/src/demo/Animations/MetallicPaintDemo.vue b/src/demo/Animations/MetallicPaintDemo.vue
index 438b53d..969ddc4 100644
--- a/src/demo/Animations/MetallicPaintDemo.vue
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -89,53 +89,55 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import MetallicPaint from '../../content/Animations/MetallicPaint/MetallicPaint.vue'
-import { metallicPaint } from '@/constants/code/Animations/metallicPaintCode'
-import { parseImage } from '../../content/Animations/MetallicPaint/parseImage'
-import { useForceRerender } from '@/composables/useForceRerender'
-import logo from '@/assets/logos/vue-bits-logo-small-dark.svg'
+import { ref, onMounted } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import MetallicPaint from '../../content/Animations/MetallicPaint/MetallicPaint.vue';
+import { metallicPaint } from '@/constants/code/Animations/metallicPaintCode';
+import { parseImage } from '../../content/Animations/MetallicPaint/parseImage';
+import { useForceRerender } from '@/composables/useForceRerender';
+import logo from '@/assets/logos/vue-bits-logo-small-dark.svg';
 
-const imageData = ref<ImageData | null>(null)
-const edge = ref(0)
-const patternScale = ref(2)
-const refraction = ref(0.015)
-const patternBlur = ref(0.005)
-const liquid = ref(0.07)
-const speed = ref(0.3)
+const imageData = ref<ImageData | null>(null);
+const edge = ref(0);
+const patternScale = ref(2);
+const refraction = ref(0.015);
+const patternBlur = ref(0.005);
+const liquid = ref(0.07);
+const speed = ref(0.3);
 
-const { rerenderKey, forceRerender } = useForceRerender()
+const { rerenderKey, forceRerender } = useForceRerender();
 
 const propData = [
   {
     name: 'imageData',
     type: 'ImageData',
     default: 'none (required)',
-    description: 'The processed image data generated from the parseImage utility. This image data is used by the shader to create the liquid paper effect.'
+    description:
+      'The processed image data generated from the parseImage utility. This image data is used by the shader to create the liquid paper effect.'
   },
   {
     name: 'params',
     type: 'ShaderParams',
     default: '',
-    description: 'An object to configure the shader effect. Properties include: patternScale, refraction, edge, patternBlur, liquid, speed'
+    description:
+      'An object to configure the shader effect. Properties include: patternScale, refraction, edge, patternBlur, liquid, speed'
   }
-]
+];
 
 onMounted(async () => {
   try {
-    const response = await fetch(logo)
-    const blob = await response.blob()
-    const file = new File([blob], 'default.png', { type: blob.type })
-    const { imageData: processedImageData } = await parseImage(file)
-    imageData.value = processedImageData
+    const response = await fetch(logo);
+    const blob = await response.blob();
+    const file = new File([blob], 'default.png', { type: blob.type });
+    const { imageData: processedImageData } = await parseImage(file);
+    imageData.value = processedImageData;
   } catch (err) {
-    console.error('Error loading default image:', err)
+    console.error('Error loading default image:', err);
   }
-})
+});
 </script>
diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index 513cc4b..cf46c94 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -55,4 +55,4 @@ const images = Array.from({ length: numberOfImages }, () => imageUrl);
   padding: 0;
   overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>

From 056d2c03306926e1e8ea9ea582a570113d955d6b Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 15:28:52 +0300
Subject: [PATCH 25/37] Docs Cleanup

---
 src/App.vue                                   |   6 +-
 src/components/code/CodeExample.vue           | 111 +----
 src/components/common/BackToTopButton.vue     |  22 +-
 src/components/common/ContributionSection.vue |   2 -
 src/components/common/Customize.vue           |   1 -
 src/components/common/PreviewColor.vue        |   1 -
 src/components/common/TabbedLayout.vue        |  22 -
 .../landing/DisplayHeader/DisplayHeader.css   |  32 +-
 .../landing/FeatureCards/FeatureCards.css     | 423 +++++++-----------
 .../landing/FeatureCards/FeatureCards.vue     | 119 +----
 src/components/landing/Footer/Footer.vue      |   7 +-
 .../landing/StartBuilding/StartBuilding.vue   |   1 -
 src/components/layouts/CategoryLayout.vue     |  23 +-
 src/components/navs/Header.vue                |   2 -
 src/components/navs/Sidebar.vue               |   8 -
 src/css/base.css                              |  22 +-
 src/css/category.css                          | 100 +++++
 src/main.ts                                   |  16 +-
 src/pages/CategoryPage.vue                    |   7 +-
 src/pages/LandingPage.vue                     |   4 -
 src/utils/utils.ts                            |  24 +
 21 files changed, 365 insertions(+), 588 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 29f3a14..28f3a45 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,10 @@ import DisplayHeader from '@/components/landing/DisplayHeader/DisplayHeader.vue'
 
 const route = useRoute();
 
+const isCategoryPage = computed(() => /^\/[^/]+\/[^/]+$/.test(route.path));
+
 const activeItem = computed(() => {
   if (route.path === '/') return 'home';
   return null;
 });
-
-const isCategoryPage = computed(() => {
-  return /^\/[^/]+\/[^/]+$/.test(route.path);
-});
 </script>
diff --git a/src/components/code/CodeExample.vue b/src/components/code/CodeExample.vue
index cc41b9f..d805c26 100644
--- a/src/components/code/CodeExample.vue
+++ b/src/components/code/CodeExample.vue
@@ -28,10 +28,9 @@
         </div>
       </div>
 
-      <div v-if="!snippet" class="no-code">
+      <div v-else class="no-code">
         <span>Nothing here yet!</span>
-
-        <i class="pi pi-face-sad"></i>
+        <i class="pi pi-face-sad" />
       </div>
     </div>
   </div>
@@ -47,7 +46,6 @@ const props = defineProps<{
 }>();
 
 const skipKeys = ['cli'];
-
 const expandedSections = ref<Set<string>>(new Set());
 
 const codeEntries = computed(() => {
@@ -72,102 +70,29 @@ const toggleExpanded = (name: string) => {
 };
 
 const getDisplayName = (name: string) => {
-  if (name === 'code') return 'Code';
-  if (name === 'cli') return 'CLI Command';
-  if (name === 'utility') return 'Utility';
-  if (name === 'usage') return 'Usage';
-  if (name === 'installation') return 'Installation';
-  return name.charAt(0).toUpperCase() + name.slice(1);
+  const displayNames: Record<string, string> = {
+    code: 'Code',
+    cli: 'CLI Command',
+    utility: 'Utility',
+    usage: 'Usage',
+    installation: 'Installation'
+  };
+  return displayNames[name] || name.charAt(0).toUpperCase() + name.slice(1);
 };
 
 const getLanguage = (name: string) => {
-  if (name === 'cli') return 'bash';
-  if (name === 'code') return 'html';
-  if (name === 'usage') return 'html';
-  if (name === 'installation') return 'bash';
-  return 'javascript';
+  const languageMap: Record<string, string> = {
+    cli: 'bash',
+    code: 'html',
+    utility: 'typescript',
+    usage: 'html',
+    installation: 'bash'
+  };
+  return languageMap[name] || 'typescript';
 };
 </script>
 
 <style scoped>
-.code-example {
-  margin: 1.2rem 0;
-}
-
-.code-section {
-  margin-bottom: 2rem;
-}
-
-.code-container {
-  position: relative;
-  margin-bottom: 1.2rem;
-}
-
-.code-wrapper {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid #142216;
-  border-radius: 15px;
-}
-
-.code-wrapper.collapsed {
-  max-height: 600px;
-}
-
-.code-block {
-  overflow: hidden;
-  border: none;
-  border-radius: 15px;
-}
-
-.fade-overlay {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 60%;
-  background: linear-gradient(to bottom, transparent, #0b0b0b);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.expand-button {
-  position: absolute;
-  bottom: 0.75rem;
-  right: 0.75rem;
-  padding: 0.5rem 1rem;
-  border-radius: 12px;
-  height: 2.5rem;
-  font-size: 14px;
-  font-weight: 500;
-  background-color: #0b0b0b;
-  border: 1px solid #142216;
-  color: white;
-  cursor: pointer;
-  z-index: 2;
-  transition: background-color 0.3s ease;
-}
-
-.expand-button:hover {
-  background-color: #111;
-}
-
-.expand-button:active {
-  background-color: #111;
-}
-
-.no-code {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #a1a1aa;
-  font-style: italic;
-  padding: 2rem;
-  background: #0b0b0b;
-  border: 1px solid #142216;
-  border-radius: 15px;
-}
-
 :deep(.v-code-block) {
   background: #0b0b0b;
   border-radius: 15px;
diff --git a/src/components/common/BackToTopButton.vue b/src/components/common/BackToTopButton.vue
index 3eef0f6..9bd680b 100644
--- a/src/components/common/BackToTopButton.vue
+++ b/src/components/common/BackToTopButton.vue
@@ -1,30 +1,12 @@
 <template>
-  <Button
-    :style="{
-      fontWeight: 500,
-      borderRadius: '0.75rem',
-      border: '1px solid #142216',
-      padding: '1rem',
-      position: 'fixed',
-      right: '2.3em',
-      zIndex: 98,
-      boxShadow: '10px 0 25px rgba(0, 0, 0, 0.2)',
-      transition: '0.3s ease',
-      opacity: visible ? 1 : 0,
-      bottom: visible ? '2.5em' : '1em',
-      cursor: visible ? 'pointer' : 'default'
-    }"
-    class="back-to-top"
-    @click="visible && scrollToTop()"
-  >
+  <button :class="['back-to-top', { visible }]" @click="visible && scrollToTop()">
     <i class="pi pi-arrow-up" style="color: #fff; font-size: 1rem"></i>
-  </Button>
+  </button>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
-import Button from 'primevue/button';
 
 const toast = useToast();
 const visible = ref(false);
diff --git a/src/components/common/ContributionSection.vue b/src/components/common/ContributionSection.vue
index b0c0435..f9d4f9e 100644
--- a/src/components/common/ContributionSection.vue
+++ b/src/components/common/ContributionSection.vue
@@ -5,7 +5,6 @@
     <div class="contribute-buttons">
       <a :href="bugReportUrl" target="_blank" rel="noreferrer" class="contribute-button">
         <i class="pi pi-exclamation-triangle"></i>
-
         <span>Report an issue</span>
       </a>
 
@@ -13,7 +12,6 @@
 
       <a :href="featureRequestUrl" target="_blank" rel="noreferrer" class="contribute-button">
         <i class="pi pi-lightbulb"></i>
-
         <span>Request a feature</span>
       </a>
     </div>
diff --git a/src/components/common/Customize.vue b/src/components/common/Customize.vue
index 3d2ccc1..8e41d73 100644
--- a/src/components/common/Customize.vue
+++ b/src/components/common/Customize.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <h2 class="demo-title">Customize</h2>
-
     <slot />
   </div>
 </template>
diff --git a/src/components/common/PreviewColor.vue b/src/components/common/PreviewColor.vue
index 1884361..e8ff82a 100644
--- a/src/components/common/PreviewColor.vue
+++ b/src/components/common/PreviewColor.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="preview-color">
     <span class="color-label">{{ title }}</span>
-
     <input :value="modelValue" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
   </div>
 </template>
diff --git a/src/components/common/TabbedLayout.vue b/src/components/common/TabbedLayout.vue
index f5e8ba2..0cfcca0 100644
--- a/src/components/common/TabbedLayout.vue
+++ b/src/components/common/TabbedLayout.vue
@@ -66,28 +66,6 @@ import ContributionSection from './ContributionSection.vue';
 </script>
 
 <style scoped>
-.tabbed-layout {
-  width: 100%;
-}
-
-.tab-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid #142216;
-  border-radius: 10px;
-  font-size: 14px;
-  height: 36px;
-  color: #ffffff;
-  background: transparent;
-  transition: all 0.3s ease;
-}
-
-.tab-header:hover {
-  background: #142216;
-}
-
 :deep(.p-tablist),
 :deep(.p-tablist-tab-list) {
   display: flex;
diff --git a/src/components/landing/DisplayHeader/DisplayHeader.css b/src/components/landing/DisplayHeader/DisplayHeader.css
index d6bc6db..24eb690 100644
--- a/src/components/landing/DisplayHeader/DisplayHeader.css
+++ b/src/components/landing/DisplayHeader/DisplayHeader.css
@@ -116,7 +116,6 @@
   border: none;
   border-radius: 50px;
   cursor: pointer;
-
   display: flex;
   align-items: center;
   white-space: nowrap;
@@ -133,7 +132,6 @@
   border-radius: 50px;
   width: 100px;
   font-weight: 600;
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -146,15 +144,24 @@
   transition: 0.3s ease;
 }
 
-.cta-button:hover {
-  transition: 0.3s ease;
-}
-
 .cta-button:hover span img {
   transform: scale(1.2);
   transition: 0.3s ease;
 }
 
+@media (min-width: 900px) {
+  .landing-nav-items {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+  }
+
+  .nav-cta-group {
+    gap: 2rem;
+  }
+}
+
 @media (max-width: 900px) {
   .header {
     padding: 0 2em;
@@ -295,16 +302,3 @@
     margin-right: 1px;
   }
 }
-
-@media (min-width: 900px) {
-  .landing-nav-items {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 2rem;
-  }
-
-  .nav-cta-group {
-    gap: 2rem;
-  }
-}
diff --git a/src/components/landing/FeatureCards/FeatureCards.css b/src/components/landing/FeatureCards/FeatureCards.css
index 37098d6..56f7c05 100644
--- a/src/components/landing/FeatureCards/FeatureCards.css
+++ b/src/components/landing/FeatureCards/FeatureCards.css
@@ -67,30 +67,6 @@
   text-align: center;
 }
 
-@media (max-width: 768px) {
-  .features-title {
-    font-size: 2.5rem;
-  }
-
-  .features-subtitle {
-    font-size: 1.1rem;
-  }
-
-  .features-header {
-    margin-bottom: 3rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .features-title {
-    font-size: 2rem;
-  }
-
-  .features-subtitle {
-    font-size: 1rem;
-  }
-}
-
 .bento-grid {
   max-width: 1200px;
   display: grid;
@@ -99,73 +75,6 @@
   grid-auto-rows: auto;
 }
 
-@media (min-width: 480px) and (max-width: 767px) {
-  .bento-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.25em;
-  }
-
-  .card1 {
-    grid-column: 1 / 3;
-    grid-row: 1 / 2;
-  }
-
-  .card2 {
-    grid-column: 1 / 2;
-    grid-row: 2 / 3;
-  }
-
-  .card4 {
-    grid-column: 2 / 3;
-    grid-row: 2 / 3;
-  }
-}
-
-@media (min-width: 50rem) {
-  .bento-grid {
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(3, auto);
-    gap: 1.5em;
-  }
-
-  .card1 {
-    grid-column: 1 / 3;
-    grid-row: 1 / 2;
-  }
-
-  .card2 {
-    grid-column: 3 / 5;
-    grid-row: 1 / 3;
-  }
-
-  .card4 {
-    grid-column: 1 / 3;
-    grid-row: 2 / 3;
-  }
-}
-
-@media (min-width: 768px) and (max-width: 49.99rem) {
-  .bento-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.25em;
-  }
-
-  .card1 {
-    grid-column: 1 / 3;
-    grid-row: 1 / 2;
-  }
-
-  .card2 {
-    grid-column: 3 / 4;
-    grid-row: 1 / 3;
-  }
-
-  .card4 {
-    grid-column: 1 / 2;
-    grid-row: 2 / 3;
-  }
-}
-
 .feature-card {
   user-select: none;
   background: #0b0b0b;
@@ -324,136 +233,24 @@
   pointer-events: none;
 }
 
-.components-gif-wrapper {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.feature-card:hover .components-gif-wrapper {
-  opacity: 1;
-}
-
-.components-gif {
-  width: 100%;
-  height: auto;
-  opacity: 0.2;
-  mix-blend-mode: lighten;
-  display: block;
-  filter: grayscale(100%);
-}
-
-.components-gif-wrapper::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 20%;
-  background: linear-gradient(to top, #0b0b0b 0%, transparent 100%);
-  border-radius: 0 0 8px 8px;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.components-gif-wrapper::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 20%;
-  background: linear-gradient(to bottom, #0b0b0b 0%, transparent 100%);
-  border-radius: 8px 8px 0 0;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.messages-gif-wrapper {
-  position: absolute;
-  mix-blend-mode: lighten;
-  top: 0.5rem;
-  right: 1rem;
-  bottom: 1rem;
-  width: 50%;
-  border-radius: 8px;
-  z-index: 1;
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.feature-card:hover .messages-gif-wrapper {
-  opacity: 1;
-}
-
-.messages-gif {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 0;
-  opacity: 0.3;
-  display: block;
-}
-
-.messages-gif-wrapper::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 20%;
-  background: linear-gradient(to top, #0b0b0b 0%, transparent 100%);
-  border-radius: 0 0 8px 8px;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.messages-gif-wrapper::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 20%;
-  background: linear-gradient(to bottom, #0b0b0b 0%, transparent 100%);
-  border-radius: 8px 8px 0 0;
-  pointer-events: none;
-  z-index: 2;
-}
-
+.components-gif-wrapper,
+.messages-gif-wrapper,
 .switch-gif-wrapper {
   position: absolute;
-  top: 0;
-  right: 1rem;
-  width: 40%;
-  mix-blend-mode: lighten;
-  border-radius: 8px;
   z-index: 1;
   overflow: hidden;
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
+.feature-card:hover .components-gif-wrapper,
+.feature-card:hover .messages-gif-wrapper,
 .feature-card:hover .switch-gif-wrapper {
   opacity: 1;
 }
 
-.switch-gif {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 0;
-  opacity: 0.3;
-  display: block;
-}
-
+.components-gif-wrapper::after,
+.messages-gif-wrapper::after,
 .switch-gif-wrapper::after {
   content: '';
   position: absolute;
@@ -467,6 +264,8 @@
   z-index: 2;
 }
 
+.components-gif-wrapper::before,
+.messages-gif-wrapper::before,
 .switch-gif-wrapper::before {
   content: '';
   position: absolute;
@@ -480,43 +279,50 @@
   z-index: 2;
 }
 
-@media (max-width: 479px) {
-  .features-section {
-    padding: 4rem 1rem 2rem;
-    padding-bottom: 0;
-    margin-top: 4em;
-  }
+.components-gif-wrapper {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
 
-  .bento-grid {
-    gap: 1rem;
-    max-width: 100%;
-  }
+.messages-gif-wrapper {
+  mix-blend-mode: lighten;
+  top: 0.5rem;
+  right: 1rem;
+  bottom: 1rem;
+  width: 50%;
+  border-radius: 8px;
+}
 
-  .feature-card {
-    min-height: 160px;
-    padding: 1.25rem;
-    border-radius: 12px;
-  }
+.switch-gif-wrapper {
+  top: 0;
+  right: 1rem;
+  width: 40%;
+  mix-blend-mode: lighten;
+  border-radius: 8px;
+}
 
-  .feature-icon {
-    font-size: 1.75rem;
-    margin-bottom: 0.75rem;
-  }
+.components-gif,
+.messages-gif,
+.switch-gif {
+  width: 100%;
+  height: auto;
+  opacity: 0.2;
+  mix-blend-mode: lighten;
+  display: block;
+  filter: grayscale(100%);
+  border-radius: 0;
+}
 
-  .feature-card h2 {
-    font-size: 4rem;
-  }
-
-  .feature-card h3 {
-    font-size: 1rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .feature-card p {
-    font-size: 0.85rem;
-    line-height: 1.6;
-  }
+.messages-gif,
+.switch-gif {
+  height: 100%;
+  object-fit: contain;
+  opacity: 0.3;
+}
 
+@media (max-width: 49.99rem) {
   .components-gif-wrapper,
   .messages-gif-wrapper,
   .switch-gif-wrapper {
@@ -557,11 +363,87 @@
     font-size: 0.8rem;
     line-height: 1.7;
   }
+}
 
-  .components-gif-wrapper,
-  .messages-gif-wrapper,
-  .switch-gif-wrapper {
-    display: none !important;
+@media (max-width: 479px) {
+  .features-section {
+    padding: 4rem 1rem 2rem;
+    padding-bottom: 0;
+    margin-top: 4em;
+  }
+
+  .features-title {
+    font-size: 2rem;
+  }
+
+  .features-subtitle {
+    font-size: 1rem;
+  }
+
+  .bento-grid {
+    gap: 1rem;
+    max-width: 100%;
+  }
+
+  .feature-card {
+    min-height: 160px;
+    padding: 1.25rem;
+    border-radius: 12px;
+  }
+
+  .feature-icon {
+    font-size: 1.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .feature-card h2 {
+    font-size: 4rem;
+  }
+
+  .feature-card h3 {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .feature-card p {
+    font-size: 0.85rem;
+    line-height: 1.6;
+  }
+}
+
+@media (min-width: 480px) and (max-width: 767px) {
+  .bento-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25em;
+  }
+
+  .card1 {
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .card2 {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+  }
+
+  .card4 {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+  }
+}
+
+@media (max-width: 768px) {
+  .features-title {
+    font-size: 2.5rem;
+  }
+
+  .features-subtitle {
+    font-size: 1.1rem;
+  }
+
+  .features-header {
+    margin-bottom: 3rem;
   }
 }
 
@@ -588,11 +470,27 @@
   .feature-card p {
     font-size: 0.92rem;
   }
+}
 
-  .components-gif-wrapper,
-  .messages-gif-wrapper,
-  .switch-gif-wrapper {
-    display: none !important;
+@media (min-width: 768px) and (max-width: 49.99rem) {
+  .bento-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.25em;
+  }
+
+  .card1 {
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .card2 {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3;
+  }
+
+  .card4 {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
   }
 }
 
@@ -603,6 +501,27 @@
     margin-top: 8em;
   }
 
+  .bento-grid {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, auto);
+    gap: 1.5em;
+  }
+
+  .card1 {
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .card2 {
+    grid-column: 3 / 5;
+    grid-row: 1 / 3;
+  }
+
+  .card4 {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+
   .feature-card {
     min-height: 220px;
     padding: 2rem;
@@ -620,12 +539,6 @@
   .feature-card p {
     font-size: 0.95rem;
   }
-
-  .components-gif-wrapper,
-  .messages-gif-wrapper,
-  .switch-gif-wrapper {
-    display: block !important;
-  }
 }
 
 @media (max-height: 500px) and (orientation: landscape) {
diff --git a/src/components/landing/FeatureCards/FeatureCards.vue b/src/components/landing/FeatureCards/FeatureCards.vue
index 4bf8eef..e5b0707 100644
--- a/src/components/landing/FeatureCards/FeatureCards.vue
+++ b/src/components/landing/FeatureCards/FeatureCards.vue
@@ -3,52 +3,39 @@
     <div class="features-container">
       <div class="features-header">
         <h3 class="features-title">Zero cost, all the cool.</h3>
-
         <p class="features-subtitle">Everything you need to add flair to your websites</p>
       </div>
 
-      <GlobalSpotlight v-if="gridRef" :grid-ref="gridRef" :disable-animations="isMobile" />
-
       <div class="bento-grid" ref="gridRef">
         <ParticleCard class="feature-card card1" :disable-animations="isMobile">
-          <div className="messages-gif-wrapper">
-            <img src="/assets/messages.gif" alt="Messages animation" className="messages-gif" />
+          <div class="messages-gif-wrapper">
+            <img src="/assets/messages.gif" alt="Messages animation" class="messages-gif" />
           </div>
-
           <h2>
             <template v-if="isMobile">100</template>
-
             <CountUp v-else :to="100" />
             %
           </h2>
-
           <h3>Free &amp; Open Source</h3>
-
           <p>Loved by developers around the world</p>
         </ParticleCard>
 
         <ParticleCard class="feature-card card2" :disable-animations="isMobile">
-          <div className="components-gif-wrapper">
-            <img src="/assets/components.gif" alt="Components animation" className="components-gif" />
+          <div class="components-gif-wrapper">
+            <img src="/assets/components.gif" alt="Components animation" class="components-gif" />
           </div>
-
           <h2>
             <template v-if="isMobile">40</template>
-
             <CountUp v-else :to="40" />
             +
           </h2>
-
           <h3>Curated Components</h3>
-
           <p>Growing weekly &amp; only getting better</p>
         </ParticleCard>
 
         <ParticleCard class="feature-card card4" :disable-animations="isMobile">
           <h2>Modern</h2>
-
           <h3>Technologies</h3>
-
           <p>TypeScript + Tailwind, ready to ship</p>
         </ParticleCard>
       </div>
@@ -200,102 +187,4 @@ const ParticleCard = defineComponent({
       );
   }
 });
-
-const GlobalSpotlight = defineComponent({
-  name: 'GlobalSpotlight',
-  props: {
-    gridRef: {
-      type: Object,
-      required: true
-    },
-    disableAnimations: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const spotlightRef = ref<HTMLDivElement | null>(null);
-    const isInsideSectionRef = ref(false);
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!spotlightRef.value || !props.gridRef.value) return;
-      const section = props.gridRef.value.closest('.features-section');
-      const rect = section?.getBoundingClientRect();
-      const inside =
-        rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
-
-      isInsideSectionRef.value = inside;
-      const cards = props.gridRef.value.querySelectorAll('.feature-card');
-
-      if (!inside) {
-        gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
-        cards.forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
-        return;
-      }
-
-      let minDist = Infinity;
-      const prox = 100,
-        fade = 150;
-      cards.forEach((card: HTMLElement) => {
-        const r = card.getBoundingClientRect();
-        const cx = r.left + r.width / 2;
-        const cy = r.top + r.height / 2;
-        const d = Math.hypot(e.clientX - cx, e.clientY - cy) - Math.max(r.width, r.height) / 2;
-        const ed = Math.max(0, d);
-        minDist = Math.min(minDist, ed);
-
-        const rx = ((e.clientX - r.left) / r.width) * 100;
-        const ry = ((e.clientY - r.top) / r.height) * 100;
-        let glow = 0;
-        if (ed <= prox) glow = 1;
-        else if (ed <= fade) glow = (fade - ed) / (fade - prox);
-        card.style.setProperty('--glow-x', `${rx}%`);
-        card.style.setProperty('--glow-y', `${ry}%`);
-        card.style.setProperty('--glow-intensity', String(glow));
-      });
-
-      gsap.to(spotlightRef.value, { left: e.clientX, top: e.clientY, duration: 0.1, ease: 'power2.out' });
-      const target = minDist <= prox ? 0.8 : minDist <= fade ? ((fade - minDist) / (fade - prox)) * 0.8 : 0;
-      gsap.to(spotlightRef.value, { opacity: target, duration: target > 0 ? 0.2 : 0.5, ease: 'power2.out' });
-    };
-
-    const handleMouseLeave = () => {
-      isInsideSectionRef.value = false;
-      props.gridRef.value
-        ?.querySelectorAll('.feature-card')
-        .forEach((card: HTMLElement) => card.style.setProperty('--glow-intensity', '0'));
-      if (spotlightRef.value) {
-        gsap.to(spotlightRef.value, { opacity: 0, duration: 0.3, ease: 'power2.out' });
-      }
-    };
-
-    onMounted(() => {
-      if (props.disableAnimations || !props.gridRef?.value) return;
-
-      const spotlight = document.createElement('div');
-      spotlight.className = 'global-spotlight';
-      spotlight.style.cssText = `
-        position:fixed;width:800px;height:800px;border-radius:50%;pointer-events:none;
-        background:radial-gradient(circle,rgba(132,0,255,.15) 0%,rgba(132,0,255,.08) 15%,
-        rgba(132,0,255,.04) 25%,rgba(132,0,255,.02) 40%,rgba(132,0,255,.01) 65%,transparent 70%);
-        z-index:200;opacity:0;transform:translate(-50%,-50%);mix-blend-mode:screen;
-      `;
-      document.body.appendChild(spotlight);
-      spotlightRef.value = spotlight;
-
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseleave', handleMouseLeave);
-    });
-
-    onUnmounted(() => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseleave', handleMouseLeave);
-      if (spotlightRef.value?.parentNode) {
-        spotlightRef.value.parentNode.removeChild(spotlightRef.value);
-      }
-    });
-
-    return () => null;
-  }
-});
 </script>
diff --git a/src/components/landing/Footer/Footer.vue b/src/components/landing/Footer/Footer.vue
index c935c0b..7e7bc02 100644
--- a/src/components/landing/Footer/Footer.vue
+++ b/src/components/landing/Footer/Footer.vue
@@ -12,7 +12,7 @@
             <a href="https://davidhaz.com/" target="_blank" class="footer-creator-link">this guy</a>
           </p>
 
-          <p class="footer-copyright">© {{ currentYear }} Vue Bits</p>
+          <p class="footer-copyright">© {{ new Date().getFullYear() }} Vue Bits</p>
         </div>
 
         <div class="footer-links">
@@ -21,9 +21,7 @@
           </a>
 
           <router-link to="/text-animations/split-text" class="footer-link">Docs</router-link>
-
           <a href="https://www.jsrepo.com/" target="_blank" class="footer-link">CLI</a>
-
           <a href="https://reactbits.dev/" target="_blank" class="footer-link">React Bits</a>
         </div>
       </div>
@@ -32,10 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import vueBitsLogo from '../../../assets/logos/vue-bits-logo.svg';
 import FadeContent from '@/content/Animations/FadeContent/FadeContent.vue';
 import './Footer.css';
-
-const currentYear = computed(() => new Date().getFullYear());
 </script>
diff --git a/src/components/landing/StartBuilding/StartBuilding.vue b/src/components/landing/StartBuilding/StartBuilding.vue
index eac09c6..25353c5 100644
--- a/src/components/landing/StartBuilding/StartBuilding.vue
+++ b/src/components/landing/StartBuilding/StartBuilding.vue
@@ -3,7 +3,6 @@
     <div class="start-building-container">
       <div class="start-building-card">
         <h2 class="start-building-title">Start exploring Vue Bits</h2>
-
         <p class="start-building-subtitle">Animations, components, backgrounds - it's all here</p>
 
         <router-link to="/text-animations/split-text" class="start-building-button">Browse Components</router-link>
diff --git a/src/components/layouts/CategoryLayout.vue b/src/components/layouts/CategoryLayout.vue
index 712daea..833a55e 100644
--- a/src/components/layouts/CategoryLayout.vue
+++ b/src/components/layouts/CategoryLayout.vue
@@ -12,31 +12,14 @@
 
     <Toast
       position="bottom-right"
-      :closeButtonProps="{ style: { right: '0', margin: '0', outline: 'none', border: 'none' } }"
-      :pt="{
-        message: {
-          style: {
-            borderRadius: '10px',
-            border: '1px solid #142216',
-            backgroundColor: '#0b0b0b'
-          }
-        },
-        messageContent: {
-          style: {
-            alignItems: 'center'
-          }
-        },
-        messageIcon: {
-          style: {
-            display: 'none'
-          }
-        }
-      }"
+      :closeButtonProps="customToastStyles.customToastCloseButton"
+      :pt="customToastStyles"
     />
   </main>
 </template>
 
 <script setup lang="ts">
+import { customToastStyles } from '@/utils/utils';
 import Header from '../navs/Header.vue';
 import Sidebar from '../navs/Sidebar.vue';
 </script>
diff --git a/src/components/navs/Header.vue b/src/components/navs/Header.vue
index 4af8f34..e1f2663 100644
--- a/src/components/navs/Header.vue
+++ b/src/components/navs/Header.vue
@@ -35,8 +35,6 @@
         </div>
 
         <div class="drawer-body">
-          <!-- Navigation Categories -->
-
           <div class="drawer-navigation">
             <div class="categories-container">
               <Category
diff --git a/src/components/navs/Sidebar.vue b/src/components/navs/Sidebar.vue
index 2087102..149ded0 100644
--- a/src/components/navs/Sidebar.vue
+++ b/src/components/navs/Sidebar.vue
@@ -1,6 +1,4 @@
 <template>
-  <!-- Mobile Drawer -->
-
   <div v-if="isDrawerOpen" class="drawer-overlay" @click="closeDrawer">
     <div class="drawer-content" :class="{ 'drawer-open': isDrawerOpen }" @click.stop>
       <div class="drawer-header sidebar-logo">
@@ -60,8 +58,6 @@
     </div>
   </div>
 
-  <!-- Desktop Sidebar -->
-
   <nav
     ref="sidebarContainerRef"
     class="sidebar"
@@ -69,8 +65,6 @@
     @scroll="handleScroll"
   >
     <div ref="sidebarRef" class="sidebar-content">
-      <!-- Active line indicator -->
-
       <div
         class="active-line"
         :style="{
@@ -80,8 +74,6 @@
         }"
       ></div>
 
-      <!-- Hover line indicator -->
-
       <div
         class="hover-line"
         :style="{
diff --git a/src/css/base.css b/src/css/base.css
index e5c8d9f..f01c03a 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -25,8 +25,28 @@ body {
 }
 
 .back-to-top {
-  background: #0b0b0b !important;
+  background: #0b0b0b;
+  aspect-ratio: 1;
+  font-weight: 500;
+  border-radius: 0.75rem;
   border: 1px solid #142216;
+  width: 50px;
+  position: fixed;
+  right: 2.3em;
+  z-index: 98;
+  box-shadow: 10px 0 25px rgba(0, 0, 0, 0.2);
+  transition:
+    opacity 0.3s ease,
+    bottom 0.3s ease;
+  opacity: 0;
+  bottom: 1em;
+  cursor: default;
+}
+
+.back-to-top.visible {
+  opacity: 1;
+  bottom: 2.5em;
+  cursor: pointer;
 }
 
 @media (max-width: 640px) {
diff --git a/src/css/category.css b/src/css/category.css
index 744ad84..3ad5893 100644
--- a/src/css/category.css
+++ b/src/css/category.css
@@ -212,6 +212,106 @@ div:has(> .props-table) {
   background-color: #222;
 }
 
+.tabbed-layout {
+  width: 100%;
+}
+
+.tab-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid #142216;
+  border-radius: 10px;
+  font-size: 14px;
+  height: 36px;
+  color: #ffffff;
+  background: transparent;
+  transition: all 0.3s ease;
+}
+
+.tab-header:hover {
+  background: #142216;
+}
+
+.code-example {
+  margin: 1.2rem 0;
+}
+
+.code-section {
+  margin-bottom: 2rem;
+}
+
+.code-container {
+  position: relative;
+  margin-bottom: 1.2rem;
+}
+
+.code-wrapper {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #142216;
+  border-radius: 15px;
+}
+
+.code-wrapper.collapsed {
+  max-height: 600px;
+}
+
+.code-block {
+  overflow: hidden;
+  border: none;
+  border-radius: 15px;
+}
+
+.fade-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60%;
+  background: linear-gradient(to bottom, transparent, #0b0b0b);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.expand-button {
+  position: absolute;
+  bottom: 0.75rem;
+  right: 0.75rem;
+  padding: 0.5rem 1rem;
+  border-radius: 12px;
+  height: 2.5rem;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #0b0b0b;
+  border: 1px solid #142216;
+  color: white;
+  cursor: pointer;
+  z-index: 2;
+  transition: background-color 0.3s ease;
+}
+
+.expand-button:hover {
+  background-color: #111;
+}
+
+.expand-button:active {
+  background-color: #111;
+}
+
+.no-code {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #a1a1aa;
+  font-style: italic;
+  padding: 2rem;
+  background: #0b0b0b;
+  border: 1px solid #142216;
+  border-radius: 15px;
+}
+
 .demo-title {
   font-weight: 900;
   font-size: 1.6rem;
diff --git a/src/main.ts b/src/main.ts
index f8f63f8..7882d4b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,21 +8,17 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import Button from 'primevue/button';
-import Toast from 'primevue/toast';
-import Select from 'primevue/select';
 import ToastService from 'primevue/toastservice';
+import Aura from '@primeuix/themes/aura';
+import PrimeVue from 'primevue/config';
+import Button from 'primevue/button';
+import Select from 'primevue/select';
+import Toast from 'primevue/toast';
 
 const app = createApp(App);
 
 app.use(router);
-app.use(PrimeVue, {
-  theme: {
-    preset: Aura
-  }
-});
+app.use(PrimeVue, { theme: { preset: Aura } });
 app.use(ToastService);
 
 app.component('Button', Button);
diff --git a/src/pages/CategoryPage.vue b/src/pages/CategoryPage.vue
index 5707a2b..417184a 100644
--- a/src/pages/CategoryPage.vue
+++ b/src/pages/CategoryPage.vue
@@ -24,7 +24,6 @@ import { useRoute } from 'vue-router';
 import { componentMap } from '../constants/Components';
 import { decodeLabel } from '../utils/utils';
 import BackToTopButton from '@/components/common/BackToTopButton.vue';
-import '../css/category.css';
 
 const route = useRoute();
 const scrollRef = ref<HTMLDivElement | null>(null);
@@ -48,9 +47,9 @@ const SubcategoryComponent = computed(() => {
 
 watch(
   decodedLabel,
-  newLabel => {
-    if (newLabel) {
-      document.title = `Vue Bits - ${newLabel}`;
+  label => {
+    if (label) {
+      document.title = `Vue Bits - ${label}`;
     }
   },
   { immediate: true }
diff --git a/src/pages/LandingPage.vue b/src/pages/LandingPage.vue
index c6d5ea9..b38c234 100644
--- a/src/pages/LandingPage.vue
+++ b/src/pages/LandingPage.vue
@@ -10,13 +10,9 @@
     </div>
 
     <PlasmaWave :y-offset="-300" :x-offset="100" :rotation-deg="-30" />
-
     <Hero />
-
     <FeatureCards />
-
     <StartBuilding />
-
     <Footer />
   </section>
 </template>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 0a2aa69..6cef582 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -32,3 +32,27 @@ export const decodeLabel = (label: string): string => {
     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 };
+
+/**
+ * Custom styles for PrimeVue Toast component
+ */
+export const customToastStyles = {
+  message: {
+    style: {
+      borderRadius: '10px',
+      border: '1px solid #142216',
+      backgroundColor: '#0b0b0b'
+    }
+  },
+  messageContent: {
+    style: {
+      alignItems: 'center'
+    }
+  },
+  messageIcon: {
+    style: {
+      display: 'none'
+    }
+  },
+  customToastCloseButton: { style: { right: '0', margin: '0', outline: 'none', border: 'none' } }
+};

From 8c39c43d7d0c79d8de0d129bd2f7e96b34baae92 Mon Sep 17 00:00:00 2001
From: David <48634587+DavidHDev@users.noreply.github.com>
Date: Sat, 12 Jul 2025 15:31:18 +0300
Subject: [PATCH 26/37] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f0511c8..dab61a6 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ Go to [vue-bits.dev](https://vue-bits.dev/) to view the documentation.
 
 This is the official Vue port of [React Bits](https://reactbits.dev)!
 
-Vue Bits is a large collection of animated Vue UI components made to spice up your web creations. We've got animations, components, backgrounds, and awesome stuff that you won't be able to find anywhere else - all free for you to use!
+Vue Bits is a large collection of animated VueJS UI components made to spice up your web creations. We've got animations, components, backgrounds, and awesome stuff that you won't be able to find anywhere else - all free for you to use!
 
 These components are all enhanced with customization options as props, to make it easy for you to get exactly what you need.
 

From 90a41d1469c333bd5f61a7f808160a4a98adfce5 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 12 Jul 2025 18:19:41 +0530
Subject: [PATCH 27/37] Added <RotatingText  /> text animation

---
 src/constants/Categories.ts                   |   3 +-
 src/constants/Components.ts                   |   3 +-
 .../code/TextAnimations/rotatingTextCode.ts   |  26 ++
 .../RotatingText/RotatingText.vue             | 233 ++++++++++++++++++
 src/demo/TextAnimations/RotatingTextDemo.vue  | 166 +++++++++++++
 5 files changed, 429 insertions(+), 2 deletions(-)
 create mode 100644 src/constants/code/TextAnimations/rotatingTextCode.ts
 create mode 100644 src/content/TextAnimations/RotatingText/RotatingText.vue
 create mode 100644 src/demo/TextAnimations/RotatingTextDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 021944a..527592d 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -21,7 +21,8 @@ export const CATEGORIES = [
       'Decrypted Text',
       'True Focus',
       'Scroll Float',
-      'Scroll Reveal'
+      'Scroll Reveal',
+      'Rotating Text'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 6f5a3cf..4641444 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -26,7 +26,8 @@ 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"),
+  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue")
 };
 
 const components = {
diff --git a/src/constants/code/TextAnimations/rotatingTextCode.ts b/src/constants/code/TextAnimations/rotatingTextCode.ts
new file mode 100644
index 0000000..ac8c546
--- /dev/null
+++ 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
+};
diff --git a/src/content/TextAnimations/RotatingText/RotatingText.vue b/src/content/TextAnimations/RotatingText/RotatingText.vue
new file mode 100644
index 0000000..1d44010
--- /dev/null
+++ b/src/content/TextAnimations/RotatingText/RotatingText.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { AnimatePresence, Motion, type Target, type Transition, type VariantLabels } from 'motion-v';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+function cn(...classes: (string | undefined | null | boolean)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+interface RotatingTextProps {
+  texts: string[];
+  transition?: Transition;
+  initial?: boolean | Target | VariantLabels;
+  animate?: any;
+  exit?: Target | VariantLabels;
+  animatePresenceMode?: 'sync' | 'wait';
+  animatePresenceInitial?: boolean;
+  rotationInterval?: number;
+  staggerDuration?: number;
+  staggerFrom?: 'first' | 'last' | 'center' | 'random' | number;
+  loop?: boolean;
+  auto?: boolean;
+  splitBy?: string;
+  onNext?: (index: number) => void;
+  mainClassName?: string;
+  splitLevelClassName?: string;
+  elementLevelClassName?: string;
+}
+
+const props = withDefaults(defineProps<RotatingTextProps>(), {
+  transition: () => ({
+    type: 'spring',
+    damping: 25,
+    stiffness: 300
+  }),
+  initial: () => ({ y: '100%', opacity: 0 }) as Target,
+  animate: () => ({ y: 0, opacity: 1 }),
+  exit: () => ({ y: '-120%', opacity: 0 }) as Target,
+  animatePresenceMode: 'wait',
+  animatePresenceInitial: false,
+  rotationInterval: 2000,
+  staggerDuration: 0,
+  staggerFrom: 'first',
+  loop: true,
+  auto: true,
+  splitBy: 'characters'
+});
+
+const currentTextIndex = ref<number>(0);
+let intervalId: number | undefined = undefined;
+
+const splitIntoCharacters = (text: string): string[] => {
+  if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+    const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+    return Array.from(segmenter.segment(text), segment => segment.segment);
+  }
+  return Array.from(text);
+};
+
+const elements = computed(() => {
+  const currentText: string = props.texts[currentTextIndex.value];
+
+  if (props.splitBy === 'characters') {
+    const words = currentText.split(' ');
+    return words.map((word, i) => ({
+      characters: splitIntoCharacters(word),
+      needsSpace: i !== words.length - 1
+    }));
+  }
+  if (props.splitBy === 'words') {
+    return currentText.split(' ').map((word, i, arr) => ({
+      characters: [word],
+      needsSpace: i !== arr.length - 1
+    }));
+  }
+  if (props.splitBy === 'lines') {
+    return currentText.split('\n').map((line, i, arr) => ({
+      characters: [line],
+      needsSpace: i !== arr.length - 1
+    }));
+  }
+
+  return currentText.split(props.splitBy).map((part, i, arr) => ({
+    characters: [part],
+    needsSpace: i !== arr.length - 1
+  }));
+});
+
+const getPreviousCharsCount = (wordIndex: number): number => {
+  return elements.value.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0);
+};
+
+const getTotalCharsCount = (): number => {
+  return elements.value.reduce((sum, word) => sum + word.characters.length, 0);
+};
+
+const getStaggerDelay = (index: number, totalChars: number): number => {
+  const total = totalChars;
+
+  if (props.staggerFrom === 'first') return index * props.staggerDuration;
+  if (props.staggerFrom === 'last') return (total - 1 - index) * props.staggerDuration;
+  if (props.staggerFrom === 'center') {
+    const center = Math.floor(total / 2);
+    return Math.abs(center - index) * props.staggerDuration;
+  }
+  if (props.staggerFrom === 'random') {
+    const randomIndex = Math.floor(Math.random() * total);
+    return Math.abs(randomIndex - index) * props.staggerDuration;
+  }
+
+  return Math.abs((props.staggerFrom as number) - index) * props.staggerDuration;
+};
+
+const handleIndexChange = (newIndex: number) => {
+  currentTextIndex.value = newIndex;
+  if (props.onNext) {
+    props.onNext(newIndex);
+  }
+};
+
+const next = () => {
+  const nextIndex =
+    currentTextIndex.value === props.texts.length - 1
+      ? props.loop
+        ? 0
+        : currentTextIndex.value
+      : currentTextIndex.value + 1;
+  if (nextIndex !== currentTextIndex.value) {
+    handleIndexChange(nextIndex);
+  }
+};
+
+const previous = () => {
+  const prevIndex =
+    currentTextIndex.value === 0
+      ? props.loop
+        ? props.texts.length - 1
+        : currentTextIndex.value
+      : currentTextIndex.value - 1;
+  if (prevIndex !== currentTextIndex.value) {
+    handleIndexChange(prevIndex);
+  }
+};
+
+const jumpTo = (index: number) => {
+  const validIndex = Math.max(0, Math.min(index, props.texts.length - 1));
+  if (validIndex !== currentTextIndex.value) {
+    handleIndexChange(validIndex);
+  }
+};
+
+const reset = () => {
+  if (currentTextIndex.value !== 0) {
+    currentTextIndex.value = 0;
+  }
+};
+
+defineExpose({
+  next,
+  previous,
+  jumpTo,
+  reset
+});
+
+watch(
+  () => props.auto,
+  newAuto => {
+    if (intervalId) {
+      clearInterval(intervalId);
+      intervalId = undefined;
+    }
+
+    if (newAuto) {
+      intervalId = setInterval(next, props.rotationInterval);
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (props.auto) {
+    intervalId = setInterval(next, props.rotationInterval);
+  }
+});
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+});
+</script>
+
+<template>
+  <Motion
+    tag="span"
+    :class="cn('flex flex-wrap whitespace-pre-wrap relative', mainClassName)"
+    v-bind="$attrs"
+    :transition="transition"
+    layout
+  >
+    <span class="sr-only">
+      {{ texts[currentTextIndex] }}
+    </span>
+
+    <AnimatePresence :mode="animatePresenceMode" :initial="animatePresenceInitial">
+      <Motion
+        :key="currentTextIndex"
+        tag="span"
+        :class="cn(splitBy === 'lines' ? 'flex flex-col w-full' : 'flex flex-wrap whitespace-pre-wrap relative')"
+        layout
+        aria-hidden="true"
+      >
+        <span v-for="(wordObj, wordIndex) in elements" :key="wordIndex" :class="cn('inline-flex', splitLevelClassName)">
+          <Motion
+            tag="span"
+            v-for="(char, charIndex) in wordObj.characters"
+            :key="charIndex"
+            :initial="initial"
+            :animate="animate"
+            :exit="exit"
+            :transition="{
+              ...transition,
+              delay: getStaggerDelay(getPreviousCharsCount(wordIndex) + charIndex, getTotalCharsCount())
+            }"
+            :class="cn('inline-block', elementLevelClassName)"
+          >
+            {{ char }}
+          </Motion>
+          <span v-if="wordObj.needsSpace" class="inline-block">&nbsp;</span>
+        </span>
+      </Motion>
+    </AnimatePresence>
+  </Motion>
+</template>
diff --git a/src/demo/TextAnimations/RotatingTextDemo.vue b/src/demo/TextAnimations/RotatingTextDemo.vue
new file mode 100644
index 0000000..5c0ff2b
--- /dev/null
+++ b/src/demo/TextAnimations/RotatingTextDemo.vue
@@ -0,0 +1,166 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative min-h-[400px] max-h-[400px] overflow-hidden demo-container">
+        <div
+          class="flex flex-row justify-center items-center p-12 sm:p-20 md:p-24 w-full h-full overflow-hidden font-light text-[1.5rem] text-white sm:text-[1.875rem] md:text-[3rem] dark:text-muted leading-8 sm:leading-9 md:leading-none"
+        >
+          <LayoutGroup>
+            <motion.p :is="'p'" class="flex items-center gap-[0.2em] font-black" layout>
+              <motion.span
+                :is="'span'"
+                class="pt-0.5 sm:pt-1 md:pt-2"
+                layout
+                :transition="{ type: 'spring', damping: 30, stiffness: 400 }"
+              >
+                Creative{{ ' ' }}
+              </motion.span>
+              <RotatingText
+                :texts="words"
+                mainClassName="px-2 py-0.5 bg-[#27FF64] text-white overflow-hidden flex justify-center rounded-lg sm:py-1 md:py-2 md:px-3"
+                staggerFrom="last"
+                :initial="{ y: '100%' }"
+                :animate="{ y: 0 }"
+                :exit="{ y: '-120%' }"
+                :staggerDuration="0.025"
+                splitLevelClassName="overflow-hidden pb-0.5 sm:pb-1"
+                :transition="{ type: 'spring', damping: 30, stiffness: 400 }"
+                :rotationInterval="2000"
+              />
+            </motion.p>
+          </LayoutGroup>
+        </div>
+      </div>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['framer-motion']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="rotatingText" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="rotatingText.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { LayoutGroup, motion } from 'motion-v';
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { rotatingText } from '../../constants/code/TextAnimations/rotatingTextCode';
+import RotatingText from '../../content/TextAnimations/RotatingText/RotatingText.vue';
+
+const words = ref(['thinking', 'coding', 'components!']);
+
+const propData = [
+  {
+    name: 'texts',
+    type: 'string[]',
+    default: '[]',
+    description: 'An array of text strings to be rotated.'
+  },
+  {
+    name: 'rotationInterval',
+    type: 'number',
+    default: '2000',
+    description: 'The interval (in milliseconds) between text rotations.'
+  },
+  {
+    name: 'initial',
+    type: 'object',
+    default: '{ y: "100%", opacity: 0 }',
+    description: 'Initial animation state for each element.'
+  },
+  {
+    name: 'animate',
+    type: 'object',
+    default: '{ y: 0, opacity: 1 }',
+    description: 'Animation state when elements enter.'
+  },
+  {
+    name: 'exit',
+    type: 'object',
+    default: '{ y: "-120%", opacity: 0 }',
+    description: 'Exit animation state for elements.'
+  },
+  {
+    name: 'animatePresenceMode',
+    type: 'string',
+    default: '"wait"',
+    description: "Mode for AnimatePresence; for example, 'wait' to finish exit animations before entering."
+  },
+  {
+    name: 'animatePresenceInitial',
+    type: 'boolean',
+    default: 'false',
+    description: 'Determines whether the AnimatePresence component should run its initial animation.'
+  },
+  {
+    name: 'staggerDuration',
+    type: 'number',
+    default: '0',
+    description: "Delay between each character's animation."
+  },
+  {
+    name: 'staggerFrom',
+    type: 'string',
+    default: '"first"',
+    description: 'Specifies the order from which the stagger starts.'
+  },
+  {
+    name: 'transition',
+    type: 'object',
+    default: '',
+    description: 'Transition settings for the animations.'
+  },
+  {
+    name: 'loop',
+    type: 'boolean',
+    default: 'true',
+    description: 'Determines if the rotation should loop back to the first text after the last one.'
+  },
+  {
+    name: 'auto',
+    type: 'boolean',
+    default: 'true',
+    description: 'If true, the text rotation starts automatically.'
+  },
+  {
+    name: 'splitBy',
+    type: 'string',
+    default: '"characters"',
+    description: 'Determines how the text is split into animatable elements (e.g., by characters, words, or lines).'
+  },
+  {
+    name: 'onNext',
+    type: 'function',
+    default: 'undefined',
+    description: 'Callback function invoked when the text rotates to the next item.'
+  },
+  {
+    name: 'mainClassName',
+    type: 'string',
+    default: "''",
+    description: 'Additional class names for the main container element.'
+  },
+  {
+    name: 'splitLevelClassName',
+    type: 'string',
+    default: "''",
+    description: 'Additional class names for the container wrapping each split group (e.g., a word).'
+  },
+  {
+    name: 'elementLevelClassName',
+    type: 'string',
+    default: "''",
+    description: 'Additional class names for each individual animated element.'
+  }
+];
+</script>

From adfaf20b5f5d7725bc6a6453aae4c3e531d88d7d Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 12 Jul 2025 18:40:23 +0530
Subject: [PATCH 28/37] Fix Smooth Transition

---
 .../RotatingText/RotatingText.vue             | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/content/TextAnimations/RotatingText/RotatingText.vue b/src/content/TextAnimations/RotatingText/RotatingText.vue
index 1d44010..ff00e25 100644
--- a/src/content/TextAnimations/RotatingText/RotatingText.vue
+++ b/src/content/TextAnimations/RotatingText/RotatingText.vue
@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<RotatingTextProps>(), {
 });
 
 const currentTextIndex = ref<number>(0);
-let intervalId: number | undefined = undefined;
+let intervalId: number | null = null;
 
 const splitIntoCharacters = (text: string): string[] => {
   if (typeof Intl !== 'undefined' && Intl.Segmenter) {
@@ -85,14 +85,6 @@ const elements = computed(() => {
   }));
 });
 
-const getPreviousCharsCount = (wordIndex: number): number => {
-  return elements.value.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0);
-};
-
-const getTotalCharsCount = (): number => {
-  return elements.value.reduce((sum, word) => sum + word.characters.length, 0);
-};
-
 const getStaggerDelay = (index: number, totalChars: number): number => {
   const total = totalChars;
 
@@ -112,9 +104,7 @@ const getStaggerDelay = (index: number, totalChars: number): number => {
 
 const handleIndexChange = (newIndex: number) => {
   currentTextIndex.value = newIndex;
-  if (props.onNext) {
-    props.onNext(newIndex);
-  }
+  if (props.onNext) props.onNext(newIndex);
 };
 
 const next = () => {
@@ -150,7 +140,7 @@ const jumpTo = (index: number) => {
 
 const reset = () => {
   if (currentTextIndex.value !== 0) {
-    currentTextIndex.value = 0;
+    handleIndexChange(0);
   }
 };
 
@@ -162,14 +152,14 @@ defineExpose({
 });
 
 watch(
-  () => props.auto,
-  newAuto => {
+  () => [props.auto, props.rotationInterval],
+  () => {
     if (intervalId) {
       clearInterval(intervalId);
-      intervalId = undefined;
+      intervalId = null;
     }
 
-    if (newAuto) {
+    if (props.auto) {
       intervalId = setInterval(next, props.rotationInterval);
     }
   },
@@ -206,8 +196,8 @@ onUnmounted(() => {
         :key="currentTextIndex"
         tag="span"
         :class="cn(splitBy === 'lines' ? 'flex flex-col w-full' : 'flex flex-wrap whitespace-pre-wrap relative')"
-        layout
         aria-hidden="true"
+        layout
       >
         <span v-for="(wordObj, wordIndex) in elements" :key="wordIndex" :class="cn('inline-flex', splitLevelClassName)">
           <Motion
@@ -219,13 +209,16 @@ onUnmounted(() => {
             :exit="exit"
             :transition="{
               ...transition,
-              delay: getStaggerDelay(getPreviousCharsCount(wordIndex) + charIndex, getTotalCharsCount())
+              delay: getStaggerDelay(
+                elements.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0) + charIndex,
+                elements.reduce((sum, word) => sum + word.characters.length, 0)
+              )
             }"
             :class="cn('inline-block', elementLevelClassName)"
           >
             {{ char }}
           </Motion>
-          <span v-if="wordObj.needsSpace" class="inline-block">&nbsp;</span>
+          <span v-if="wordObj.needsSpace" class="whitespace-pre"> </span>
         </span>
       </Motion>
     </AnimatePresence>

From 50532846bac9a20f1f619028819d63a1f999f587 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 16:33:32 +0300
Subject: [PATCH 29/37] Refactor RotatingText component props and improve type
 definitions

---
 .../RotatingText/RotatingText.vue             | 200 ++++++++++--------
 src/demo/TextAnimations/RotatingTextDemo.vue  |   2 +-
 2 files changed, 112 insertions(+), 90 deletions(-)

diff --git a/src/content/TextAnimations/RotatingText/RotatingText.vue b/src/content/TextAnimations/RotatingText/RotatingText.vue
index ff00e25..bc71ef0 100644
--- a/src/content/TextAnimations/RotatingText/RotatingText.vue
+++ b/src/content/TextAnimations/RotatingText/RotatingText.vue
@@ -2,38 +2,47 @@
 import { AnimatePresence, Motion, type Target, type Transition, type VariantLabels } from 'motion-v';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
-function cn(...classes: (string | undefined | null | boolean)[]): string {
-  return classes.filter(Boolean).join(' ');
+type StaggerFrom = 'first' | 'last' | 'center' | 'random' | number;
+type SplitBy = 'characters' | 'words' | 'lines';
+
+interface WordElement {
+  characters: string[];
+  needsSpace: boolean;
 }
 
 interface RotatingTextProps {
   texts: string[];
   transition?: Transition;
   initial?: boolean | Target | VariantLabels;
-  animate?: any;
+  animate?: Target | VariantLabels;
   exit?: Target | VariantLabels;
   animatePresenceMode?: 'sync' | 'wait';
   animatePresenceInitial?: boolean;
   rotationInterval?: number;
   staggerDuration?: number;
-  staggerFrom?: 'first' | 'last' | 'center' | 'random' | number;
+  staggerFrom?: StaggerFrom;
   loop?: boolean;
   auto?: boolean;
-  splitBy?: string;
+  splitBy?: SplitBy;
   onNext?: (index: number) => void;
   mainClassName?: string;
   splitLevelClassName?: string;
   elementLevelClassName?: string;
 }
 
+const cn = (...classes: (string | undefined | null | boolean)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
+
 const props = withDefaults(defineProps<RotatingTextProps>(), {
-  transition: () => ({
-    type: 'spring',
-    damping: 25,
-    stiffness: 300
-  }),
+  transition: () =>
+    ({
+      type: 'spring',
+      damping: 25,
+      stiffness: 300
+    }) as Transition,
   initial: () => ({ y: '100%', opacity: 0 }) as Target,
-  animate: () => ({ y: 0, opacity: 1 }),
+  animate: () => ({ y: 0, opacity: 1 }) as Target,
   exit: () => ({ y: '-120%', opacity: 0 }) as Target,
   animatePresenceMode: 'wait',
   animatePresenceInitial: false,
@@ -45,105 +54,128 @@ const props = withDefaults(defineProps<RotatingTextProps>(), {
   splitBy: 'characters'
 });
 
-const currentTextIndex = ref<number>(0);
-let intervalId: number | null = null;
+const currentTextIndex = ref(0);
+let intervalId: ReturnType<typeof setInterval> | null = null;
 
 const splitIntoCharacters = (text: string): string[] => {
-  if (typeof Intl !== 'undefined' && Intl.Segmenter) {
-    const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
-    return Array.from(segmenter.segment(text), segment => segment.segment);
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const segmenter = new (Intl as any).Segmenter('en', { granularity: 'grapheme' });
+    return [...segmenter.segment(text)].map(({ segment }) => segment);
   }
-  return Array.from(text);
+
+  return [...text];
 };
 
-const elements = computed(() => {
-  const currentText: string = props.texts[currentTextIndex.value];
+const elements = computed((): WordElement[] => {
+  const currentText = props.texts[currentTextIndex.value];
 
-  if (props.splitBy === 'characters') {
-    const words = currentText.split(' ');
-    return words.map((word, i) => ({
-      characters: splitIntoCharacters(word),
-      needsSpace: i !== words.length - 1
-    }));
+  switch (props.splitBy) {
+    case 'characters': {
+      const words = currentText.split(' ');
+      return words.map((word, i) => ({
+        characters: splitIntoCharacters(word),
+        needsSpace: i !== words.length - 1
+      }));
+    }
+    case 'words': {
+      const words = currentText.split(' ');
+      return words.map((word, i) => ({
+        characters: [word],
+        needsSpace: i !== words.length - 1
+      }));
+    }
+    case 'lines': {
+      const lines = currentText.split('\n');
+      return lines.map((line, i) => ({
+        characters: [line],
+        needsSpace: i !== lines.length - 1
+      }));
+    }
+    default: {
+      const parts = currentText.split(props.splitBy!);
+      return parts.map((part, i) => ({
+        characters: [part],
+        needsSpace: i !== parts.length - 1
+      }));
+    }
   }
-  if (props.splitBy === 'words') {
-    return currentText.split(' ').map((word, i, arr) => ({
-      characters: [word],
-      needsSpace: i !== arr.length - 1
-    }));
-  }
-  if (props.splitBy === 'lines') {
-    return currentText.split('\n').map((line, i, arr) => ({
-      characters: [line],
-      needsSpace: i !== arr.length - 1
-    }));
-  }
-
-  return currentText.split(props.splitBy).map((part, i, arr) => ({
-    characters: [part],
-    needsSpace: i !== arr.length - 1
-  }));
 });
 
 const getStaggerDelay = (index: number, totalChars: number): number => {
-  const total = totalChars;
+  const { staggerDuration, staggerFrom } = props;
 
-  if (props.staggerFrom === 'first') return index * props.staggerDuration;
-  if (props.staggerFrom === 'last') return (total - 1 - index) * props.staggerDuration;
-  if (props.staggerFrom === 'center') {
-    const center = Math.floor(total / 2);
-    return Math.abs(center - index) * props.staggerDuration;
+  switch (staggerFrom) {
+    case 'first':
+      return index * staggerDuration;
+    case 'last':
+      return (totalChars - 1 - index) * staggerDuration;
+    case 'center': {
+      const center = Math.floor(totalChars / 2);
+      return Math.abs(center - index) * staggerDuration;
+    }
+    case 'random': {
+      const randomIndex = Math.floor(Math.random() * totalChars);
+      return Math.abs(randomIndex - index) * staggerDuration;
+    }
+    default:
+      return Math.abs((staggerFrom as number) - index) * staggerDuration;
   }
-  if (props.staggerFrom === 'random') {
-    const randomIndex = Math.floor(Math.random() * total);
-    return Math.abs(randomIndex - index) * props.staggerDuration;
-  }
-
-  return Math.abs((props.staggerFrom as number) - index) * props.staggerDuration;
 };
 
-const handleIndexChange = (newIndex: number) => {
+const handleIndexChange = (newIndex: number): void => {
   currentTextIndex.value = newIndex;
-  if (props.onNext) props.onNext(newIndex);
+  props.onNext?.(newIndex);
 };
 
-const next = () => {
-  const nextIndex =
-    currentTextIndex.value === props.texts.length - 1
-      ? props.loop
-        ? 0
-        : currentTextIndex.value
-      : currentTextIndex.value + 1;
+const next = (): void => {
+  const isAtEnd = currentTextIndex.value === props.texts.length - 1;
+  const nextIndex = isAtEnd ? (props.loop ? 0 : currentTextIndex.value) : currentTextIndex.value + 1;
+
   if (nextIndex !== currentTextIndex.value) {
     handleIndexChange(nextIndex);
   }
 };
 
-const previous = () => {
-  const prevIndex =
-    currentTextIndex.value === 0
-      ? props.loop
-        ? props.texts.length - 1
-        : currentTextIndex.value
-      : currentTextIndex.value - 1;
+const previous = (): void => {
+  const isAtStart = currentTextIndex.value === 0;
+  const prevIndex = isAtStart
+    ? props.loop
+      ? props.texts.length - 1
+      : currentTextIndex.value
+    : currentTextIndex.value - 1;
+
   if (prevIndex !== currentTextIndex.value) {
     handleIndexChange(prevIndex);
   }
 };
 
-const jumpTo = (index: number) => {
+const jumpTo = (index: number): void => {
   const validIndex = Math.max(0, Math.min(index, props.texts.length - 1));
   if (validIndex !== currentTextIndex.value) {
     handleIndexChange(validIndex);
   }
 };
 
-const reset = () => {
+const reset = (): void => {
   if (currentTextIndex.value !== 0) {
     handleIndexChange(0);
   }
 };
 
+const cleanupInterval = (): void => {
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
+};
+
+const startInterval = (): void => {
+  if (props.auto) {
+    intervalId = setInterval(next, props.rotationInterval);
+  }
+};
+
 defineExpose({
   next,
   previous,
@@ -152,30 +184,20 @@ defineExpose({
 });
 
 watch(
-  () => [props.auto, props.rotationInterval],
+  () => [props.auto, props.rotationInterval] as const,
   () => {
-    if (intervalId) {
-      clearInterval(intervalId);
-      intervalId = null;
-    }
-
-    if (props.auto) {
-      intervalId = setInterval(next, props.rotationInterval);
-    }
+    cleanupInterval();
+    startInterval();
   },
   { immediate: true }
 );
 
 onMounted(() => {
-  if (props.auto) {
-    intervalId = setInterval(next, props.rotationInterval);
-  }
+  startInterval();
 });
 
 onUnmounted(() => {
-  if (intervalId) {
-    clearInterval(intervalId);
-  }
+  cleanupInterval();
 });
 </script>
 
@@ -201,9 +223,9 @@ onUnmounted(() => {
       >
         <span v-for="(wordObj, wordIndex) in elements" :key="wordIndex" :class="cn('inline-flex', splitLevelClassName)">
           <Motion
-            tag="span"
             v-for="(char, charIndex) in wordObj.characters"
             :key="charIndex"
+            tag="span"
             :initial="initial"
             :animate="animate"
             :exit="exit"
@@ -218,7 +240,7 @@ onUnmounted(() => {
           >
             {{ char }}
           </Motion>
-          <span v-if="wordObj.needsSpace" class="whitespace-pre"> </span>
+          <span v-if="wordObj.needsSpace" class="whitespace-pre"></span>
         </span>
       </Motion>
     </AnimatePresence>
diff --git a/src/demo/TextAnimations/RotatingTextDemo.vue b/src/demo/TextAnimations/RotatingTextDemo.vue
index 5c0ff2b..26efea5 100644
--- a/src/demo/TextAnimations/RotatingTextDemo.vue
+++ b/src/demo/TextAnimations/RotatingTextDemo.vue
@@ -17,7 +17,7 @@
               </motion.span>
               <RotatingText
                 :texts="words"
-                mainClassName="px-2 py-0.5 bg-[#27FF64] text-white overflow-hidden flex justify-center rounded-lg sm:py-1 md:py-2 md:px-3"
+                mainClassName="px-2 py-0.5 bg-[#27FF64] text-[#222] overflow-hidden flex justify-center rounded-lg sm:py-1 md:py-2 md:px-3"
                 staggerFrom="last"
                 :initial="{ y: '100%' }"
                 :animate="{ y: 0 }"

From 7244fabc7e3c7e2b400de859f480828298466cd8 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 16:34:15 +0300
Subject: [PATCH 30/37] Update Dependencies component to use 'motion-v' instead
 of 'framer-motion'

---
 src/demo/TextAnimations/RotatingTextDemo.vue | 2 +-
 src/demo/TextAnimations/TrueFocusDemo.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/demo/TextAnimations/RotatingTextDemo.vue b/src/demo/TextAnimations/RotatingTextDemo.vue
index 26efea5..73321df 100644
--- a/src/demo/TextAnimations/RotatingTextDemo.vue
+++ b/src/demo/TextAnimations/RotatingTextDemo.vue
@@ -33,7 +33,7 @@
       </div>
 
       <PropTable :data="propData" />
-      <Dependencies :dependency-list="['framer-motion']" />
+      <Dependencies :dependency-list="['motion-v']" />
     </template>
 
     <template #code>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index e207640..06f4a58 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -48,7 +48,7 @@
 
         <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['framer-motion']" />
+        <Dependencies :dependency-list="['motion-v']" />
       </template>
 
       <template #code>

From af0fa8cc317909ac191d8a95295c4d3f55d23878 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 17:08:24 +0300
Subject: [PATCH 31/37] Migrate <HyperSpeed />

---
 package-lock.json                             |   10 +
 package.json                                  |    1 +
 src/constants/Categories.ts                   |    1 +
 src/constants/Components.ts                   |    3 +-
 .../code/Backgrounds/hyperspeedCode.ts        |   67 +
 .../Backgrounds/Hyperspeed/Hyperspeed.vue     | 1302 +++++++++++++++++
 .../Hyperspeed/HyperspeedPresets.ts           |  225 +++
 src/demo/Backgrounds/HyperspeedDemo.vue       |   92 ++
 8 files changed, 1700 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/code/Backgrounds/hyperspeedCode.ts
 create mode 100644 src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
 create mode 100644 src/content/Backgrounds/Hyperspeed/HyperspeedPresets.ts
 create mode 100644 src/demo/Backgrounds/HyperspeedDemo.vue

diff --git a/package-lock.json b/package-lock.json
index aa07415..e3a91c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "matter-js": "^0.20.0",
         "motion-v": "^1.5.0",
         "ogl": "^1.0.11",
+        "postprocessing": "^6.37.6",
         "primeicons": "^7.0.0",
         "primevue": "^4.3.6",
         "three": "^0.178.0",
@@ -7664,6 +7665,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postprocessing": {
+      "version": "6.37.6",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.37.6.tgz",
+      "integrity": "sha512-KrdKLf1257RkoIk3z3nhRS0aToKrX2xJgtR0lbnOQUjd+1I4GVNv1gQYsQlfRglvEXjpzrwqOA5fXfoDBimadg==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.179.0"
+      }
+    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
diff --git a/package.json b/package.json
index 537c416..a02c2e3 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "matter-js": "^0.20.0",
     "motion-v": "^1.5.0",
     "ogl": "^1.0.11",
+    "postprocessing": "^6.37.6",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.6",
     "three": "^0.178.0",
diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 527592d..1fe5c08 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -67,6 +67,7 @@ export const CATEGORIES = [
       'Aurora',
       'Beams',
       'Dot Grid',
+      'Hyperspeed',
       'Silk',
       'Lightning',
       'Letter Glitch',
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 4641444..ab2deab 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -61,7 +61,8 @@ const backgrounds = {
   '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')
+  'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
+  'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue')
 };
 
 export const componentMap = {
diff --git a/src/constants/code/Backgrounds/hyperspeedCode.ts b/src/constants/code/Backgrounds/hyperspeedCode.ts
new file mode 100644
index 0000000..8962d67
--- /dev/null
+++ 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
+};
diff --git a/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue b/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
new file mode 100644
index 0000000..7d9284e
--- /dev/null
+++ b/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
@@ -0,0 +1,1302 @@
+<template>
+  <div ref="hyperspeedContainer" class="hyperspeed-container" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import * as THREE from 'three';
+import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessing';
+
+interface Distortion {
+  uniforms: Record<string, { value: unknown }>;
+  getDistortion: string;
+  getJS?: (progress: number, time: number) => THREE.Vector3;
+}
+
+interface Distortions {
+  [key: string]: Distortion;
+}
+
+interface Colors {
+  roadColor: number;
+  islandColor: number;
+  background: number;
+  shoulderLines: number;
+  brokenLines: number;
+  leftCars: number[];
+  rightCars: number[];
+  sticks: number;
+}
+
+interface HyperspeedOptions {
+  onSpeedUp?: (ev: MouseEvent) => void;
+  onSlowDown?: (ev: MouseEvent) => void;
+  distortion?: string | Distortion;
+  length: number;
+  roadWidth: number;
+  islandWidth: number;
+  lanesPerRoad: number;
+  fov: number;
+  fovSpeedUp: number;
+  speedUp: number;
+  carLightsFade: number;
+  totalSideLightSticks: number;
+  lightPairsPerRoadWay: number;
+  shoulderLinesWidthPercentage: number;
+  brokenLinesWidthPercentage: number;
+  brokenLinesLengthPercentage: number;
+  lightStickWidth: [number, number];
+  lightStickHeight: [number, number];
+  movingAwaySpeed: [number, number];
+  movingCloserSpeed: [number, number];
+  carLightsLength: [number, number];
+  carLightsRadius: [number, number];
+  carWidthPercentage: [number, number];
+  carShiftX: [number, number];
+  carFloorSeparation: [number, number];
+  colors: Colors;
+  isHyper?: boolean;
+}
+
+interface HyperspeedProps {
+  effectOptions?: Partial<HyperspeedOptions>;
+}
+
+const props = withDefaults(defineProps<HyperspeedProps>(), {
+  effectOptions: () => ({})
+});
+
+const hyperspeedContainer = ref<HTMLDivElement>();
+let appRef: App | null = null;
+
+const defaultOptions: HyperspeedOptions = {
+  onSpeedUp: () => {},
+  onSlowDown: () => {},
+  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
+  }
+};
+
+function nsin(val: number) {
+  return Math.sin(val) * 0.5 + 0.5;
+}
+
+const mountainUniforms = {
+  uFreq: { value: new THREE.Vector3(3, 6, 10) },
+  uAmp: { value: new THREE.Vector3(30, 30, 20) }
+};
+
+const xyUniforms = {
+  uFreq: { value: new THREE.Vector2(5, 2) },
+  uAmp: { value: new THREE.Vector2(25, 15) }
+};
+
+const LongRaceUniforms = {
+  uFreq: { value: new THREE.Vector2(2, 3) },
+  uAmp: { value: new THREE.Vector2(35, 10) }
+};
+
+const turbulentUniforms = {
+  uFreq: { value: new THREE.Vector4(4, 8, 8, 1) },
+  uAmp: { value: new THREE.Vector4(25, 5, 10, 10) }
+};
+
+const deepUniforms = {
+  uFreq: { value: new THREE.Vector2(4, 8) },
+  uAmp: { value: new THREE.Vector2(10, 20) },
+  uPowY: { value: new THREE.Vector2(20, 2) }
+};
+
+const distortions: Distortions = {
+  mountainDistortion: {
+    uniforms: mountainUniforms,
+    getDistortion: `
+      uniform vec3 uAmp;
+      uniform vec3 uFreq;
+      #define PI 3.14159265358979
+      float nsin(float val){
+        return sin(val) * 0.5 + 0.5;
+      }
+      vec3 getDistortion(float progress){
+        float movementProgressFix = 0.02;
+        return vec3( 
+          cos(progress * PI * uFreq.x + uTime) * uAmp.x - cos(movementProgressFix * PI * uFreq.x + uTime) * uAmp.x,
+          nsin(progress * PI * uFreq.y + uTime) * uAmp.y - nsin(movementProgressFix * PI * uFreq.y + uTime) * uAmp.y,
+          nsin(progress * PI * uFreq.z + uTime) * uAmp.z - nsin(movementProgressFix * PI * uFreq.z + uTime) * uAmp.z
+        );
+      }
+    `,
+    getJS: (progress: number, time: number) => {
+      const movementProgressFix = 0.02;
+      const uFreq = mountainUniforms.uFreq.value;
+      const uAmp = mountainUniforms.uAmp.value;
+      const distortion = new THREE.Vector3(
+        Math.cos(progress * Math.PI * uFreq.x + time) * uAmp.x -
+          Math.cos(movementProgressFix * Math.PI * uFreq.x + time) * uAmp.x,
+        nsin(progress * Math.PI * uFreq.y + time) * uAmp.y -
+          nsin(movementProgressFix * Math.PI * uFreq.y + time) * uAmp.y,
+        nsin(progress * Math.PI * uFreq.z + time) * uAmp.z -
+          nsin(movementProgressFix * Math.PI * uFreq.z + time) * uAmp.z
+      );
+      const lookAtAmp = new THREE.Vector3(2, 2, 2);
+      const lookAtOffset = new THREE.Vector3(0, 0, -5);
+      return distortion.multiply(lookAtAmp).add(lookAtOffset);
+    }
+  },
+  xyDistortion: {
+    uniforms: xyUniforms,
+    getDistortion: `
+      uniform vec2 uFreq;
+      uniform vec2 uAmp;
+      #define PI 3.14159265358979
+      vec3 getDistortion(float progress){
+        float movementProgressFix = 0.02;
+        return vec3( 
+          cos(progress * PI * uFreq.x + uTime) * uAmp.x - cos(movementProgressFix * PI * uFreq.x + uTime) * uAmp.x,
+          sin(progress * PI * uFreq.y + PI/2. + uTime) * uAmp.y - sin(movementProgressFix * PI * uFreq.y + PI/2. + uTime) * uAmp.y,
+          0.
+        );
+      }
+    `,
+    getJS: (progress: number, time: number) => {
+      const movementProgressFix = 0.02;
+      const uFreq = xyUniforms.uFreq.value;
+      const uAmp = xyUniforms.uAmp.value;
+      const distortion = new THREE.Vector3(
+        Math.cos(progress * Math.PI * uFreq.x + time) * uAmp.x -
+          Math.cos(movementProgressFix * Math.PI * uFreq.x + time) * uAmp.x,
+        Math.sin(progress * Math.PI * uFreq.y + time + Math.PI / 2) * uAmp.y -
+          Math.sin(movementProgressFix * Math.PI * uFreq.y + time + Math.PI / 2) * uAmp.y,
+        0
+      );
+      const lookAtAmp = new THREE.Vector3(2, 0.4, 1);
+      const lookAtOffset = new THREE.Vector3(0, 0, -3);
+      return distortion.multiply(lookAtAmp).add(lookAtOffset);
+    }
+  },
+  LongRaceDistortion: {
+    uniforms: LongRaceUniforms,
+    getDistortion: `
+      uniform vec2 uFreq;
+      uniform vec2 uAmp;
+      #define PI 3.14159265358979
+      vec3 getDistortion(float progress){
+        float camProgress = 0.0125;
+        return vec3( 
+          sin(progress * PI * uFreq.x + uTime) * uAmp.x - sin(camProgress * PI * uFreq.x + uTime) * uAmp.x,
+          sin(progress * PI * uFreq.y + uTime) * uAmp.y - sin(camProgress * PI * uFreq.y + uTime) * uAmp.y,
+          0.
+        );
+      }
+    `,
+    getJS: (progress: number, time: number) => {
+      const camProgress = 0.0125;
+      const uFreq = LongRaceUniforms.uFreq.value;
+      const uAmp = LongRaceUniforms.uAmp.value;
+      const distortion = new THREE.Vector3(
+        Math.sin(progress * Math.PI * uFreq.x + time) * uAmp.x -
+          Math.sin(camProgress * Math.PI * uFreq.x + time) * uAmp.x,
+        Math.sin(progress * Math.PI * uFreq.y + time) * uAmp.y -
+          Math.sin(camProgress * Math.PI * uFreq.y + time) * uAmp.y,
+        0
+      );
+      const lookAtAmp = new THREE.Vector3(1, 1, 0);
+      const lookAtOffset = new THREE.Vector3(0, 0, -5);
+      return distortion.multiply(lookAtAmp).add(lookAtOffset);
+    }
+  },
+  turbulentDistortion: {
+    uniforms: turbulentUniforms,
+    getDistortion: `
+      uniform vec4 uFreq;
+      uniform vec4 uAmp;
+      float nsin(float val){
+        return sin(val) * 0.5 + 0.5;
+      }
+      #define PI 3.14159265358979
+      float getDistortionX(float progress){
+        return (
+          cos(PI * progress * uFreq.r + uTime) * uAmp.r +
+          pow(cos(PI * progress * uFreq.g + uTime * (uFreq.g / uFreq.r)), 2. ) * uAmp.g
+        );
+      }
+      float getDistortionY(float progress){
+        return (
+          -nsin(PI * progress * uFreq.b + uTime) * uAmp.b +
+          -pow(nsin(PI * progress * uFreq.a + uTime / (uFreq.b / uFreq.a)), 5.) * uAmp.a
+        );
+      }
+      vec3 getDistortion(float progress){
+        return vec3(
+          getDistortionX(progress) - getDistortionX(0.0125),
+          getDistortionY(progress) - getDistortionY(0.0125),
+          0.
+        );
+      }
+    `,
+    getJS: (progress: number, time: number) => {
+      const uFreq = turbulentUniforms.uFreq.value;
+      const uAmp = turbulentUniforms.uAmp.value;
+
+      const getX = (p: number) =>
+        Math.cos(Math.PI * p * uFreq.x + time) * uAmp.x +
+        Math.pow(Math.cos(Math.PI * p * uFreq.y + time * (uFreq.y / uFreq.x)), 2) * uAmp.y;
+
+      const getY = (p: number) =>
+        -nsin(Math.PI * p * uFreq.z + time) * uAmp.z -
+        Math.pow(nsin(Math.PI * p * uFreq.w + time / (uFreq.z / uFreq.w)), 5) * uAmp.w;
+
+      const distortion = new THREE.Vector3(
+        getX(progress) - getX(progress + 0.007),
+        getY(progress) - getY(progress + 0.007),
+        0
+      );
+      const lookAtAmp = new THREE.Vector3(-2, -5, 0);
+      const lookAtOffset = new THREE.Vector3(0, 0, -10);
+      return distortion.multiply(lookAtAmp).add(lookAtOffset);
+    }
+  },
+  turbulentDistortionStill: {
+    uniforms: turbulentUniforms,
+    getDistortion: `
+      uniform vec4 uFreq;
+      uniform vec4 uAmp;
+      float nsin(float val){
+        return sin(val) * 0.5 + 0.5;
+      }
+      #define PI 3.14159265358979
+      float getDistortionX(float progress){
+        return (
+          cos(PI * progress * uFreq.r) * uAmp.r +
+          pow(cos(PI * progress * uFreq.g * (uFreq.g / uFreq.r)), 2. ) * uAmp.g
+        );
+      }
+      float getDistortionY(float progress){
+        return (
+          -nsin(PI * progress * uFreq.b) * uAmp.b +
+          -pow(nsin(PI * progress * uFreq.a / (uFreq.b / uFreq.a)), 5.) * uAmp.a
+        );
+      }
+      vec3 getDistortion(float progress){
+        return vec3(
+          getDistortionX(progress) - getDistortionX(0.02),
+          getDistortionY(progress) - getDistortionY(0.02),
+          0.
+        );
+      }
+    `
+  },
+  deepDistortionStill: {
+    uniforms: deepUniforms,
+    getDistortion: `
+      uniform vec4 uFreq;
+      uniform vec4 uAmp;
+      uniform vec2 uPowY;
+      float nsin(float val){
+        return sin(val) * 0.5 + 0.5;
+      }
+      #define PI 3.14159265358979
+      float getDistortionX(float progress){
+        return (
+          sin(progress * PI * uFreq.x) * uAmp.x * 2.
+        );
+      }
+      float getDistortionY(float progress){
+        return (
+          pow(abs(progress * uPowY.x), uPowY.y) + sin(progress * PI * uFreq.y) * uAmp.y
+        );
+      }
+      vec3 getDistortion(float progress){
+        return vec3(
+          getDistortionX(progress) - getDistortionX(0.02),
+          getDistortionY(progress) - getDistortionY(0.05),
+          0.
+        );
+      }
+    `
+  },
+  deepDistortion: {
+    uniforms: deepUniforms,
+    getDistortion: `
+      uniform vec4 uFreq;
+      uniform vec4 uAmp;
+      uniform vec2 uPowY;
+      float nsin(float val){
+        return sin(val) * 0.5 + 0.5;
+      }
+      #define PI 3.14159265358979
+      float getDistortionX(float progress){
+        return (
+          sin(progress * PI * uFreq.x + uTime) * uAmp.x
+        );
+      }
+      float getDistortionY(float progress){
+        return (
+          pow(abs(progress * uPowY.x), uPowY.y) + sin(progress * PI * uFreq.y + uTime) * uAmp.y
+        );
+      }
+      vec3 getDistortion(float progress){
+        return vec3(
+          getDistortionX(progress) - getDistortionX(0.02),
+          getDistortionY(progress) - getDistortionY(0.02),
+          0.
+        );
+      }
+    `,
+    getJS: (progress: number, time: number) => {
+      const uFreq = deepUniforms.uFreq.value;
+      const uAmp = deepUniforms.uAmp.value;
+      const uPowY = deepUniforms.uPowY.value;
+
+      const getX = (p: number) => Math.sin(p * Math.PI * uFreq.x + time) * uAmp.x;
+      const getY = (p: number) => Math.pow(p * uPowY.x, uPowY.y) + Math.sin(p * Math.PI * uFreq.y + time) * uAmp.y;
+
+      const distortion = new THREE.Vector3(
+        getX(progress) - getX(progress + 0.01),
+        getY(progress) - getY(progress + 0.01),
+        0
+      );
+      const lookAtAmp = new THREE.Vector3(-2, -4, 0);
+      const lookAtOffset = new THREE.Vector3(0, 0, -10);
+      return distortion.multiply(lookAtAmp).add(lookAtOffset);
+    }
+  }
+};
+
+const distortion_uniforms = {
+  uDistortionX: { value: new THREE.Vector2(80, 3) },
+  uDistortionY: { value: new THREE.Vector2(-40, 2.5) }
+};
+
+const distortion_vertex = `
+  #define PI 3.14159265358979
+  uniform vec2 uDistortionX;
+  uniform vec2 uDistortionY;
+  float nsin(float val){
+    return sin(val) * 0.5 + 0.5;
+  }
+  vec3 getDistortion(float progress){
+    progress = clamp(progress, 0., 1.);
+    float xAmp = uDistortionX.r;
+    float xFreq = uDistortionX.g;
+    float yAmp = uDistortionY.r;
+    float yFreq = uDistortionY.g;
+    return vec3( 
+      xAmp * nsin(progress * PI * xFreq - PI / 2.),
+      yAmp * nsin(progress * PI * yFreq - PI / 2.),
+      0.
+    );
+  }
+`;
+
+function random(base: number | [number, number]): number {
+  if (Array.isArray(base)) {
+    return Math.random() * (base[1] - base[0]) + base[0];
+  }
+  return Math.random() * base;
+}
+
+function pickRandom<T>(arr: T | T[]): T {
+  if (Array.isArray(arr)) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+  return arr;
+}
+
+function lerp(current: number, target: number, speed = 0.1, limit = 0.001): number {
+  let change = (target - current) * speed;
+  if (Math.abs(change) < limit) {
+    change = target - current;
+  }
+  return change;
+}
+
+class CarLights {
+  webgl: App;
+  options: HyperspeedOptions;
+  colors: number[] | THREE.Color;
+  speed: [number, number];
+  fade: THREE.Vector2;
+  mesh!: THREE.Mesh<THREE.InstancedBufferGeometry, THREE.ShaderMaterial>;
+
+  constructor(
+    webgl: App,
+    options: HyperspeedOptions,
+    colors: number[] | THREE.Color,
+    speed: [number, number],
+    fade: THREE.Vector2
+  ) {
+    this.webgl = webgl;
+    this.options = options;
+    this.colors = colors;
+    this.speed = speed;
+    this.fade = fade;
+  }
+
+  init() {
+    const options = this.options;
+    const curve = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -1));
+    const geometry = new THREE.TubeGeometry(curve, 40, 1, 8, false);
+
+    const instanced = new THREE.InstancedBufferGeometry();
+    // Copy geometry attributes
+    for (const key in geometry.attributes) {
+      instanced.setAttribute(key, geometry.attributes[key]);
+    }
+    if (geometry.index) {
+      instanced.setIndex(geometry.index);
+    }
+    instanced.instanceCount = options.lightPairsPerRoadWay * 2;
+
+    const laneWidth = options.roadWidth / options.lanesPerRoad;
+
+    const aOffset: number[] = [];
+    const aMetrics: number[] = [];
+    const aColor: number[] = [];
+
+    let colorArray: THREE.Color[];
+    if (Array.isArray(this.colors)) {
+      colorArray = this.colors.map(c => new THREE.Color(c));
+    } else {
+      colorArray = [new THREE.Color(this.colors)];
+    }
+
+    for (let i = 0; i < options.lightPairsPerRoadWay; i++) {
+      const radius = random(options.carLightsRadius);
+      const length = random(options.carLightsLength);
+      const spd = random(this.speed);
+
+      const carLane = i % options.lanesPerRoad;
+      let laneX = carLane * laneWidth - options.roadWidth / 2 + laneWidth / 2;
+
+      const carWidth = random(options.carWidthPercentage) * laneWidth;
+      const carShiftX = random(options.carShiftX) * laneWidth;
+      laneX += carShiftX;
+
+      const offsetY = random(options.carFloorSeparation) + radius * 1.3;
+      const offsetZ = -random(options.length);
+
+      aOffset.push(laneX - carWidth / 2);
+      aOffset.push(offsetY);
+      aOffset.push(offsetZ);
+
+      aOffset.push(laneX + carWidth / 2);
+      aOffset.push(offsetY);
+      aOffset.push(offsetZ);
+
+      aMetrics.push(radius);
+      aMetrics.push(length);
+      aMetrics.push(spd);
+
+      aMetrics.push(radius);
+      aMetrics.push(length);
+      aMetrics.push(spd);
+
+      const color = pickRandom<THREE.Color>(colorArray);
+      aColor.push(color.r);
+      aColor.push(color.g);
+      aColor.push(color.b);
+
+      aColor.push(color.r);
+      aColor.push(color.g);
+      aColor.push(color.b);
+    }
+
+    instanced.setAttribute('aOffset', new THREE.InstancedBufferAttribute(new Float32Array(aOffset), 3, false));
+    instanced.setAttribute('aMetrics', new THREE.InstancedBufferAttribute(new Float32Array(aMetrics), 3, false));
+    instanced.setAttribute('aColor', new THREE.InstancedBufferAttribute(new Float32Array(aColor), 3, false));
+
+    const material = new THREE.ShaderMaterial({
+      fragmentShader: carLightsFragment,
+      vertexShader: carLightsVertex,
+      transparent: true,
+      uniforms: Object.assign(
+        {
+          uTime: { value: 0 },
+          uTravelLength: { value: options.length },
+          uFade: { value: this.fade }
+        },
+        this.webgl.fogUniforms,
+        (typeof this.options.distortion === 'object' ? this.options.distortion.uniforms : {}) || {}
+      )
+    });
+
+    material.onBeforeCompile = shader => {
+      shader.vertexShader = shader.vertexShader.replace(
+        '#include <getDistortion_vertex>',
+        typeof this.options.distortion === 'object' ? this.options.distortion.getDistortion : ''
+      );
+    };
+
+    const mesh = new THREE.Mesh(instanced, material);
+    mesh.frustumCulled = false;
+    this.webgl.scene.add(mesh);
+    this.mesh = mesh;
+  }
+
+  update(time: number) {
+    if (this.mesh.material.uniforms.uTime) {
+      this.mesh.material.uniforms.uTime.value = time;
+    }
+  }
+}
+
+const carLightsFragment = `
+  #define USE_FOG;
+  ${THREE.ShaderChunk['fog_pars_fragment']}
+  varying vec3 vColor;
+  varying vec2 vUv; 
+  uniform vec2 uFade;
+  void main() {
+    vec3 color = vec3(vColor);
+    float alpha = smoothstep(uFade.x, uFade.y, vUv.x);
+    gl_FragColor = vec4(color, alpha);
+    if (gl_FragColor.a < 0.0001) discard;
+    ${THREE.ShaderChunk['fog_fragment']}
+  }
+`;
+
+const carLightsVertex = `
+  #define USE_FOG;
+  ${THREE.ShaderChunk['fog_pars_vertex']}
+  attribute vec3 aOffset;
+  attribute vec3 aMetrics;
+  attribute vec3 aColor;
+  uniform float uTravelLength;
+  uniform float uTime;
+  varying vec2 vUv; 
+  varying vec3 vColor; 
+  #include <getDistortion_vertex>
+  void main() {
+    vec3 transformed = position.xyz;
+    float radius = aMetrics.r;
+    float myLength = aMetrics.g;
+    float speed = aMetrics.b;
+
+    transformed.xy *= radius;
+    transformed.z *= myLength;
+
+    transformed.z += myLength - mod(uTime * speed + aOffset.z, uTravelLength);
+    transformed.xy += aOffset.xy;
+
+    float progress = abs(transformed.z / uTravelLength);
+    transformed.xyz += getDistortion(progress);
+
+    vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.);
+    gl_Position = projectionMatrix * mvPosition;
+    vUv = uv;
+    vColor = aColor;
+    ${THREE.ShaderChunk['fog_vertex']}
+  }
+`;
+
+class LightsSticks {
+  webgl: App;
+  options: HyperspeedOptions;
+  mesh!: THREE.Mesh<THREE.InstancedBufferGeometry, THREE.ShaderMaterial>;
+
+  constructor(webgl: App, options: HyperspeedOptions) {
+    this.webgl = webgl;
+    this.options = options;
+  }
+
+  init() {
+    const options = this.options;
+    const geometry = new THREE.PlaneGeometry(1, 1);
+    const instanced = new THREE.InstancedBufferGeometry();
+    // Copy geometry attributes
+    for (const key in geometry.attributes) {
+      instanced.setAttribute(key, geometry.attributes[key]);
+    }
+    if (geometry.index) {
+      instanced.setIndex(geometry.index);
+    }
+    const totalSticks = options.totalSideLightSticks;
+    instanced.instanceCount = totalSticks;
+
+    const stickoffset = options.length / (totalSticks - 1);
+    const aOffset: number[] = [];
+    const aColor: number[] = [];
+    const aMetrics: number[] = [];
+
+    let colorArray: THREE.Color[];
+    if (Array.isArray(options.colors.sticks)) {
+      colorArray = options.colors.sticks.map(c => new THREE.Color(c));
+    } else {
+      colorArray = [new THREE.Color(options.colors.sticks)];
+    }
+
+    for (let i = 0; i < totalSticks; i++) {
+      const width = random(options.lightStickWidth);
+      const height = random(options.lightStickHeight);
+      aOffset.push((i - 1) * stickoffset * 2 + stickoffset * Math.random());
+
+      const color = pickRandom<THREE.Color>(colorArray);
+      aColor.push(color.r);
+      aColor.push(color.g);
+      aColor.push(color.b);
+
+      aMetrics.push(width);
+      aMetrics.push(height);
+    }
+
+    instanced.setAttribute('aOffset', new THREE.InstancedBufferAttribute(new Float32Array(aOffset), 1, false));
+    instanced.setAttribute('aColor', new THREE.InstancedBufferAttribute(new Float32Array(aColor), 3, false));
+    instanced.setAttribute('aMetrics', new THREE.InstancedBufferAttribute(new Float32Array(aMetrics), 2, false));
+
+    const material = new THREE.ShaderMaterial({
+      fragmentShader: sideSticksFragment,
+      vertexShader: sideSticksVertex,
+      side: THREE.DoubleSide,
+      uniforms: Object.assign(
+        {
+          uTravelLength: { value: options.length },
+          uTime: { value: 0 }
+        },
+        this.webgl.fogUniforms,
+        (typeof options.distortion === 'object' ? options.distortion.uniforms : {}) || {}
+      )
+    });
+
+    material.onBeforeCompile = shader => {
+      shader.vertexShader = shader.vertexShader.replace(
+        '#include <getDistortion_vertex>',
+        typeof this.options.distortion === 'object' ? this.options.distortion.getDistortion : ''
+      );
+    };
+
+    const mesh = new THREE.Mesh(instanced, material);
+    mesh.frustumCulled = false;
+    this.webgl.scene.add(mesh);
+    this.mesh = mesh;
+  }
+
+  update(time: number) {
+    if (this.mesh.material.uniforms.uTime) {
+      this.mesh.material.uniforms.uTime.value = time;
+    }
+  }
+}
+
+const sideSticksVertex = `
+  #define USE_FOG;
+  ${THREE.ShaderChunk['fog_pars_vertex']}
+  attribute float aOffset;
+  attribute vec3 aColor;
+  attribute vec2 aMetrics;
+  uniform float uTravelLength;
+  uniform float uTime;
+  varying vec3 vColor;
+  mat4 rotationY( in float angle ) {
+    return mat4(
+      cos(angle),		0,		sin(angle),	0,
+      0,		        1.0,	0,			0,
+      -sin(angle),	    0,		cos(angle),	0,
+      0, 		        0,		0,			1
+    );
+  }
+  #include <getDistortion_vertex>
+  void main(){
+    vec3 transformed = position.xyz;
+    float width = aMetrics.x;
+    float height = aMetrics.y;
+
+    transformed.xy *= vec2(width, height);
+    float time = mod(uTime * 60. * 2. + aOffset, uTravelLength);
+
+    transformed = (rotationY(3.14/2.) * vec4(transformed,1.)).xyz;
+    transformed.z += - uTravelLength + time;
+
+    float progress = abs(transformed.z / uTravelLength);
+    transformed.xyz += getDistortion(progress);
+
+    transformed.y += height / 2.;
+    transformed.x += -width / 2.;
+    vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.);
+    gl_Position = projectionMatrix * mvPosition;
+    vColor = aColor;
+    ${THREE.ShaderChunk['fog_vertex']}
+  }
+`;
+
+const sideSticksFragment = `
+  #define USE_FOG;
+  ${THREE.ShaderChunk['fog_pars_fragment']}
+  varying vec3 vColor;
+  void main(){
+    vec3 color = vec3(vColor);
+    gl_FragColor = vec4(color,1.);
+    ${THREE.ShaderChunk['fog_fragment']}
+  }
+`;
+
+class Road {
+  webgl: App;
+  options: HyperspeedOptions;
+  uTime: { value: number };
+  leftRoadWay!: THREE.Mesh;
+  rightRoadWay!: THREE.Mesh;
+  island!: THREE.Mesh;
+
+  constructor(webgl: App, options: HyperspeedOptions) {
+    this.webgl = webgl;
+    this.options = options;
+    this.uTime = { value: 0 };
+  }
+
+  createPlane(side: number, width: number, isRoad: boolean) {
+    const options = this.options;
+    const segments = 100;
+    const geometry = new THREE.PlaneGeometry(
+      isRoad ? options.roadWidth : options.islandWidth,
+      options.length,
+      20,
+      segments
+    );
+
+    let uniforms: Record<string, { value: unknown }> = {
+      uTravelLength: { value: options.length },
+      uColor: {
+        value: new THREE.Color(isRoad ? options.colors.roadColor : options.colors.islandColor)
+      },
+      uTime: this.uTime
+    };
+
+    if (isRoad) {
+      uniforms = Object.assign(uniforms, {
+        uLanes: { value: options.lanesPerRoad },
+        uBrokenLinesColor: {
+          value: new THREE.Color(options.colors.brokenLines)
+        },
+        uShoulderLinesColor: {
+          value: new THREE.Color(options.colors.shoulderLines)
+        },
+        uShoulderLinesWidthPercentage: {
+          value: options.shoulderLinesWidthPercentage
+        },
+        uBrokenLinesLengthPercentage: {
+          value: options.brokenLinesLengthPercentage
+        },
+        uBrokenLinesWidthPercentage: {
+          value: options.brokenLinesWidthPercentage
+        }
+      });
+    }
+
+    const material = new THREE.ShaderMaterial({
+      fragmentShader: isRoad ? roadFragment : islandFragment,
+      vertexShader: roadVertex,
+      side: THREE.DoubleSide,
+      uniforms: Object.assign(
+        uniforms,
+        this.webgl.fogUniforms,
+        (typeof options.distortion === 'object' ? options.distortion.uniforms : {}) || {}
+      )
+    });
+
+    material.onBeforeCompile = shader => {
+      shader.vertexShader = shader.vertexShader.replace(
+        '#include <getDistortion_vertex>',
+        typeof this.options.distortion === 'object' ? this.options.distortion.getDistortion : ''
+      );
+    };
+
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.rotation.x = -Math.PI / 2;
+    mesh.position.z = -options.length / 2;
+    mesh.position.x += (this.options.islandWidth / 2 + options.roadWidth / 2) * side;
+
+    this.webgl.scene.add(mesh);
+    return mesh;
+  }
+
+  init() {
+    this.leftRoadWay = this.createPlane(-1, this.options.roadWidth, true);
+    this.rightRoadWay = this.createPlane(1, this.options.roadWidth, true);
+    this.island = this.createPlane(0, this.options.islandWidth, false);
+  }
+
+  update(time: number) {
+    this.uTime.value = time;
+  }
+}
+
+const roadBaseFragment = `
+  #define USE_FOG;
+  varying vec2 vUv; 
+  uniform vec3 uColor;
+  uniform float uTime;
+  #include <roadMarkings_vars>
+  ${THREE.ShaderChunk['fog_pars_fragment']}
+  void main() {
+    vec2 uv = vUv;
+    vec3 color = vec3(uColor);
+    #include <roadMarkings_fragment>
+    gl_FragColor = vec4(color, 1.);
+    ${THREE.ShaderChunk['fog_fragment']}
+  }
+`;
+
+const islandFragment = roadBaseFragment
+  .replace('#include <roadMarkings_fragment>', '')
+  .replace('#include <roadMarkings_vars>', '');
+
+const roadMarkings_vars = `
+  uniform float uLanes;
+  uniform vec3 uBrokenLinesColor;
+  uniform vec3 uShoulderLinesColor;
+  uniform float uShoulderLinesWidthPercentage;
+  uniform float uBrokenLinesWidthPercentage;
+  uniform float uBrokenLinesLengthPercentage;
+  highp float random(vec2 co) {
+    highp float a = 12.9898;
+    highp float b = 78.233;
+    highp float c = 43758.5453;
+    highp float dt = dot(co.xy, vec2(a, b));
+    highp float sn = mod(dt, 3.14);
+    return fract(sin(sn) * c);
+  }
+`;
+
+const roadMarkings_fragment = `
+  uv.y = mod(uv.y + uTime * 0.05, 1.);
+  float laneWidth = 1.0 / uLanes;
+  float brokenLineWidth = laneWidth * uBrokenLinesWidthPercentage;
+  float laneEmptySpace = 1. - uBrokenLinesLengthPercentage;
+
+  float brokenLines = step(1.0 - brokenLineWidth, fract(uv.x * 2.0)) * step(laneEmptySpace, fract(uv.y * 10.0));
+  float sideLines = step(1.0 - brokenLineWidth, fract((uv.x - laneWidth * (uLanes - 1.0)) * 2.0)) + step(brokenLineWidth, uv.x);
+
+  brokenLines = mix(brokenLines, sideLines, uv.x);
+`;
+
+const roadFragment = roadBaseFragment
+  .replace('#include <roadMarkings_fragment>', roadMarkings_fragment)
+  .replace('#include <roadMarkings_vars>', roadMarkings_vars);
+
+const roadVertex = `
+  #define USE_FOG;
+  uniform float uTime;
+  ${THREE.ShaderChunk['fog_pars_vertex']}
+  uniform float uTravelLength;
+  varying vec2 vUv; 
+  #include <getDistortion_vertex>
+  void main() {
+    vec3 transformed = position.xyz;
+    vec3 distortion = getDistortion((transformed.y + uTravelLength / 2.) / uTravelLength);
+    transformed.x += distortion.x;
+    transformed.z += distortion.y;
+    transformed.y += -1. * distortion.z;  
+    
+    vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.);
+    gl_Position = projectionMatrix * mvPosition;
+    vUv = uv;
+    ${THREE.ShaderChunk['fog_vertex']}
+  }
+`;
+
+function resizeRendererToDisplaySize(
+  renderer: THREE.WebGLRenderer,
+  setSize: (width: number, height: number, updateStyle: boolean) => void
+) {
+  const canvas = renderer.domElement;
+  const container = canvas.parentElement;
+  if (!container) return false;
+
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+  const needResize = canvas.width !== width || canvas.height !== height;
+  if (needResize) {
+    setSize(width, height, false);
+  }
+  return needResize;
+}
+
+class App {
+  container: HTMLElement;
+  options: HyperspeedOptions;
+  renderer: THREE.WebGLRenderer;
+  composer: EffectComposer;
+  camera: THREE.PerspectiveCamera;
+  scene: THREE.Scene;
+  renderPass!: RenderPass;
+  bloomPass!: EffectPass;
+  clock: THREE.Clock;
+  assets: Record<string, unknown>;
+  disposed: boolean;
+  road: Road;
+  leftCarLights: CarLights;
+  rightCarLights: CarLights;
+  leftSticks: LightsSticks;
+  fogUniforms: Record<string, { value: unknown }>;
+  fovTarget: number;
+  speedUpTarget: number;
+  speedUp: number;
+  timeOffset: number;
+  resizeObserver?: ResizeObserver;
+
+  constructor(container: HTMLElement, options: HyperspeedOptions) {
+    this.options = options;
+    if (!this.options.distortion) {
+      this.options.distortion = {
+        uniforms: distortion_uniforms,
+        getDistortion: distortion_vertex
+      };
+    }
+    this.container = container;
+
+    this.renderer = new THREE.WebGLRenderer({
+      antialias: false,
+      alpha: true
+    });
+    this.renderer.setSize(container.offsetWidth, container.offsetHeight, false);
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.renderer.domElement.style.display = 'block';
+    this.renderer.domElement.style.width = '100%';
+    this.renderer.domElement.style.height = '100%';
+
+    this.composer = new EffectComposer(this.renderer);
+    container.appendChild(this.renderer.domElement);
+
+    this.camera = new THREE.PerspectiveCamera(options.fov, container.offsetWidth / container.offsetHeight, 0.1, 10000);
+    this.camera.position.z = -5;
+    this.camera.position.y = 8;
+    this.camera.position.x = 0;
+
+    this.scene = new THREE.Scene();
+    this.scene.background = null;
+
+    const fog = new THREE.Fog(options.colors.background, options.length * 0.2, options.length * 500);
+    this.scene.fog = fog;
+
+    this.fogUniforms = {
+      fogColor: { value: fog.color },
+      fogNear: { value: fog.near },
+      fogFar: { value: fog.far }
+    };
+
+    this.clock = new THREE.Clock();
+    this.assets = {};
+    this.disposed = false;
+
+    this.road = new Road(this, options);
+    this.leftCarLights = new CarLights(
+      this,
+      options,
+      options.colors.leftCars,
+      options.movingAwaySpeed,
+      new THREE.Vector2(0, 1 - options.carLightsFade)
+    );
+    this.rightCarLights = new CarLights(
+      this,
+      options,
+      options.colors.rightCars,
+      options.movingCloserSpeed,
+      new THREE.Vector2(1, 0 + options.carLightsFade)
+    );
+    this.leftSticks = new LightsSticks(this, options);
+
+    this.fovTarget = options.fov;
+    this.speedUpTarget = 0;
+    this.speedUp = 0;
+    this.timeOffset = 0;
+
+    this.tick = this.tick.bind(this);
+    this.init = this.init.bind(this);
+    this.setSize = this.setSize.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onWindowResize = this.onWindowResize.bind(this);
+
+    // Use ResizeObserver for better container tracking
+    if (typeof ResizeObserver !== 'undefined') {
+      const resizeObserver = new ResizeObserver(() => {
+        this.onWindowResize();
+      });
+      resizeObserver.observe(container);
+
+      // Store reference for cleanup
+      this.resizeObserver = resizeObserver;
+    } else {
+      // Fallback to window resize
+      window.addEventListener('resize', this.onWindowResize);
+    }
+  }
+
+  onWindowResize() {
+    const width = this.container.offsetWidth;
+    const height = this.container.offsetHeight;
+
+    this.renderer.setSize(width, height, false);
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.composer.setSize(width, height);
+  }
+
+  initPasses() {
+    this.renderPass = new RenderPass(this.scene, this.camera);
+    this.bloomPass = new EffectPass(
+      this.camera,
+      new BloomEffect({
+        luminanceThreshold: 0.2,
+        luminanceSmoothing: 0,
+        resolutionScale: 1
+      })
+    );
+
+    const smaaPass = new EffectPass(
+      this.camera,
+      new SMAAEffect({
+        preset: SMAAPreset.MEDIUM
+      })
+    );
+    this.renderPass.renderToScreen = false;
+    this.bloomPass.renderToScreen = false;
+    smaaPass.renderToScreen = true;
+
+    this.composer.addPass(this.renderPass);
+    this.composer.addPass(this.bloomPass);
+    this.composer.addPass(smaaPass);
+  }
+
+  loadAssets(): Promise<void> {
+    const assets = this.assets as { smaa: { search?: HTMLImageElement; area?: HTMLImageElement } };
+    return new Promise(resolve => {
+      const manager = new THREE.LoadingManager(resolve);
+
+      const searchImage = new Image();
+      const areaImage = new Image();
+      assets.smaa = {};
+
+      searchImage.addEventListener('load', function () {
+        assets.smaa.search = this;
+        manager.itemEnd('smaa-search');
+      });
+
+      areaImage.addEventListener('load', function () {
+        assets.smaa.area = this;
+        manager.itemEnd('smaa-area');
+      });
+
+      manager.itemStart('smaa-search');
+      manager.itemStart('smaa-area');
+
+      searchImage.src = SMAAEffect.searchImageDataURL;
+      areaImage.src = SMAAEffect.areaImageDataURL;
+    });
+  }
+
+  init() {
+    this.initPasses();
+    const options = this.options;
+    this.road.init();
+    this.leftCarLights.init();
+    this.leftCarLights.mesh.position.setX(-options.roadWidth / 2 - options.islandWidth / 2);
+
+    this.rightCarLights.init();
+    this.rightCarLights.mesh.position.setX(options.roadWidth / 2 + options.islandWidth / 2);
+
+    this.leftSticks.init();
+    this.leftSticks.mesh.position.setX(-(options.roadWidth + options.islandWidth / 2));
+
+    this.container.addEventListener('mousedown', this.onMouseDown);
+    this.container.addEventListener('mouseup', this.onMouseUp);
+    this.container.addEventListener('mouseout', this.onMouseUp);
+
+    this.tick();
+  }
+
+  onMouseDown(ev: MouseEvent) {
+    if (this.options.onSpeedUp) this.options.onSpeedUp(ev);
+    this.fovTarget = this.options.fovSpeedUp;
+    this.speedUpTarget = this.options.speedUp;
+  }
+
+  onMouseUp(ev: MouseEvent) {
+    if (this.options.onSlowDown) this.options.onSlowDown(ev);
+    this.fovTarget = this.options.fov;
+    this.speedUpTarget = 0;
+  }
+
+  update(delta: number) {
+    const lerpPercentage = Math.exp(-(-60 * Math.log2(1 - 0.1)) * delta);
+    this.speedUp += lerp(this.speedUp, this.speedUpTarget, lerpPercentage, 0.00001);
+    this.timeOffset += this.speedUp * delta;
+    const time = this.clock.elapsedTime + this.timeOffset;
+
+    this.rightCarLights.update(time);
+    this.leftCarLights.update(time);
+    this.leftSticks.update(time);
+    this.road.update(time);
+
+    let updateCamera = false;
+    const fovChange = lerp(this.camera.fov, this.fovTarget, lerpPercentage);
+    if (fovChange !== 0) {
+      this.camera.fov += fovChange * delta * 6;
+      updateCamera = true;
+    }
+
+    if (typeof this.options.distortion === 'object' && this.options.distortion.getJS) {
+      const distortion = this.options.distortion.getJS(0.025, time);
+      this.camera.lookAt(
+        new THREE.Vector3(
+          this.camera.position.x + distortion.x,
+          this.camera.position.y + distortion.y,
+          this.camera.position.z + distortion.z
+        )
+      );
+      updateCamera = true;
+    }
+
+    if (updateCamera) {
+      this.camera.updateProjectionMatrix();
+    }
+  }
+
+  render(delta: number) {
+    this.composer.render(delta);
+  }
+
+  dispose() {
+    this.disposed = true;
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    } else {
+      window.removeEventListener('resize', this.onWindowResize);
+    }
+
+    if (this.renderer) {
+      this.renderer.dispose();
+    }
+    if (this.composer) {
+      this.composer.dispose();
+    }
+    if (this.scene) {
+      this.scene.clear();
+    }
+
+    if (this.container) {
+      this.container.removeEventListener('mousedown', this.onMouseDown);
+      this.container.removeEventListener('mouseup', this.onMouseUp);
+      this.container.removeEventListener('mouseout', this.onMouseUp);
+    }
+  }
+
+  setSize(width: number, height: number, updateStyles: boolean) {
+    this.composer.setSize(width, height, updateStyles);
+  }
+
+  tick() {
+    if (this.disposed || !this) return;
+
+    // Ensure renderer stays within container bounds
+    const containerWidth = this.container.offsetWidth;
+    const containerHeight = this.container.offsetHeight;
+
+    if (resizeRendererToDisplaySize(this.renderer, this.setSize)) {
+      this.camera.aspect = containerWidth / containerHeight;
+      this.camera.updateProjectionMatrix();
+    }
+
+    const delta = this.clock.getDelta();
+    this.render(delta);
+    this.update(delta);
+    requestAnimationFrame(this.tick);
+  }
+}
+
+const initHyperspeed = async () => {
+  if (appRef) {
+    appRef.dispose();
+    const container = hyperspeedContainer.value;
+    if (container) {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+    }
+  }
+
+  const container = hyperspeedContainer.value;
+  if (!container) return;
+
+  const mergedOptions: HyperspeedOptions = {
+    ...defaultOptions,
+    ...props.effectOptions
+  };
+
+  const options = { ...mergedOptions };
+  if (typeof options.distortion === 'string') {
+    options.distortion = distortions[options.distortion];
+  }
+
+  const myApp = new App(container, options);
+  appRef = myApp;
+  await myApp.loadAssets();
+  myApp.init();
+};
+
+onMounted(() => {
+  initHyperspeed();
+});
+
+onUnmounted(() => {
+  if (appRef) {
+    appRef.dispose();
+    appRef = null;
+  }
+});
+
+watch(
+  () => props.effectOptions,
+  () => {
+    initHyperspeed();
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped>
+.hyperspeed-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.hyperspeed-container :deep(canvas) {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}
+</style>
diff --git a/src/content/Backgrounds/Hyperspeed/HyperspeedPresets.ts b/src/content/Backgrounds/Hyperspeed/HyperspeedPresets.ts
new file mode 100644
index 0000000..e09863b
--- /dev/null
+++ b/src/content/Backgrounds/Hyperspeed/HyperspeedPresets.ts
@@ -0,0 +1,225 @@
+export const hyperspeedPresets = {
+  one: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'turbulentDistortion',
+    length: 400,
+    roadWidth: 10,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    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] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.03, 400 * 0.2] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.8, 0.8] as [number, number],
+    carFloorSeparation: [0, 5] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
+      rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
+      sticks: 0x03b3c3
+    }
+  },
+  two: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'mountainDistortion',
+    length: 400,
+    roadWidth: 9,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 50,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xff102a, 0xeb383e, 0xff102a],
+      rightCars: [0xdadafa, 0xbebae3, 0x8f97e4],
+      sticks: 0xdadafa
+    }
+  },
+  three: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'xyDistortion',
+    length: 400,
+    roadWidth: 9,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 3,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 30,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.02, 0.05] as [number, number],
+    lightStickHeight: [0.3, 0.7] as [number, number],
+    movingAwaySpeed: [20, 50] as [number, number],
+    movingCloserSpeed: [-150, -230] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.2] as [number, number],
+    carLightsRadius: [0.03, 0.08] as [number, number],
+    carWidthPercentage: [0.1, 0.5] as [number, number],
+    carShiftX: [-0.5, 0.5] as [number, number],
+    carFloorSeparation: [0, 0.1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0x7d0d1b, 0xa90519, 0xff102a],
+      rightCars: [0xf1eece, 0xe6e2b1, 0xdfd98a],
+      sticks: 0xf1eece
+    }
+  },
+  four: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'LongRaceDistortion',
+    length: 400,
+    roadWidth: 10,
+    islandWidth: 5,
+    lanesPerRoad: 2,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 70,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xff5f73, 0xe74d60, 0xff102a],
+      rightCars: [0xa4e3e6, 0x80d1d4, 0x53c2c6],
+      sticks: 0xa4e3e6
+    }
+  },
+  five: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'turbulentDistortion',
+    length: 400,
+    roadWidth: 9,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 50,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xdc5b20, 0xdca320, 0xdc2020],
+      rightCars: [0x334bf7, 0xe5e6ed, 0xbfc6f3],
+      sticks: 0xc5e8eb
+    }
+  },
+  six: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'deepDistortion',
+    length: 400,
+    roadWidth: 18,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 50,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xff322f, 0xa33010, 0xa81508],
+      rightCars: [0xfdfdf0, 0xf3dea0, 0xe2bb88],
+      sticks: 0xfdfdf0
+    }
+  }
+};
diff --git a/src/demo/Backgrounds/HyperspeedDemo.vue b/src/demo/Backgrounds/HyperspeedDemo.vue
new file mode 100644
index 0000000..15dacbc
--- /dev/null
+++ b/src/demo/Backgrounds/HyperspeedDemo.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="hyperspeed-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <div class="instruction-text">Click & Hold</div>
+          <Hyperspeed :effect-options="currentPreset" />
+        </div>
+
+        <Customize>
+          <PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
+        </Customize>
+
+        <PropTable :data="propData" />
+
+        <Dependencies :dependency-list="['three', 'postprocessing']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="hyperspeed" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="hyperspeed.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import Hyperspeed from '../../content/Backgrounds/Hyperspeed/Hyperspeed.vue';
+import { hyperspeedPresets } from '../../content/Backgrounds/Hyperspeed/HyperspeedPresets';
+import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
+
+const activePreset = ref<string>('one');
+
+const currentPreset = computed(() => {
+  return hyperspeedPresets[activePreset.value as keyof typeof hyperspeedPresets];
+});
+
+const propData = [
+  {
+    name: 'effectOptions',
+    type: 'object',
+    default: 'See the "code" tab for default values and presets.',
+    description:
+      'The highly customizable configuration object for the effect, controls things like colors, distortion, line properties, etc.'
+  }
+];
+
+const options = [
+  { value: 'one', label: 'Cyberpunk' },
+  { value: 'two', label: 'Akira' },
+  { value: 'three', label: 'Golden' },
+  { value: 'four', label: 'Split' },
+  { value: 'five', label: 'Highway' },
+  { value: 'six', label: 'Deep' }
+];
+</script>
+
+<style scoped>
+.hyperspeed-demo {
+  width: 100%;
+}
+
+.demo-container {
+  height: 600px;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 0;
+}
+
+.instruction-text {
+  position: absolute;
+  top: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: 900;
+  font-size: 4rem;
+  color: #222;
+  z-index: 10;
+  pointer-events: none;
+}
+</style>

From 2b394c9aae66c4a1c9febacf487c9e4c60b673f2 Mon Sep 17 00:00:00 2001
From: Sahil David <sahildavid.dev@gmail.com>
Date: Sat, 12 Jul 2025 15:52:35 +0100
Subject: [PATCH 32/37] feat(text-animations): add GlitchText component

---
 src/components/common/PreviewText.vue         |  33 +++++
 src/constants/Categories.ts                   |   3 +-
 src/constants/Components.ts                   |   3 +-
 .../code/TextAnimations/glitchTextCode.ts     |  19 +++
 .../TextAnimations/GlitchText/GlitchText.css  | 120 ++++++++++++++++++
 .../TextAnimations/GlitchText/GlitchText.vue  |  47 +++++++
 src/demo/TextAnimations/GlitchTextDemo.vue    |  90 +++++++++++++
 7 files changed, 313 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/PreviewText.vue
 create mode 100644 src/constants/code/TextAnimations/glitchTextCode.ts
 create mode 100644 src/content/TextAnimations/GlitchText/GlitchText.css
 create mode 100644 src/content/TextAnimations/GlitchText/GlitchText.vue
 create mode 100644 src/demo/TextAnimations/GlitchTextDemo.vue

diff --git a/src/components/common/PreviewText.vue b/src/components/common/PreviewText.vue
new file mode 100644
index 0000000..f62cdf4
--- /dev/null
+++ b/src/components/common/PreviewText.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="preview-text">
+    <span class="text-label">{{ title }}</span>
+
+    <input
+      :value="modelValue"
+      @input="handleChange"
+      class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(['update:modelValue']);
+defineProps<{
+  title: string;
+  modelValue: string;
+}>();
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', target.value);
+};
+</script>
+
+<style scoped>
+.preview-text {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+</style>
diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 1fe5c08..aa641b0 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -22,7 +22,8 @@ export const CATEGORIES = [
       'True Focus',
       'Scroll Float',
       'Scroll Reveal',
-      'Rotating Text'
+      'Rotating Text',
+      'Glitch Text'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index ab2deab..b911a4f 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -27,7 +27,8 @@ const textAnimations = {
   '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")
+  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue"),
+  'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
 };
 
 const components = {
diff --git a/src/constants/code/TextAnimations/glitchTextCode.ts b/src/constants/code/TextAnimations/glitchTextCode.ts
new file mode 100644
index 0000000..0c92253
--- /dev/null
+++ 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
+};
diff --git a/src/content/TextAnimations/GlitchText/GlitchText.css b/src/content/TextAnimations/GlitchText/GlitchText.css
new file mode 100644
index 0000000..faff805
--- /dev/null
+++ b/src/content/TextAnimations/GlitchText/GlitchText.css
@@ -0,0 +1,120 @@
+.glitch {
+  color: #fff;
+  font-size: clamp(2rem, 10vw, 8rem);
+  white-space: nowrap;
+  font-weight: 900;
+  position: relative;
+  margin: 0 auto;
+  user-select: none;
+  cursor: pointer;
+}
+
+.glitch::after,
+.glitch::before {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  color: #fff;
+  background-color: #060010;
+  overflow: hidden;
+  clip-path: inset(0 0 0 0);
+}
+
+.glitch:not(.enable-on-hover)::after {
+  left: 10px;
+  text-shadow: var(--after-shadow, -10px 0 red);
+  animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;
+}
+.glitch:not(.enable-on-hover)::before {
+  left: -10px;
+  text-shadow: var(--before-shadow, 10px 0 cyan);
+  animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;
+}
+
+.glitch.enable-on-hover::after,
+.glitch.enable-on-hover::before {
+  content: '';
+  opacity: 0;
+  animation: none;
+}
+
+.glitch.enable-on-hover:hover::after {
+  content: attr(data-text);
+  opacity: 1;
+  left: 10px;
+  text-shadow: var(--after-shadow, -10px 0 red);
+  animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;
+}
+.glitch.enable-on-hover:hover::before {
+  content: attr(data-text);
+  opacity: 1;
+  left: -10px;
+  text-shadow: var(--before-shadow, 10px 0 cyan);
+  animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;
+}
+
+@keyframes animate-glitch {
+  0% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  5% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  10% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  15% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  20% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  25% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  30% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  35% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  40% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  45% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  50% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  55% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  60% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  65% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  70% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  75% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  80% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  85% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  90% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  95% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  100% {
+    clip-path: inset(30% 0 40% 0);
+  }
+}
diff --git a/src/content/TextAnimations/GlitchText/GlitchText.vue b/src/content/TextAnimations/GlitchText/GlitchText.vue
new file mode 100644
index 0000000..934c41e
--- /dev/null
+++ b/src/content/TextAnimations/GlitchText/GlitchText.vue
@@ -0,0 +1,47 @@
+<template>
+  <div :class="computedClasses" :style="inlineStyles" :data-text="children">
+    {{ children }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CSSProperties } from 'vue';
+import './GlitchText.css';
+
+interface GlitchTextProps {
+  children: string;
+  speed?: number;
+  enableShadows?: boolean;
+  enableOnHover?: boolean;
+  className?: string;
+}
+
+interface CustomCSSProperties extends CSSProperties {
+  '--after-duration': string;
+  '--before-duration': string;
+  '--after-shadow': string;
+  '--before-shadow': string;
+}
+
+const props = withDefaults(defineProps<GlitchTextProps>(), {
+  speed: 0.5,
+  enableShadows: true,
+  enableOnHover: false,
+  className: ''
+});
+
+const inlineStyles = computed(
+  (): CustomCSSProperties => ({
+    '--after-duration': `${props.speed * 3}s`,
+    '--before-duration': `${props.speed * 2}s`,
+    '--after-shadow': props.enableShadows ? '-5px 0 red' : 'none',
+    '--before-shadow': props.enableShadows ? '5px 0 cyan' : 'none'
+  })
+);
+
+const computedClasses = computed(() => {
+  const hoverClass = props.enableOnHover ? 'enable-on-hover' : '';
+  return `glitch ${hoverClass} ${props.className}`.trim();
+});
+</script>
diff --git a/src/demo/TextAnimations/GlitchTextDemo.vue b/src/demo/TextAnimations/GlitchTextDemo.vue
new file mode 100644
index 0000000..56e709f
--- /dev/null
+++ b/src/demo/TextAnimations/GlitchTextDemo.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="glitchtext-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container relative h-[500px] overflow-hidden">
+          <GlitchText
+            :children="text"
+            :speed="speed"
+            :enable-shadows="enableShadows"
+            :enable-on-hover="enableOnHover"
+            class-name="demo-glitch-text"
+          />
+        </div>
+
+        <Customize>
+          <div class="mb-4">
+            <PreviewText title="Text" v-model="text" />
+
+            <PreviewSlider title="Refresh Delay" v-model="speed" :min="0.1" :max="5" :step="0.1" />
+
+            <PreviewSwitch title="Glitch Colors" v-model="enableShadows" />
+
+            <PreviewSwitch title="Glitch On Hover" v-model="enableOnHover" />
+          </div>
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="glitchText" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="glitchText.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import GlitchText from '../../content/TextAnimations/GlitchText/GlitchText.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import PreviewText from '../../components/common/PreviewText.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import { glitchText } from '@/constants/code/TextAnimations/glitchTextCode';
+
+const text = ref('Vue Bits');
+const speed = ref(0.5);
+const enableShadows = ref(true);
+const enableOnHover = ref(false);
+
+const propData = [
+  {
+    name: 'children',
+    type: 'string',
+    default: '',
+    description: 'The text content that will display the glitch effect.'
+  },
+  {
+    name: 'speed',
+    type: 'number',
+    default: '0.5',
+    description: 'Multiplier for the animation speed. Higher values slow down the glitch effect.'
+  },
+  {
+    name: 'enableShadows',
+    type: 'boolean',
+    default: 'true',
+    description: 'Toggle the colored text shadows on the glitch pseudo-elements.'
+  },
+  {
+    name: 'enableOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'If true, the glitch animation is only activated on hover.'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: '',
+    description: 'Additional custom classes to apply to the component.'
+  }
+];
+</script>

From d2a5837b740038cc542a1b7bc663ce7a211cb846 Mon Sep 17 00:00:00 2001
From: Sahil David <sahildavid.dev@gmail.com>
Date: Sat, 12 Jul 2025 16:10:04 +0100
Subject: [PATCH 33/37] feat(glitch-text): update text on enableOnHover

---
 src/demo/TextAnimations/GlitchTextDemo.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/demo/TextAnimations/GlitchTextDemo.vue b/src/demo/TextAnimations/GlitchTextDemo.vue
index 56e709f..5cf850e 100644
--- a/src/demo/TextAnimations/GlitchTextDemo.vue
+++ b/src/demo/TextAnimations/GlitchTextDemo.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -55,6 +55,10 @@ const speed = ref(0.5);
 const enableShadows = ref(true);
 const enableOnHover = ref(false);
 
+watch(enableOnHover, newValue => {
+  text.value = newValue ? 'Hover Me' : 'Vue Bits';
+});
+
 const propData = [
   {
     name: 'children',

From 52ad44695822c939fab3d8fb09273e8706fdae81 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 18:34:29 +0300
Subject: [PATCH 34/37] Migrate <ShapeBlur />

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   3 +-
 .../code/Backgrounds/shapeBlurCode.ts         |  24 ++
 .../Backgrounds/ShapeBlur/ShapeBlur.vue       | 334 ++++++++++++++++++
 src/demo/Backgrounds/ShapeBlurDemo.vue        | 129 +++++++
 5 files changed, 490 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/code/Backgrounds/shapeBlurCode.ts
 create mode 100644 src/content/Backgrounds/ShapeBlur/ShapeBlur.vue
 create mode 100644 src/demo/Backgrounds/ShapeBlurDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 1fe5c08..681548f 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -72,6 +72,7 @@ export const CATEGORIES = [
       'Lightning',
       'Letter Glitch',
       'Particles',
+      'Shape Blur',
       'Waves',
       'Squares',
       'Iridescence',
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index ab2deab..6ba057f 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -62,7 +62,8 @@ const backgrounds = {
   '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')
+  'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
+  'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue')
 };
 
 export const componentMap = {
diff --git a/src/constants/code/Backgrounds/shapeBlurCode.ts b/src/constants/code/Backgrounds/shapeBlurCode.ts
new file mode 100644
index 0000000..7b98771
--- /dev/null
+++ 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
+};
diff --git a/src/content/Backgrounds/ShapeBlur/ShapeBlur.vue b/src/content/Backgrounds/ShapeBlur/ShapeBlur.vue
new file mode 100644
index 0000000..e53cfcc
--- /dev/null
+++ b/src/content/Backgrounds/ShapeBlur/ShapeBlur.vue
@@ -0,0 +1,334 @@
+<template>
+  <div ref="shapeBlurContainer" class="shape-blur-container" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import * as THREE from 'three';
+
+interface ShapeBlurProps {
+  className?: string;
+  variation?: number;
+  pixelRatioProp?: number;
+  shapeSize?: number;
+  roundness?: number;
+  borderSize?: number;
+  circleSize?: number;
+  circleEdge?: number;
+}
+
+const props = withDefaults(defineProps<ShapeBlurProps>(), {
+  className: '',
+  variation: 0,
+  pixelRatioProp: 2,
+  shapeSize: 1.2,
+  roundness: 0.4,
+  borderSize: 0.05,
+  circleSize: 0.3,
+  circleEdge: 0.5
+});
+
+const shapeBlurContainer = ref<HTMLDivElement>();
+
+let animationFrameId: number;
+let time = 0;
+let lastTime = 0;
+let scene: THREE.Scene;
+let camera: THREE.OrthographicCamera;
+let renderer: THREE.WebGLRenderer;
+let material: THREE.ShaderMaterial;
+let quad: THREE.Mesh;
+let resizeObserver: ResizeObserver | null = null;
+
+const vMouse = new THREE.Vector2();
+const vMouseDamp = new THREE.Vector2();
+const vResolution = new THREE.Vector2();
+
+let w = 1;
+let h = 1;
+
+const vertexShader = /* glsl */ `
+varying vec2 v_texcoord;
+void main() {
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    v_texcoord = uv;
+}
+`;
+
+const fragmentShader = /* glsl */ `
+varying vec2 v_texcoord;
+
+uniform vec2 u_mouse;
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform float u_shapeSize;
+uniform float u_roundness;
+uniform float u_borderSize;
+uniform float u_circleSize;
+uniform float u_circleEdge;
+
+#ifndef PI
+#define PI 3.1415926535897932384626433832795
+#endif
+#ifndef TWO_PI
+#define TWO_PI 6.2831853071795864769252867665590
+#endif
+
+#ifndef VAR
+#define VAR 0
+#endif
+
+#ifndef FNC_COORD
+#define FNC_COORD
+vec2 coord(in vec2 p) {
+    p = p / u_resolution.xy;
+    if (u_resolution.x > u_resolution.y) {
+        p.x *= u_resolution.x / u_resolution.y;
+        p.x += (u_resolution.y - u_resolution.x) / u_resolution.y / 2.0;
+    } else {
+        p.y *= u_resolution.y / u_resolution.x;
+        p.y += (u_resolution.x - u_resolution.y) / u_resolution.x / 2.0;
+    }
+    p -= 0.5;
+    p *= vec2(-1.0, 1.0);
+    return p;
+}
+#endif
+
+#define st0 coord(gl_FragCoord.xy)
+#define mx coord(u_mouse * u_pixelRatio)
+
+float sdRoundRect(vec2 p, vec2 b, float r) {
+    vec2 d = abs(p - 0.5) * 4.2 - b + vec2(r);
+    return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;
+}
+float sdCircle(in vec2 st, in vec2 center) {
+    return length(st - center) * 2.0;
+}
+float sdPoly(in vec2 p, in float w, in int sides) {
+    float a = atan(p.x, p.y) + PI;
+    float r = TWO_PI / float(sides);
+    float d = cos(floor(0.5 + a / r) * r - a) * length(max(abs(p) * 1.0, 0.0));
+    return d * 2.0 - w;
+}
+
+float aastep(float threshold, float value) {
+    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+    return smoothstep(threshold - afwidth, threshold + afwidth, value);
+}
+float fill(in float x) { return 1.0 - aastep(0.0, x); }
+float fill(float x, float size, float edge) {
+    return 1.0 - smoothstep(size - edge, size + edge, x);
+}
+float stroke(in float d, in float t) { return (1.0 - aastep(t, abs(d))); }
+float stroke(float x, float size, float w, float edge) {
+    float d = smoothstep(size - edge, size + edge, x + w * 0.5) - smoothstep(size - edge, size + edge, x - w * 0.5);
+    return clamp(d, 0.0, 1.0);
+}
+
+float strokeAA(float x, float size, float w, float edge) {
+    float afwidth = length(vec2(dFdx(x), dFdy(x))) * 0.70710678;
+    float d = smoothstep(size - edge - afwidth, size + edge + afwidth, x + w * 0.5)
+            - smoothstep(size - edge - afwidth, size + edge + afwidth, x - w * 0.5);
+    return clamp(d, 0.0, 1.0);
+}
+
+void main() {
+    vec2 st = st0 + 0.5;
+    vec2 posMouse = mx * vec2(1., -1.) + 0.5;
+
+    float size = u_shapeSize;
+    float roundness = u_roundness;
+    float borderSize = u_borderSize;
+    float circleSize = u_circleSize;
+    float circleEdge = u_circleEdge;
+
+    float sdfCircle = fill(
+        sdCircle(st, posMouse),
+        circleSize,
+        circleEdge
+    );
+
+    float sdf;
+    if (VAR == 0) {
+        sdf = sdRoundRect(st, vec2(size), roundness);
+        sdf = strokeAA(sdf, 0.0, borderSize, sdfCircle) * 4.0;
+    } else if (VAR == 1) {
+        sdf = sdCircle(st, vec2(0.5));
+        sdf = fill(sdf, 0.6, sdfCircle) * 1.2;
+    } else if (VAR == 2) {
+        sdf = sdCircle(st, vec2(0.5));
+        sdf = strokeAA(sdf, 0.58, 0.02, sdfCircle) * 4.0;
+    } else if (VAR == 3) {
+        sdf = sdPoly(st - vec2(0.5, 0.45), 0.3, 3);
+        sdf = fill(sdf, 0.05, sdfCircle) * 1.4;
+    }
+
+    vec3 color = vec3(1.0);
+    float alpha = sdf;
+    gl_FragColor = vec4(color.rgb, alpha);
+}
+`;
+
+const onPointerMove = (e: PointerEvent | MouseEvent) => {
+  const mount = shapeBlurContainer.value;
+  if (!mount) return;
+  const rect = mount.getBoundingClientRect();
+  vMouse.set(e.clientX - rect.left, e.clientY - rect.top);
+};
+
+const resize = () => {
+  const container = shapeBlurContainer.value;
+  if (!container) return;
+
+  w = container.clientWidth;
+  h = container.clientHeight;
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+  renderer.setSize(w, h, false);
+  renderer.setPixelRatio(dpr);
+
+  camera.left = -w / 2;
+  camera.right = w / 2;
+  camera.top = h / 2;
+  camera.bottom = -h / 2;
+  camera.updateProjectionMatrix();
+
+  quad.scale.set(w, h, 1);
+  vResolution.set(w, h).multiplyScalar(dpr);
+  material.uniforms.u_pixelRatio.value = dpr;
+};
+
+const update = () => {
+  time = performance.now() * 0.001;
+  const dt = time - lastTime;
+  lastTime = time;
+
+  vMouseDamp.x = THREE.MathUtils.damp(vMouseDamp.x, vMouse.x, 8, dt);
+  vMouseDamp.y = THREE.MathUtils.damp(vMouseDamp.y, vMouse.y, 8, dt);
+
+  renderer.render(scene, camera);
+  animationFrameId = requestAnimationFrame(update);
+};
+
+const initShapeBlur = () => {
+  const mount = shapeBlurContainer.value;
+  if (!mount) return;
+
+  scene = new THREE.Scene();
+  camera = new THREE.OrthographicCamera();
+  camera.position.z = 1;
+
+  renderer = new THREE.WebGLRenderer({ alpha: true });
+  renderer.setClearColor(0x000000, 0);
+  renderer.domElement.style.width = '100%';
+  renderer.domElement.style.height = '100%';
+  renderer.domElement.style.display = 'block';
+  mount.appendChild(renderer.domElement);
+
+  const geo = new THREE.PlaneGeometry(1, 1);
+  material = new THREE.ShaderMaterial({
+    vertexShader,
+    fragmentShader,
+    uniforms: {
+      u_mouse: { value: vMouseDamp },
+      u_resolution: { value: vResolution },
+      u_pixelRatio: { value: props.pixelRatioProp },
+      u_shapeSize: { value: props.shapeSize },
+      u_roundness: { value: props.roundness },
+      u_borderSize: { value: props.borderSize },
+      u_circleSize: { value: props.circleSize },
+      u_circleEdge: { value: props.circleEdge }
+    },
+    defines: { VAR: props.variation },
+    transparent: true
+  });
+
+  quad = new THREE.Mesh(geo, material);
+  scene.add(quad);
+
+  document.addEventListener('mousemove', onPointerMove);
+  document.addEventListener('pointermove', onPointerMove);
+
+  resize();
+
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(mount);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  update();
+};
+
+const cleanup = () => {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId);
+  }
+
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  } else {
+    window.removeEventListener('resize', resize);
+  }
+
+  document.removeEventListener('mousemove', onPointerMove);
+  document.removeEventListener('pointermove', onPointerMove);
+
+  const mount = shapeBlurContainer.value;
+  if (mount && renderer) {
+    mount.removeChild(renderer.domElement);
+    renderer.dispose();
+  }
+};
+
+watch(
+  () => [
+    props.variation,
+    props.pixelRatioProp,
+    props.shapeSize,
+    props.roundness,
+    props.borderSize,
+    props.circleSize,
+    props.circleEdge
+  ],
+  () => {
+    if (material) {
+      material.uniforms.u_pixelRatio.value = props.pixelRatioProp;
+      material.uniforms.u_shapeSize.value = props.shapeSize;
+      material.uniforms.u_roundness.value = props.roundness;
+      material.uniforms.u_borderSize.value = props.borderSize;
+      material.uniforms.u_circleSize.value = props.circleSize;
+      material.uniforms.u_circleEdge.value = props.circleEdge;
+      material.defines.VAR = props.variation;
+      material.needsUpdate = true;
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  initShapeBlur();
+});
+
+onUnmounted(() => {
+  cleanup();
+});
+</script>
+
+<style scoped>
+.shape-blur-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.shape-blur-container :deep(canvas) {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}
+</style>
diff --git a/src/demo/Backgrounds/ShapeBlurDemo.vue b/src/demo/Backgrounds/ShapeBlurDemo.vue
new file mode 100644
index 0000000..0de919d
--- /dev/null
+++ b/src/demo/Backgrounds/ShapeBlurDemo.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="shape-blur-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <ShapeBlur
+            :variation="0"
+            :pixel-ratio-prop="pixelRatioProp"
+            :shape-size="shapeSize"
+            :roundness="roundness"
+            :border-size="borderSize"
+            :circle-size="circleSize"
+            :circle-edge="circleEdge"
+            class="shapeblur-demo"
+          />
+          <div class="hover-text">Hover Me.</div>
+        </div>
+
+        <Customize>
+          <PreviewSlider title="Shape Size" v-model="shapeSize" :min="0.1" :max="2" :step="0.1" />
+
+          <PreviewSlider title="Roundness" v-model="roundness" :min="0" :max="1" :step="0.05" />
+
+          <PreviewSlider title="Border Size" v-model="borderSize" :min="0.01" :max="0.2" :step="0.005" />
+
+          <PreviewSlider title="Circle Size" v-model="circleSize" :min="0.1" :max="0.5" :step="0.01" />
+
+          <PreviewSlider title="Circle Edge" v-model="circleEdge" :min="0.1" :max="2" :step="0.1" />
+        </Customize>
+
+        <PropTable :data="propData" />
+
+        <Dependencies :dependency-list="['three']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="shapeBlur" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="shapeBlur.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import ShapeBlur from '../../content/Backgrounds/ShapeBlur/ShapeBlur.vue';
+import { shapeBlur } from '@/constants/code/Backgrounds/shapeBlurCode';
+
+const pixelRatioProp = ref(window.devicePixelRatio || 1);
+const shapeSize = ref(1.0);
+const roundness = ref(0.5);
+const borderSize = ref(0.05);
+const circleSize = ref(0.25);
+const circleEdge = ref(1);
+
+const propData = [
+  {
+    name: 'variation',
+    type: 'number',
+    default: '0',
+    description: 'Selects the shape variation (0-3) used by the shader.'
+  },
+  {
+    name: 'pixelRatioProp',
+    type: 'number',
+    default: '2',
+    description: 'Overrides the pixel ratio, typically set to the device pixel ratio.'
+  },
+  {
+    name: 'shapeSize',
+    type: 'number',
+    default: '1.2',
+    description: 'Controls the size of the shape.'
+  },
+  {
+    name: 'roundness',
+    type: 'number',
+    default: '0.4',
+    description: "Determines the roundness of the shape's corners."
+  },
+  {
+    name: 'borderSize',
+    type: 'number',
+    default: '0.05',
+    description: 'Sets the thickness of the border.'
+  },
+  {
+    name: 'circleSize',
+    type: 'number',
+    default: '0.3',
+    description: 'Determines the size of the hover circle effect.'
+  },
+  {
+    name: 'circleEdge',
+    type: 'number',
+    default: '0.5',
+    description: 'Controls the edge softness of the hover circle.'
+  }
+];
+</script>
+
+<style scoped>
+.hover-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 6rem;
+  font-weight: 900;
+  z-index: 0;
+  color: #222;
+  pointer-events: none;
+}
+
+.demo-container {
+  overflow: hidden;
+  padding: 0;
+}
+</style>

From 2fb67d9757abd3c7bbb5a9293f2e1f49d637cfa8 Mon Sep 17 00:00:00 2001
From: Sahil David <sahildavid.dev@gmail.com>
Date: Sat, 12 Jul 2025 16:40:29 +0100
Subject: [PATCH 35/37] refactor(text-animations): convert GlitchText from CSS
 file to Tailwind classes

- Remove external GlitchText.css file dependency
- Convert all styles to Tailwind utility classes
- Maintain identical functionality and visual effects
- Improve component maintainability and consistency
---
 .../TextAnimations/GlitchText/GlitchText.css  | 120 --------------
 .../TextAnimations/GlitchText/GlitchText.vue  | 148 +++++++++++++++++-
 2 files changed, 145 insertions(+), 123 deletions(-)
 delete mode 100644 src/content/TextAnimations/GlitchText/GlitchText.css

diff --git a/src/content/TextAnimations/GlitchText/GlitchText.css b/src/content/TextAnimations/GlitchText/GlitchText.css
deleted file mode 100644
index faff805..0000000
--- a/src/content/TextAnimations/GlitchText/GlitchText.css
+++ /dev/null
@@ -1,120 +0,0 @@
-.glitch {
-  color: #fff;
-  font-size: clamp(2rem, 10vw, 8rem);
-  white-space: nowrap;
-  font-weight: 900;
-  position: relative;
-  margin: 0 auto;
-  user-select: none;
-  cursor: pointer;
-}
-
-.glitch::after,
-.glitch::before {
-  content: attr(data-text);
-  position: absolute;
-  top: 0;
-  color: #fff;
-  background-color: #060010;
-  overflow: hidden;
-  clip-path: inset(0 0 0 0);
-}
-
-.glitch:not(.enable-on-hover)::after {
-  left: 10px;
-  text-shadow: var(--after-shadow, -10px 0 red);
-  animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;
-}
-.glitch:not(.enable-on-hover)::before {
-  left: -10px;
-  text-shadow: var(--before-shadow, 10px 0 cyan);
-  animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;
-}
-
-.glitch.enable-on-hover::after,
-.glitch.enable-on-hover::before {
-  content: '';
-  opacity: 0;
-  animation: none;
-}
-
-.glitch.enable-on-hover:hover::after {
-  content: attr(data-text);
-  opacity: 1;
-  left: 10px;
-  text-shadow: var(--after-shadow, -10px 0 red);
-  animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;
-}
-.glitch.enable-on-hover:hover::before {
-  content: attr(data-text);
-  opacity: 1;
-  left: -10px;
-  text-shadow: var(--before-shadow, 10px 0 cyan);
-  animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;
-}
-
-@keyframes animate-glitch {
-  0% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  5% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  10% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  15% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  20% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  25% {
-    clip-path: inset(40% 0 20% 0);
-  }
-  30% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  35% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  40% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  45% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  50% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  55% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  60% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  65% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  70% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  75% {
-    clip-path: inset(40% 0 20% 0);
-  }
-  80% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  85% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  90% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  95% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  100% {
-    clip-path: inset(30% 0 40% 0);
-  }
-}
diff --git a/src/content/TextAnimations/GlitchText/GlitchText.vue b/src/content/TextAnimations/GlitchText/GlitchText.vue
index 934c41e..b511ba4 100644
--- a/src/content/TextAnimations/GlitchText/GlitchText.vue
+++ b/src/content/TextAnimations/GlitchText/GlitchText.vue
@@ -7,7 +7,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { CSSProperties } from 'vue';
-import './GlitchText.css';
 
 interface GlitchTextProps {
   children: string;
@@ -40,8 +39,151 @@ const inlineStyles = computed(
   })
 );
 
+const baseClasses = [
+  // Base styling
+  'text-white',
+  'font-black',
+  'whitespace-nowrap',
+  'relative',
+  'mx-auto',
+  'select-none',
+  'cursor-pointer',
+  'text-[clamp(2rem,10vw,8rem)]',
+
+  // Pseudo-elements base
+  'before:content-[attr(data-text)]',
+  'before:absolute',
+  'before:top-0',
+  'before:text-white',
+  'before:bg-[#060010]',
+  'before:overflow-hidden',
+  'before:[clip-path:inset(0_0_0_0)]',
+
+  'after:content-[attr(data-text)]',
+  'after:absolute',
+  'after:top-0',
+  'after:text-white',
+  'after:bg-[#060010]',
+  'after:overflow-hidden',
+  'after:[clip-path:inset(0_0_0_0)]'
+];
+
+const normalGlitchClasses = [
+  // After pseudo-element for normal mode
+  'after:left-[10px]',
+  'after:[text-shadow:var(--after-shadow,-10px_0_red)]',
+  'after:[animation:animate-glitch_var(--after-duration,3s)_infinite_linear_alternate-reverse]',
+
+  // Before pseudo-element for normal mode
+  'before:left-[-10px]',
+  'before:[text-shadow:var(--before-shadow,10px_0_cyan)]',
+  'before:[animation:animate-glitch_var(--before-duration,2s)_infinite_linear_alternate-reverse]'
+];
+
+const hoverOnlyClasses = [
+  // Hide pseudo-elements by default
+  'before:content-[""]',
+  'before:opacity-0',
+  'before:[animation:none]',
+  'after:content-[""]',
+  'after:opacity-0',
+  'after:[animation:none]',
+
+  // Show and animate on hover
+  'hover:before:content-[attr(data-text)]',
+  'hover:before:opacity-100',
+  'hover:before:left-[-10px]',
+  'hover:before:[text-shadow:var(--before-shadow,10px_0_cyan)]',
+  'hover:before:[animation:animate-glitch_var(--before-duration,2s)_infinite_linear_alternate-reverse]',
+
+  'hover:after:content-[attr(data-text)]',
+  'hover:after:opacity-100',
+  'hover:after:left-[10px]',
+  'hover:after:[text-shadow:var(--after-shadow,-10px_0_red)]',
+  'hover:after:[animation:animate-glitch_var(--after-duration,3s)_infinite_linear_alternate-reverse]'
+];
+
 const computedClasses = computed(() => {
-  const hoverClass = props.enableOnHover ? 'enable-on-hover' : '';
-  return `glitch ${hoverClass} ${props.className}`.trim();
+  const classes = [...baseClasses];
+
+  if (props.enableOnHover) {
+    classes.push(...hoverOnlyClasses);
+  } else {
+    classes.push(...normalGlitchClasses);
+  }
+
+  if (props.className) {
+    classes.push(props.className);
+  }
+
+  return classes.join(' ');
 });
 </script>
+
+<style>
+@keyframes animate-glitch {
+  0% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  5% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  10% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  15% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  20% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  25% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  30% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  35% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  40% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  45% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  50% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  55% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  60% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  65% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  70% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  75% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  80% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  85% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  90% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  95% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  100% {
+    clip-path: inset(30% 0 40% 0);
+  }
+}
+</style>

From a6dd7a9792752c85dfb6ea8da172e348aeab81de Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 18:50:15 +0300
Subject: [PATCH 36/37] Migrate <Ribbons />

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 src/constants/code/Animations/ribbonsCode.ts  |  28 ++
 src/content/Animations/Ribbons/Ribbons.vue    | 355 ++++++++++++++++++
 .../Backgrounds/Hyperspeed/Hyperspeed.vue     |   8 +-
 .../TextAnimations/GlitchText/GlitchText.vue  |   6 -
 src/demo/Animations/RibbonsDemo.vue           | 226 +++++++++++
 7 files changed, 613 insertions(+), 12 deletions(-)
 create mode 100644 src/constants/code/Animations/ribbonsCode.ts
 create mode 100644 src/content/Animations/Ribbons/Ribbons.vue
 create mode 100644 src/demo/Animations/RibbonsDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 387767d..95693af 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -32,6 +32,7 @@ export const CATEGORIES = [
       'Animated Content',
       'Fade Content',
       'Pixel Transition',
+      'Ribbons',
       'Glare Hover',
       'Magnet Lines',
       'Count Up',
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 96716a7..7b7ea30 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -5,6 +5,7 @@ const animations = {
   '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'),
diff --git a/src/constants/code/Animations/ribbonsCode.ts b/src/constants/code/Animations/ribbonsCode.ts
new file mode 100644
index 0000000..20ce4c0
--- /dev/null
+++ 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
+};
diff --git a/src/content/Animations/Ribbons/Ribbons.vue b/src/content/Animations/Ribbons/Ribbons.vue
new file mode 100644
index 0000000..e9626f3
--- /dev/null
+++ b/src/content/Animations/Ribbons/Ribbons.vue
@@ -0,0 +1,355 @@
+<template>
+  <div ref="ribbonsContainer" class="relative w-full h-full overflow-hidden" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { Renderer, Transform, Vec3, Color, Polyline } from 'ogl';
+
+interface RibbonsProps {
+  colors?: string[];
+  baseSpring?: number;
+  baseFriction?: number;
+  baseThickness?: number;
+  offsetFactor?: number;
+  maxAge?: number;
+  pointCount?: number;
+  speedMultiplier?: number;
+  enableFade?: boolean;
+  enableShaderEffect?: boolean;
+  effectAmplitude?: number;
+  backgroundColor?: number[];
+}
+
+const props = withDefaults(defineProps<RibbonsProps>(), {
+  colors: () => ['#ff9346', '#7cff67', '#ffee51', '#5227FF'],
+  baseSpring: 0.03,
+  baseFriction: 0.9,
+  baseThickness: 30,
+  offsetFactor: 0.05,
+  maxAge: 500,
+  pointCount: 50,
+  speedMultiplier: 0.6,
+  enableFade: false,
+  enableShaderEffect: false,
+  effectAmplitude: 2,
+  backgroundColor: () => [0, 0, 0, 0]
+});
+
+const ribbonsContainer = ref<HTMLDivElement>();
+
+let renderer: Renderer;
+let scene: Transform;
+let lines: {
+  spring: number;
+  friction: number;
+  mouseVelocity: Vec3;
+  mouseOffset: Vec3;
+  points: Vec3[];
+  polyline: Polyline;
+}[] = [];
+let frameId: number;
+let lastTime = performance.now();
+const mouse = new Vec3();
+let resizeObserver: ResizeObserver | null = null;
+
+const vertex = `
+  precision highp float;
+  
+  attribute vec3 position;
+  attribute vec3 next;
+  attribute vec3 prev;
+  attribute vec2 uv;
+  attribute float side;
+  
+  uniform vec2 uResolution;
+  uniform float uDPR;
+  uniform float uThickness;
+  uniform float uTime;
+  uniform float uEnableShaderEffect;
+  uniform float uEffectAmplitude;
+  
+  varying vec2 vUV;
+  
+  vec4 getPosition() {
+      vec4 current = vec4(position, 1.0);
+      vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0);
+      vec2 nextScreen = next.xy * aspect;
+      vec2 prevScreen = prev.xy * aspect;
+      vec2 tangent = normalize(nextScreen - prevScreen);
+      vec2 normal = vec2(-tangent.y, tangent.x);
+      normal /= aspect;
+      normal *= mix(1.0, 0.1, pow(abs(uv.y - 0.5) * 2.0, 2.0));
+      float dist = length(nextScreen - prevScreen);
+      normal *= smoothstep(0.0, 0.02, dist);
+      float pixelWidthRatio = 1.0 / (uResolution.y / uDPR);
+      float pixelWidth = current.w * pixelWidthRatio;
+      normal *= pixelWidth * uThickness;
+      current.xy -= normal * side;
+      if(uEnableShaderEffect > 0.5) {
+        current.xy += normal * sin(uTime + current.x * 10.0) * uEffectAmplitude;
+      }
+      return current;
+  }
+  
+  void main() {
+      vUV = uv;
+      gl_Position = getPosition();
+  }
+`;
+
+const fragment = `
+  precision highp float;
+  uniform vec3 uColor;
+  uniform float uOpacity;
+  uniform float uEnableFade;
+  varying vec2 vUV;
+  void main() {
+      float fadeFactor = 1.0;
+      if(uEnableFade > 0.5) {
+          fadeFactor = 1.0 - smoothstep(0.0, 1.0, vUV.y);
+      }
+      gl_FragColor = vec4(uColor, uOpacity * fadeFactor);
+  }
+`;
+
+const updateMouse = (e: MouseEvent | TouchEvent) => {
+  const container = ribbonsContainer.value;
+  if (!container) return;
+
+  let x: number, y: number;
+  const rect = container.getBoundingClientRect();
+
+  if ('changedTouches' in e && e.changedTouches.length) {
+    x = e.changedTouches[0].clientX - rect.left;
+    y = e.changedTouches[0].clientY - rect.top;
+  } else if (e instanceof MouseEvent) {
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  } else {
+    x = 0;
+    y = 0;
+  }
+
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+  mouse.set((x / width) * 2 - 1, (y / height) * -2 + 1, 0);
+};
+
+const resize = () => {
+  const container = ribbonsContainer.value;
+  if (!container || !renderer) return;
+
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+  renderer.setSize(width, height);
+  lines.forEach(line => line.polyline.resize());
+};
+
+const createLines = () => {
+  const center = (props.colors.length - 1) / 2;
+  lines = [];
+
+  props.colors.forEach((color, index) => {
+    const spring = props.baseSpring + (Math.random() - 0.5) * 0.05;
+    const friction = props.baseFriction + (Math.random() - 0.5) * 0.05;
+    const thickness = props.baseThickness + (Math.random() - 0.5) * 3;
+    const mouseOffset = new Vec3(
+      (index - center) * props.offsetFactor + (Math.random() - 0.5) * 0.01,
+      (Math.random() - 0.5) * 0.1,
+      0
+    );
+
+    const line = {
+      spring,
+      friction,
+      mouseVelocity: new Vec3(),
+      mouseOffset,
+      points: [] as Vec3[],
+      polyline: {} as Polyline
+    };
+
+    const count = props.pointCount;
+    const points: Vec3[] = [];
+    for (let i = 0; i < count; i++) {
+      points.push(new Vec3());
+    }
+    line.points = points;
+
+    line.polyline = new Polyline(renderer.gl, {
+      points,
+      vertex,
+      fragment,
+      uniforms: {
+        uColor: { value: new Color(color) },
+        uThickness: { value: thickness },
+        uOpacity: { value: 1.0 },
+        uTime: { value: 0.0 },
+        uEnableShaderEffect: { value: props.enableShaderEffect ? 1.0 : 0.0 },
+        uEffectAmplitude: { value: props.effectAmplitude },
+        uEnableFade: { value: props.enableFade ? 1.0 : 0.0 }
+      }
+    });
+    line.polyline.mesh.setParent(scene);
+    lines.push(line);
+  });
+};
+
+const update = () => {
+  frameId = requestAnimationFrame(update);
+  const currentTime = performance.now();
+  const dt = currentTime - lastTime;
+  lastTime = currentTime;
+
+  const tmp = new Vec3();
+  lines.forEach(line => {
+    tmp.copy(mouse).add(line.mouseOffset).sub(line.points[0]).multiply(line.spring);
+    line.mouseVelocity.add(tmp).multiply(line.friction);
+    line.points[0].add(line.mouseVelocity);
+
+    for (let i = 1; i < line.points.length; i++) {
+      if (isFinite(props.maxAge) && props.maxAge > 0) {
+        const segmentDelay = props.maxAge / (line.points.length - 1);
+        const alpha = Math.min(1, (dt * props.speedMultiplier) / segmentDelay);
+        line.points[i].lerp(line.points[i - 1], alpha);
+      } else {
+        line.points[i].lerp(line.points[i - 1], 0.9);
+      }
+    }
+    if (line.polyline.mesh.program.uniforms.uTime) {
+      line.polyline.mesh.program.uniforms.uTime.value = currentTime * 0.001;
+    }
+    line.polyline.updateGeometry();
+  });
+
+  renderer.render({ scene });
+};
+
+const initRibbons = () => {
+  const container = ribbonsContainer.value;
+  if (!container) return;
+
+  renderer = new Renderer({ dpr: window.devicePixelRatio || 2, alpha: true });
+  const gl = renderer.gl;
+
+  if (Array.isArray(props.backgroundColor) && props.backgroundColor.length === 4) {
+    gl.clearColor(
+      props.backgroundColor[0],
+      props.backgroundColor[1],
+      props.backgroundColor[2],
+      props.backgroundColor[3]
+    );
+  } else {
+    gl.clearColor(0, 0, 0, 0);
+  }
+
+  gl.canvas.style.position = 'absolute';
+  gl.canvas.style.top = '0';
+  gl.canvas.style.left = '0';
+  gl.canvas.style.width = '100%';
+  gl.canvas.style.height = '100%';
+  container.appendChild(gl.canvas);
+
+  scene = new Transform();
+
+  createLines();
+
+  container.addEventListener('mousemove', updateMouse);
+  container.addEventListener('touchstart', updateMouse);
+  container.addEventListener('touchmove', updateMouse);
+
+  resize();
+
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(container);
+  } else {
+    window.addEventListener('resize', resize);
+  }
+
+  update();
+};
+
+const cleanup = () => {
+  if (frameId) {
+    cancelAnimationFrame(frameId);
+  }
+
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  } else {
+    window.removeEventListener('resize', resize);
+  }
+
+  const container = ribbonsContainer.value;
+  if (container) {
+    container.removeEventListener('mousemove', updateMouse);
+    container.removeEventListener('touchstart', updateMouse);
+    container.removeEventListener('touchmove', updateMouse);
+
+    if (renderer && renderer.gl.canvas && renderer.gl.canvas.parentNode === container) {
+      container.removeChild(renderer.gl.canvas);
+    }
+  }
+};
+
+const recreateLines = () => {
+  lines.forEach(line => {
+    if (line.polyline.mesh && line.polyline.mesh.parent) {
+      line.polyline.mesh.setParent(null);
+    }
+  });
+
+  createLines();
+};
+
+watch(
+  () => [props.colors, props.pointCount],
+  () => {
+    if (renderer && scene) {
+      recreateLines();
+    }
+  },
+  { deep: true }
+);
+
+watch(
+  () => [props.baseThickness, props.enableFade, props.enableShaderEffect, props.effectAmplitude, props.backgroundColor],
+  () => {
+    if (renderer && lines.length > 0) {
+      lines.forEach(line => {
+        if (line.polyline.mesh.program.uniforms.uEnableFade) {
+          line.polyline.mesh.program.uniforms.uEnableFade.value = props.enableFade ? 1.0 : 0.0;
+        }
+        if (line.polyline.mesh.program.uniforms.uEnableShaderEffect) {
+          line.polyline.mesh.program.uniforms.uEnableShaderEffect.value = props.enableShaderEffect ? 1.0 : 0.0;
+        }
+        if (line.polyline.mesh.program.uniforms.uEffectAmplitude) {
+          line.polyline.mesh.program.uniforms.uEffectAmplitude.value = props.effectAmplitude;
+        }
+      });
+
+      const gl = renderer.gl;
+      if (Array.isArray(props.backgroundColor) && props.backgroundColor.length === 4) {
+        gl.clearColor(
+          props.backgroundColor[0],
+          props.backgroundColor[1],
+          props.backgroundColor[2],
+          props.backgroundColor[3]
+        );
+      } else {
+        gl.clearColor(0, 0, 0, 0);
+      }
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  initRibbons();
+});
+
+onUnmounted(() => {
+  cleanup();
+});
+</script>
diff --git a/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue b/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
index 7d9284e..67cc449 100644
--- a/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
+++ b/src/content/Backgrounds/Hyperspeed/Hyperspeed.vue
@@ -469,7 +469,7 @@ class CarLights {
     const geometry = new THREE.TubeGeometry(curve, 40, 1, 8, false);
 
     const instanced = new THREE.InstancedBufferGeometry();
-    // Copy geometry attributes
+
     for (const key in geometry.attributes) {
       instanced.setAttribute(key, geometry.attributes[key]);
     }
@@ -634,7 +634,7 @@ class LightsSticks {
     const options = this.options;
     const geometry = new THREE.PlaneGeometry(1, 1);
     const instanced = new THREE.InstancedBufferGeometry();
-    // Copy geometry attributes
+
     for (const key in geometry.attributes) {
       instanced.setAttribute(key, geometry.attributes[key]);
     }
@@ -1038,17 +1038,14 @@ class App {
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onWindowResize = this.onWindowResize.bind(this);
 
-    // Use ResizeObserver for better container tracking
     if (typeof ResizeObserver !== 'undefined') {
       const resizeObserver = new ResizeObserver(() => {
         this.onWindowResize();
       });
       resizeObserver.observe(container);
 
-      // Store reference for cleanup
       this.resizeObserver = resizeObserver;
     } else {
-      // Fallback to window resize
       window.addEventListener('resize', this.onWindowResize);
     }
   }
@@ -1220,7 +1217,6 @@ class App {
   tick() {
     if (this.disposed || !this) return;
 
-    // Ensure renderer stays within container bounds
     const containerWidth = this.container.offsetWidth;
     const containerHeight = this.container.offsetHeight;
 
diff --git a/src/content/TextAnimations/GlitchText/GlitchText.vue b/src/content/TextAnimations/GlitchText/GlitchText.vue
index b511ba4..c2f1bca 100644
--- a/src/content/TextAnimations/GlitchText/GlitchText.vue
+++ b/src/content/TextAnimations/GlitchText/GlitchText.vue
@@ -40,7 +40,6 @@ const inlineStyles = computed(
 );
 
 const baseClasses = [
-  // Base styling
   'text-white',
   'font-black',
   'whitespace-nowrap',
@@ -50,7 +49,6 @@ const baseClasses = [
   'cursor-pointer',
   'text-[clamp(2rem,10vw,8rem)]',
 
-  // Pseudo-elements base
   'before:content-[attr(data-text)]',
   'before:absolute',
   'before:top-0',
@@ -69,19 +67,16 @@ const baseClasses = [
 ];
 
 const normalGlitchClasses = [
-  // After pseudo-element for normal mode
   'after:left-[10px]',
   'after:[text-shadow:var(--after-shadow,-10px_0_red)]',
   'after:[animation:animate-glitch_var(--after-duration,3s)_infinite_linear_alternate-reverse]',
 
-  // Before pseudo-element for normal mode
   'before:left-[-10px]',
   'before:[text-shadow:var(--before-shadow,10px_0_cyan)]',
   'before:[animation:animate-glitch_var(--before-duration,2s)_infinite_linear_alternate-reverse]'
 ];
 
 const hoverOnlyClasses = [
-  // Hide pseudo-elements by default
   'before:content-[""]',
   'before:opacity-0',
   'before:[animation:none]',
@@ -89,7 +84,6 @@ const hoverOnlyClasses = [
   'after:opacity-0',
   'after:[animation:none]',
 
-  // Show and animate on hover
   'hover:before:content-[attr(data-text)]',
   'hover:before:opacity-100',
   'hover:before:left-[-10px]',
diff --git a/src/demo/Animations/RibbonsDemo.vue b/src/demo/Animations/RibbonsDemo.vue
new file mode 100644
index 0000000..08f21a1
--- /dev/null
+++ b/src/demo/Animations/RibbonsDemo.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="ribbons-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container" style="height: 500px; position: relative">
+          <div class="hover-text">Hover Me.</div>
+          <Ribbons
+            :base-thickness="baseThickness"
+            :colors="colors"
+            :speed-multiplier="speedMultiplier"
+            :max-age="maxAge"
+            :enable-fade="enableFade"
+            :enable-shader-effect="enableWaves"
+          />
+        </div>
+
+        <Customize>
+          <div class="count-controls">
+            <span class="count-label">Count</span>
+            <button @click="removeColor" :disabled="colors.length <= 1" class="count-button">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+              </svg>
+            </button>
+            <span class="count-value">{{ colors.length }}</span>
+            <button @click="addColor" :disabled="colors.length >= 10" class="count-button">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+              </svg>
+            </button>
+          </div>
+
+          <PreviewSlider title="Thickness" v-model="baseThickness" :min="1" :max="60" :step="1" />
+
+          <PreviewSlider title="Speed" v-model="speedMultiplier" :min="0.3" :max="0.7" :step="0.01" />
+
+          <PreviewSlider title="Max Age" v-model="maxAge" :min="300" :max="1000" :step="100" />
+
+          <PreviewSwitch title="Enable Fade" v-model="enableFade" />
+
+          <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
+        </Customize>
+
+        <PropTable :data="propData" />
+
+        <Dependencies :dependency-list="['ogl']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="ribbons" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="ribbons.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import Ribbons from '../../content/Animations/Ribbons/Ribbons.vue';
+import { ribbons } from '@/constants/code/Animations/ribbonsCode';
+
+const baseThickness = ref(30);
+const colors = ref(['#5227FF']);
+const speedMultiplier = ref(0.5);
+const maxAge = ref(500);
+const enableFade = ref(false);
+const enableWaves = ref(false);
+
+const addColor = () => {
+  if (colors.value.length < 10) {
+    const newColor = `#${Math.floor(Math.random() * 16777215)
+      .toString(16)
+      .padStart(6, '0')}`;
+    colors.value.push(newColor);
+  }
+};
+
+const removeColor = () => {
+  if (colors.value.length > 1) {
+    colors.value.pop();
+  }
+};
+
+const propData = [
+  {
+    name: 'colors',
+    type: 'string[]',
+    default: "['#5227FF']",
+    description: 'An array of color strings to be used for the ribbons.'
+  },
+  {
+    name: 'baseSpring',
+    type: 'number',
+    default: '0.03',
+    description: 'Base spring factor for the physics controlling ribbon motion.'
+  },
+  {
+    name: 'baseFriction',
+    type: 'number',
+    default: '0.9',
+    description: 'Base friction factor that dampens the ribbon motion.'
+  },
+  {
+    name: 'baseThickness',
+    type: 'number',
+    default: '30',
+    description: 'The base thickness of the ribbons.'
+  },
+  {
+    name: 'offsetFactor',
+    type: 'number',
+    default: '0.02',
+    description: 'A factor to horizontally offset the starting positions of the ribbons.'
+  },
+  {
+    name: 'maxAge',
+    type: 'number',
+    default: '500',
+    description: 'Delay in milliseconds controlling how long the ribbon trails extend.'
+  },
+  {
+    name: 'pointCount',
+    type: 'number',
+    default: '50',
+    description: 'The number of points that make up each ribbon.'
+  },
+  {
+    name: 'speedMultiplier',
+    type: 'number',
+    default: '0.5',
+    description: 'Multiplier that adjusts how fast trailing points interpolate towards the head.'
+  },
+  {
+    name: 'enableFade',
+    type: 'boolean',
+    default: 'true',
+    description: 'If true, a fade effect is applied along the length of the ribbon.'
+  },
+  {
+    name: 'enableShaderEffect',
+    type: 'boolean',
+    default: 'true',
+    description: 'If true, an additional sine-wave shader effect is applied to the ribbons.'
+  },
+  {
+    name: 'effectAmplitude',
+    type: 'number',
+    default: '2',
+    description: 'The amplitude of the shader displacement effect.'
+  },
+  {
+    name: 'backgroundColor',
+    type: 'number[]',
+    default: '[0, 0, 0, 0]',
+    description: 'An RGBA array specifying the clear color for the renderer.'
+  }
+];
+</script>
+
+<style scoped>
+.hover-text {
+  position: absolute;
+  font-size: clamp(2rem, 6vw, 6rem);
+  font-weight: 900;
+  color: #222;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.demo-container {
+  padding: 0;
+  overflow: hidden;
+}
+
+.count-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.count-label {
+  font-size: 0.875rem;
+}
+
+.count-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: #1b1b1b;
+  border: 1px solid #333;
+  border-radius: 10px;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.count-button:hover:not(:disabled) {
+  background: #222;
+}
+
+.count-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.count-value {
+  font-size: 0.875rem;
+  min-width: 1.5rem;
+  text-align: center;
+}
+</style>

From 01ab91c316617cb69c5e383c94ae9a40daac3416 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 19:16:42 +0300
Subject: [PATCH 37/37] Migrate <SplashCursor />

---
 src/constants/Categories.ts                   |    1 +
 src/constants/Components.ts                   |    3 +-
 .../code/Animations/splashCursorCode.ts       |   29 +
 .../Animations/SplashCursor/SplashCursor.vue  | 1267 +++++++++++++++++
 src/demo/Animations/SplashCursorDemo.vue      |  154 ++
 5 files changed, 1453 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/code/Animations/splashCursorCode.ts
 create mode 100644 src/content/Animations/SplashCursor/SplashCursor.vue
 create mode 100644 src/demo/Animations/SplashCursorDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 95693af..b0503f3 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -31,6 +31,7 @@ export const CATEGORIES = [
     subcategories: [
       'Animated Content',
       'Fade Content',
+      'Splash Cursor',
       'Pixel Transition',
       'Ribbons',
       'Glare Hover',
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 7b7ea30..74763af 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -9,7 +9,8 @@ const animations = {
   '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')
+  'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
+  'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
 };
 
 const textAnimations = {
diff --git a/src/constants/code/Animations/splashCursorCode.ts b/src/constants/code/Animations/splashCursorCode.ts
new file mode 100644
index 0000000..c8de8ce
--- /dev/null
+++ 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
+};
diff --git a/src/content/Animations/SplashCursor/SplashCursor.vue b/src/content/Animations/SplashCursor/SplashCursor.vue
new file mode 100644
index 0000000..e69f127
--- /dev/null
+++ b/src/content/Animations/SplashCursor/SplashCursor.vue
@@ -0,0 +1,1267 @@
+<template>
+  <div class="fixed top-0 left-0 z-50 pointer-events-none w-full h-full">
+    <canvas ref="canvasRef" id="fluid" class="w-screen h-screen block"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, withDefaults } from 'vue';
+
+/* ---------- types ---------- */
+interface ColorRGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+interface SplashCursorProps {
+  SIM_RESOLUTION?: number;
+  DYE_RESOLUTION?: number;
+  CAPTURE_RESOLUTION?: number;
+  DENSITY_DISSIPATION?: number;
+  VELOCITY_DISSIPATION?: number;
+  PRESSURE?: number;
+  PRESSURE_ITERATIONS?: number;
+  CURL?: number;
+  SPLAT_RADIUS?: number;
+  SPLAT_FORCE?: number;
+  SHADING?: boolean;
+  COLOR_UPDATE_SPEED?: number;
+  BACK_COLOR?: ColorRGB;
+  TRANSPARENT?: boolean;
+}
+
+/* ---------- props & defaults ---------- */
+const props = withDefaults(defineProps<SplashCursorProps>(), {
+  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
+});
+
+/* ---------- refs ---------- */
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+
+/* ---------- helper types ---------- */
+interface Pointer {
+  id: number;
+  texcoordX: number;
+  texcoordY: number;
+  prevTexcoordX: number;
+  prevTexcoordY: number;
+  deltaX: number;
+  deltaY: number;
+  down: boolean;
+  moved: boolean;
+  color: ColorRGB;
+}
+
+function pointerPrototype(): Pointer {
+  return {
+    id: -1,
+    texcoordX: 0,
+    texcoordY: 0,
+    prevTexcoordX: 0,
+    prevTexcoordY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    down: false,
+    moved: false,
+    color: { r: 0, g: 0, b: 0 }
+  };
+}
+
+/* ---------- main logic ---------- */
+onMounted(() => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const pointers: Pointer[] = [pointerPrototype()];
+
+  const config = {
+    SIM_RESOLUTION: props.SIM_RESOLUTION!,
+    DYE_RESOLUTION: props.DYE_RESOLUTION!,
+    CAPTURE_RESOLUTION: props.CAPTURE_RESOLUTION!,
+    DENSITY_DISSIPATION: props.DENSITY_DISSIPATION!,
+    VELOCITY_DISSIPATION: props.VELOCITY_DISSIPATION!,
+    PRESSURE: props.PRESSURE!,
+    PRESSURE_ITERATIONS: props.PRESSURE_ITERATIONS!,
+    CURL: props.CURL!,
+    SPLAT_RADIUS: props.SPLAT_RADIUS!,
+    SPLAT_FORCE: props.SPLAT_FORCE!,
+    SHADING: props.SHADING,
+    COLOR_UPDATE_SPEED: props.COLOR_UPDATE_SPEED!,
+    PAUSED: false,
+    BACK_COLOR: props.BACK_COLOR,
+    TRANSPARENT: props.TRANSPARENT
+  };
+
+  /* ---------- WebGL context helpers ---------- */
+  const { gl, ext } = getWebGLContext(canvas);
+  if (!gl || !ext) return;
+
+  if (!ext.supportLinearFiltering) {
+    config.DYE_RESOLUTION = 256;
+    config.SHADING = false;
+  }
+
+  function getWebGLContext(canvasEl: HTMLCanvasElement) {
+    const params = {
+      alpha: true,
+      depth: false,
+      stencil: false,
+      antialias: false,
+      preserveDrawingBuffer: false
+    };
+
+    let gl = canvasEl.getContext('webgl2', params) as WebGL2RenderingContext | null;
+
+    if (!gl) {
+      gl = (canvasEl.getContext('webgl', params) ||
+        canvasEl.getContext('experimental-webgl', params)) as WebGL2RenderingContext | null;
+    }
+
+    if (!gl) {
+      throw new Error('Unable to initialize WebGL.');
+    }
+
+    const isWebGL2 = 'drawBuffers' in gl;
+
+    let supportLinearFiltering = false;
+    let halfFloat: OES_texture_half_float | null = null;
+
+    if (isWebGL2) {
+      (gl as WebGL2RenderingContext).getExtension('EXT_color_buffer_float');
+      supportLinearFiltering = !!(gl as WebGL2RenderingContext).getExtension('OES_texture_float_linear');
+    } else {
+      halfFloat = gl.getExtension('OES_texture_half_float');
+      supportLinearFiltering = !!gl.getExtension('OES_texture_half_float_linear');
+    }
+
+    gl.clearColor(0, 0, 0, 1);
+
+    const halfFloatTexType = isWebGL2
+      ? (gl as WebGL2RenderingContext).HALF_FLOAT
+      : (halfFloat && (halfFloat as OES_texture_half_float).HALF_FLOAT_OES) || 0;
+
+    let formatRGBA: { internalFormat: number; format: number } | null;
+    let formatRG: { internalFormat: number; format: number } | null;
+    let formatR: { internalFormat: number; format: number } | null;
+
+    if (isWebGL2) {
+      formatRGBA = getSupportedFormat(gl, (gl as WebGL2RenderingContext).RGBA16F, gl.RGBA, halfFloatTexType);
+      formatRG = getSupportedFormat(
+        gl,
+        (gl as WebGL2RenderingContext).RG16F,
+        (gl as WebGL2RenderingContext).RG,
+        halfFloatTexType
+      );
+      formatR = getSupportedFormat(
+        gl,
+        (gl as WebGL2RenderingContext).R16F,
+        (gl as WebGL2RenderingContext).RED,
+        halfFloatTexType
+      );
+    } else {
+      formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
+      formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
+      formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
+    }
+
+    return {
+      gl,
+      ext: {
+        formatRGBA,
+        formatRG,
+        formatR,
+        halfFloatTexType,
+        supportLinearFiltering
+      }
+    };
+  }
+
+  function getSupportedFormat(
+    gl: WebGLRenderingContext | WebGL2RenderingContext,
+    internalFormat: number,
+    format: number,
+    type: number
+  ): { internalFormat: number; format: number } | null {
+    if (!supportRenderTextureFormat(gl, internalFormat, format, type)) {
+      if ('drawBuffers' in gl) {
+        const gl2 = gl as WebGL2RenderingContext;
+        switch (internalFormat) {
+          case gl2.R16F:
+            return getSupportedFormat(gl2, gl2.RG16F, gl2.RG, type);
+          case gl2.RG16F:
+            return getSupportedFormat(gl2, gl2.RGBA16F, gl2.RGBA, type);
+          default:
+            return null;
+        }
+      }
+      return null;
+    }
+    return { internalFormat, format };
+  }
+
+  function supportRenderTextureFormat(
+    gl: WebGLRenderingContext | WebGL2RenderingContext,
+    internalFormat: number,
+    format: number,
+    type: number
+  ) {
+    const texture = gl.createTexture();
+    if (!texture) return false;
+
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);
+
+    const fbo = gl.createFramebuffer();
+    if (!fbo) return false;
+
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+    return status === gl.FRAMEBUFFER_COMPLETE;
+  }
+
+  function hashCode(s: string) {
+    if (!s.length) return 0;
+    let hash = 0;
+    for (let i = 0; i < s.length; i++) {
+      hash = (hash << 5) - hash + s.charCodeAt(i);
+      hash |= 0;
+    }
+    return hash;
+  }
+
+  function addKeywords(source: string, keywords: string[] | null) {
+    if (!keywords) return source;
+    let keywordsString = '';
+    for (const keyword of keywords) {
+      keywordsString += `#define ${keyword}\n`;
+    }
+    return keywordsString + source;
+  }
+
+  function compileShader(type: number, source: string, keywords: string[] | null = null): WebGLShader | null {
+    const shaderSource = addKeywords(source, keywords);
+    const shader = gl.createShader(type);
+    if (!shader) return null;
+    gl.shaderSource(shader, shaderSource);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      console.trace(gl.getShaderInfoLog(shader));
+    }
+    return shader;
+  }
+
+  function createProgram(vertexShader: WebGLShader | null, fragmentShader: WebGLShader | null): WebGLProgram | null {
+    if (!vertexShader || !fragmentShader) return null;
+    const program = gl.createProgram();
+    if (!program) return null;
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.trace(gl.getProgramInfoLog(program));
+    }
+    return program;
+  }
+
+  function getUniforms(program: WebGLProgram) {
+    const uniforms: Record<string, WebGLUniformLocation | null> = {};
+    const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < uniformCount; i++) {
+      const uniformInfo = gl.getActiveUniform(program, i);
+      if (uniformInfo) {
+        uniforms[uniformInfo.name] = gl.getUniformLocation(program, uniformInfo.name);
+      }
+    }
+    return uniforms;
+  }
+
+  class Program {
+    program: WebGLProgram | null;
+    uniforms: Record<string, WebGLUniformLocation | null>;
+
+    constructor(vertexShader: WebGLShader | null, fragmentShader: WebGLShader | null) {
+      this.program = createProgram(vertexShader, fragmentShader);
+      this.uniforms = this.program ? getUniforms(this.program) : {};
+    }
+
+    bind() {
+      if (this.program) gl.useProgram(this.program);
+    }
+  }
+
+  class Material {
+    vertexShader: WebGLShader | null;
+    fragmentShaderSource: string;
+    programs: Record<number, WebGLProgram | null>;
+    activeProgram: WebGLProgram | null;
+    uniforms: Record<string, WebGLUniformLocation | null>;
+
+    constructor(vertexShader: WebGLShader | null, fragmentShaderSource: string) {
+      this.vertexShader = vertexShader;
+      this.fragmentShaderSource = fragmentShaderSource;
+      this.programs = {};
+      this.activeProgram = null;
+      this.uniforms = {};
+    }
+
+    setKeywords(keywords: string[]) {
+      let hash = 0;
+      for (const kw of keywords) {
+        hash += hashCode(kw);
+      }
+      let program = this.programs[hash];
+      if (program == null) {
+        const fragmentShader = compileShader(gl.FRAGMENT_SHADER, this.fragmentShaderSource, keywords);
+        program = createProgram(this.vertexShader, fragmentShader);
+        this.programs[hash] = program;
+      }
+      if (program === this.activeProgram) return;
+      if (program) {
+        this.uniforms = getUniforms(program);
+      }
+      this.activeProgram = program;
+    }
+
+    bind() {
+      if (this.activeProgram) {
+        gl.useProgram(this.activeProgram);
+      }
+    }
+  }
+
+  /* ---------- shaders ---------- */
+  const baseVertexShader = compileShader(
+    gl.VERTEX_SHADER,
+    `
+      precision highp float;
+      attribute vec2 aPosition;
+      varying vec2 vUv;
+      varying vec2 vL;
+      varying vec2 vR;
+      varying vec2 vT;
+      varying vec2 vB;
+      uniform vec2 texelSize;
+      void main () {
+        vUv = aPosition * 0.5 + 0.5;
+        vL = vUv - vec2(texelSize.x, 0.0);
+        vR = vUv + vec2(texelSize.x, 0.0);
+        vT = vUv + vec2(0.0, texelSize.y);
+        vB = vUv - vec2(0.0, texelSize.y);
+        gl_Position = vec4(aPosition, 0.0, 1.0);
+      }
+    `
+  );
+
+  const copyShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      uniform sampler2D uTexture;
+      void main () {
+        gl_FragColor = texture2D(uTexture, vUv);
+      }
+    `
+  );
+
+  const clearShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      uniform sampler2D uTexture;
+      uniform float value;
+      void main () {
+        gl_FragColor = value * texture2D(uTexture, vUv);
+      }
+    `
+  );
+
+  const displayShaderSource = `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      varying vec2 vL;
+      varying vec2 vR;
+      varying vec2 vT;
+      varying vec2 vB;
+      uniform sampler2D uTexture;
+      uniform sampler2D uDithering;
+      uniform vec2 ditherScale;
+      uniform vec2 texelSize;
+      vec3 linearToGamma (vec3 color) {
+          color = max(color, vec3(0));
+          return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0));
+      }
+      void main () {
+          vec3 c = texture2D(uTexture, vUv).rgb;
+          #ifdef SHADING
+              vec3 lc = texture2D(uTexture, vL).rgb;
+              vec3 rc = texture2D(uTexture, vR).rgb;
+              vec3 tc = texture2D(uTexture, vT).rgb;
+              vec3 bc = texture2D(uTexture, vB).rgb;
+              float dx = length(rc) - length(lc);
+              float dy = length(tc) - length(bc);
+              vec3 n = normalize(vec3(dx, dy, length(texelSize)));
+              vec3 l = vec3(0.0, 0.0, 1.0);
+              float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
+              c *= diffuse;
+          #endif
+          float a = max(c.r, max(c.g, c.b));
+          gl_FragColor = vec4(c, a);
+      }
+    `;
+
+  const splatShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      uniform sampler2D uTarget;
+      uniform float aspectRatio;
+      uniform vec3 color;
+      uniform vec2 point;
+      uniform float radius;
+      void main () {
+          vec2 p = vUv - point.xy;
+          p.x *= aspectRatio;
+          vec3 splat = exp(-dot(p, p) / radius) * color;
+          vec3 base = texture2D(uTarget, vUv).xyz;
+          gl_FragColor = vec4(base + splat, 1.0);
+      }
+    `
+  );
+
+  const advectionShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      uniform sampler2D uVelocity;
+      uniform sampler2D uSource;
+      uniform vec2 texelSize;
+      uniform vec2 dyeTexelSize;
+      uniform float dt;
+      uniform float dissipation;
+      vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
+          vec2 st = uv / tsize - 0.5;
+          vec2 iuv = floor(st);
+          vec2 fuv = fract(st);
+          vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
+          vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
+          vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
+          vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
+          return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
+      }
+      void main () {
+          #ifdef MANUAL_FILTERING
+              vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
+              vec4 result = bilerp(uSource, coord, dyeTexelSize);
+          #else
+              vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
+              vec4 result = texture2D(uSource, coord);
+          #endif
+          float decay = 1.0 + dissipation * dt;
+          gl_FragColor = result / decay;
+      }
+    `,
+    ext.supportLinearFiltering ? null : ['MANUAL_FILTERING']
+  );
+
+  const divergenceShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uVelocity;
+      void main () {
+          float L = texture2D(uVelocity, vL).x;
+          float R = texture2D(uVelocity, vR).x;
+          float T = texture2D(uVelocity, vT).y;
+          float B = texture2D(uVelocity, vB).y;
+          vec2 C = texture2D(uVelocity, vUv).xy;
+          if (vL.x < 0.0) { L = -C.x; }
+          if (vR.x > 1.0) { R = -C.x; }
+          if (vT.y > 1.0) { T = -C.y; }
+          if (vB.y < 0.0) { B = -C.y; }
+          float div = 0.5 * (R - L + T - B);
+          gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
+      }
+    `
+  );
+
+  const curlShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uVelocity;
+      void main () {
+          float L = texture2D(uVelocity, vL).y;
+          float R = texture2D(uVelocity, vR).y;
+          float T = texture2D(uVelocity, vT).x;
+          float B = texture2D(uVelocity, vB).x;
+          float vorticity = R - L - T + B;
+          gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
+      }
+    `
+  );
+
+  const vorticityShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      varying vec2 vL;
+      varying vec2 vR;
+      varying vec2 vT;
+      varying vec2 vB;
+      uniform sampler2D uVelocity;
+      uniform sampler2D uCurl;
+      uniform float curl;
+      uniform float dt;
+      void main () {
+          float L = texture2D(uCurl, vL).x;
+          float R = texture2D(uCurl, vR).x;
+          float T = texture2D(uCurl, vT).x;
+          float B = texture2D(uCurl, vB).x;
+          float C = texture2D(uCurl, vUv).x;
+          vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
+          force /= length(force) + 0.0001;
+          force *= curl * C;
+          force.y *= -1.0;
+          vec2 velocity = texture2D(uVelocity, vUv).xy;
+          velocity += force * dt;
+          velocity = min(max(velocity, -1000.0), 1000.0);
+          gl_FragColor = vec4(velocity, 0.0, 1.0);
+      }
+    `
+  );
+
+  const pressureShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uPressure;
+      uniform sampler2D uDivergence;
+      void main () {
+          float L = texture2D(uPressure, vL).x;
+          float R = texture2D(uPressure, vR).x;
+          float T = texture2D(uPressure, vT).x;
+          float B = texture2D(uPressure, vB).x;
+          float C = texture2D(uPressure, vUv).x;
+          float divergence = texture2D(uDivergence, vUv).x;
+          float pressure = (L + R + B + T - divergence) * 0.25;
+          gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
+      }
+    `
+  );
+
+  const gradientSubtractShader = compileShader(
+    gl.FRAGMENT_SHADER,
+    `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uPressure;
+      uniform sampler2D uVelocity;
+      void main () {
+          float L = texture2D(uPressure, vL).x;
+          float R = texture2D(uPressure, vR).x;
+          float T = texture2D(uPressure, vT).x;
+          float B = texture2D(uPressure, vB).x;
+          vec2 velocity = texture2D(uVelocity, vUv).xy;
+          velocity.xy -= vec2(R - L, T - B);
+          gl_FragColor = vec4(velocity, 0.0, 1.0);
+      }
+    `
+  );
+
+  /* ---------- geometry helper ---------- */
+  const blit = (() => {
+    const buffer = gl.createBuffer()!;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
+    const elemBuffer = gl.createBuffer()!;
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elemBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.enableVertexAttribArray(0);
+    return (target: FBO | null, doClear = false) => {
+      if (!gl) return;
+      if (!target) {
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      } else {
+        gl.viewport(0, 0, target.width, target.height);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+      }
+      if (doClear) {
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+      }
+      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+    };
+  })();
+
+  /* ---------- frame-buffer object helpers ---------- */
+  interface FBO {
+    texture: WebGLTexture;
+    fbo: WebGLFramebuffer;
+    width: number;
+    height: number;
+    texelSizeX: number;
+    texelSizeY: number;
+    attach: (id: number) => number;
+  }
+
+  interface DoubleFBO {
+    width: number;
+    height: number;
+    texelSizeX: number;
+    texelSizeY: number;
+    read: FBO;
+    write: FBO;
+    swap: () => void;
+  }
+
+  let dye: DoubleFBO;
+  let velocity: DoubleFBO;
+  let divergence: FBO;
+  let curl: FBO;
+  let pressure: DoubleFBO;
+
+  const copyProgram = new Program(baseVertexShader, copyShader);
+  const clearProgram = new Program(baseVertexShader, clearShader);
+  const splatProgram = new Program(baseVertexShader, splatShader);
+  const advectionProgram = new Program(baseVertexShader, advectionShader);
+  const divergenceProgram = new Program(baseVertexShader, divergenceShader);
+  const curlProgram = new Program(baseVertexShader, curlShader);
+  const vorticityProgram = new Program(baseVertexShader, vorticityShader);
+  const pressureProgram = new Program(baseVertexShader, pressureShader);
+  const gradienSubtractProgram = new Program(baseVertexShader, gradientSubtractShader);
+  const displayMaterial = new Material(baseVertexShader, displayShaderSource);
+
+  function createFBO(w: number, h: number, internalFormat: number, format: number, type: number, param: number): FBO {
+    gl.activeTexture(gl.TEXTURE0);
+    const texture = gl.createTexture()!;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);
+    const fbo = gl.createFramebuffer()!;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    gl.viewport(0, 0, w, h);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    const texelSizeX = 1 / w;
+    const texelSizeY = 1 / h;
+    return {
+      texture,
+      fbo,
+      width: w,
+      height: h,
+      texelSizeX,
+      texelSizeY,
+      attach(id: number) {
+        gl.activeTexture(gl.TEXTURE0 + id);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        return id;
+      }
+    };
+  }
+
+  function createDoubleFBO(
+    w: number,
+    h: number,
+    internalFormat: number,
+    format: number,
+    type: number,
+    param: number
+  ): DoubleFBO {
+    const fbo1 = createFBO(w, h, internalFormat, format, type, param);
+    const fbo2 = createFBO(w, h, internalFormat, format, type, param);
+    return {
+      width: w,
+      height: h,
+      texelSizeX: fbo1.texelSizeX,
+      texelSizeY: fbo1.texelSizeY,
+      read: fbo1,
+      write: fbo2,
+      swap() {
+        const tmp = this.read;
+        this.read = this.write;
+        this.write = tmp;
+      }
+    };
+  }
+
+  function resizeFBO(
+    target: FBO,
+    w: number,
+    h: number,
+    internalFormat: number,
+    format: number,
+    type: number,
+    param: number
+  ) {
+    const newFBO = createFBO(w, h, internalFormat, format, type, param);
+    copyProgram.bind();
+    if (copyProgram.uniforms.uTexture) gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0));
+    blit(newFBO, false);
+    return newFBO;
+  }
+
+  function resizeDoubleFBO(
+    target: DoubleFBO,
+    w: number,
+    h: number,
+    internalFormat: number,
+    format: number,
+    type: number,
+    param: number
+  ) {
+    if (target.width === w && target.height === h) return target;
+    target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param);
+    target.write = createFBO(w, h, internalFormat, format, type, param);
+    target.width = w;
+    target.height = h;
+    target.texelSizeX = 1 / w;
+    target.texelSizeY = 1 / h;
+    return target;
+  }
+
+  function initFramebuffers() {
+    const simRes = getResolution(config.SIM_RESOLUTION!);
+    const dyeRes = getResolution(config.DYE_RESOLUTION!);
+    const texType = ext.halfFloatTexType;
+    const rgba = ext.formatRGBA;
+    const rg = ext.formatRG;
+    const r = ext.formatR;
+    const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
+    gl.disable(gl.BLEND);
+
+    if (!rgba) return;
+
+    if (!dye) {
+      dye = createDoubleFBO(dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering);
+    } else {
+      dye = resizeDoubleFBO(dye, dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering);
+    }
+
+    if (!rg) return;
+
+    if (!velocity) {
+      velocity = createDoubleFBO(simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering);
+    } else {
+      velocity = resizeDoubleFBO(
+        velocity,
+        simRes.width,
+        simRes.height,
+        rg.internalFormat,
+        rg.format,
+        texType,
+        filtering
+      );
+    }
+
+    if (!r) return;
+
+    divergence = createFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
+    curl = createFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
+    pressure = createDoubleFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
+  }
+
+  function updateKeywords() {
+    const displayKeywords: string[] = [];
+    if (config.SHADING) displayKeywords.push('SHADING');
+    displayMaterial.setKeywords(displayKeywords);
+  }
+
+  function getResolution(resolution: number) {
+    const w = gl.drawingBufferWidth;
+    const h = gl.drawingBufferHeight;
+    const aspectRatio = w / h;
+    const aspect = aspectRatio < 1 ? 1 / aspectRatio : aspectRatio;
+    const min = Math.round(resolution);
+    const max = Math.round(resolution * aspect);
+    if (w > h) {
+      return { width: max, height: min };
+    }
+    return { width: min, height: max };
+  }
+
+  function scaleByPixelRatio(input: number) {
+    const pixelRatio = window.devicePixelRatio || 1;
+    return Math.floor(input * pixelRatio);
+  }
+
+  updateKeywords();
+  initFramebuffers();
+
+  let lastUpdateTime = Date.now();
+  let colorUpdateTimer = 0.0;
+
+  function updateFrame() {
+    const dt = calcDeltaTime();
+    if (resizeCanvas()) initFramebuffers();
+    updateColors(dt);
+    applyInputs();
+    step(dt);
+    render(null);
+    requestAnimationFrame(updateFrame);
+  }
+
+  function calcDeltaTime() {
+    const now = Date.now();
+    let dt = (now - lastUpdateTime) / 1000;
+    dt = Math.min(dt, 0.016666);
+    lastUpdateTime = now;
+    return dt;
+  }
+
+  function resizeCanvas() {
+    const width = scaleByPixelRatio(canvas!.clientWidth);
+    const height = scaleByPixelRatio(canvas!.clientHeight);
+    if (canvas!.width !== width || canvas!.height !== height) {
+      canvas!.width = width;
+      canvas!.height = height;
+      return true;
+    }
+    return false;
+  }
+
+  function updateColors(dt: number) {
+    colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED;
+    if (colorUpdateTimer >= 1) {
+      colorUpdateTimer = wrap(colorUpdateTimer, 0, 1);
+      pointers.forEach(p => {
+        p.color = generateColor();
+      });
+    }
+  }
+
+  function applyInputs() {
+    for (const p of pointers) {
+      if (p.moved) {
+        p.moved = false;
+        splatPointer(p);
+      }
+    }
+  }
+
+  /* ---------- simulation step ---------- */
+  function step(dt: number) {
+    gl.disable(gl.BLEND);
+
+    curlProgram.bind();
+    if (curlProgram.uniforms.texelSize) {
+      gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    }
+    if (curlProgram.uniforms.uVelocity) {
+      gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0));
+    }
+    blit(curl);
+
+    vorticityProgram.bind();
+    if (vorticityProgram.uniforms.texelSize) {
+      gl.uniform2f(vorticityProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    }
+    if (vorticityProgram.uniforms.uVelocity) {
+      gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0));
+    }
+    if (vorticityProgram.uniforms.uCurl) {
+      gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1));
+    }
+    if (vorticityProgram.uniforms.curl) {
+      gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
+    }
+    if (vorticityProgram.uniforms.dt) {
+      gl.uniform1f(vorticityProgram.uniforms.dt, dt);
+    }
+    blit(velocity.write);
+    velocity.swap();
+
+    divergenceProgram.bind();
+    if (divergenceProgram.uniforms.texelSize) {
+      gl.uniform2f(divergenceProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    }
+    if (divergenceProgram.uniforms.uVelocity) {
+      gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0));
+    }
+    blit(divergence);
+
+    clearProgram.bind();
+    if (clearProgram.uniforms.uTexture) {
+      gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0));
+    }
+    if (clearProgram.uniforms.value) {
+      gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE);
+    }
+    blit(pressure.write);
+    pressure.swap();
+
+    pressureProgram.bind();
+    if (pressureProgram.uniforms.texelSize) {
+      gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    }
+    if (pressureProgram.uniforms.uDivergence) {
+      gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0));
+    }
+    for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
+      if (pressureProgram.uniforms.uPressure) {
+        gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1));
+      }
+      blit(pressure.write);
+      pressure.swap();
+    }
+
+    gradienSubtractProgram.bind();
+    if (gradienSubtractProgram.uniforms.texelSize) {
+      gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    }
+    if (gradienSubtractProgram.uniforms.uPressure) {
+      gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0));
+    }
+    if (gradienSubtractProgram.uniforms.uVelocity) {
+      gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1));
+    }
+    blit(velocity.write);
+    velocity.swap();
+
+    advectionProgram.bind();
+    if (advectionProgram.uniforms.texelSize) {
+      gl.uniform2f(advectionProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    }
+    if (!ext.supportLinearFiltering && advectionProgram.uniforms.dyeTexelSize) {
+      gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, velocity.texelSizeX, velocity.texelSizeY);
+    }
+    const velocityId = velocity.read.attach(0);
+    if (advectionProgram.uniforms.uVelocity) {
+      gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId);
+    }
+    if (advectionProgram.uniforms.uSource) {
+      gl.uniform1i(advectionProgram.uniforms.uSource, velocityId);
+    }
+    if (advectionProgram.uniforms.dt) {
+      gl.uniform1f(advectionProgram.uniforms.dt, dt);
+    }
+    if (advectionProgram.uniforms.dissipation) {
+      gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
+    }
+    blit(velocity.write);
+    velocity.swap();
+
+    if (!ext.supportLinearFiltering && advectionProgram.uniforms.dyeTexelSize) {
+      gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY);
+    }
+    if (advectionProgram.uniforms.uVelocity) {
+      gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0));
+    }
+    if (advectionProgram.uniforms.uSource) {
+      gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1));
+    }
+    if (advectionProgram.uniforms.dissipation) {
+      gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
+    }
+    blit(dye.write);
+    dye.swap();
+  }
+
+  /* ---------- render ---------- */
+  function render(target: FBO | null) {
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.enable(gl.BLEND);
+    drawDisplay(target);
+  }
+
+  function drawDisplay(target: FBO | null) {
+    const width = target ? target.width : gl.drawingBufferWidth;
+    const height = target ? target.height : gl.drawingBufferHeight;
+    displayMaterial.bind();
+    if (config.SHADING && displayMaterial.uniforms.texelSize) {
+      gl.uniform2f(displayMaterial.uniforms.texelSize, 1 / width, 1 / height);
+    }
+    if (displayMaterial.uniforms.uTexture) {
+      gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0));
+    }
+    blit(target, false);
+  }
+
+  /* ---------- splats ---------- */
+  function splatPointer(pointer: Pointer) {
+    const dx = pointer.deltaX * config.SPLAT_FORCE;
+    const dy = pointer.deltaY * config.SPLAT_FORCE;
+    splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
+  }
+
+  function clickSplat(pointer: Pointer) {
+    const color = generateColor();
+    color.r *= 10;
+    color.g *= 10;
+    color.b *= 10;
+    const dx = 10 * (Math.random() - 0.5);
+    const dy = 30 * (Math.random() - 0.5);
+    splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
+  }
+
+  function splat(x: number, y: number, dx: number, dy: number, color: ColorRGB) {
+    splatProgram.bind();
+    if (splatProgram.uniforms.uTarget) {
+      gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
+    }
+    if (splatProgram.uniforms.aspectRatio) {
+      gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas!.width / canvas!.height);
+    }
+    if (splatProgram.uniforms.point) {
+      gl.uniform2f(splatProgram.uniforms.point, x, y);
+    }
+    if (splatProgram.uniforms.color) {
+      gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0);
+    }
+    if (splatProgram.uniforms.radius) {
+      gl.uniform1f(splatProgram.uniforms.radius, correctRadius(config.SPLAT_RADIUS / 100)!);
+    }
+    blit(velocity.write);
+    velocity.swap();
+
+    if (splatProgram.uniforms.uTarget) {
+      gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0));
+    }
+    if (splatProgram.uniforms.color) {
+      gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
+    }
+    blit(dye.write);
+    dye.swap();
+  }
+
+  function correctRadius(radius: number) {
+    const aspectRatio = canvas!.width / canvas!.height;
+    if (aspectRatio > 1) radius *= aspectRatio;
+    return radius;
+  }
+
+  /* ---------- pointer helpers ---------- */
+  function updatePointerDownData(pointer: Pointer, id: number, posX: number, posY: number) {
+    pointer.id = id;
+    pointer.down = true;
+    pointer.moved = false;
+    pointer.texcoordX = posX / canvas!.width;
+    pointer.texcoordY = 1 - posY / canvas!.height;
+    pointer.prevTexcoordX = pointer.texcoordX;
+    pointer.prevTexcoordY = pointer.texcoordY;
+    pointer.deltaX = 0;
+    pointer.deltaY = 0;
+    pointer.color = generateColor();
+  }
+
+  function updatePointerMoveData(pointer: Pointer, posX: number, posY: number, color: ColorRGB) {
+    pointer.prevTexcoordX = pointer.texcoordX;
+    pointer.prevTexcoordY = pointer.texcoordY;
+    pointer.texcoordX = posX / canvas!.width;
+    pointer.texcoordY = 1 - posY / canvas!.height;
+    pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX)!;
+    pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY)!;
+    pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;
+    pointer.color = color;
+  }
+
+  function updatePointerUpData(pointer: Pointer) {
+    pointer.down = false;
+  }
+
+  function correctDeltaX(delta: number) {
+    const aspectRatio = canvas!.width / canvas!.height;
+    if (aspectRatio < 1) delta *= aspectRatio;
+    return delta;
+  }
+
+  function correctDeltaY(delta: number) {
+    const aspectRatio = canvas!.width / canvas!.height;
+    if (aspectRatio > 1) delta /= aspectRatio;
+    return delta;
+  }
+
+  /* ---------- color helpers ---------- */
+  function generateColor(): ColorRGB {
+    const c = HSVtoRGB(Math.random(), 1.0, 1.0);
+    c.r *= 0.15;
+    c.g *= 0.15;
+    c.b *= 0.15;
+    return c;
+  }
+
+  function HSVtoRGB(h: number, s: number, v: number): ColorRGB {
+    let r = 0,
+      g = 0,
+      b = 0;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+      case 0:
+        r = v;
+        g = t;
+        b = p;
+        break;
+      case 1:
+        r = q;
+        g = v;
+        b = p;
+        break;
+      case 2:
+        r = p;
+        g = v;
+        b = t;
+        break;
+      case 3:
+        r = p;
+        g = q;
+        b = v;
+        break;
+      case 4:
+        r = t;
+        g = p;
+        b = v;
+        break;
+      case 5:
+        r = v;
+        g = p;
+        b = q;
+        break;
+    }
+    return { r, g, b };
+  }
+
+  function wrap(value: number, min: number, max: number) {
+    const range = max - min;
+    if (range === 0) return min;
+    return ((value - min) % range) + min;
+  }
+
+  /* ---------- input events ---------- */
+  window.addEventListener('mousedown', e => {
+    const pointer = pointers[0];
+    const posX = scaleByPixelRatio(e.clientX);
+    const posY = scaleByPixelRatio(e.clientY);
+    updatePointerDownData(pointer, -1, posX, posY);
+    clickSplat(pointer);
+  });
+
+  function handleFirstMouseMove(e: MouseEvent) {
+    const pointer = pointers[0];
+    const posX = scaleByPixelRatio(e.clientX);
+    const posY = scaleByPixelRatio(e.clientY);
+    const color = generateColor();
+    updateFrame();
+    updatePointerMoveData(pointer, posX, posY, color);
+    document.body.removeEventListener('mousemove', handleFirstMouseMove);
+  }
+  document.body.addEventListener('mousemove', handleFirstMouseMove);
+
+  window.addEventListener('mousemove', e => {
+    const pointer = pointers[0];
+    const posX = scaleByPixelRatio(e.clientX);
+    const posY = scaleByPixelRatio(e.clientY);
+    const color = pointer.color;
+    updatePointerMoveData(pointer, posX, posY, color);
+  });
+
+  function handleFirstTouchStart(e: TouchEvent) {
+    const touches = e.targetTouches;
+    const pointer = pointers[0];
+    for (let i = 0; i < touches.length; i++) {
+      const posX = scaleByPixelRatio(touches[i].clientX);
+      const posY = scaleByPixelRatio(touches[i].clientY);
+      updateFrame();
+      updatePointerDownData(pointer, touches[i].identifier, posX, posY);
+    }
+    document.body.removeEventListener('touchstart', handleFirstTouchStart);
+  }
+  document.body.addEventListener('touchstart', handleFirstTouchStart);
+
+  window.addEventListener(
+    'touchstart',
+    e => {
+      const touches = e.targetTouches;
+      const pointer = pointers[0];
+      for (let i = 0; i < touches.length; i++) {
+        const posX = scaleByPixelRatio(touches[i].clientX);
+        const posY = scaleByPixelRatio(touches[i].clientY);
+        updatePointerDownData(pointer, touches[i].identifier, posX, posY);
+      }
+    },
+    false
+  );
+
+  window.addEventListener(
+    'touchmove',
+    e => {
+      const touches = e.targetTouches;
+      const pointer = pointers[0];
+      for (let i = 0; i < touches.length; i++) {
+        const posX = scaleByPixelRatio(touches[i].clientX);
+        const posY = scaleByPixelRatio(touches[i].clientY);
+        updatePointerMoveData(pointer, posX, posY, pointer.color);
+      }
+    },
+    false
+  );
+
+  window.addEventListener('touchend', e => {
+    const touches = e.changedTouches;
+    const pointer = pointers[0];
+    for (let i = 0; i < touches.length; i++) {
+      updatePointerUpData(pointer);
+    }
+  });
+});
+</script>
diff --git a/src/demo/Animations/SplashCursorDemo.vue b/src/demo/Animations/SplashCursorDemo.vue
new file mode 100644
index 0000000..f3776c9
--- /dev/null
+++ b/src/demo/Animations/SplashCursorDemo.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="splash-cursor-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <span class="text-6xl text-center text-[#222] font-black select-none">Move Your Cursor</span>
+        </div>
+
+        <Customize>
+          <PreviewSlider title="Simulation Resolution" v-model="simResolution" :min="64" :max="512" :step="32" />
+
+          <PreviewSlider title="Density Dissipation" v-model="densityDissipation" :min="1" :max="10" :step="0.5" />
+
+          <PreviewSlider title="Splat Force" v-model="splatForce" :min="1000" :max="15000" :step="1000" />
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="splashCursor" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="splashCursor.cli" />
+      </template>
+    </TabbedLayout>
+
+    <SplashCursor
+      :key="rerenderKey"
+      :SIM_RESOLUTION="simResolution"
+      :DENSITY_DISSIPATION="densityDissipation"
+      :SPLAT_FORCE="splatForce"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import SplashCursor from '../../content/Animations/SplashCursor/SplashCursor.vue';
+import { splashCursor } from '@/constants/code/Animations/splashCursorCode';
+import { useForceRerender } from '@/composables/useForceRerender';
+
+const { rerenderKey, forceRerender } = useForceRerender();
+
+const simResolution = ref(128);
+const densityDissipation = ref(3.5);
+const splatForce = ref(6000);
+
+watch([simResolution, densityDissipation, splatForce], () => {
+  forceRerender();
+});
+
+const propData = [
+  {
+    name: 'SIM_RESOLUTION',
+    type: 'number',
+    default: '128',
+    description: 'Fluid simulation resolution for velocity fields.'
+  },
+  {
+    name: 'DYE_RESOLUTION',
+    type: 'number',
+    default: '1440',
+    description: 'Resolution of the color/dye texture.'
+  },
+  {
+    name: 'CAPTURE_RESOLUTION',
+    type: 'number',
+    default: '512',
+    description: 'Resolution used for certain capture operations (rarely changed).'
+  },
+  {
+    name: 'DENSITY_DISSIPATION',
+    type: 'number',
+    default: '3.5',
+    description: 'Rate at which color/density dissipates over time.'
+  },
+  {
+    name: 'VELOCITY_DISSIPATION',
+    type: 'number',
+    default: '2',
+    description: 'Rate at which velocity dissipates over time.'
+  },
+  {
+    name: 'PRESSURE',
+    type: 'number',
+    default: '0.1',
+    description: 'Base pressure for the fluid simulation.'
+  },
+  {
+    name: 'PRESSURE_ITERATIONS',
+    type: 'number',
+    default: '20',
+    description: 'Number of Jacobi iterations used for the pressure solver.'
+  },
+  {
+    name: 'CURL',
+    type: 'number',
+    default: '3',
+    description: 'Amount of vorticity/curl to apply for swirling effects.'
+  },
+  {
+    name: 'SPLAT_RADIUS',
+    type: 'number',
+    default: '0.2',
+    description: "Radius of the 'splat' effect when user interacts."
+  },
+  {
+    name: 'SPLAT_FORCE',
+    type: 'number',
+    default: '6000',
+    description: "Force of the fluid 'splat' on each interaction."
+  },
+  {
+    name: 'SHADING',
+    type: 'boolean',
+    default: 'true',
+    description: 'Toggles simple lighting/shading on the fluid.'
+  },
+  {
+    name: 'COLOR_UPDATE_SPEED',
+    type: 'number',
+    default: '10',
+    description: 'Frequency at which pointer colors are re-randomized.'
+  },
+  {
+    name: 'BACK_COLOR',
+    type: 'object',
+    default: '{ r: 0.5, g: 0, b: 0 }',
+    description: 'Base background color for the fluid. Not always used if TRANSPARENT is true.'
+  },
+  {
+    name: 'TRANSPARENT',
+    type: 'boolean',
+    default: 'true',
+    description: 'Determines if the canvas background should be rendered with alpha.'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  overflow: hidden;
+  min-height: 300px;
+  padding: 0;
+}
+</style>