Add prettier config, format codebase

2026-03-07 22:49:31 -07:00 · 2025-07-12 11:59:33 +03:00
parent ac8b2c04d8
commit f4d97ee94e
211 changed files with 10586 additions and 8810 deletions
--- 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>
+</style>
--- 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>
--- 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>
+</style>
--- 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>
--- 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>
+</style>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
+</style>
--- 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>
+</style>
--- 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>