From 9ac56752bb9806e17fbc5d005de72ed9f306e3bb Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Fri, 18 Jul 2025 17:30:23 +0530
Subject: [PATCH] [ UPDATED  ] : Demo Background Content

---
 src/demo/Backgrounds/AuroraDemo.vue       |  2 +-
 src/demo/Backgrounds/BalatroDemo.vue      |  7 +---
 src/demo/Backgrounds/BallpitDemo.vue      |  2 +-
 src/demo/Backgrounds/GridMotionDemo.vue   |  3 +-
 src/demo/Backgrounds/LetterGlitchDemo.vue |  2 +-
 src/demo/Backgrounds/LiquidChromeDemo.vue |  2 +-
 src/demo/Backgrounds/ParticlesDemo.vue    |  2 +-
 src/demo/Backgrounds/SquaresDemo.vue      |  2 +-
 src/demo/Backgrounds/WavesDemo.vue        | 47 +++++++++++------------
 9 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/demo/Backgrounds/AuroraDemo.vue b/src/demo/Backgrounds/AuroraDemo.vue
index 31c819f..aef5db9 100644
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="overflow-hidden demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <Aurora
           :color-stops="colorStops"
           :amplitude="amplitude"
diff --git a/src/demo/Backgrounds/BalatroDemo.vue b/src/demo/Backgrounds/BalatroDemo.vue
index 34ad478..ef480ba 100644
--- a/src/demo/Backgrounds/BalatroDemo.vue
+++ b/src/demo/Backgrounds/BalatroDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <Balatro
           :is-rotate="rotate"
           :mouse-interaction="mouseInteractionEnabled"
@@ -9,7 +9,7 @@
           :color1="colorStops[0]"
           :color2="colorStops[1]"
           :color3="colorStops[2]"
-          class="h-full w-full"
+          class="w-full h-full"
         />
       </div>
 
@@ -147,9 +147,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
-  z-index: 1;
-  height: 500px;
 }
 </style>
diff --git a/src/demo/Backgrounds/BallpitDemo.vue b/src/demo/Backgrounds/BallpitDemo.vue
index e8db43e..0962f50 100644
--- a/src/demo/Backgrounds/BallpitDemo.vue
+++ b/src/demo/Backgrounds/BallpitDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
         <RefreshButton @click="forceRerender" />
         <p class="z-0 absolute font-black text-[#271e37] text-[200px]">Balls.</p>
         <Ballpit
diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index cf46c94..1882251 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[600px]">
+      <div class="h-[600px] overflow-hidden demo-container">
         <GridMotion :items="images" />
       </div>
 
@@ -53,6 +53,5 @@ const images = Array.from({ length: numberOfImages }, () => imageUrl);
 <style scoped>
 .demo-container {
   padding: 0;
-  overflow: hidden;
 }
 </style>
diff --git a/src/demo/Backgrounds/LetterGlitchDemo.vue b/src/demo/Backgrounds/LetterGlitchDemo.vue
index 912e94e..0703e59 100644
--- a/src/demo/Backgrounds/LetterGlitchDemo.vue
+++ b/src/demo/Backgrounds/LetterGlitchDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="overflow-hidden demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <LetterGlitch
           :key="rerenderKey"
           :glitch-colors="colors"
diff --git a/src/demo/Backgrounds/LiquidChromeDemo.vue b/src/demo/Backgrounds/LiquidChromeDemo.vue
index 5b25638..378f835 100644
--- a/src/demo/Backgrounds/LiquidChromeDemo.vue
+++ b/src/demo/Backgrounds/LiquidChromeDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
         <LiquidChrome :baseColor="baseColor" :speed="speed" :amplitude="amplitude" :interactive="interactive" />
         <BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
       </div>
diff --git a/src/demo/Backgrounds/ParticlesDemo.vue b/src/demo/Backgrounds/ParticlesDemo.vue
index 2234b2a..74b241f 100644
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="overflow-hidden demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <Particles
           :key="rerenderKey"
           :particle-colors="[color]"
diff --git a/src/demo/Backgrounds/SquaresDemo.vue b/src/demo/Backgrounds/SquaresDemo.vue
index fec0806..3a9badc 100644
--- a/src/demo/Backgrounds/SquaresDemo.vue
+++ b/src/demo/Backgrounds/SquaresDemo.vue
@@ -2,7 +2,7 @@
   <TabbedLayout>
     <template #preview>
       <div class="relative p-0 min-h-[200px] overflow-hidden demo-container">
-        <div class="w-full h-[500px] overflow-hidden">
+        <div class="w-full h-[600px] overflow-hidden">
           <Squares
             :squareSize="size"
             :speed="speed"
diff --git a/src/demo/Backgrounds/WavesDemo.vue b/src/demo/Backgrounds/WavesDemo.vue
index 702edc1..0f6a6d0 100644
--- a/src/demo/Backgrounds/WavesDemo.vue
+++ b/src/demo/Backgrounds/WavesDemo.vue
@@ -1,33 +1,31 @@
 <template>
-  <div class="waves-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container">
-          <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
+  <TabbedLayout>
+    <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
+        <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
+      </div>
+
+      <Customize>
+        <PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
+
+        <div class="flex items-center gap-4">
+          <PreviewColor title="Waves Color" v-model="color" />
         </div>
+      </Customize>
 
-        <Customize>
-          <PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
+      <PropTable :data="propData" />
 
-          <div class="flex gap-4 items-center">
-            <PreviewColor title="Waves Color" v-model="color" />
-          </div>
-        </Customize>
+      <Dependencies :dependency-list="[]" />
+    </template>
 
-        <PropTable :data="propData" />
+    <template #code>
+      <CodeExample :code-object="waves" />
+    </template>
 
-        <Dependencies :dependency-list="[]" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="waves" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="waves.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="waves.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -105,7 +103,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>