Added <GridDistortion /> background

src/demo/Backgrounds/GridDistortionDemo.vue

@@ -0,0 +1,145 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef">
+        <GridDistortion
+          :key="key"
+          imageSrc="https://picsum.photos/1920/1080?grayscale"
+          :grid="grid"
+          :mouse="mouse"
+          :strength="0.15"
+          :relaxation="0.9"
+          className="grid-distortion"
+        />
+        <p class="absolute font-black text-8xl text-center select-none mix-blend-difference">Distortion.</p>
+
+        <button
+          class="right-[2em] bottom-[2em] absolute bg-[#060010] hover:bg-[#111] active:bg-[#111] px-6 rounded-[15px] h-16 text-sm"
+          @click="!isFullScreen ? enterFullScreen() : exitFullScreen()"
+        >
+          {{ !isFullScreen ? 'Go Fullscreen!' : 'Exit Fullscreen' }}
+        </button>
+      </div>
+
+      <Customize>
+        <PreviewSlider
+          title="Grid Size"
+          :min="6"
+          :max="200"
+          :step="1"
+          v-model="grid"
+          @onChange="
+            (val: number) => {
+              grid = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Mouse Size"
+          :min="0.1"
+          :max="0.5"
+          :step="0.01"
+          v-model="mouse"
+          @onChange="
+            (val: number) => {
+              mouse = val;
+            }
+          "
+        />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['three']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="gridDistortion" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="gridDistortion.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import { ref, watch } from '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 PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { gridDistortion } from '../../constants/code/Backgrounds/gridDistortionCode';
+import GridDistortion from '../../content/Backgrounds/GridDistortion/GridDistortion.vue';
+
+const { rerenderKey: key, forceRerender } = useForceRerender();
+
+const grid = ref(10);
+const mouse = ref(0.25);
+const isFullScreen = ref(false);
+
+const containerRef = ref<HTMLDivElement | null>(null);
+
+watch(
+  () => [grid, mouse, isFullScreen],
+  () => {
+    forceRerender();
+  },
+  { deep: true }
+);
+
+const enterFullScreen = () => {
+  if (containerRef.value) {
+    containerRef.value.requestFullscreen().then(() => (isFullScreen.value = true));
+  }
+};
+
+const exitFullScreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().then(() => (isFullScreen.value = false));
+  }
+};
+
+const propData = [
+  {
+    name: 'imgageSrc',
+    type: 'string',
+    default: '',
+    description: 'The image you want to render inside the container.'
+  },
+  {
+    name: 'grid',
+    type: 'number',
+    default: '15',
+    description: 'The number of cells present in the distortion grid'
+  },
+  {
+    name: 'mouse',
+    type: 'number',
+    default: '0.1',
+    description: 'The size of the distortion effect that follows the cursor.'
+  },
+  {
+    name: 'relaxation',
+    type: 'number',
+    default: '0.9',
+    description: 'The speed at which grid cells return to their initial state.'
+  },
+  {
+    name: 'strength',
+    type: 'number',
+    default: '0.15',
+    description: 'The overall strength of the distortion effect.'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: '',
+    description: 'Any custom class(es) you want to apply to the container.'
+  }
+];
+</script>