From 8b6b2d6b8b011e71909cc68a2ae3a6d4feab6c50 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Thu, 17 Jul 2025 09:39:34 +0530
Subject: [PATCH] Updated <GridDistortion /> background

---
 src/demo/Backgrounds/GridDistortionDemo.vue | 58 +++++----------------
 1 file changed, 12 insertions(+), 46 deletions(-)

diff --git a/src/demo/Backgrounds/GridDistortionDemo.vue b/src/demo/Backgrounds/GridDistortionDemo.vue
index ed37231..208e714 100644
--- a/src/demo/Backgrounds/GridDistortionDemo.vue
+++ b/src/demo/Backgrounds/GridDistortionDemo.vue
@@ -11,42 +11,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>
+        <p class="absolute font-black text-8xl text-center pointer-events-none select-none mix-blend-difference">
+          Distortion.
+        </p>
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Grid Size"
-          :min="6"
-          :max="200"
-          :step="1"
-          v-model="grid"
-          @onChange="
-            (val: number) => {
-              grid = val;
-            }
-          "
-        />
+        <PreviewSlider title="Grid Size" :min="6" :max="200" :step="1" v-model="grid" />
 
-        <PreviewSlider
-          title="Mouse Size"
-          :min="0.1"
-          :max="0.5"
-          :step="0.01"
-          v-model="mouse"
-          @onChange="
-            (val: number) => {
-              mouse = val;
-            }
-          "
-        />
+        <PreviewSlider title="Mouse Size" :min="0.1" :max="0.5" :step="0.01" v-model="mouse" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -80,30 +53,17 @@ 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],
+  () => [grid, mouse],
   () => {
     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',
@@ -143,3 +103,9 @@ const propData = [
   }
 ];
 </script>
+
+<style scoped>
+.demo-container {
+  padding: 0;
+}
+</style>